update to 3.1
tangjinzhou
parent
b9dacbb8e4
commit
e4d4073ee8
|
|
@ -12,6 +12,7 @@
|
|||
// Button styles
|
||||
// -----------------------------
|
||||
.@{btn-prefix-cls} {
|
||||
line-height: @line-height-base;
|
||||
.btn;
|
||||
.btn-default;
|
||||
|
||||
|
|
@ -127,7 +128,7 @@
|
|||
// To ensure that a space will be placed between character and `Icon`.
|
||||
> .@{iconfont-css-prefix} + span,
|
||||
> span + .@{iconfont-css-prefix} {
|
||||
margin-left: 0.5em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&-clicked:after {
|
||||
|
|
@ -161,6 +162,15 @@
|
|||
&-background-ghost&-danger {
|
||||
.button-variant-ghost(@btn-danger-color);
|
||||
}
|
||||
|
||||
&-two-chinese-chars:first-letter {
|
||||
letter-spacing: .34em;
|
||||
}
|
||||
|
||||
&-two-chinese-chars > * {
|
||||
letter-spacing: .34em;
|
||||
margin-right: -.34em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes buttonEffect {
|
||||
|
|
@ -173,3 +183,13 @@
|
|||
border-width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
a.@{btn-prefix-cls} {
|
||||
line-height: @btn-height-base - 2px;
|
||||
&-lg {
|
||||
line-height: @btn-height-lg - 2px;
|
||||
}
|
||||
&-sm {
|
||||
line-height: @btn-height-sm - 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.button-color(@primary-color; @background; @primary-color);
|
||||
.button-color(@primary-5; @background; @primary-5);
|
||||
}
|
||||
|
||||
&:active,
|
||||
|
|
@ -56,12 +56,12 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.button-color(@btn-primary-color; @color; @color;);
|
||||
.button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`;);
|
||||
.button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`);
|
||||
}
|
||||
|
||||
.button-disabled();
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
> .@{btnClassName} {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
|
|
@ -139,7 +139,6 @@
|
|||
// --------------------------------------------------
|
||||
.btn() {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
font-weight: @btn-font-weight;
|
||||
text-align: center;
|
||||
touch-action: manipulation;
|
||||
|
|
@ -147,7 +146,6 @@
|
|||
background-image: none;
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
white-space: nowrap;
|
||||
line-height: 1.15; // https://github.com/ant-design/ant-design/issues/7070
|
||||
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
|
||||
user-select: none;
|
||||
transition: all .3s @ease-in-out;
|
||||
|
|
@ -185,7 +183,7 @@
|
|||
}
|
||||
|
||||
&-sm {
|
||||
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @btn-border-radius-sm);
|
||||
.button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -251,8 +249,6 @@
|
|||
|
||||
.@{btnClassName}:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
> .@{btnClassName}:first-child {
|
||||
|
|
@ -260,14 +256,12 @@
|
|||
&:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{btnClassName}:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
& > & {
|
||||
|
|
|
|||
|
|
@ -4,13 +4,15 @@
|
|||
@checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
|
||||
// 一般状态
|
||||
.@{checkbox-prefix-cls} {
|
||||
.reset-component;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: middle;
|
||||
top: -0.09em;
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper:hover &-inner,
|
||||
&:hover &-inner,
|
||||
|
|
@ -72,7 +74,7 @@
|
|||
left: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
.opacity(0);
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
|
@ -148,8 +150,9 @@
|
|||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper {
|
||||
.reset-component;
|
||||
line-height: unset;
|
||||
cursor: pointer;
|
||||
font-size: @font-size-base;
|
||||
display: inline-block;
|
||||
& + & {
|
||||
margin-left: 8px;
|
||||
|
|
@ -163,7 +166,8 @@
|
|||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-group {
|
||||
font-size: @font-size-base;
|
||||
.reset-component;
|
||||
display: inline-block;
|
||||
&-item {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
|
|
@ -175,23 +179,6 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ie8: \0screen;
|
||||
|
||||
// IE8 hack for https://github.com/ant-design/ant-design/issues/2148
|
||||
@media @ie8 {
|
||||
.@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before,
|
||||
.@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after {
|
||||
.iconfont-font("\e632");
|
||||
font-weight: bold;
|
||||
font-size: 8px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
left: 2px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antCheckboxEffect {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
.@{ant-prefix}-row {
|
||||
.make-row();
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-row-flex {
|
||||
|
|
@ -105,3 +106,11 @@
|
|||
@media (min-width: @screen-xl-min) {
|
||||
.make-grid(-xl);
|
||||
}
|
||||
|
||||
// Extra Extra Large grid
|
||||
//
|
||||
// Columns, offsets, pushes, and pulls for the full hd device range.
|
||||
|
||||
@media (min-width: @screen-xxl-min) {
|
||||
.make-grid(-xxl);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
.loop-grid-columns(@index, @class) when (@index > 0) {
|
||||
.@{ant-prefix}-col@{class}-@{index} {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: percentage((@index / @grid-columns));
|
||||
}
|
||||
.@{ant-prefix}-col@{class}-push-@{index} {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Basic</h1>
|
||||
<Basic />
|
||||
<h1>AutosizeTextarea</h1>
|
||||
<AutosizeTextarea />
|
||||
<h1>Presuffix</h1>
|
||||
<Presuffix />
|
||||
<h1>SearchInput</h1>
|
||||
<SearchInput />
|
||||
<h1>Size</h1>
|
||||
<Size />
|
||||
<h1>TextArea</h1>
|
||||
<TextArea />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Basic from './basic'
|
||||
import AutosizeTextarea from './autosize-textarea'
|
||||
import Presuffix from './presuffix'
|
||||
import SearchInput from './search-input'
|
||||
import Size from './size'
|
||||
import TextArea from './textarea'
|
||||
export default {
|
||||
components: {
|
||||
Basic,
|
||||
AutosizeTextarea,
|
||||
Presuffix,
|
||||
SearchInput,
|
||||
Size,
|
||||
TextArea,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
@import "./mixin";
|
||||
@import "./search-input";
|
||||
|
||||
// Input styles
|
||||
.@{ant-prefix}-input {
|
||||
.reset-component;
|
||||
.input;
|
||||
}
|
||||
|
||||
//== Style for input-group: input with label, with button or dropdown...
|
||||
.@{ant-prefix}-input-group {
|
||||
.reset-component;
|
||||
.input-group(~"@{ant-prefix}-input");
|
||||
&-wrapper {
|
||||
display: inline-block;
|
||||
|
|
@ -20,6 +21,7 @@
|
|||
|
||||
// Input with affix: prefix or suffix
|
||||
.@{ant-prefix}-input-affix-wrapper {
|
||||
.reset-component;
|
||||
.input-affix-wrapper(~"@{ant-prefix}-input");
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/6144
|
||||
|
|
@ -27,3 +29,5 @@
|
|||
min-height: 100%; // use min-height, assume that no smaller height to override
|
||||
}
|
||||
}
|
||||
|
||||
@import "./search-input";
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@input-affix-width: 17px;
|
||||
@input-affix-width: 19px;
|
||||
|
||||
// size mixins for input
|
||||
.input-lg() {
|
||||
padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
|
||||
height: @input-height-lg;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
.input-sm() {
|
||||
|
|
@ -72,6 +73,7 @@
|
|||
height: auto;
|
||||
vertical-align: bottom;
|
||||
transition: all .3s, height 0s;
|
||||
min-height: @input-height-base;
|
||||
}
|
||||
|
||||
// Size
|
||||
|
|
@ -137,7 +139,7 @@
|
|||
}
|
||||
|
||||
&-addon {
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal-base;
|
||||
padding: 0 @input-padding-horizontal-base;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
|
|
@ -257,7 +259,7 @@
|
|||
& > * {
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
vertical-align: middle;
|
||||
vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -328,11 +330,11 @@
|
|||
}
|
||||
|
||||
.@{inputClass}-prefix {
|
||||
left: @input-padding-horizontal-base;
|
||||
left: @input-padding-horizontal-base + 1px;
|
||||
}
|
||||
|
||||
.@{inputClass}-suffix {
|
||||
right: @input-padding-horizontal-base;
|
||||
right: @input-padding-horizontal-base + 1px;
|
||||
}
|
||||
|
||||
.@{inputClass}:not(:first-child) {
|
||||
|
|
|
|||
|
|
@ -3,56 +3,31 @@
|
|||
@import "../../button/style/mixin";
|
||||
@import "./mixin";
|
||||
|
||||
.@{ant-prefix}-input-search-icon {
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
color: @input-hover-border-color;
|
||||
}
|
||||
}
|
||||
@search-prefix: ~"@{ant-prefix}-input-search";
|
||||
|
||||
// code blow is keeped for compatibility
|
||||
// for this demo: http://1x.ant.design/components/select/#components-select-demo-search-box
|
||||
// do not delete until 3.x
|
||||
.@{ant-prefix}-search-input-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-search-input {
|
||||
&.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child,
|
||||
&.@{ant-prefix}-input-group .@{ant-prefix}-select:first-child {
|
||||
border-radius: @border-radius-base;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
width: 100%;
|
||||
.@{search-prefix} {
|
||||
&-icon {
|
||||
pointer-events: none;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child {
|
||||
padding-right: 36px;
|
||||
&:not(&-small) > .@{ant-prefix}-input-suffix {
|
||||
right: @control-padding-horizontal;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-search-btn {
|
||||
.btn-default;
|
||||
border-radius: 0 @border-radius-base - 1px @border-radius-base - 1px 0;
|
||||
left: -1px;
|
||||
position: relative;
|
||||
border-width: 0 0 0 1px;
|
||||
z-index: 2;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
> .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
> .@{iconfont-css-prefix}-search {
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
}
|
||||
&&-focus .@{ant-prefix}-search-btn-noempty,
|
||||
&:hover .@{ant-prefix}-search-btn-noempty {
|
||||
.btn-primary;
|
||||
|
||||
&.@{search-prefix}-enter-button > .@{ant-prefix}-input {
|
||||
padding-right: 46px;
|
||||
}
|
||||
.@{ant-prefix}-select-combobox {
|
||||
.@{ant-prefix}-select-selection__rendered {
|
||||
margin-right: 29px;
|
||||
}
|
||||
|
||||
&.@{search-prefix}-enter-button > .@{ant-prefix}-input-suffix {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@ import abstractTooltipProps from '../tooltip/abstractTooltipProps'
|
|||
import PropTypes from '../_util/vue-types'
|
||||
import { getOptionProps, getComponentFromProp } from '../_util/props-util'
|
||||
|
||||
const props = abstractTooltipProps()
|
||||
export default {
|
||||
name: 'popover',
|
||||
props: {
|
||||
...abstractTooltipProps,
|
||||
...props,
|
||||
prefixCls: PropTypes.string.def('ant-popover'),
|
||||
transitionName: PropTypes.string.def('zoom-big'),
|
||||
content: PropTypes.any,
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
@popover-prefix-cls: ~"@{ant-prefix}-popover";
|
||||
|
||||
.@{popover-prefix-cls} {
|
||||
.reset-component;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -11,8 +12,6 @@
|
|||
cursor: auto;
|
||||
user-select: text;
|
||||
white-space: normal;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
|
||||
|
|
@ -61,35 +60,35 @@
|
|||
&-title {
|
||||
min-width: @popover-min-width;
|
||||
margin: 0; // reset heading margin
|
||||
padding: 8px 16px;
|
||||
padding: 5px @padding-md 4px;
|
||||
min-height: 32px;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
color: @popover-color;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-inner-content {
|
||||
padding: 8px 16px;
|
||||
padding: 12px @padding-md;
|
||||
color: @popover-color;
|
||||
}
|
||||
|
||||
&-message {
|
||||
padding: 8px 0 16px;
|
||||
padding: 4px 0 12px;
|
||||
font-size: @font-size-base;
|
||||
color: @popover-color;
|
||||
> .@{iconfont-css-prefix} {
|
||||
color: @warning-color;
|
||||
line-height: 17px;
|
||||
line-height: @line-height-base + 0.1;
|
||||
position: absolute;
|
||||
}
|
||||
&-title {
|
||||
padding-left: 20px;
|
||||
padding-left: @font-size-base + 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
text-align: right;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 4px;
|
||||
button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
|
@ -99,43 +98,25 @@
|
|||
// .popover-arrow is outer, .popover-arrow:after is inner
|
||||
|
||||
&-arrow {
|
||||
&,
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
border-width: @popover-arrow-outer-width;
|
||||
}
|
||||
|
||||
&-arrow:after {
|
||||
border-width: @popover-arrow-width;
|
||||
content: "";
|
||||
background: @popover-bg;
|
||||
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
||||
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&-placement-top > &-content > &-arrow,
|
||||
&-placement-topLeft > &-content > &-arrow,
|
||||
&-placement-topRight > &-content > &-arrow {
|
||||
border-bottom-width: 0;
|
||||
border-top-color: @popover-arrow-outer-color;
|
||||
bottom: @popover-distance - @popover-arrow-outer-width;
|
||||
&:after {
|
||||
content: " ";
|
||||
bottom: 1px;
|
||||
margin-left: -@popover-arrow-width;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: @popover-arrow-color;
|
||||
}
|
||||
bottom: @popover-distance - @popover-arrow-width + 2px;
|
||||
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
&-placement-top > &-content > &-arrow {
|
||||
left: 50%;
|
||||
margin-left: -@popover-arrow-outer-width;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
&-placement-topLeft > &-content > &-arrow {
|
||||
left: 16px;
|
||||
|
|
@ -147,20 +128,12 @@
|
|||
&-placement-right > &-content > &-arrow,
|
||||
&-placement-rightTop > &-content > &-arrow,
|
||||
&-placement-rightBottom > &-content > &-arrow {
|
||||
left: @popover-distance - @popover-arrow-outer-width;
|
||||
border-left-width: 0;
|
||||
border-right-color: @popover-arrow-outer-color;
|
||||
&:after {
|
||||
content: " ";
|
||||
left: 1px;
|
||||
bottom: -@popover-arrow-width;
|
||||
border-left-width: 0;
|
||||
border-right-color: @popover-arrow-color;
|
||||
}
|
||||
left: @popover-distance - @popover-arrow-width + 2px;
|
||||
box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
&-placement-right > &-content > &-arrow {
|
||||
top: 50%;
|
||||
margin-top: -@popover-arrow-outer-width;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
&-placement-rightTop > &-content > &-arrow {
|
||||
top: 12px;
|
||||
|
|
@ -172,20 +145,12 @@
|
|||
&-placement-bottom > &-content > &-arrow,
|
||||
&-placement-bottomLeft > &-content > &-arrow,
|
||||
&-placement-bottomRight > &-content > &-arrow {
|
||||
border-top-width: 0;
|
||||
border-bottom-color: @popover-arrow-outer-color;
|
||||
top: @popover-distance - @popover-arrow-outer-width;
|
||||
&:after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -@popover-arrow-width;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: @popover-arrow-color;
|
||||
}
|
||||
top: @popover-distance - @popover-arrow-width + 2px;
|
||||
box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
&-placement-bottom > &-content > &-arrow {
|
||||
left: 50%;
|
||||
margin-left: -@popover-arrow-outer-width;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
&-placement-bottomLeft > &-content > &-arrow {
|
||||
left: 16px;
|
||||
|
|
@ -197,20 +162,12 @@
|
|||
&-placement-left > &-content > &-arrow,
|
||||
&-placement-leftTop > &-content > &-arrow,
|
||||
&-placement-leftBottom > &-content > &-arrow {
|
||||
right: @popover-distance - @popover-arrow-outer-width;
|
||||
border-right-width: 0;
|
||||
border-left-color: @popover-arrow-outer-color;
|
||||
&:after {
|
||||
content: " ";
|
||||
right: 1px;
|
||||
border-right-width: 0;
|
||||
border-left-color: @popover-arrow-color;
|
||||
bottom: -@popover-arrow-width;
|
||||
}
|
||||
right: @popover-distance - @popover-arrow-width + 2px;
|
||||
box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
&-placement-left > &-content > &-arrow {
|
||||
top: 50%;
|
||||
margin-top: -@popover-arrow-outer-width;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
&-placement-leftTop > &-content > &-arrow {
|
||||
top: 12px;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<Radio v-for="item in radioOptions" :key="item.value"
|
||||
:value="item.value" :disabled="item.disabled" :name="name">{{item.label}}</Radio>
|
||||
<slot v-if="radioOptions.length === 0"></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Radio from './Radio.vue'
|
||||
export default {
|
||||
|
|
@ -82,8 +75,15 @@ export default {
|
|||
this.stateValue = val
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Radio,
|
||||
render () {
|
||||
const { radioOptions, classes, $slots, name } = this
|
||||
return (
|
||||
<div class={classes}>
|
||||
{radioOptions.map(({ value, disabled, label }) =>
|
||||
<Radio key={value} value={value} disabled={disabled} name={name}>{label}</Radio>)}
|
||||
{ radioOptions.length === 0 && ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div :style="{ marginTop: 16 }">
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<RadioGroup @change="onChange" defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b" disabled>Shanghai</RadioButton>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div :style="{ marginTop: 16 }">
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<RadioGroup disabled @change="onChange" defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div :style="{ marginTop: 16 }">
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<RadioGroup defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div :style="{ marginTop: 16 }">
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<RadioGroup defaultValue="a" size="small">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@radio-prefix-cls: ~"@{ant-prefix}-radio";
|
||||
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
|
||||
|
|
@ -7,13 +8,14 @@
|
|||
@radio-duration: .3s;
|
||||
|
||||
.@{radio-group-prefix-cls} {
|
||||
.reset-component;
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
line-height: unset;
|
||||
}
|
||||
|
||||
// 一般状态
|
||||
.@{radio-prefix-cls}-wrapper {
|
||||
font-size: @font-size-base;
|
||||
.reset-component;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
|
@ -22,6 +24,7 @@
|
|||
}
|
||||
|
||||
.@{radio-prefix-cls} {
|
||||
.reset-component;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
|
|
@ -55,11 +58,12 @@
|
|||
}
|
||||
&-inner {
|
||||
&:after {
|
||||
@radio-dot-size: @radio-size - 8px;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
width: @radio-dot-size;
|
||||
height: @radio-dot-size;
|
||||
left: (@radio-size - @radio-dot-size) / 2 - 1px;
|
||||
top: (@radio-size - @radio-dot-size) / 2 - 1px;
|
||||
border-radius: @border-radius-base;
|
||||
display: table;
|
||||
border-top: 0;
|
||||
|
|
@ -75,11 +79,11 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: @radio-size;
|
||||
height: @radio-size;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 14px;
|
||||
border-radius: 100px;
|
||||
border-color: @border-color-base;
|
||||
background-color: @radio-button-bg;
|
||||
transition: all @radio-duration;
|
||||
|
|
@ -102,7 +106,7 @@
|
|||
.@{radio-inner-prefix-cls} {
|
||||
border-color: @primary-color;
|
||||
&:after {
|
||||
transform: scale(1);
|
||||
transform: scale(.875);
|
||||
opacity: 1;
|
||||
transition: all @radio-duration @ease-in-out-circ;
|
||||
}
|
||||
|
|
@ -134,18 +138,20 @@ span.@{radio-prefix-cls} + * {
|
|||
}
|
||||
|
||||
.@{radio-prefix-cls}-button-wrapper {
|
||||
float: left;
|
||||
margin: 0;
|
||||
height: @input-height-base;
|
||||
line-height: @input-height-base - 2px;
|
||||
height: @btn-height-base;
|
||||
line-height: @btn-height-base - 2px;
|
||||
color: @radio-button-color;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-left: 0;
|
||||
// strange align fix for chrome but works
|
||||
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
|
||||
border-top-width: @border-width-base + 0.02px;
|
||||
background: @radio-button-bg;
|
||||
padding: 0 16px;
|
||||
padding: 0 @padding-md - 1px;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
|
|
@ -162,18 +168,13 @@ span.@{radio-prefix-cls} + * {
|
|||
.@{radio-group-prefix-cls}-large & {
|
||||
height: @input-height-lg;
|
||||
line-height: @input-height-lg - 2px;
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-small & {
|
||||
height: @input-height-sm;
|
||||
line-height: @input-height-sm - 2px;
|
||||
padding: 0 12px;
|
||||
&:first-child {
|
||||
border-radius: @border-radius-sm 0 0 @border-radius-sm;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 @border-radius-sm @border-radius-sm 0;
|
||||
}
|
||||
padding: 0 @control-padding-horizontal-sm - 1px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
|
|
@ -210,7 +211,7 @@ span.@{radio-prefix-cls} + * {
|
|||
.@{radio-prefix-cls}-inner,
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
.opacity(0);
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* stylelint-disable declaration-bang-space-before */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
|
||||
.bezierEasingMixin() {
|
||||
@functions: ~`(function() {
|
||||
var NEWTON_ITERATIONS = 4;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* stylelint-disable no-duplicate-selectors */
|
||||
@import "bezierEasing";
|
||||
@import "tinyColor";
|
||||
|
||||
|
|
@ -7,36 +8,64 @@
|
|||
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
|
||||
.colorPaletteMixin() {
|
||||
@functions: ~`(function() {
|
||||
var warmDark = 0.5; // warm color darken radio
|
||||
var warmRotate = -26; // warm color rotate degree
|
||||
var coldDark = 0.55; // cold color darken radio
|
||||
var coldRotate = 10; // cold color rotate degree
|
||||
var getShadeColor = function(c) {
|
||||
var shadeColor = tinycolor(c);
|
||||
// warm and cold color will darken in different radio, and rotate in different degree
|
||||
// warmer color
|
||||
if (shadeColor.toRgb().r > shadeColor.toRgb().b) {
|
||||
return shadeColor.darken(shadeColor.toHsl().l * warmDark * 100).spin(warmRotate).toHexString();
|
||||
var hueStep = 2;
|
||||
var saturationStep = 16;
|
||||
var saturationStep2 = 5;
|
||||
var brightnessStep1 = 5;
|
||||
var brightnessStep2 = 15;
|
||||
var lightColorCount = 5;
|
||||
var darkColorCount = 4;
|
||||
|
||||
var getHue = function(hsv, i, isLight) {
|
||||
var hue;
|
||||
if (hsv.h >= 60 && hsv.h <= 240) {
|
||||
hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
|
||||
} else {
|
||||
hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
|
||||
}
|
||||
// colder color
|
||||
return shadeColor.darken(shadeColor.toHsl().l * coldDark * 100).spin(coldRotate).toHexString();
|
||||
}
|
||||
var primaryEasing = colorEasing(0.6);
|
||||
if (hue < 0) {
|
||||
hue += 360;
|
||||
} else if (hue >= 360) {
|
||||
hue -= 360;
|
||||
}
|
||||
return Math.round(hue);
|
||||
};
|
||||
var getSaturation = function(hsv, i, isLight) {
|
||||
var saturation;
|
||||
if (isLight) {
|
||||
saturation = Math.round(hsv.s * 100) - saturationStep * i;
|
||||
} else if (i == darkColorCount) {
|
||||
saturation = Math.round(hsv.s * 100) + saturationStep;
|
||||
} else {
|
||||
saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
|
||||
}
|
||||
if (saturation > 100) {
|
||||
saturation = 100;
|
||||
}
|
||||
if (isLight && i === lightColorCount && saturation > 10) {
|
||||
saturation = 10;
|
||||
}
|
||||
if (saturation < 6) {
|
||||
saturation = 6;
|
||||
}
|
||||
return Math.round(saturation);
|
||||
};
|
||||
var getValue = function(hsv, i, isLight) {
|
||||
if (isLight) {
|
||||
return Math.round(hsv.v * 100) + brightnessStep1 * i;
|
||||
}
|
||||
return Math.round(hsv.v * 100) - brightnessStep2 * i;
|
||||
};
|
||||
|
||||
this.colorPalette = function(color, index) {
|
||||
var currentEasing = colorEasing(index * 0.1);
|
||||
// return light colors after tint
|
||||
if (index <= 6) {
|
||||
return tinycolor.mix(
|
||||
'#ffffff',
|
||||
color,
|
||||
currentEasing * 100 / primaryEasing
|
||||
).toHexString();
|
||||
}
|
||||
return tinycolor.mix(
|
||||
getShadeColor(color),
|
||||
color,
|
||||
(1 - (currentEasing - primaryEasing) / (1 - primaryEasing)) * 100
|
||||
).toHexString();
|
||||
var isLight = index <= 6;
|
||||
var hsv = tinycolor(color).toHsv();
|
||||
var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
|
||||
return tinycolor({
|
||||
h: getHue(hsv, i, isLight),
|
||||
s: getSaturation(hsv, i, isLight),
|
||||
v: getValue(hsv, i, isLight),
|
||||
}).toHexString();
|
||||
};
|
||||
})()`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
|
||||
@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
|
||||
@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
|
||||
@blue-6: #108ee9;
|
||||
@blue-6: #1890ff;
|
||||
@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
|
||||
@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
|
||||
@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
|
||||
@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
|
||||
@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
|
||||
@purple-6: #7265e6;
|
||||
@purple-6: #722ed1;
|
||||
@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
|
||||
@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
|
||||
@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
|
||||
@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
|
||||
@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
|
||||
@cyan-6: #00a2ae;
|
||||
@cyan-6: #13c2c2;
|
||||
@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
|
||||
@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
|
||||
@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
|
||||
|
|
@ -39,18 +39,30 @@
|
|||
@green-3: color(~`colorPalette("@{green-6}", 3)`);
|
||||
@green-4: color(~`colorPalette("@{green-6}", 4)`);
|
||||
@green-5: color(~`colorPalette("@{green-6}", 5)`);
|
||||
@green-6: #00a854;
|
||||
@green-6: #52c41a;
|
||||
@green-7: color(~`colorPalette("@{green-6}", 7)`);
|
||||
@green-8: color(~`colorPalette("@{green-6}", 8)`);
|
||||
@green-9: color(~`colorPalette("@{green-6}", 9)`);
|
||||
@green-10: color(~`colorPalette("@{green-6}", 10)`);
|
||||
|
||||
@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
|
||||
@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
|
||||
@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
|
||||
@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
|
||||
@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
|
||||
@magenta-6: #eb2f96;
|
||||
@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
|
||||
@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
|
||||
@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
|
||||
@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
|
||||
|
||||
// alias of magenta
|
||||
@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
|
||||
@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
|
||||
@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
|
||||
@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
|
||||
@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
|
||||
@pink-6: #f5317f;
|
||||
@pink-6: #eb2f96;
|
||||
@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
|
||||
@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
|
||||
@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
|
||||
|
|
@ -61,7 +73,7 @@
|
|||
@red-3: color(~`colorPalette("@{red-6}", 3)`);
|
||||
@red-4: color(~`colorPalette("@{red-6}", 4)`);
|
||||
@red-5: color(~`colorPalette("@{red-6}", 5)`);
|
||||
@red-6: #f04134;
|
||||
@red-6: #f5222d;
|
||||
@red-7: color(~`colorPalette("@{red-6}", 7)`);
|
||||
@red-8: color(~`colorPalette("@{red-6}", 8)`);
|
||||
@red-9: color(~`colorPalette("@{red-6}", 9)`);
|
||||
|
|
@ -72,7 +84,7 @@
|
|||
@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
|
||||
@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
|
||||
@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
|
||||
@orange-6: #f56a00;
|
||||
@orange-6: #fa8c16;
|
||||
@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
|
||||
@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
|
||||
@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
|
||||
|
|
@ -83,8 +95,52 @@
|
|||
@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
|
||||
@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
|
||||
@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
|
||||
@yellow-6: #ffbf00;
|
||||
@yellow-6: #fadb14;
|
||||
@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
|
||||
@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
|
||||
@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
|
||||
@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
|
||||
|
||||
@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
|
||||
@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
|
||||
@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
|
||||
@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
|
||||
@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
|
||||
@volcano-6: #fa541c;
|
||||
@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
|
||||
@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
|
||||
@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
|
||||
@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
|
||||
|
||||
@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
|
||||
@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
|
||||
@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
|
||||
@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
|
||||
@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
|
||||
@geekblue-6: #2f54eb;
|
||||
@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
|
||||
@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
|
||||
@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
|
||||
@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
|
||||
|
||||
@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
|
||||
@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
|
||||
@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
|
||||
@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
|
||||
@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
|
||||
@lime-6: #a0d911;
|
||||
@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
|
||||
@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
|
||||
@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
|
||||
@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
|
||||
|
||||
@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
|
||||
@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
|
||||
@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
|
||||
@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
|
||||
@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
|
||||
@gold-6: #faad14;
|
||||
@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
|
||||
@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
|
||||
@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
|
||||
@gold-10: color(~`colorPalette("@{gold-6}", 10)`);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* stylelint-disable declaration-bang-space-before */
|
||||
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
|
||||
.tinyColorMixin() {
|
||||
@functions: ~`(function() {
|
||||
// TinyColor v1.4.1
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
@import "./normalize.less";
|
||||
/* stylelint-disable at-rule-no-unknown */
|
||||
|
||||
// Reboot
|
||||
//
|
||||
// Normalization of HTML elements, manually forked from Normalize.css to remove
|
||||
// styles targeting irrelevant browsers while applying new styles.
|
||||
//
|
||||
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
|
||||
|
||||
// http://stackoverflow.com/a/13611748/3040605
|
||||
@font-face {
|
||||
|
|
@ -7,14 +14,10 @@
|
|||
unicode-range: U+30-39;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
@font-face {
|
||||
font-family: "Chinese Quote";
|
||||
src: local("PingFang SC"), local("SimSun");
|
||||
unicode-range: U+2018, U+2019, U+201c, U+201d;
|
||||
}
|
||||
|
||||
// HTML & Body reset
|
||||
|
|
@ -22,58 +25,200 @@ html, body {
|
|||
.square(100%);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-family;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
background-color: @body-background;
|
||||
}
|
||||
|
||||
// unify the setting of elements's margin and padding for browsers
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
button,input,select,textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Remove the clear button of a text input control in IE10+
|
||||
// remove the clear button of a text input control in IE10+
|
||||
input::-ms-clear, input::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: @primary-color;
|
||||
color: #fff;
|
||||
// Document
|
||||
//
|
||||
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
||||
// 2. Change the default font family in all browsers.
|
||||
// 3. Correct the line height in all browsers.
|
||||
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
|
||||
// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
|
||||
// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
|
||||
// 6. Change the default tap highlight to be completely transparent in iOS.
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
}
|
||||
|
||||
// Headers
|
||||
html {
|
||||
font-family: sans-serif; // 2
|
||||
line-height: 1.15; // 3
|
||||
-webkit-text-size-adjust: 100%; // 4
|
||||
-ms-text-size-adjust: 100%; // 4
|
||||
-ms-overflow-style: scrollbar; // 5
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
|
||||
}
|
||||
|
||||
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
||||
@at-root {
|
||||
@-ms-viewport { width: device-width; }
|
||||
}
|
||||
|
||||
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Body
|
||||
//
|
||||
// 1. remove the margin in all browsers.
|
||||
// 2. As a best practice, apply a default `body-background`.
|
||||
|
||||
body {
|
||||
margin: 0; // 1
|
||||
font-family: @font-family;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
background-color: @body-background; // 2
|
||||
}
|
||||
|
||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
// This prevents an unwanted focus outline from appearing around elements that
|
||||
// might still respond to pointer events.
|
||||
//
|
||||
// Credit: https://github.com/suitcss/base
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
// Content grouping
|
||||
//
|
||||
// 1. Add the correct box sizing in Firefox.
|
||||
// 2. Show the overflow in Edge and IE.
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; // 1
|
||||
height: 0; // 1
|
||||
overflow: visible; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
// remove top margins from headings
|
||||
//
|
||||
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||
// margin for easier control within type scales as it avoids margin collapsing.
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5em;
|
||||
color: @heading-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Reset margins on paragraphs
|
||||
//
|
||||
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||
// bottom margin to use `em` units instead of `em`.
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
//
|
||||
// 1. remove the bottom border in Firefox 39-.
|
||||
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
// 3. Add explicit cursor to indicate changed behavior.
|
||||
// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] { // 4
|
||||
text-decoration: underline; // 2
|
||||
text-decoration: underline dotted; // 2
|
||||
cursor: help; // 3
|
||||
border-bottom: 0; // 1
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1em;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="number"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5em;
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic; // Add the correct font style in Android 4.3-
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%; // Add the correct font size in all browsers
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||
// all browsers.
|
||||
//
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub { bottom: -.25em; }
|
||||
sup { top: -.5em; }
|
||||
|
||||
//
|
||||
// Links
|
||||
//
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
background: transparent;
|
||||
background-color: transparent; // remove the gray background on active links in IE 10.
|
||||
text-decoration: @link-decoration;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: color .3s ease;
|
||||
transition: color .3s;
|
||||
-webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
|
|
@ -101,19 +246,256 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-divider {
|
||||
margin: 0 6px;
|
||||
display: inline-block;
|
||||
height: 8px;
|
||||
width: 1px;
|
||||
background: #ccc;
|
||||
}
|
||||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: @code-family;
|
||||
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
|
||||
}
|
||||
|
||||
pre {
|
||||
// remove browser default top margin
|
||||
margin-top: 0;
|
||||
// Reset browser default of `1em` to use `em`s
|
||||
margin-bottom: 1em;
|
||||
// Don't allow content to break outside
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
figure {
|
||||
// Apply a consistent margin strategy (matches our type styles).
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
//
|
||||
// Images and content
|
||||
//
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none; // remove the border on images inside links in IE 10-.
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden; // Hide the overflow in IE
|
||||
}
|
||||
|
||||
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
|
||||
//
|
||||
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
|
||||
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
||||
// However, they DO support emoving the click delay via `touch-action: manipulation`.
|
||||
// See:
|
||||
// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
|
||||
// * http://caniuse.com/#feat=css-touch-action
|
||||
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input:not([type=range]),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
|
||||
table {
|
||||
border-collapse: collapse; // Prevent double borders
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: .75em;
|
||||
padding-bottom: .3em;
|
||||
color: @text-color-secondary;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
|
||||
// closest parent with a set `text-align`.
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0; // remove the margin in Firefox and Safari
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible; // Show the overflow in Edge
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none; // remove the inheritance of text transform in Firefox
|
||||
}
|
||||
|
||||
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
// controls in Android 4.
|
||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
button,
|
||||
html [type="button"], // 1
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
}
|
||||
|
||||
// remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
|
||||
padding: 0; // 2. remove the padding in IE 10-
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
// remove the default appearance of temporal inputs to avoid a Mobile Safari
|
||||
// bug where setting a custom line-height prevents text from being vertically
|
||||
// centered within the input.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=139848
|
||||
// and https://github.com/twbs/bootstrap/issues/11266
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto; // remove the default vertical scrollbar in IE.
|
||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
// Browsers set a default `min-width: min-content;` on fieldsets,
|
||||
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
||||
// So we reset that to ensure fieldsets behave more like a standard block element.
|
||||
// See https://github.com/twbs/bootstrap/issues/12359
|
||||
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
||||
min-width: 0;
|
||||
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// 1. Correct the text wrapping in Edge and IE.
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%; // 1
|
||||
padding: 0;
|
||||
margin-bottom: .5em;
|
||||
font-size: 1.5em;
|
||||
line-height: inherit;
|
||||
color: inherit; // 2
|
||||
white-space: normal; // 1
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
}
|
||||
|
||||
// Correct the cursor style of incement and decement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
// This overrides the extra rounded corners on search inputs in iOS so that our
|
||||
// `.form-control` class can properly style them. Note that this cannot simply
|
||||
// be added to `.form-control` as it's not specific enough. For details, see
|
||||
// https://github.com/twbs/bootstrap/issues/11586.
|
||||
outline-offset: -2px; // 2. Correct the outline style in Safari.
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
//
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
// 2. Change font properties to `inherit` in Safari.
|
||||
//
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit; // 2
|
||||
-webkit-appearance: button; // 1
|
||||
}
|
||||
|
||||
//
|
||||
// Correct element displays
|
||||
//
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item; // Add the correct display in all browsers
|
||||
}
|
||||
|
||||
template {
|
||||
display: none; // Add the correct display in IE
|
||||
}
|
||||
|
||||
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
||||
// Needed for proper display in IE 10-.
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: .2em;
|
||||
background-color: @yellow-1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: @primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@
|
|||
font-family: 'anticon';
|
||||
src: url('@{icon-url}.eot'); /* IE9*/
|
||||
src:
|
||||
/* IE6-IE8 */
|
||||
url('@{icon-url}.eot?#iefix') format('embedded-opentype'),
|
||||
/* chrome、firefox */
|
||||
url('@{icon-url}.woff') format('woff'),
|
||||
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||||
|
|
@ -97,7 +95,6 @@
|
|||
.@{iconfont-css-prefix}-credit-card:before { content: "\e635"; }
|
||||
.@{iconfont-css-prefix}-code-o:before { content: "\e636"; }
|
||||
.@{iconfont-css-prefix}-book:before { content: "\e637"; }
|
||||
.@{iconfont-css-prefix}-bar-chart:before { content: "\e638"; }
|
||||
.@{iconfont-css-prefix}-bars:before { content: "\e639"; }
|
||||
.@{iconfont-css-prefix}-question:before { content: "\e63a"; }
|
||||
.@{iconfont-css-prefix}-question-circle:before { content: "\e63b"; }
|
||||
|
|
@ -115,7 +112,7 @@
|
|||
.@{iconfont-css-prefix}-frown-circle:before { content: "\e646"; } // antd@1.x compatibility alias: frown
|
||||
.@{iconfont-css-prefix}-ellipsis:before { content: "\e647"; }
|
||||
.@{iconfont-css-prefix}-copy:before { content: "\e648"; }
|
||||
.@{iconfont-css-prefix}-menu-fold:before { content: "\e658"; }
|
||||
.@{iconfont-css-prefix}-menu-fold:before { content: "\e9ac"; }
|
||||
.@{iconfont-css-prefix}-mail:before { content: "\e659"; }
|
||||
.@{iconfont-css-prefix}-logout:before { content: "\e65a"; }
|
||||
.@{iconfont-css-prefix}-link:before { content: "\e65b"; }
|
||||
|
|
@ -149,7 +146,7 @@
|
|||
.@{iconfont-css-prefix}-paper-clip:before { content: "\e676"; }
|
||||
.@{iconfont-css-prefix}-notification:before { content: "\e677"; }
|
||||
.@{iconfont-css-prefix}-mobile:before { content: "\e678"; }
|
||||
.@{iconfont-css-prefix}-menu-unfold:before { content: "\e679"; }
|
||||
.@{iconfont-css-prefix}-menu-unfold:before { content: "\e9ad"; }
|
||||
.@{iconfont-css-prefix}-inbox:before { content: "\e67a"; }
|
||||
.@{iconfont-css-prefix}-lock:before { content: "\e67b"; }
|
||||
.@{iconfont-css-prefix}-qrcode:before { content: "\e67c"; }
|
||||
|
|
@ -295,7 +292,38 @@
|
|||
.@{iconfont-css-prefix}-global:before { content: "\e6f1"; }
|
||||
.@{iconfont-css-prefix}-shake:before { content: "\e94f"; }
|
||||
.@{iconfont-css-prefix}-fork:before { content: "\e6f2"; }
|
||||
.@{iconfont-css-prefix}-dashboard:before { content: "\e99a"; }
|
||||
.@{iconfont-css-prefix}-profile:before { content: "\e999"; }
|
||||
.@{iconfont-css-prefix}-table:before { content: "\e998"; }
|
||||
.@{iconfont-css-prefix}-warning:before { content: "\e997"; }
|
||||
.@{iconfont-css-prefix}-form:before { content: "\e996"; }
|
||||
.@{iconfont-css-prefix}-spin:before {
|
||||
display: inline-block;
|
||||
animation: loadingCircle 1s infinite linear;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-weibo-square:before { content: "\e6f5"; }
|
||||
.@{iconfont-css-prefix}-weibo-circle:before { content: "\e6f4"; }
|
||||
.@{iconfont-css-prefix}-taobao-circle:before { content: "\e6f3"; }
|
||||
.@{iconfont-css-prefix}-html5:before { content: "\e9c7"; }
|
||||
.@{iconfont-css-prefix}-weibo:before { content: "\e9c6"; }
|
||||
.@{iconfont-css-prefix}-twitter:before { content: "\e9c5"; }
|
||||
.@{iconfont-css-prefix}-wechat:before { content: "\e9c4"; }
|
||||
.@{iconfont-css-prefix}-youtube:before { content: "\e9c3"; }
|
||||
.@{iconfont-css-prefix}-alipay-circle:before { content: "\e9c2"; }
|
||||
.@{iconfont-css-prefix}-taobao:before { content: "\e9c1"; }
|
||||
.@{iconfont-css-prefix}-skype:before { content: "\e9c0"; }
|
||||
.@{iconfont-css-prefix}-qq:before { content: "\e9bf"; }
|
||||
.@{iconfont-css-prefix}-medium-workmark:before { content: "\e9be"; }
|
||||
.@{iconfont-css-prefix}-gitlab:before { content: "\e9bd"; }
|
||||
.@{iconfont-css-prefix}-medium:before { content: "\e9bc"; }
|
||||
.@{iconfont-css-prefix}-linkedin:before { content: "\e9bb"; }
|
||||
.@{iconfont-css-prefix}-google-plus:before { content: "\e9ba"; }
|
||||
.@{iconfont-css-prefix}-dropbox:before { content: "\e9b9"; }
|
||||
.@{iconfont-css-prefix}-facebook:before { content: "\e9b8"; }
|
||||
.@{iconfont-css-prefix}-codepen:before { content: "\e9b7"; }
|
||||
.@{iconfont-css-prefix}-amazon:before { content: "\e9b6"; }
|
||||
.@{iconfont-css-prefix}-google:before { content: "\e9b5"; }
|
||||
.@{iconfont-css-prefix}-codepen-circle:before { content: "\e9b4"; }
|
||||
.@{iconfont-css-prefix}-alipay:before { content: "\e9b3"; }
|
||||
.@{iconfont-css-prefix}-ant-design:before { content: "\e9b2"; }
|
||||
|
|
|
|||
|
|
@ -1,447 +0,0 @@
|
|||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
import './index.less'
|
||||
import './index.less';
|
||||
|
|
|
|||
|
|
@ -1,32 +1,5 @@
|
|||
// Compatibility for browsers.
|
||||
|
||||
// rotate for ie8 and blow
|
||||
.ie-rotate(@rotation) {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
|
||||
}
|
||||
|
||||
// rotate for ie8 and blow
|
||||
// degrees unit
|
||||
.ie-rotate-via-degrees(@degrees) {
|
||||
/* IE6-IE8 */
|
||||
@radians: ~`parseInt("@{degrees}") * Math.PI * 2 / 360`;
|
||||
@costheta: ~`Math.cos("@{radians}")`;
|
||||
@sintheta: ~`Math.sin("@{radians}")`;
|
||||
@negsintheta: ~`"@{sintheta}" * -1`;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})";
|
||||
zoom: 1;
|
||||
|
||||
:root & {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
// support rotate for all browsers
|
||||
.cross-rotate(@degrees) {
|
||||
.rotate(@degrees);
|
||||
.ie-rotate-via-degrees(@degrees);
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
.placeholder(@color: @input-placeholder-color) {
|
||||
// Firefox
|
||||
|
|
|
|||
|
|
@ -27,12 +27,11 @@
|
|||
.iconfont-size-under-12px(@size, @rotate: 0deg) {
|
||||
display: inline-block;
|
||||
@font-scale: unit(@size / 12px);
|
||||
font-size: @font-size-base;
|
||||
// ie8-9
|
||||
font-size: 12px;
|
||||
// IE9
|
||||
font-size: ~"@{size} \9"; // lesshint duplicateProperty: false
|
||||
transform: scale(@font-scale) rotate(@rotate);
|
||||
.ie-rotate-via-degrees(@rotate);
|
||||
:root & {
|
||||
font-size: @font-size-base; // reset ie9 and above
|
||||
font-size: @font-size-sm; // reset IE9 and above
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// Mixins
|
||||
// --------------------------------------------------
|
||||
@import "opacity";
|
||||
@import "size";
|
||||
@import "compatibility";
|
||||
@import "clearfix";
|
||||
|
|
|
|||
|
|
@ -20,22 +20,11 @@
|
|||
.motion-common-leave(@duration);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-enter-active,
|
||||
.@{className}-appear-active {
|
||||
animation-name: ~"@{keyframeName}In";
|
||||
animation-play-state: running;
|
||||
.motion-common(@duration);
|
||||
}
|
||||
.@{className}-enter.@{className}-enter-active,
|
||||
.@{className}-appear.@{className}-appear-active {
|
||||
animation-name: ~"@{keyframeName}In";
|
||||
animation-play-state: running;
|
||||
}
|
||||
.@{className}-leave-active {
|
||||
animation-name: ~"@{keyframeName}Out";
|
||||
animation-play-state: running;
|
||||
.motion-common(@duration);
|
||||
}
|
||||
.@{className}-leave.@{className}-leave-active {
|
||||
animation-name: ~"@{keyframeName}Out";
|
||||
animation-play-state: running;
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
// Opacity
|
||||
|
||||
.opacity(@opacity) {
|
||||
opacity: @opacity;
|
||||
// IE8 filter
|
||||
@opacity-ie: (@opacity * 100);
|
||||
filter: ~"alpha(opacity=@{opacity-ie})";
|
||||
}
|
||||
|
|
@ -8,9 +8,10 @@
|
|||
@primary-color : @blue-6;
|
||||
@info-color : @blue-6;
|
||||
@success-color : @green-6;
|
||||
@processing-color : @primary-color;
|
||||
@error-color : @red-6;
|
||||
@highlight-color : @red-6;
|
||||
@warning-color : @yellow-6;
|
||||
@warning-color : @gold-6;
|
||||
@normal-color : #d9d9d9;
|
||||
|
||||
// Color used by default to control hover and active backgrounds and for
|
||||
|
|
@ -33,16 +34,16 @@
|
|||
@body-background : #fff;
|
||||
// Base background color for most components
|
||||
@component-background : #fff;
|
||||
@font-family-no-number : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-no-number : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family : "Helvetica Neue For Number", @font-family-no-number;
|
||||
@code-family : Consolas, Menlo, Courier, monospace;
|
||||
@heading-color : fade(#000, 85%);
|
||||
@text-color : fade(#000, 65%);
|
||||
@text-color-secondary : fade(#000, 43%);
|
||||
@heading-color-dark : fade(#fff, 97%);
|
||||
@text-color-dark : fade(#fff, 91%);
|
||||
@text-color-secondary-dark: fade(#fff, 67%);
|
||||
@font-size-base : 12px;
|
||||
@text-color-secondary : fade(#000, 45%);
|
||||
@heading-color-dark : fade(#fff, 100%);
|
||||
@text-color-dark : fade(#fff,85%);
|
||||
@text-color-secondary-dark: fade(#fff, 65%);
|
||||
@font-size-base : 14px;
|
||||
@font-size-lg : @font-size-base + 2px;
|
||||
@font-size-sm : 12px;
|
||||
@line-height-base : 1.5;
|
||||
|
|
@ -66,7 +67,7 @@
|
|||
|
||||
// ICONFONT
|
||||
@iconfont-css-prefix : anticon;
|
||||
@icon-url : "https://at.alicdn.com/t/font_zck90zmlh7hf47vi";
|
||||
@icon-url : "https://at.alicdn.com/t/font_148784_r2qo40wrmaolayvi";
|
||||
|
||||
// LINK
|
||||
@link-color : @primary-color;
|
||||
|
|
@ -90,8 +91,8 @@
|
|||
@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1);
|
||||
|
||||
// Border color
|
||||
@border-color-base : #d9d9d9; // base border outline a component
|
||||
@border-color-split : #e9e9e9; // split border inside a component
|
||||
@border-color-base : hsv(0, 0, 85%); // base border outline a component
|
||||
@border-color-split : hsv(0, 0, 91%); // split border inside a component
|
||||
@border-width-base : 1px; // width of the border for a component
|
||||
@border-style-base : solid; // style of a components border
|
||||
|
||||
|
|
@ -100,10 +101,8 @@
|
|||
@outline-width : 2px;
|
||||
@outline-color : @primary-color;
|
||||
|
||||
// Default background color for disabled states, Collapse wrappers,
|
||||
// and several active and hover states.
|
||||
@background-color-base : #f7f7f7;
|
||||
@background-color-active: #eee;
|
||||
@background-color-light : hsv(0, 0, 98%); // background of header and selected item
|
||||
@background-color-base : hsv(0, 0, 96%); // Default grey background color
|
||||
|
||||
// Disabled states
|
||||
@disabled-color : fade(#000, 25%);
|
||||
|
|
@ -111,16 +110,16 @@
|
|||
@disabled-color-dark : fade(#fff, 35%);
|
||||
|
||||
// Shadow
|
||||
@shadow-color : rgba(0, 0, 0, .2);
|
||||
@shadow-color : rgba(0, 0, 0, .15);
|
||||
@box-shadow-base : @shadow-1-down;
|
||||
@shadow-1-up : 0 -1px 6px @shadow-color;
|
||||
@shadow-1-down : 0 1px 6px @shadow-color;
|
||||
@shadow-1-left : -1px 0 6px @shadow-color;
|
||||
@shadow-1-right : 1px 0 6px @shadow-color;
|
||||
@shadow-2 : 0 2px 8px @shadow-color;
|
||||
@shadow-1-up : 0 2px 8px @shadow-color;
|
||||
@shadow-1-down : 0 2px 8px @shadow-color;
|
||||
@shadow-1-left : -2px 0 8px @shadow-color;
|
||||
@shadow-1-right : 2px 0 8px @shadow-color;
|
||||
@shadow-2 : 0 4px 12px @shadow-color;
|
||||
|
||||
// Buttons
|
||||
@btn-font-weight : 500;
|
||||
@btn-font-weight : 400;
|
||||
@btn-border-radius-base : @border-radius-base;
|
||||
@btn-border-radius-sm : @border-radius-base;
|
||||
|
||||
|
|
@ -139,23 +138,27 @@
|
|||
@btn-disable-bg : @disabled-bg;
|
||||
@btn-disable-border : @border-color-base;
|
||||
|
||||
@btn-padding-base : 0 15px;
|
||||
@btn-padding-base : 0 @padding-md - 1px;
|
||||
@btn-font-size-lg : @font-size-lg;
|
||||
@btn-font-size-sm : @font-size-base;
|
||||
@btn-padding-lg : @btn-padding-base;
|
||||
@btn-padding-sm : 0 7px;
|
||||
@btn-padding-sm : 0 @padding-xs - 1px;
|
||||
|
||||
@btn-height-base : 28px;
|
||||
@btn-height-lg : 32px;
|
||||
@btn-height-sm : 22px;
|
||||
@btn-height-base : 32px;
|
||||
@btn-height-lg : 40px;
|
||||
@btn-height-sm : 24px;
|
||||
|
||||
@btn-circle-size : @btn-height-base;
|
||||
@btn-circle-size-lg : @btn-height-lg;
|
||||
@btn-circle-size-sm : @btn-height-sm;
|
||||
|
||||
@btn-group-border : @primary-7;
|
||||
@btn-group-border : @primary-5;
|
||||
|
||||
// Checkbox
|
||||
@checkbox-size : 14px;
|
||||
@checkbox-size : 16px;
|
||||
|
||||
// Radio
|
||||
@radio-size : 16px;
|
||||
|
||||
// Radio buttons
|
||||
@radio-button-bg : @btn-default-bg;
|
||||
|
|
@ -167,41 +170,46 @@
|
|||
@screen-xs-min : @screen-xs;
|
||||
|
||||
// Small screen / tablet
|
||||
@screen-sm : 768px;
|
||||
@screen-sm : 576px;
|
||||
@screen-sm-min : @screen-sm;
|
||||
|
||||
// Medium screen / desktop
|
||||
@screen-md : 992px;
|
||||
@screen-md : 768px;
|
||||
@screen-md-min : @screen-md;
|
||||
|
||||
// Large screen / wide desktop
|
||||
@screen-lg : 1200px;
|
||||
@screen-lg : 992px;
|
||||
@screen-lg-min : @screen-lg;
|
||||
|
||||
// Extra Large screen / full hd
|
||||
@screen-xl : 1600px;
|
||||
// Extra large screen / full hd
|
||||
@screen-xl : 1200px;
|
||||
@screen-xl-min : @screen-xl;
|
||||
|
||||
// Extra extra large screen / large descktop
|
||||
@screen-xxl : 1600px;
|
||||
@screen-xxl-min : @screen-xxl;
|
||||
|
||||
// provide a maximum
|
||||
@screen-xs-max : (@screen-sm-min - 1px);
|
||||
@screen-sm-max : (@screen-md-min - 1px);
|
||||
@screen-md-max : (@screen-lg-min - 1px);
|
||||
@screen-lg-max : (@screen-xl-min - 1px);
|
||||
@screen-xl-max : (@screen-xxl-min - 1px);
|
||||
|
||||
// Grid system
|
||||
@grid-columns : 24;
|
||||
@grid-gutter-width : 0;
|
||||
|
||||
// Layout
|
||||
@layout-body-background : #ececec;
|
||||
@layout-header-background : #404040;
|
||||
@layout-body-background : #f0f2f5;
|
||||
@layout-header-background : #001529;
|
||||
@layout-footer-background : @layout-body-background;
|
||||
@layout-header-height : 64px;
|
||||
@layout-header-padding : 0 50px;
|
||||
@layout-footer-padding : 24px 50px;
|
||||
@layout-sider-background : @layout-header-background;
|
||||
@layout-trigger-height : 48px;
|
||||
@layout-trigger-background : tint(@heading-color, 20%);
|
||||
@layout-trigger-background : #002140;
|
||||
@layout-trigger-color : #fff;
|
||||
@layout-zero-trigger-width : 36px;
|
||||
@layout-zero-trigger-height : 42px;
|
||||
|
|
@ -234,23 +242,23 @@
|
|||
|
||||
// Input
|
||||
// ---
|
||||
@input-height-base : 28px;
|
||||
@input-height-lg : 32px;
|
||||
@input-height-sm : 22px;
|
||||
@input-padding-horizontal : 7px;
|
||||
@input-padding-horizontal-base : @input-padding-horizontal;
|
||||
@input-padding-horizontal-sm : @input-padding-horizontal;
|
||||
@input-padding-horizontal-lg : @input-padding-horizontal;
|
||||
@input-padding-vertical-base : 4px;
|
||||
@input-padding-vertical-sm : 1px;
|
||||
@input-padding-vertical-lg : 6px;
|
||||
@input-placeholder-color : hsv(0, 0, 75%);
|
||||
@input-color : @text-color;
|
||||
@input-border-color : @border-color-base;
|
||||
@input-bg : #fff;
|
||||
@input-addon-bg : #eee;
|
||||
@input-hover-border-color : @primary-color;
|
||||
@input-disabled-bg : @disabled-bg;
|
||||
@input-height-base : 32px;
|
||||
@input-height-lg : 40px;
|
||||
@input-height-sm : 24px;
|
||||
@input-padding-horizontal : @control-padding-horizontal - 1px;
|
||||
@input-padding-horizontal-base: @input-padding-horizontal;
|
||||
@input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px;
|
||||
@input-padding-horizontal-lg : @input-padding-horizontal;
|
||||
@input-padding-vertical-base : 4px;
|
||||
@input-padding-vertical-sm : 1px;
|
||||
@input-padding-vertical-lg : 6px;
|
||||
@input-placeholder-color : hsv(0, 0, 75%);
|
||||
@input-color : @text-color;
|
||||
@input-border-color : @border-color-base;
|
||||
@input-bg : #fff;
|
||||
@input-addon-bg : @background-color-light;
|
||||
@input-hover-border-color : @primary-color;
|
||||
@input-disabled-bg : @disabled-bg;
|
||||
|
||||
// Tooltip
|
||||
// ---
|
||||
|
|
@ -276,30 +284,29 @@
|
|||
//** Popover maximum width
|
||||
@popover-min-width: 177px;
|
||||
//** Popover arrow width
|
||||
@popover-arrow-width: 4px;
|
||||
@popover-arrow-width: 5px;
|
||||
//** Popover arrow color
|
||||
@popover-arrow-color: @popover-bg;
|
||||
//** Popover outer arrow width
|
||||
@popover-arrow-outer-width: (@popover-arrow-width + 1px);
|
||||
//** Popover outer arrow color
|
||||
@popover-arrow-outer-color: fadeout(@border-color-base, 30%);
|
||||
@popover-arrow-outer-color: @popover-bg;
|
||||
//** Popover distance with trigger
|
||||
@popover-distance: @popover-arrow-width + 4px;
|
||||
|
||||
// Modal
|
||||
// --
|
||||
@modal-mask-bg: rgba(55, 55, 55, 0.6);
|
||||
@modal-mask-bg: rgba(0, 0, 0, 0.65);
|
||||
|
||||
// Progress
|
||||
// --
|
||||
@process-default-color: @primary-color;
|
||||
@progress-default-color: @processing-color;
|
||||
@progress-remaining-color: @background-color-base;
|
||||
|
||||
// Menu
|
||||
// ---
|
||||
@menu-dark-bg: @layout-header-background;
|
||||
@menu-dark-submenu-bg: #333;
|
||||
@menu-collapsed-width: 64px;
|
||||
@menu-dark-submenu-bg: #000c17;
|
||||
@menu-collapsed-width: 80px;
|
||||
|
||||
// Spin
|
||||
// ---
|
||||
|
|
@ -309,18 +316,18 @@
|
|||
|
||||
// Table
|
||||
// --
|
||||
@table-header-bg: @background-color-base;
|
||||
@table-header-sort-bg: @background-color-active;
|
||||
@table-header-bg: @background-color-light;
|
||||
@table-header-sort-bg: @background-color-base;
|
||||
@table-row-hover-bg: @primary-1;
|
||||
@table-selected-row-bg: #fafafa;
|
||||
@table-padding-vertical: 16px;
|
||||
@table-padding-horizontal: 8px;
|
||||
@table-padding-horizontal: 16px;
|
||||
|
||||
// Tag
|
||||
// --
|
||||
@tag-default-bg: #f3f3f3;
|
||||
@tag-default-bg: @background-color-light;
|
||||
@tag-default-color: @text-color;
|
||||
@tag-font-size: @font-size-base;
|
||||
@tag-font-size: @font-size-sm;
|
||||
|
||||
// TimePicker
|
||||
// ---
|
||||
|
|
@ -337,31 +344,40 @@
|
|||
// Badge
|
||||
// ---
|
||||
@badge-height: 20px;
|
||||
@badge-dot-size: 8px;
|
||||
@badge-font-size: @font-size-base;
|
||||
@badge-dot-size: 6px;
|
||||
@badge-font-size: @font-size-sm;
|
||||
@badge-status-size: 6px;
|
||||
|
||||
// Rate
|
||||
// ---
|
||||
@rate-star-color: #f5a623;
|
||||
@rate-star-bg: #e9e9e9;
|
||||
@rate-star-color: @yellow-6;
|
||||
@rate-star-bg: @border-color-split;
|
||||
|
||||
// Card
|
||||
// ---
|
||||
@card-head-height: 48px;
|
||||
@card-head-color: @heading-color;
|
||||
@card-head-background: @component-background;
|
||||
@card-head-padding: 16px;
|
||||
@card-inner-head-padding: 12px;
|
||||
@card-padding-base: 24px;
|
||||
@card-padding-wider: 32px;
|
||||
@card-actions-background: @background-color-light;
|
||||
@card-shadow: 0 2px 8px rgba(0, 0, 0, .09);
|
||||
|
||||
// Tabs
|
||||
// ---
|
||||
@tabs-card-head-background: #f9f9f9;
|
||||
@tabs-title-font-size: @font-size-lg;
|
||||
@tabs-card-head-background: @background-color-light;
|
||||
@tabs-card-height: 40px;
|
||||
@tabs-title-font-size: @font-size-base;
|
||||
|
||||
// BackTop
|
||||
// ---
|
||||
@back-top-color: #fff;
|
||||
@back-top-bg: rgba(64, 64, 64, 0.4);
|
||||
@back-top-hover-bg: rgba(64, 64, 64, 0.6);
|
||||
@back-top-bg: @text-color-secondary;
|
||||
@back-top-hover-bg: @text-color;
|
||||
|
||||
// Avatar
|
||||
// ---
|
||||
@avatar-size-base: 32px;
|
||||
@avatar-size-lg: 40px;
|
||||
@avatar-size-sm: 24px;
|
||||
|
|
@ -371,3 +387,15 @@
|
|||
@avatar-bg: #ccc;
|
||||
@avatar-color: #fff;
|
||||
@avatar-border-radius: @border-radius-base;
|
||||
|
||||
// Switch
|
||||
// ---
|
||||
@switch-height: 22px;
|
||||
@switch-sm-height: 16px;
|
||||
@switch-disabled-opacity: 0.4;
|
||||
@switch-color: @primary-color;
|
||||
|
||||
// Pagination
|
||||
// ---
|
||||
@pagination-item-size: 32px;
|
||||
@pagination-item-size-sm: 24px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
import './v2-compatible-reset.less';
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// For 2.x reset compatibility
|
||||
// import 'antd/style/v2-compatible-reset';
|
||||
// or
|
||||
// @import '~antd/style/v2-compatible-reset.css';
|
||||
// unify the setting of elements's margin and padding for browsers
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -1,33 +1,32 @@
|
|||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@tab-prefix-cls: ~"@{ant-prefix}-tabs";
|
||||
|
||||
// card style
|
||||
.@{tab-prefix-cls} {
|
||||
&&-card > &-bar &-nav-container {
|
||||
height: 32px;
|
||||
height: @tabs-card-height;
|
||||
}
|
||||
&&-card > &-bar &-ink-bar {
|
||||
visibility: hidden;
|
||||
}
|
||||
&&-card > &-bar &-tab {
|
||||
margin: 0;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-bottom: 0;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
background: @tabs-card-head-background;
|
||||
margin-right: 2px;
|
||||
}
|
||||
&&-card > &-bar &-tab {
|
||||
padding: 5px 16px 4px;
|
||||
padding: 0 16px;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
line-height: @tabs-card-height - 2px;
|
||||
}
|
||||
&&-card > &-bar &-tab-active {
|
||||
background: @component-background;
|
||||
border-color: @border-color-base;
|
||||
border-color: @border-color-split;
|
||||
color: @primary-color;
|
||||
padding-bottom: 5px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
&&-card > &-bar &-tab-inactive {
|
||||
padding: 0;
|
||||
|
|
@ -38,19 +37,14 @@
|
|||
&&-card > &-bar &-tab .@{iconfont-css-prefix}-close {
|
||||
color: @text-color-secondary;
|
||||
transition: all .3s;
|
||||
.iconfont-size-under-12px(10px);
|
||||
margin-right: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
font-size: @font-size-sm;
|
||||
margin-left: 3px;
|
||||
margin-right: -5px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
height: @font-size-base;
|
||||
&:hover {
|
||||
color: @heading-color;
|
||||
}
|
||||
|
|
@ -69,7 +63,7 @@
|
|||
}
|
||||
|
||||
&-extra-content {
|
||||
line-height: 32px;
|
||||
line-height: @tabs-card-height;
|
||||
|
||||
.@{tab-prefix-cls}-new-tab {
|
||||
width: 20px;
|
||||
|
|
@ -77,11 +71,10 @@
|
|||
line-height: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-radius: @border-radius-base;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
font-size: @font-size-base;
|
||||
.iconfont-size-under-12px(10px);
|
||||
color: @text-color-secondary;
|
||||
border-radius: @border-radius-sm;
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
font-size: 12px;
|
||||
color: @text-color;
|
||||
transition: all .3s;
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
|
|
@ -96,7 +89,7 @@
|
|||
height: auto;
|
||||
}
|
||||
.@{tab-prefix-cls}-tab {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-base;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
margin-bottom: 8px;
|
||||
&-active {
|
||||
padding-bottom: 4px;
|
||||
|
|
|
|||
|
|
@ -5,11 +5,10 @@
|
|||
@import "./card-style";
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
box-sizing: border-box;
|
||||
.reset-component;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.clearfix;
|
||||
color: @text-color;
|
||||
|
||||
&-ink-bar {
|
||||
z-index: 1;
|
||||
|
|
@ -23,7 +22,7 @@
|
|||
}
|
||||
|
||||
&-bar {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-base;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
margin-bottom: 16px;
|
||||
outline: none;
|
||||
transition: padding .3s @ease-in-out;
|
||||
|
|
@ -52,7 +51,6 @@
|
|||
z-index: 2;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
|
@ -159,7 +157,7 @@
|
|||
.@{tab-prefix-cls}-tab {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin-right: 24px;
|
||||
margin-right: 32px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -167,7 +165,7 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
padding: 8px 20px;
|
||||
padding: 12px 16px;
|
||||
transition: color 0.3s @ease-in-out;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
|
@ -179,24 +177,31 @@
|
|||
&:active {
|
||||
color: @primary-7;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-tab-active {
|
||||
color: @primary-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-mini &-nav-container {
|
||||
&-large &-nav-container {
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
|
||||
&-large &-tab {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&-small &-nav-container {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
&-mini &-tab {
|
||||
margin-right: 0;
|
||||
&-small &-tab {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
|
|
@ -288,15 +293,7 @@
|
|||
height: auto;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{tab-prefix-cls}-content {
|
||||
overflow: hidden;
|
||||
width: auto;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
> .@{tab-prefix-cls}-bar {
|
||||
.@{tab-prefix-cls}-tab-next {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
|
|
@ -315,6 +312,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .@{tab-prefix-cls}-content {
|
||||
overflow: hidden;
|
||||
width: auto;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical&-left {
|
||||
|
|
|
|||
|
|
@ -5,12 +5,11 @@
|
|||
|
||||
// Base class
|
||||
.@{tooltip-prefix-cls} {
|
||||
.reset-component;
|
||||
position: absolute;
|
||||
z-index: @zindex-tooltip;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
|
|
@ -36,31 +35,29 @@
|
|||
&-placement-leftBottom {
|
||||
padding-right: @tooltip-distance;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.@{tooltip-prefix-cls}-inner {
|
||||
max-width: @tooltip-max-width;
|
||||
padding: 8px 10px;
|
||||
color: @tooltip-color;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @box-shadow-base;
|
||||
min-height: 34px;
|
||||
}
|
||||
// Wrapper for the tooltip content
|
||||
&-inner {
|
||||
max-width: @tooltip-max-width;
|
||||
padding: 6px 8px;
|
||||
color: @tooltip-color;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @box-shadow-base;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.@{tooltip-prefix-cls}-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
// Arrows
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.@{tooltip-prefix-cls} {
|
||||
&-placement-top &-arrow,
|
||||
&-placement-topLeft &-arrow,
|
||||
&-placement-topRight &-arrow {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
|||
const com = pathnameArr[1] || 'button'
|
||||
const demo = pathnameArr[2] || 'index'
|
||||
return {
|
||||
component: import(`../components/${com}/demo/${demo}.vue`),
|
||||
component: import(`../components/radio/demo/${demo}.vue`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
|
|
|||
Loading…
Reference in New Issue