test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 03:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: update style to 3.11.6

Browse Source
This commit is contained in:
tangjinzhou 2019-01-02 21:01:56 +08:00
parent 9eb923c0f8
commit 14dfebab0b
96 changed files with 1241 additions and 1047 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/affix/style/index.less
View File

@ -1,4 +1,4 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
.@{ant-prefix}-affix { .@{ant-prefix}-affix {
position: fixed; position: fixed;

19
components/alert/style/index.less
View File

@ -1,11 +1,12 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@alert-prefix-cls: ~"@{ant-prefix}-alert"; @alert-prefix-cls: ~'@{ant-prefix}-alert';
@alert-message-color: @heading-color; @alert-message-color: @heading-color;
@alert-text-color: @text-color; @alert-text-color: @text-color;
@alert-close-color: @text-color-secondary; @alert-close-color: @text-color-secondary;
@alert-close-hover-color: #404040;
.@{alert-prefix-cls} { .@{alert-prefix-cls} {
.reset-component; .reset-component;
@ -17,6 +18,10 @@
padding: 8px 15px; padding: 8px 15px;
} }
&&-closable {
padding-right: 30px;
}
&-icon { &-icon {
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2; top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
left: 16px; left: 16px;
@ -72,9 +77,9 @@
.@{iconfont-css-prefix}-close { .@{iconfont-css-prefix}-close {
color: @alert-close-color; color: @alert-close-color;
transition: color .3s; transition: color 0.3s;
&:hover { &:hover {
color: #404040; color: @alert-close-hover-color;
} }
} }
} }
@ -127,12 +132,12 @@
margin: 0; margin: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
transition: all .3s @ease-in-out-circ; transition: all 0.3s @ease-in-out-circ;
transform-origin: 50% 0; transform-origin: 50% 0;
} }
&-slide-up-leave { &-slide-up-leave {
animation: antAlertSlideUpOut .3s @ease-in-out-circ; animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
animation-fill-mode: both; animation-fill-mode: both;
} }

8
components/anchor/style/index.less
View File

@ -1,5 +1,5 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@anchor-border-width: 2px; @anchor-border-width: 2px;
@ -38,7 +38,7 @@
border: 2px solid @primary-color; border: 2px solid @primary-color;
background-color: @component-background; background-color: @component-background;
left: 50%; left: 50%;
transition: top .3s ease-in-out; transition: top 0.3s ease-in-out;
transform: translateX(-50%); transform: translateX(-50%);
&.visible { &.visible {
display: inline-block; display: inline-block;
@ -57,7 +57,7 @@
&-title { &-title {
display: block; display: block;
position: relative; position: relative;
transition: all .3s; transition: all 0.3s;
color: @text-color; color: @text-color;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

12
components/auto-complete/style/index.less
View File

@ -1,10 +1,10 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../input/style/mixin"; @import '../../input/style/mixin';
@input-prefix-cls: ~"@{ant-prefix}-input"; @input-prefix-cls: ~'@{ant-prefix}-input';
@select-prefix-cls: ~"@{ant-prefix}-select"; @select-prefix-cls: ~'@{ant-prefix}-select';
@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete"; @autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';
.@{autocomplete-prefix-cls} { .@{autocomplete-prefix-cls} {
.reset-component; .reset-component;

10
components/avatar/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@avatar-prefix-cls: ~"@{ant-prefix}-avatar"; @avatar-prefix-cls: ~'@{ant-prefix}-avatar';
.@{avatar-prefix-cls} { .@{avatar-prefix-cls} {
.reset-component; .reset-component;
@ -45,10 +45,6 @@
line-height: @size; line-height: @size;
border-radius: 50%; border-radius: 50%;
& > * {
line-height: @size;
}
&-string { &-string {
position: absolute; position: absolute;
left: 50%; left: 50%;

13
components/back-top/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@backtop-prefix-cls: ~"@{ant-prefix}-back-top"; @backtop-prefix-cls: ~'@{ant-prefix}-back-top';
.@{backtop-prefix-cls} { .@{backtop-prefix-cls} {
.reset-component; .reset-component;
@ -20,12 +20,12 @@
background-color: @back-top-bg; background-color: @back-top-bg;
color: @back-top-color; color: @back-top-color;
text-align: center; text-align: center;
transition: all .3s @ease-in-out; transition: all 0.3s @ease-in-out;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
background-color: @back-top-hover-bg; background-color: @back-top-hover-bg;
transition: all .3s @ease-in-out; transition: all 0.3s @ease-in-out;
} }
} }
@ -33,7 +33,8 @@
margin: 12px auto; margin: 12px auto;
width: 14px; width: 14px;
height: 16px; height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) ~"100%/100%" no-repeat; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC)
~'100%/100%' no-repeat;
} }
} }

23
components/badge/style/index.less
View File

@ -1,8 +1,8 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@badge-prefix-cls: ~"@{ant-prefix}-badge"; @badge-prefix-cls: ~'@{ant-prefix}-badge';
@number-prefix-cls: ~"@{ant-prefix}-scroll-number"; @number-prefix-cls: ~'@{ant-prefix}-scroll-number';
.@{badge-prefix-cls} { .@{badge-prefix-cls} {
.reset-component; .reset-component;
@ -47,13 +47,18 @@
} }
&-count, &-count,
&-dot { &-dot,
.@{number-prefix-cls}-custom-component {
position: absolute; position: absolute;
right: 0; right: 0;
transform: translateX(50%); transform: translateX(50%);
transform-origin: 100%; transform-origin: 100%;
} }
.@{number-prefix-cls}-custom-component {
transform: translate(50%, -50%);
}
&-status { &-status {
line-height: inherit; line-height: inherit;
vertical-align: baseline; vertical-align: baseline;
@ -81,7 +86,7 @@
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: 1px solid @processing-color; border: 1px solid @processing-color;
content: ""; content: '';
animation: antStatusProcessing 1.2s infinite ease-in-out; animation: antStatusProcessing 1.2s infinite ease-in-out;
} }
} }
@ -103,12 +108,12 @@
&-zoom-appear, &-zoom-appear,
&-zoom-enter { &-zoom-enter {
animation: antZoomBadgeIn .3s @ease-out-back; animation: antZoomBadgeIn 0.3s @ease-out-back;
animation-fill-mode: both; animation-fill-mode: both;
} }
&-zoom-leave { &-zoom-leave {
animation: antZoomBadgeOut .3s @ease-in-back; animation: antZoomBadgeOut 0.3s @ease-in-back;
animation-fill-mode: both; animation-fill-mode: both;
} }
@ -142,7 +147,7 @@
overflow: hidden; overflow: hidden;
&-only { &-only {
display: inline-block; display: inline-block;
transition: all .3s @ease-in-out; transition: all 0.3s @ease-in-out;
height: @badge-height; height: @badge-height;
> p { > p {
height: @badge-height; height: @badge-height;

8
components/breadcrumb/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb"; @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
.@{breadcrumb-prefix-cls} { .@{breadcrumb-prefix-cls} {
.reset-component; .reset-component;
@ -14,7 +14,7 @@
a { a {
color: @breadcrumb-link-color; color: @breadcrumb-link-color;
transition: color .3s; transition: color 0.3s;
&:hover { &:hover {
color: @breadcrumb-link-color-hover; color: @breadcrumb-link-color-hover;
} }

22
components/button/style/index.less
View File

@ -1,8 +1,8 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "./mixin"; @import './mixin';
@btn-prefix-cls: ~"@{ant-prefix}-btn"; @btn-prefix-cls: ~'@{ant-prefix}-btn';
// for compatible // for compatible
@btn-ghost-color: @text-color; @btn-ghost-color: @text-color;
@ -82,16 +82,16 @@
right: -1px; right: -1px;
background: #fff; background: #fff;
opacity: 0.35; opacity: 0.35;
content: ""; content: '';
border-radius: inherit; border-radius: inherit;
z-index: 1; z-index: 1;
transition: opacity .2s; transition: opacity 0.2s;
pointer-events: none; pointer-events: none;
display: none; display: none;
} }
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
transition: margin-left .3s @ease-in-out; transition: margin-left 0.3s @ease-in-out;
} }
&&-loading:before { &&-loading:before {
@ -102,7 +102,7 @@
padding-left: 29px; padding-left: 29px;
pointer-events: none; pointer-events: none;
position: relative; position: relative;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix}:not(:last-child) {
margin-left: -14px; margin-left: -14px;
} }
} }
@ -150,12 +150,12 @@
} }
&-two-chinese-chars:first-letter { &-two-chinese-chars:first-letter {
letter-spacing: .34em; letter-spacing: 0.34em;
} }
&-two-chinese-chars > *:not(.@{iconfont-css-prefix}) { &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
letter-spacing: .34em; letter-spacing: 0.34em;
margin-right: -.34em; margin-right: -0.34em;
} }
&-block { &-block {

32
components/button/style/mixin.less
View File

@ -24,17 +24,21 @@
.button-variant-primary(@color; @background) { .button-variant-primary(@color; @background) {
.button-color(@color; @background; @background); .button-color(@color; @background; @background);
text-shadow: 0 -1px 0 rgba(0, 0, 0, .12); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, .045); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
&:hover, &:hover,
&:focus { &:focus {
.button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`); .button-color(
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
);
} }
&:active, &:active,
&.active { &.active {
.button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`); .button-color(
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
);
} }
.button-disabled(); .button-disabled();
@ -60,16 +64,20 @@
.button-color(@color; @background; @border); .button-color(@color; @background; @border);
&:hover { &:hover {
.button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`); .button-color(
@btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) `
);
} }
&:focus { &:focus {
.button-color(~`colorPalette("@{color}", 5)`; #fff; ~`colorPalette("@{color}", 5)`); .button-color(~`colorPalette('@{color}', 5) `; #fff; ~`colorPalette('@{color}', 5) `);
} }
&:active, &:active,
&.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(); .button-disabled();
@ -81,12 +89,12 @@
&:hover, &:hover,
&:focus { &:focus {
.button-color(~`colorPalette("@{color}", 5)`; transparent; ~`colorPalette("@{color}", 5)`); .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
} }
&:active, &:active,
&.active { &.active {
.button-color(~`colorPalette("@{color}", 7)`; transparent; ~`colorPalette("@{color}", 7)`); .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
} }
.button-disabled(); .button-disabled();
@ -101,7 +109,7 @@
> a:only-child { > a:only-child {
color: currentColor; color: currentColor;
&:after { &:after {
content: ""; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -161,9 +169,9 @@
white-space: nowrap; white-space: nowrap;
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base); .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
user-select: none; user-select: none;
transition: all .3s @ease-in-out; transition: all 0.3s @ease-in-out;
position: relative; position: relative;
box-shadow: 0 2px 0 rgba(0, 0, 0, .015); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
line-height: 1; line-height: 1;

12
components/calendar/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@full-calendar-prefix-cls: ~"@{ant-prefix}-fullcalendar"; @full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar';
.@{full-calendar-prefix-cls} { .@{full-calendar-prefix-cls} {
.reset-component; .reset-component;
@ -84,7 +84,7 @@
&-month, &-month,
&-date { &-date {
text-align: center; text-align: center;
transition: all .3s; transition: all 0.3s;
} }
&-value { &-value {
@ -97,7 +97,7 @@
padding: 0; padding: 0;
background: transparent; background: transparent;
line-height: 24px; line-height: 24px;
transition: all .3s; transition: all 0.3s;
&:hover { &:hover {
background: @item-hover-bg; background: @item-hover-bg;
@ -180,7 +180,7 @@
height: 116px; height: 116px;
padding: 4px 8px; padding: 4px 8px;
border-top: 2px solid @border-color-split; border-top: 2px solid @border-color-split;
transition: background .3s; transition: background 0.3s;
&:hover { &:hover {
background: @item-hover-bg; background: @item-hover-bg;

43
components/card/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@card-prefix-cls: ~"@{ant-prefix}-card"; @card-prefix-cls: ~'@{ant-prefix}-card';
@card-head-height: 48px; @card-head-height: 48px;
@card-hover-border: rgba(0, 0, 0, 0.09); @card-hover-border: rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-sm; @card-radius: @border-radius-sm;
@ -11,7 +11,7 @@
background: @component-background; background: @component-background;
border-radius: @card-radius; border-radius: @card-radius;
position: relative; position: relative;
transition: all .3s; transition: all 0.3s;
&-hoverable { &-hoverable {
cursor: pointer; cursor: pointer;
@ -66,11 +66,10 @@
&-extra { &-extra {
float: right; float: right;
padding: @card-head-padding + 1.5px 0; padding: @card-head-padding 0;
font-size: @font-size-base; font-size: @font-size-base;
color: @text-color; color: @text-color;
font-weight: normal; font-weight: normal;
text-align: right;
// https://stackoverflow.com/a/22429853/3040605 // https://stackoverflow.com/a/22429853/3040605
margin-left: auto; margin-left: auto;
} }
@ -88,11 +87,13 @@
&-grid { &-grid {
border-radius: 0; border-radius: 0;
border: 0; border: 0;
box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split, 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, 0 1px 0 0 @border-color-split inset; box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
0 1px 0 0 @border-color-split inset;
width: 33.33%; width: 33.33%;
float: left; float: left;
padding: @card-padding-base; padding: @card-padding-base;
transition: all .3s; transition: all 0.3s;
&:hover { &:hover {
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -143,7 +144,7 @@
&:hover { &:hover {
color: @primary-color; color: @primary-color;
transition: color .3s; transition: color 0.3s;
} }
& > .anticon { & > .anticon {
@ -179,7 +180,7 @@
&-padding-transition &-head, &-padding-transition &-head,
&-padding-transition &-body { &-padding-transition &-body {
transition: padding .3s; transition: padding 0.3s;
} }
&-type-inner &-head { &-type-inner &-head {
@ -230,6 +231,21 @@
} }
} }
&-loading {
overflow: hidden;
position: relative;
&:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: @card-padding-base;
background: @component-background;
content: '';
}
}
&-loading &-body { &-loading &-body {
user-select: none; user-select: none;
} }
@ -244,7 +260,12 @@
height: 14px; height: 14px;
margin: 4px 0; margin: 4px 0;
border-radius: @card-radius; border-radius: @card-radius;
background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2)); background: linear-gradient(
90deg,
rgba(207, 216, 220, 0.2),
rgba(207, 216, 220, 0.4),
rgba(207, 216, 220, 0.2)
);
animation: card-loading 1.4s ease infinite; animation: card-loading 1.4s ease infinite;
background-size: 600% 600%; background-size: 600% 600%;
} }

14
components/carousel/style/index.less
View File

@ -1,5 +1,5 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
.@{ant-prefix}-carousel { .@{ant-prefix}-carousel {
.reset-component; .reset-component;
@ -49,7 +49,7 @@
&:before, &:before,
&:after { &:after {
content: ""; content: '';
display: table; display: table;
} }
@ -65,7 +65,7 @@
float: left; float: left;
height: 100%; height: 100%;
min-height: 1px; min-height: 1px;
[dir="rtl"] & { [dir='rtl'] & {
float: right; float: right;
} }
img { img {
@ -133,14 +133,14 @@
.slick-prev { .slick-prev {
left: -25px; left: -25px;
&:before { &:before {
content: "←"; content: '←';
} }
} }
.slick-next { .slick-next {
right: -25px; right: -25px;
&:before { &:before {
content: "→"; content: '→';
} }
} }
@ -174,7 +174,7 @@
outline: none; outline: none;
font-size: 0; font-size: 0;
color: transparent; color: transparent;
transition: all .5s; transition: all 0.5s;
padding: 0; padding: 0;
&:hover, &:hover,
&:focus { &:focus {

12
components/cascader/style/index.less
View File

@ -1,8 +1,8 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../input/style/mixin"; @import '../../input/style/mixin';
@cascader-prefix-cls: ~"@{ant-prefix}-cascader"; @cascader-prefix-cls: ~'@{ant-prefix}-cascader';
.@{cascader-prefix-cls} { .@{cascader-prefix-cls} {
.reset-component; .reset-component;
@ -28,7 +28,7 @@
background-color: @component-background; background-color: @component-background;
border-radius: @border-radius-base; border-radius: @border-radius-base;
outline: 0; outline: 0;
transition: color .3s; transition: color 0.3s;
&-with-value &-label { &-with-value &-label {
color: transparent; color: transparent;
@ -101,7 +101,7 @@
margin-top: -6px; margin-top: -6px;
line-height: 12px; line-height: 12px;
color: @disabled-color; color: @disabled-color;
transition: transform .2s; transition: transform 0.2s;
&&-expand { &&-expand {
transform: rotate(180deg); transform: rotate(180deg);
} }

4
components/checkbox/style/index.less
View File

@ -1,4 +1,4 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "./mixin"; @import './mixin';
.antCheckboxFn(); .antCheckboxFn();

14
components/checkbox/style/mixin.less
View File

@ -1,7 +1,7 @@
@import "../../style/mixins/index"; @import '../../style/mixins/index';
.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") { .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
@checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner"; @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
// 一般状态 // 一般状态
.@{checkbox-prefix-cls} { .@{checkbox-prefix-cls} {
.reset-component; .reset-component;
@ -28,7 +28,7 @@
height: 100%; height: 100%;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
border: 1px solid @checkbox-color; border: 1px solid @checkbox-color;
content: ""; content: '';
animation: antCheckboxEffect 0.36s ease-in-out; animation: antCheckboxEffect 0.36s ease-in-out;
animation-fill-mode: both; animation-fill-mode: both;
visibility: hidden; visibility: hidden;
@ -49,7 +49,7 @@
border: @checkbox-border-width @border-style-base @border-color-base; border: @checkbox-border-width @border-style-base @border-color-base;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
background-color: @checkbox-check-color; background-color: @checkbox-check-color;
transition: all .3s; transition: all 0.3s;
// Fix IE checked style // Fix IE checked style
// https://github.com/ant-design/ant-design/issues/12597 // https://github.com/ant-design/ant-design/issues/12597
border-collapse: separate; border-collapse: separate;
@ -68,7 +68,7 @@
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
content: ' '; content: ' ';
transition: all .1s @ease-in-back, opacity .1s; transition: all 0.1s @ease-in-back, opacity 0.1s;
opacity: 0; opacity: 0;
} }
} }
@ -96,7 +96,7 @@
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
content: ' '; content: ' ';
transition: all .2s @ease-out-back .1s; transition: all 0.2s @ease-out-back 0.1s;
opacity: 1; opacity: 1;
} }

12
components/collapse/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@collapse-prefix-cls: ~"@{ant-prefix}-collapse"; @collapse-prefix-cls: ~'@{ant-prefix}-collapse';
.collapse-close() { .collapse-close() {
transform: rotate(0); transform: rotate(0);
@ -33,7 +33,7 @@
color: @heading-color; color: @heading-color;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: all .3s; transition: all 0.3s;
.arrow { .arrow {
.iconfont-mixin(); .iconfont-mixin();
@ -64,7 +64,7 @@
} }
&-anim-active { &-anim-active {
transition: height .2s @ease-out; transition: height 0.2s @ease-out;
} }
&-content { &-content {
@ -88,7 +88,7 @@
} }
} }
& > &-item > &-header[aria-expanded="true"] { & > &-item > &-header[aria-expanded='true'] {
.anticon-right svg { .anticon-right svg {
.collapse-open(); .collapse-open();
} }

4
components/comment/style/index.js
View File

@ -1,2 +1,2 @@
import '../../style/index.less' import '../../style/index.less';
import './index.less' import './index.less';

10
components/date-picker/style/Calendar.less
View File

@ -38,7 +38,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
color: @text-color-secondary; color: @text-color-secondary;
font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif; font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
padding: 0 5px; padding: 0 5px;
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
@ -214,7 +214,9 @@
background: tint(@primary-color, 80%); background: tint(@primary-color, 80%);
} }
&-selected-date, &-selected-start-date, &-selected-end-date { &-selected-date,
&-selected-start-date,
&-selected-end-date {
.@{calendar-prefix-cls}-date { .@{calendar-prefix-cls}-date {
background: @primary-color; background: @primary-color;
color: #fff; color: #fff;
@ -240,10 +242,10 @@
} }
&-disabled-cell&-today &-date { &-disabled-cell&-today &-date {
position: relative; position: relative;
margin-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
&:before { &:before {
content: " "; content: ' ';
position: absolute; position: absolute;
top: -1px; top: -1px;
left: 5px; left: 5px;

4
components/date-picker/style/DecadePanel.less
View File

@ -15,11 +15,11 @@
} }
.@{calendar-prefix-cls}-decade-panel-header { .@{calendar-prefix-cls}-decade-panel-header {
.calendarPanelHeader(~"@{calendar-prefix-cls}-decade-panel"); .calendarPanelHeader(~'@{calendar-prefix-cls}-decade-panel');
} }
.@{calendar-prefix-cls}-decade-panel-body { .@{calendar-prefix-cls}-decade-panel-body {
height: ~"calc(100% - 40px)"; height: ~'calc(100% - 40px)';
} }
.@{calendar-prefix-cls}-decade-panel-table { .@{calendar-prefix-cls}-decade-panel-table {

7
components/date-picker/style/MonthPanel.less
View File

@ -9,7 +9,8 @@
background: @component-background; background: @component-background;
outline: none; outline: none;
> div { // TODO: this is a useless wrapper, and we need to remove it in rc-calendar > div {
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%; height: 100%;
} }
} }
@ -19,11 +20,11 @@
} }
.@{calendar-prefix-cls}-month-panel-header { .@{calendar-prefix-cls}-month-panel-header {
.calendarPanelHeader(~"@{calendar-prefix-cls}-month-panel"); .calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel');
} }
.@{calendar-prefix-cls}-month-panel-body { .@{calendar-prefix-cls}-month-panel-body {
height: ~"calc(100% - 40px)"; height: ~'calc(100% - 40px)';
} }
.@{calendar-prefix-cls}-month-panel-table { .@{calendar-prefix-cls}-month-panel-table {

6
components/date-picker/style/Picker.less
View File

@ -1,4 +1,4 @@
@import "../../button/style/mixin"; @import '../../button/style/mixin';
.@{calendar-prefix-cls}-picker-container { .@{calendar-prefix-cls}-picker-container {
.reset-component; .reset-component;
@ -65,7 +65,7 @@
margin-top: -7px; margin-top: -7px;
line-height: 14px; line-height: 14px;
font-size: @font-size-sm; font-size: @font-size-sm;
transition: all .3s; transition: all 0.3s;
user-select: none; user-select: none;
z-index: 1; z-index: 1;
} }
@ -89,7 +89,7 @@
} }
&-icon { &-icon {
font-family: "anticon"; font-family: 'anticon';
font-size: @font-size-base; font-size: @font-size-base;
color: @disabled-color; color: @disabled-color;
display: inline-block; display: inline-block;

4
components/date-picker/style/RangePicker.less
View File

@ -28,7 +28,7 @@
.@{calendar-prefix-cls}-date-panel { .@{calendar-prefix-cls}-date-panel {
&::after { &::after {
content: "."; content: '.';
display: block; display: block;
height: 0; height: 0;
clear: both; clear: both;
@ -134,7 +134,7 @@
z-index: 1; z-index: 1;
} }
&:before { &:before {
content: ""; content: '';
display: block; display: block;
background: @item-active-bg; background: @item-active-bg;
border-radius: 0; border-radius: 0;

2
components/date-picker/style/TimePicker.less
View File

@ -90,7 +90,7 @@
} }
li:last-child:after { li:last-child:after {
content: ""; content: '';
height: 202px; height: 202px;
display: block; display: block;
} }

2
components/date-picker/style/WeekPicker.less
View File

@ -3,7 +3,7 @@
opacity: 0.5; opacity: 0.5;
} }
.@{calendar-prefix-cls}-body tr { .@{calendar-prefix-cls}-body tr {
transition: all .3s; transition: all 0.3s;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: @primary-1; background: @primary-1;

7
components/date-picker/style/YearPanel.less
View File

@ -9,7 +9,8 @@
background: @component-background; background: @component-background;
outline: none; outline: none;
> div { // TODO: this is a useless wrapper, and we need to remove it in rc-calendar > div {
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%; height: 100%;
} }
} }
@ -19,11 +20,11 @@
} }
.@{calendar-prefix-cls}-year-panel-header { .@{calendar-prefix-cls}-year-panel-header {
.calendarPanelHeader(~"@{calendar-prefix-cls}-year-panel"); .calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel');
} }
.@{calendar-prefix-cls}-year-panel-body { .@{calendar-prefix-cls}-year-panel-body {
height: ~"calc(100% - 40px)"; height: ~'calc(100% - 40px)';
} }
.@{calendar-prefix-cls}-year-panel-table { .@{calendar-prefix-cls}-year-panel-table {

30
components/date-picker/style/index.less
View File

@ -1,17 +1,17 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../input/style/mixin"; @import '../../input/style/mixin';
@import "../../button/style/mixin"; @import '../../button/style/mixin';
@calendar-prefix-cls: ~"@{ant-prefix}-calendar"; @calendar-prefix-cls: ~'@{ant-prefix}-calendar';
@calendar-timepicker-prefix-cls: ~"@{ant-prefix}-calendar-time-picker"; @calendar-timepicker-prefix-cls: ~'@{ant-prefix}-calendar-time-picker';
@import "Picker"; @import 'Picker';
@import "Calendar"; @import 'Calendar';
@import "RangePicker"; @import 'RangePicker';
@import "TimePicker"; @import 'TimePicker';
@import "MonthPanel"; @import 'MonthPanel';
@import "YearPanel"; @import 'YearPanel';
@import "DecadePanel"; @import 'DecadePanel';
@import "MonthPicker"; @import 'MonthPicker';
@import "WeekPicker"; @import 'WeekPicker';

8
components/divider/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@divider-prefix-cls: ~"@{ant-prefix}-divider"; @divider-prefix-cls: ~'@{ant-prefix}-divider';
.@{divider-prefix-cls} { .@{divider-prefix-cls} {
.reset-component; .reset-component;
@ -39,7 +39,7 @@
margin: 16px 0; margin: 16px 0;
&:before, &:before,
&:after { &:after {
content: ""; content: '';
display: table-cell; display: table-cell;
position: relative; position: relative;
top: 50%; top: 50%;

6
components/drawer/style/drawer.less
View File

@ -1,6 +1,6 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@dawer-prefix-cls: ~"@{ant-prefix}-drawer"; @dawer-prefix-cls: ~'@{ant-prefix}-drawer';
.@{dawer-prefix-cls} { .@{dawer-prefix-cls} {
position: fixed; position: fixed;
@ -169,7 +169,7 @@
height: 0; height: 0;
opacity: 0; opacity: 0;
background-color: @modal-mask-bg; background-color: @modal-mask-bg;
filter: ~"alpha(opacity=50)"; filter: ~'alpha(opacity=50)';
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow; transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
} }
&-open { &-open {

6
components/drawer/style/index.less
View File

@ -1,3 +1,3 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "./drawer"; @import './drawer';

29
components/dropdown/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@dropdown-prefix-cls: ~"@{ant-prefix}-dropdown"; @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
.@{dropdown-prefix-cls} { .@{dropdown-prefix-cls} {
.reset-component; .reset-component;
@ -11,6 +11,16 @@
z-index: @zindex-dropdown; z-index: @zindex-dropdown;
display: block; display: block;
&:before {
position: absolute;
top: -7px;
left: -7px;
right: 0;
bottom: -7px;
content: ' ';
opacity: 0.0001;
}
&-wrap { &-wrap {
position: relative; position: relative;
@ -19,7 +29,7 @@
} }
.@{iconfont-css-prefix}-down:before { .@{iconfont-css-prefix}-down:before {
transition: transform .2s; transition: transform 0.2s;
} }
} }
@ -45,11 +55,12 @@
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: @box-shadow-base; box-shadow: @box-shadow-base;
background-clip: padding-box; background-clip: padding-box;
-webkit-transform: translate3d(0, 0, 0);
&-item-group-title { &-item-group-title {
color: @text-color-secondary; color: @text-color-secondary;
padding: 5px @control-padding-horizontal; padding: 5px @control-padding-horizontal;
transition: all .3s; transition: all 0.3s;
} }
&-submenu-popup { &-submenu-popup {
@ -71,7 +82,7 @@
color: @text-color; color: @text-color;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: all .3s; transition: all 0.3s;
line-height: 22px; line-height: 22px;
> .anticon:first-child { > .anticon:first-child {
@ -84,7 +95,7 @@
display: block; display: block;
padding: 5px @control-padding-horizontal; padding: 5px @control-padding-horizontal;
margin: -5px -@control-padding-horizontal; margin: -5px -@control-padding-horizontal;
transition: all .3s; transition: all 0.3s;
&:focus { &:focus {
text-decoration: none; text-decoration: none;
} }
@ -187,7 +198,7 @@
.@{dropdown-prefix-cls}-trigger, .@{dropdown-prefix-cls}-trigger,
.@{dropdown-prefix-cls}-link { .@{dropdown-prefix-cls}-link {
> .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) { > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
} }
} }
@ -199,7 +210,7 @@
padding-left: @padding-xs; padding-left: @padding-xs;
padding-right: @padding-xs; padding-right: @padding-xs;
} }
.@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) { .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
} }
} }

80
components/form/style/index.less
View File

@ -1,11 +1,11 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../input/style/mixin"; @import '../../input/style/mixin';
@import "../../button/style/mixin"; @import '../../button/style/mixin';
@import "../../grid/style/mixin"; @import '../../grid/style/mixin';
@import "./mixin"; @import './mixin';
@form-prefix-cls: ~"@{ant-prefix}-form"; @form-prefix-cls: ~'@{ant-prefix}-form';
@form-component-height: @input-height-base; @form-component-height: @input-height-base;
@form-component-max-height: @input-height-lg; @form-component-max-height: @input-height-lg;
@form-feedback-icon-size: @font-size-base; @form-feedback-icon-size: @font-size-base;
@ -19,7 +19,7 @@
.@{form-prefix-cls}-item-required:before { .@{form-prefix-cls}-item-required:before {
display: inline-block; display: inline-block;
margin-right: 4px; margin-right: 4px;
content: "*"; content: '*';
font-family: SimSun; font-family: SimSun;
line-height: 1; line-height: 1;
font-size: @font-size-base; font-size: @font-size-base;
@ -30,8 +30,8 @@
} }
// Radio && Checkbox // Radio && Checkbox
input[type="radio"], input[type='radio'],
input[type="checkbox"] { input[type='checkbox'] {
&[disabled], &[disabled],
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
@ -74,12 +74,6 @@ input[type="checkbox"] {
margin-bottom: @form-item-margin-bottom; margin-bottom: @form-item-margin-bottom;
vertical-align: top; vertical-align: top;
// nested FormItem
&-control > &:last-child,
& [class^="@{ant-prefix}-col-"] > &:only-child {
margin-bottom: -@form-item-margin-bottom;
}
&-control { &-control {
line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220 line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
position: relative; position: relative;
@ -91,7 +85,8 @@ input[type="checkbox"] {
} }
&-with-help { &-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - @form-help-margin-top; margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base -
@form-help-margin-top;
} }
&-label { &-label {
@ -107,10 +102,10 @@ input[type="checkbox"] {
&:after { &:after {
& when (@form-item-trailing-colon=true) { & when (@form-item-trailing-colon=true) {
content: ":"; content: ':';
} }
& when not (@form-item-trailing-colon=true) { & when not (@form-item-trailing-colon=true) {
content: " "; content: ' ';
} }
margin: 0 8px 0 2px; margin: 0 8px 0 2px;
position: relative; position: relative;
@ -124,7 +119,7 @@ input[type="checkbox"] {
} }
&-no-colon &-label label:after { &-no-colon &-label label:after {
content: " "; content: ' ';
} }
} }
@ -134,7 +129,7 @@ input[type="checkbox"] {
// Magic tweak pixel number to float line-height diff in windows // Magic tweak pixel number to float line-height diff in windows
// Fix https://github.com/ant-design/ant-design/issues/12803 // Fix https://github.com/ant-design/ant-design/issues/12803
line-height: @line-height-base + 0.024; line-height: @line-height-base + 0.024;
transition: color .3s @ease-out; // sync input color transition transition: color 0.3s @ease-out; // sync input color transition
margin-top: @form-help-margin-top; margin-top: @form-help-margin-top;
clear: both; clear: both;
} }
@ -165,11 +160,15 @@ form {
> .@{ant-prefix}-select .@{ant-prefix}-select-arrow, > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
> .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear, > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
:not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
:not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear { :not(.@{ant-prefix}-input-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection__clear {
right: 28px; right: 28px;
} }
> .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value, > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
:not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value { :not(.@{ant-prefix}-input-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection-selected-value {
padding-right: 42px; padding-right: 42px;
} }
@ -201,6 +200,7 @@ form {
textarea.@{ant-prefix}-input { textarea.@{ant-prefix}-input {
height: auto; height: auto;
margin-bottom: 4px;
} }
// input[type=file] // input[type=file]
@ -208,8 +208,8 @@ form {
background: transparent; background: transparent;
} }
input[type="radio"], input[type='radio'],
input[type="checkbox"] { input[type='checkbox'] {
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
@ -416,7 +416,7 @@ form {
margin-top: -10px; margin-top: -10px;
text-align: center; text-align: center;
font-size: @form-feedback-icon-size; font-size: @form-feedback-icon-size;
animation: zoomIn .3s @ease-out-back; animation: zoomIn 0.3s @ease-out-back;
z-index: 1; z-index: 1;
& svg { & svg {
@ -449,6 +449,9 @@ form {
.@{ant-prefix}-select { .@{ant-prefix}-select {
&-selection { &-selection {
border-color: @warning-color; border-color: @warning-color;
&:hover {
border-color: @warning-color;
}
} }
&-open .@{ant-prefix}-select-selection, &-open .@{ant-prefix}-select-selection,
&-focused .@{ant-prefix}-select-selection { &-focused .@{ant-prefix}-select-selection {
@ -495,6 +498,9 @@ form {
.@{ant-prefix}-select { .@{ant-prefix}-select {
&-selection { &-selection {
border-color: @error-color; border-color: @error-color;
&:hover {
border-color: @error-color;
}
} }
&-open .@{ant-prefix}-select-selection, &-open .@{ant-prefix}-select-selection,
&-focused .@{ant-prefix}-select-selection { &-focused .@{ant-prefix}-select-selection {
@ -552,6 +558,25 @@ form {
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input { .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
.active(@error-color); .active(@error-color);
} }
// transfer
.@{ant-prefix}-transfer {
&-list {
border-color: @error-color;
&-search:not([disabled]) {
border-color: @input-border-color;
&:hover {
.hover();
}
&:focus {
.active();
}
}
}
}
} }
.is-validating { .is-validating {
@ -566,7 +591,8 @@ form {
margin-bottom: @form-item-margin-bottom; margin-bottom: @form-item-margin-bottom;
&-with-help { &-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - @form-help-margin-top; margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base -
@form-help-margin-top;
} }
} }
} }

36
components/form/style/mixin.less
View File

@ -1,4 +1,4 @@
@import "../../input/style/mixin"; @import '../../input/style/mixin';
.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) { .form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
.@{ant-prefix}-form-explain, .@{ant-prefix}-form-explain,
@ -25,6 +25,24 @@
.active(@border-color); .active(@border-color);
} }
// Input prefix
.@{ant-prefix}-input-affix-wrapper {
.@{ant-prefix}-input {
&,
&:hover {
border-color: @border-color;
}
&:focus {
.active(@border-color);
}
}
&:hover .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled) {
border-color: @border-color;
}
}
.@{ant-prefix}-input-prefix { .@{ant-prefix}-input-prefix {
color: @text-color; color: @text-color;
} }
@ -60,22 +78,22 @@
font-size: @font-size-base; font-size: @font-size-base;
} }
input[type="search"] { input[type='search'] {
box-sizing: border-box; box-sizing: border-box;
} }
// Position radios and checkboxes better // Position radios and checkboxes better
input[type="radio"], input[type='radio'],
input[type="checkbox"] { input[type='checkbox'] {
line-height: normal; line-height: normal;
} }
input[type="file"] { input[type='file'] {
display: block; display: block;
} }
// Make range inputs behave like textual form controls // Make range inputs behave like textual form controls
input[type="range"] { input[type='range'] {
display: block; display: block;
width: 100%; width: 100%;
} }
@ -87,9 +105,9 @@
} }
// Focus for file, radio, and checkbox // Focus for file, radio, and checkbox
input[type="file"]:focus, input[type='file']:focus,
input[type="radio"]:focus, input[type='radio']:focus,
input[type="checkbox"]:focus { input[type='checkbox']:focus {
outline: thin dotted; outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;

6
components/grid/style/index.less
View File

@ -1,6 +1,6 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "./mixin"; @import './mixin';
// Grid system // Grid system
.@{ant-prefix}-row { .@{ant-prefix}-row {

23
components/grid/style/mixin.less
View File

@ -1,4 +1,4 @@
@import "../../style/mixins/index"; @import '../../style/mixins/index';
// mixins for grid system // mixins for grid system
// ------------------------ // ------------------------
@ -12,12 +12,12 @@
.make-grid-columns() { .make-grid-columns() {
.col(@index) { .col(@index) {
@item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}"; @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
.col((@index + 1), @item); .col((@index + 1), @item);
} }
.col(@index, @list) when (@index =< @grid-columns) { .col(@index, @list) when (@index =< @grid-columns) {
@item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}"; @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
.col((@index + 1), ~"@{list}, @{item}"); .col((@index + 1), ~'@{list}, @{item}');
} }
.col(@index, @list) when (@index > @grid-columns) { .col(@index, @list) when (@index > @grid-columns) {
@{list} { @{list} {
@ -32,15 +32,18 @@
} }
.float-grid-columns(@class) { .float-grid-columns(@class) {
.col(@index) { // initial .col(@index) {
@item: ~".@{ant-prefix}-col@{class}-@{index}"; // initial
@item: ~'.@{ant-prefix}-col@{class}-@{index}';
.col((@index + 1), @item); .col((@index + 1), @item);
} }
.col(@index, @list) when (@index =< @grid-columns) { // general .col(@index, @list) when (@index =< @grid-columns) {
@item: ~".@{ant-prefix}-col@{class}-@{index}"; // general
.col((@index + 1), ~"@{list}, @{item}"); @item: ~'.@{ant-prefix}-col@{class}-@{index}';
.col((@index + 1), ~'@{list}, @{item}');
} }
.col(@index, @list) when (@index > @grid-columns) { // terminal .col(@index, @list) when (@index > @grid-columns) {
// terminal
@{list} { @{list} {
float: left; float: left;
flex: 0 0 auto; flex: 0 0 auto;

6
components/icon/style/index.less
View File

@ -1,4 +1,4 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@icon-prefix-cls: ~"@{ant-prefix}-icon"; @icon-prefix-cls: ~'@{ant-prefix}-icon';

8
components/input-number/style/index.less
View File

@ -1,8 +1,8 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../input/style/mixin"; @import '../../input/style/mixin';
@input-number-prefix-cls: ~"@{ant-prefix}-input-number"; @input-number-prefix-cls: ~'@{ant-prefix}-input-number';
.@{input-number-prefix-cls} { .@{input-number-prefix-cls} {
.reset-component; .reset-component;

12
components/input/style/index.less
View File

@ -1,6 +1,6 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "./mixin"; @import './mixin';
// Input styles // Input styles
.@{ant-prefix}-input { .@{ant-prefix}-input {
@ -11,7 +11,7 @@
//== Style for input-group: input with label, with button or dropdown... //== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group { .@{ant-prefix}-input-group {
.reset-component; .reset-component;
.input-group(~"@{ant-prefix}-input"); .input-group(~'@{ant-prefix}-input');
&-wrapper { &-wrapper {
display: inline-block; display: inline-block;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403 vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
@ -22,7 +22,7 @@
// Input with affix: prefix or suffix // Input with affix: prefix or suffix
.@{ant-prefix}-input-affix-wrapper { .@{ant-prefix}-input-affix-wrapper {
.reset-component; .reset-component;
.input-affix-wrapper(~"@{ant-prefix}-input"); .input-affix-wrapper(~'@{ant-prefix}-input');
// https://github.com/ant-design/ant-design/issues/6144 // https://github.com/ant-design/ant-design/issues/6144
.@{ant-prefix}-input { .@{ant-prefix}-input {
@ -30,4 +30,4 @@
} }
} }
@import "./search-input"; @import './search-input';

60
components/input/style/mixin.less
View File

@ -1,5 +1,5 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@input-affix-width: 19px; @input-affix-width: 19px;
@ -18,16 +18,16 @@
// input status // input status
// == when focus or actived // == when focus or actived
.active(@color: @outline-color) { .active(@color: @outline-color) {
border-color: ~`colorPalette("@{color}", 5)`; border-color: ~`colorPalette('@{color}', 5) `;
outline: 0; outline: 0;
box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%); box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
border-right-width: 1px !important; border-right-width: @border-width-base !important;
} }
// == when hoverd // == when hoverd
.hover(@color: @input-hover-border-color) { .hover(@color: @input-hover-border-color) {
border-color: ~`colorPalette("@{color}", 5)`; border-color: ~`colorPalette('@{color}', 5) `;
border-right-width: 1px !important; border-right-width: @border-width-base !important;
} }
.disabled() { .disabled() {
@ -55,7 +55,7 @@
border: @border-width-base @border-style-base @input-border-color; border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
.placeholder(); // Reset placeholder .placeholder(); // Reset placeholder
transition: all .3s; transition: all 0.3s;
&:hover { &:hover {
.hover(); .hover();
@ -74,7 +74,7 @@
max-width: 100%; // prevent textearea resize from coming out of its container max-width: 100%; // prevent textearea resize from coming out of its container
height: auto; height: auto;
vertical-align: bottom; vertical-align: bottom;
transition: all .3s, height 0s; transition: all 0.3s, height 0s;
min-height: @input-height-base; min-height: @input-height-base;
} }
@ -97,13 +97,13 @@
width: 100%; width: 100%;
// Undo padding and float of grid classes // Undo padding and float of grid classes
&[class*="col-"] { &[class*='col-'] {
float: none; float: none;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
> [class*="col-"] { > [class*='col-'] {
padding-right: 8px; padding-right: 8px;
&:last-child { &:last-child {
padding-right: 0; padding-right: 0;
@ -156,7 +156,7 @@
border: @border-width-base @border-style-base @input-border-color; border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
position: relative; position: relative;
transition: all .3s; transition: all 0.3s;
// Reset Select's style in addon // Reset Select's style in addon
.@{ant-prefix}-select { .@{ant-prefix}-select {
@ -181,7 +181,7 @@
// https://github.com/ant-design/ant-design/issues/3714 // https://github.com/ant-design/ant-design/issues/3714
> i:only-child:after { > i:only-child:after {
position: absolute; position: absolute;
content: ""; content: '';
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -267,28 +267,26 @@
&-wrap, &-wrap,
> .@{inputClass} { > .@{inputClass} {
&:not(:first-child):not(:last-child) { &:not(:first-child):not(:last-child) {
border-right-width: 1px; border-right-width: @border-width-base;
border-right-color: transparent;
&:hover { &:hover {
.hover(); z-index: 1;
} }
&:focus { &:focus {
.active(); z-index: 1;
} }
} }
} }
& > * { & > * {
border-radius: 0; border-radius: 0;
border-right-width: 0;
vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139 vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
float: none; float: none;
display: inline-block; display: inline-block;
} }
// https://github.com/ant-design/ant-design/issues/11863 & > *:not(:last-child) {
& > span:not(:last-child) > .@{inputClass} { border-right-width: @border-width-base;
border-right-width: 0; margin-right: -@border-width-base;
} }
// Undo float for .ant-input-group .ant-input // Undo float for .ant-input-group .ant-input
@ -304,13 +302,12 @@
& > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor, & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input { & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
border-radius: 0; border-radius: 0;
border-right-width: 1px; border-right-width: @border-width-base;
border-right-color: transparent;
&:hover { &:hover {
.hover(); z-index: 1;
} }
&:focus { &:focus {
.active(); z-index: 1;
} }
} }
@ -335,17 +332,7 @@
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input { & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
border-top-right-radius: @border-radius-base; border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base; border-bottom-right-radius: @border-radius-base;
border-right-width: 1px; border-right-width: @border-width-base;
border-right-color: @input-border-color;
&:hover {
.hover();
}
&:focus {
.active();
.@{ant-prefix}-cascader-input {
.active();
}
}
} }
// https://github.com/ant-design/ant-design/issues/12493 // https://github.com/ant-design/ant-design/issues/12493
@ -365,13 +352,14 @@
} }
.@{inputClass} { .@{inputClass} {
position: static; position: relative;
} }
.@{inputClass}-prefix, .@{inputClass}-prefix,
.@{inputClass}-suffix { .@{inputClass}-suffix {
position: absolute; position: absolute;
top: 50%; top: 50%;
z-index: 2;
transform: translateY(-50%); transform: translateY(-50%);
line-height: 0; line-height: 0;
color: @input-color; color: @input-color;

12
components/input/style/search-input.less
View File

@ -1,15 +1,15 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../button/style/mixin"; @import '../../button/style/mixin';
@import "./mixin"; @import './mixin';
@search-prefix: ~"@{ant-prefix}-input-search"; @search-prefix: ~'@{ant-prefix}-input-search';
.@{search-prefix} { .@{search-prefix} {
&-icon { &-icon {
color: @text-color-secondary; color: @text-color-secondary;
cursor: pointer; cursor: pointer;
transition: all .3s; transition: all 0.3s;
&:hover { &:hover {
color: #333; color: #333;
} }

12
components/layout/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@layout-prefix-cls: ~"@{ant-prefix}-layout"; @layout-prefix-cls: ~'@{ant-prefix}-layout';
.@{layout-prefix-cls} { .@{layout-prefix-cls} {
display: flex; display: flex;
@ -50,7 +50,7 @@
} }
&-sider { &-sider {
transition: all .2s; transition: all 0.2s;
position: relative; position: relative;
background: @layout-sider-background; background: @layout-sider-background;
@ -84,7 +84,7 @@
color: @layout-trigger-color; color: @layout-trigger-color;
background: @layout-trigger-background; background: @layout-trigger-background;
z-index: 1; z-index: 1;
transition: all .2s; transition: all 0.2s;
} }
&-zero-width { &-zero-width {
@ -105,7 +105,7 @@
font-size: @layout-zero-trigger-width / 2; font-size: @layout-zero-trigger-width / 2;
border-radius: 0 @border-radius-base @border-radius-base 0; border-radius: 0 @border-radius-base @border-radius-base 0;
cursor: pointer; cursor: pointer;
transition: background .3s ease; transition: background 0.3s ease;
&:hover { &:hover {
background: tint(@layout-sider-background, 10%); background: tint(@layout-sider-background, 10%);

8
components/list/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@list-prefix-cls: ~"@{ant-prefix}-list"; @list-prefix-cls: ~'@{ant-prefix}-list';
.@{list-prefix-cls} { .@{list-prefix-cls} {
.reset-component; .reset-component;
@ -53,7 +53,7 @@
line-height: 22px; line-height: 22px;
> a { > a {
color: @text-color; color: @text-color;
transition: all .3s; transition: all 0.3s;
&:hover { &:hover {
color: @primary-color; color: @primary-color;
} }

2
components/locale-provider/style/index.less
View File

@ -1,2 +1,2 @@
// placeholder // placeholder
@import "../../style/themes/default"; @import '../../style/themes/default';

6
components/menu/style/dark.less
View File

@ -5,8 +5,8 @@
color: @menu-dark-color; color: @menu-dark-color;
background: @menu-dark-bg; background: @menu-dark-bg;
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
opacity: .45; opacity: 0.45;
transition: all .3s; transition: all 0.3s;
&:after, &:after,
&:before { &:before {
background: @menu-dark-arrow-color; background: @menu-dark-arrow-color;
@ -20,7 +20,7 @@
&-dark &-inline&-sub { &-dark &-inline&-sub {
background: @menu-dark-submenu-bg; background: @menu-dark-submenu-bg;
box-shadow: 0 2px 8px rgba(0, 0, 0, .45) inset; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
} }
&-dark&-horizontal { &-dark&-horizontal {

60
components/menu/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@menu-prefix-cls: ~"@{ant-prefix}-menu"; @menu-prefix-cls: ~'@{ant-prefix}-menu';
// default theme // default theme
.@{menu-prefix-cls} { .@{menu-prefix-cls} {
@ -14,7 +14,7 @@
color: @menu-item-color; color: @menu-item-color;
background: @menu-bg; background: @menu-bg;
line-height: 0; // Fix display inline-block gap line-height: 0; // Fix display inline-block gap
transition: background .3s, width .2s; transition: background 0.3s, width 0.2s;
.clearfix; .clearfix;
ul, ul,
@ -33,12 +33,13 @@
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
padding: 8px 16px; padding: 8px 16px;
transition: all .3s; transition: all 0.3s;
} }
&-submenu, &-submenu,
&-submenu-inline { &-submenu-inline {
transition: border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out; transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
padding 0.15s @ease-in-out;
} }
&-item:active, &-item:active,
@ -48,7 +49,7 @@
&-submenu &-sub { &-submenu &-sub {
cursor: initial; cursor: initial;
transition: background .3s @ease-in-out, padding .3s @ease-in-out; transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
} }
&-item > a { &-item > a {
@ -67,7 +68,7 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
content: ""; content: '';
} }
} }
@ -153,14 +154,15 @@
position: relative; position: relative;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
transition: color .3s @ease-in-out, border-color .3s @ease-in-out, background .3s @ease-in-out, padding .15s @ease-in-out; transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
min-width: 14px; min-width: 14px;
margin-right: 10px; margin-right: 10px;
font-size: @font-size-base; font-size: @font-size-base;
transition: font-size .15s @ease-out, margin .3s @ease-in-out; transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
+ span { + span {
transition: opacity .3s @ease-in-out, width .3s @ease-in-out; transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
opacity: 1; opacity: 1;
} }
} }
@ -193,7 +195,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
content: ' '; content: ' ';
opacity: .0001; opacity: 0.0001;
} }
} }
@ -201,7 +203,7 @@
background-color: @menu-bg; background-color: @menu-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
&-submenu-title:after { &-submenu-title:after {
transition: transform .3s @ease-in-out; transition: transform 0.3s @ease-in-out;
} }
} }
@ -210,14 +212,14 @@
&-vertical-right, &-vertical-right,
&-inline { &-inline {
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
transition: transform .3s @ease-in-out; transition: transform 0.3s @ease-in-out;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 16px; right: 16px;
width: 10px; width: 10px;
&:before, &:before,
&:after { &:after {
content: ""; content: '';
position: absolute; position: absolute;
vertical-align: baseline; vertical-align: baseline;
background: #fff; background: #fff;
@ -225,7 +227,8 @@
width: 6px; width: 6px;
height: 1.5px; height: 1.5px;
border-radius: 2px; border-radius: 2px;
transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out; transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
top 0.3s @ease-in-out;
} }
&:before { &:before {
transform: rotate(45deg) translateY(-2px); transform: rotate(45deg) translateY(-2px);
@ -252,7 +255,9 @@
} }
&-open { &-open {
&.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { &.@{menu-prefix-cls}-submenu-inline
> .@{menu-prefix-cls}-submenu-title
.@{menu-prefix-cls}-submenu-arrow {
transform: translateY(-2px); transform: translateY(-2px);
&:after { &:after {
transform: rotate(-45deg) translateX(-2px); transform: rotate(-45deg) translateX(-2px);
@ -314,7 +319,7 @@
} }
&:after { &:after {
content: "\20"; content: '\20';
display: block; display: block;
height: 0; height: 0;
clear: both; clear: both;
@ -328,15 +333,15 @@
.@{menu-prefix-cls}-item { .@{menu-prefix-cls}-item {
position: relative; position: relative;
&:after { &:after {
content: ""; content: '';
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
border-right: @menu-item-active-border-width solid @menu-highlight-color; border-right: @menu-item-active-border-width solid @menu-highlight-color;
transform: scaleY(.0001); transform: scaleY(0.0001);
opacity: 0; opacity: 0;
transition: transform .15s @ease-out, opacity .15s @ease-out; transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
} }
} }
@ -373,7 +378,7 @@
.@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-selected,
.@{menu-prefix-cls}-item-selected { .@{menu-prefix-cls}-item-selected {
&:after { &:after {
transition: transform .15s @ease-in-out, opacity .15s @ease-in-out; transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
} }
@ -381,7 +386,7 @@
.@{menu-prefix-cls}-item, .@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title { .@{menu-prefix-cls}-submenu-title {
width: ~"calc(100% + 1px)"; width: ~'calc(100% + 1px)';
} }
.@{menu-prefix-cls}-submenu-title { .@{menu-prefix-cls}-submenu-title {
@ -392,8 +397,13 @@
&-inline-collapsed { &-inline-collapsed {
width: @menu-collapsed-width; width: @menu-collapsed-width;
> .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-item-group
> .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title, > .@{menu-prefix-cls}-item-group-list
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-item-group
> .@{menu-prefix-cls}-item-group-list
> .@{menu-prefix-cls}-submenu
> .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
left: 0; left: 0;
text-overflow: clip; text-overflow: clip;

8
components/message/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@message-prefix-cls: ~"@{ant-prefix}-message"; @message-prefix-cls: ~'@{ant-prefix}-message';
.@{message-prefix-cls} { .@{message-prefix-cls} {
.reset-component; .reset-component;
@ -56,7 +56,7 @@
&-notice.move-up-leave.move-up-leave-active { &-notice.move-up-leave.move-up-leave-active {
animation-name: MessageMoveOut; animation-name: MessageMoveOut;
overflow: hidden; overflow: hidden;
animation-duration: .3s; animation-duration: 0.3s;
} }
} }

4
components/modal/style/confirm.less
View File

@ -1,6 +1,6 @@
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@confirm-prefix-cls: ~"@{ant-prefix}-modal-confirm"; @confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
.@{confirm-prefix-cls} { .@{confirm-prefix-cls} {
.@{ant-prefix}-modal-header { .@{ant-prefix}-modal-header {

8
components/modal/style/index.less
View File

@ -1,4 +1,4 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "./modal"; @import './modal';
@import "./confirm"; @import './confirm';

10
components/modal/style/modal.less
View File

@ -1,5 +1,5 @@
@dialog-prefix-cls: ~"@{ant-prefix}-modal"; @dialog-prefix-cls: ~'@{ant-prefix}-modal';
@table-prefix-cls: ~"@{ant-prefix}-table"; @table-prefix-cls: ~'@{ant-prefix}-table';
.@{dialog-prefix-cls} { .@{dialog-prefix-cls} {
.reset-component; .reset-component;
@ -49,7 +49,7 @@
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
transition: color .3s; transition: color 0.3s;
color: @text-color-secondary; color: @text-color-secondary;
outline: 0; outline: 0;
padding: 0; padding: 0;
@ -117,7 +117,7 @@
background-color: @modal-mask-bg; background-color: @modal-mask-bg;
height: 100%; height: 100%;
z-index: @zindex-modal-mask; z-index: @zindex-modal-mask;
filter: ~"alpha(opacity=50)"; filter: ~'alpha(opacity=50)';
&-hidden { &-hidden {
display: none; display: none;
@ -132,7 +132,7 @@
.@{dialog-prefix-cls}-centered { .@{dialog-prefix-cls}-centered {
text-align: center; text-align: center;
&:before { &:before {
content: ""; content: '';
display: inline-block; display: inline-block;
height: 100%; height: 100%;
vertical-align: middle; vertical-align: middle;

12
components/notification/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@notification-prefix-cls: ~"@{ant-prefix}-notification"; @notification-prefix-cls: ~'@{ant-prefix}-notification';
@notification-width: 384px; @notification-width: 384px;
@notification-padding-vertical: 16px; @notification-padding-vertical: 16px;
@notification-padding-horizontal: 24px; @notification-padding-horizontal: 24px;
@ -14,7 +14,7 @@
position: fixed; position: fixed;
z-index: @zindex-notification; z-index: @zindex-notification;
width: @notification-width; width: @notification-width;
max-width: ~"calc(100vw - 32px)"; max-width: ~'calc(100vw - 32px)';
margin-right: 24px; margin-right: 24px;
&-topLeft, &-topLeft,
@ -52,13 +52,13 @@
// https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140 // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
&-single-line-auto-margin { &-single-line-auto-margin {
width: ~"calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)"; width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
background-color: transparent; background-color: transparent;
pointer-events: none; pointer-events: none;
display: block; display: block;
max-width: 4px; max-width: 4px;
&:before { &:before {
content: ""; content: '';
display: block; display: block;
} }
} }

22
components/pagination/style/index.less
View File

@ -1,8 +1,8 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../input/style/mixin"; @import '../../input/style/mixin';
@pagination-prefix-cls: ~"@{ant-prefix}-pagination"; @pagination-prefix-cls: ~'@{ant-prefix}-pagination';
.@{pagination-prefix-cls} { .@{pagination-prefix-cls} {
.reset-component; .reset-component;
@ -15,7 +15,7 @@
} }
&:after { &:after {
content: " "; content: ' ';
display: block; display: block;
height: 0; height: 0;
clear: both; clear: both;
@ -57,7 +57,7 @@
&:focus, &:focus,
&:hover { &:hover {
transition: all .3s; transition: all 0.3s;
border-color: @primary-color; border-color: @primary-color;
a { a {
color: @primary-color; color: @primary-color;
@ -95,7 +95,7 @@
color: @primary-color; color: @primary-color;
letter-spacing: -1px; letter-spacing: -1px;
opacity: 0; opacity: 0;
transition: all .2s; transition: all 0.2s;
&-svg { &-svg {
top: 0; top: 0;
right: 0; right: 0;
@ -112,7 +112,7 @@
color: @disabled-color; color: @disabled-color;
text-align: center; text-align: center;
opacity: 1; opacity: 1;
transition: all .2s; transition: all 0.2s;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -150,7 +150,7 @@
height: @pagination-item-size; height: @pagination-item-size;
line-height: @pagination-item-size; line-height: @pagination-item-size;
text-align: center; text-align: center;
transition: all .3s; transition: all 0.3s;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@ -174,7 +174,7 @@
border-radius: @border-radius-base; border-radius: @border-radius-base;
outline: none; outline: none;
display: block; display: block;
transition: all .3s; transition: all 0.3s;
font-size: 12px; font-size: 12px;
height: 100%; height: 100%;
text-align: center; text-align: center;
@ -260,7 +260,7 @@
padding: 0 6px; padding: 0 6px;
height: 100%; height: 100%;
text-align: center; text-align: center;
transition: border-color .3s; transition: border-color 0.3s;
&:hover { &:hover {
border-color: @primary-color; border-color: @primary-color;

9
components/popover/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@popover-prefix-cls: ~"@{ant-prefix}-popover"; @popover-prefix-cls: ~'@{ant-prefix}-popover';
.@{popover-prefix-cls} { .@{popover-prefix-cls} {
.reset-component; .reset-component;
@ -16,7 +16,7 @@
text-align: left; text-align: left;
&:after { &:after {
content: ""; content: '';
position: absolute; position: absolute;
background: rgba(255, 255, 255, 0.01); background: rgba(255, 255, 255, 0.01);
} }
@ -101,6 +101,7 @@
&-arrow { &-arrow {
background: @popover-bg; background: @popover-bg;
background-color: inherit;
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2); width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2); height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
transform: rotate(45deg); transform: rotate(45deg);

18
components/progress/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@progress-prefix-cls: ~"@{ant-prefix}-progress"; @progress-prefix-cls: ~'@{ant-prefix}-progress';
.@{progress-prefix-cls} { .@{progress-prefix-cls} {
.reset-component; .reset-component;
@ -24,8 +24,8 @@
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
.@{progress-prefix-cls}-show-info & { .@{progress-prefix-cls}-show-info & {
padding-right: ~"calc(2em + 8px)"; padding-right: ~'calc(2em + 8px)';
margin-right: ~"calc(-2em - 8px)"; margin-right: ~'calc(-2em - 8px)';
} }
} }
@ -44,13 +44,13 @@
&-circle-path { &-circle-path {
stroke: @progress-default-color; stroke: @progress-default-color;
animation: ~"@{ant-prefix}-progress-appear" .3s; animation: ~'@{ant-prefix}-progress-appear' 0.3s;
} }
&-success-bg, &-success-bg,
&-bg { &-bg {
background-color: @progress-default-color; background-color: @progress-default-color;
transition: all .4s @ease-out-circ 0s; transition: all 0.4s @ease-out-circ 0s;
position: relative; position: relative;
} }
@ -79,7 +79,7 @@
&-status-active { &-status-active {
.@{progress-prefix-cls}-bg:before { .@{progress-prefix-cls}-bg:before {
content: ""; content: '';
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 0; top: 0;
@ -88,7 +88,7 @@
bottom: 0; bottom: 0;
background: @component-background; background: @component-background;
border-radius: 10px; border-radius: 10px;
animation: ~"@{ant-prefix}-progress-active" 2.4s @ease-out-quint infinite; animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite;
} }
} }

25
components/radio/style/index.less
View File

@ -1,10 +1,10 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@radio-prefix-cls: ~"@{ant-prefix}-radio"; @radio-prefix-cls: ~'@{ant-prefix}-radio';
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group"; @radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner"; @radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
@radio-duration: .3s; @radio-duration: 0.3s;
.@{radio-group-prefix-cls} { .@{radio-group-prefix-cls} {
.reset-component; .reset-component;
@ -46,7 +46,7 @@
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: 1px solid @radio-dot-color; border: 1px solid @radio-dot-color;
content: ""; content: '';
animation: antRadioEffect 0.36s ease-in-out; animation: antRadioEffect 0.36s ease-in-out;
animation-fill-mode: both; animation-fill-mode: both;
visibility: hidden; visibility: hidden;
@ -105,7 +105,7 @@
.@{radio-inner-prefix-cls} { .@{radio-inner-prefix-cls} {
border-color: @radio-dot-color; border-color: @radio-dot-color;
&:after { &:after {
transform: scale(.875); transform: scale(0.875);
opacity: 1; opacity: 1;
transition: all @radio-duration @ease-in-out-circ; transition: all @radio-duration @ease-in-out-circ;
} }
@ -116,6 +116,7 @@
.@{radio-inner-prefix-cls} { .@{radio-inner-prefix-cls} {
border-color: @border-color-base !important; border-color: @border-color-base !important;
background-color: @input-disabled-bg; background-color: @input-disabled-bg;
cursor: not-allowed;
&:after { &:after {
background-color: #ccc; background-color: #ccc;
} }
@ -178,7 +179,7 @@ span.@{radio-prefix-cls} + * {
&:not(:first-child) { &:not(:first-child) {
&::before { &::before {
content: ""; content: '';
display: block; display: block;
top: 0; top: 0;
left: -1px; left: -1px;
@ -208,8 +209,8 @@ span.@{radio-prefix-cls} + * {
} }
.@{radio-prefix-cls}-inner, .@{radio-prefix-cls}-inner,
input[type="checkbox"], input[type='checkbox'],
input[type="radio"] { input[type='radio'] {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
@ -296,7 +297,7 @@ span.@{radio-prefix-cls} + * {
} }
// Firefox hack // Firefox hack
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) { @supports (-moz-appearance: meterbar) and (background-blend-mode: difference, normal) {
.@{radio-prefix-cls} { .@{radio-prefix-cls} {
vertical-align: text-bottom; vertical-align: text-bottom;
} }

10
components/rate/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@rate-prefix-cls: ~"@{ant-prefix}-rate"; @rate-prefix-cls: ~'@{ant-prefix}-rate';
.@{rate-prefix-cls} { .@{rate-prefix-cls} {
.reset-component; .reset-component;
@ -27,7 +27,7 @@
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
position: relative; position: relative;
transition: all .3s; transition: all 0.3s;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
@ -38,7 +38,7 @@
&-first, &-first,
&-second { &-second {
user-select: none; user-select: none;
transition: all .3s; transition: all 0.3s;
color: @rate-star-bg; color: @rate-star-bg;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
vertical-align: middle; vertical-align: middle;

26
components/select/style/index.less
View File

@ -1,8 +1,8 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../input/style/mixin"; @import '../../input/style/mixin';
@select-prefix-cls: ~"@{ant-prefix}-select"; @select-prefix-cls: ~'@{ant-prefix}-select';
.selection__clear() { .selection__clear() {
display: inline-block; display: inline-block;
@ -64,7 +64,7 @@
font-size: @font-size-sm; font-size: @font-size-sm;
& &-icon svg { & &-icon svg {
transition: transform .3s; transition: transform 0.3s;
} }
} }
@ -81,7 +81,7 @@
// strange align fix for chrome but works // strange align fix for chrome but works
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
border-top-width: @border-width-base + 0.02px; border-top-width: @border-width-base + 0.02px;
transition: all .3s @ease-in-out; transition: all 0.3s @ease-in-out;
&:hover { &:hover {
.hover; .hover;
@ -229,7 +229,8 @@
} }
&-selection__placeholder, &-selection__placeholder,
&-search__field__placeholder { // for TreeSelect compatibility &-search__field__placeholder {
// for TreeSelect compatibility
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
@ -313,7 +314,8 @@
} }
> ul > li, > ul > li,
.@{select-prefix-cls}-selection__rendered > ul > li { // for tree-select .@{select-prefix-cls}-selection__rendered > ul > li {
// for tree-select
margin-top: 3px; margin-top: 3px;
height: @input-height-base - 8px; height: @input-height-base - 8px;
line-height: @input-height-base - 8px - 2px; line-height: @input-height-base - 8px - 2px;
@ -330,7 +332,7 @@
max-width: 99%; max-width: 99%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: padding .3s @ease-in-out; transition: padding 0.3s @ease-in-out;
padding: 0 20px 0 10px; padding: 0 20px 0 10px;
&__disabled { &__disabled {
padding: 0 10px; padding: 0 10px;
@ -343,7 +345,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 100%; max-width: 100%;
transition: margin .3s @ease-in-out; transition: margin 0.3s @ease-in-out;
} }
.@{select-prefix-cls}-selection__choice__remove { .@{select-prefix-cls}-selection__choice__remove {
@ -353,7 +355,7 @@
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
transition: all .3s; transition: all 0.3s;
font-size: @font-size-sm; font-size: @font-size-sm;
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
position: absolute; position: absolute;
@ -405,7 +407,7 @@
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 1; z-index: 1;
transition: all .3s @ease-in-out, height 0s; transition: all 0.3s @ease-in-out, height 0s;
box-shadow: none; box-shadow: none;
} }
} }

21
components/skeleton/style/index.less
View File

@ -1,10 +1,10 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@skeleton-prefix-cls: ~"@{ant-prefix}-skeleton"; @skeleton-prefix-cls: ~'@{ant-prefix}-skeleton';
@skeleton-avatar-prefix-cls: ~"@{skeleton-prefix-cls}-avatar"; @skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar';
@skeleton-title-prefix-cls: ~"@{skeleton-prefix-cls}-title"; @skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title';
@skeleton-paragraph-prefix-cls: ~"@{skeleton-prefix-cls}-paragraph"; @skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph';
@skeleton-to-color: shade(@skeleton-color, 5%); @skeleton-to-color: shade(@skeleton-color, 5%);
@ -108,8 +108,13 @@
} }
.skeleton-color() { .skeleton-color() {
background: linear-gradient(90deg, @skeleton-color 25%, @skeleton-to-color 37%, @skeleton-color 63%); background: linear-gradient(
animation: ~"@{skeleton-prefix-cls}-loading" 1.4s ease infinite; 90deg,
@skeleton-color 25%,
@skeleton-to-color 37%,
@skeleton-color 63%
);
animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
background-size: 400% 100%; background-size: 400% 100%;
} }

12
components/slider/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@slider-prefix-cls: ~"@{ant-prefix}-slider"; @slider-prefix-cls: ~'@{ant-prefix}-slider';
.@{slider-prefix-cls} { .@{slider-prefix-cls} {
.reset-component; .reset-component;
@ -24,7 +24,7 @@
height: 4px; height: 4px;
border-radius: 2px; border-radius: 2px;
background-color: @slider-rail-background-color; background-color: @slider-rail-background-color;
transition: background-color .3s; transition: background-color 0.3s;
} }
&-track { &-track {
@ -45,7 +45,9 @@
border-radius: 50%; border-radius: 50%;
border: solid 2px @slider-handle-color; border: solid 2px @slider-handle-color;
background-color: @component-background; background-color: @component-background;
transition: border-color .3s, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); box-shadow: 0;
transition: border-color 0.3s, box-shadow 0.6s,
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
&:focus { &:focus {
border-color: @slider-handle-color-focus; border-color: @slider-handle-color-focus;

44
components/spin/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@spin-prefix-cls: ~"@{ant-prefix}-spin"; @spin-prefix-cls: ~'@{ant-prefix}-spin';
@spin-dot-default: @text-color-secondary; @spin-dot-default: @text-color-secondary;
.@{spin-prefix-cls} { .@{spin-prefix-cls} {
@ -26,7 +26,7 @@
display: block; display: block;
position: absolute; position: absolute;
height: 100%; height: 100%;
max-height: 360px; max-height: 400px;
width: 100%; width: 100%;
z-index: 4; z-index: 4;
.@{spin-prefix-cls}-dot { .@{spin-prefix-cls}-dot {
@ -74,8 +74,23 @@
&-container { &-container {
position: relative; position: relative;
transition: opacity .3s; transition: opacity 0.3s;
.clearfix;
&:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #fff;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
height: 100%;
width: 100%;
z-index: 10;
}
} }
&-blur { &-blur {
@ -83,23 +98,10 @@
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
opacity: 0.5; opacity: 0.5;
-webkit-filter: blur(0.5px);
filter: blur(0.5px);
/* autoprefixer: off */
filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)";
&:after { &:after {
content: ""; opacity: 0.4;
position: absolute; pointer-events: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #fff;
opacity: 0.3;
transition: all .3s;
z-index: 10;
} }
} }

22
components/steps/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@steps-prefix-cls: ~"@{ant-prefix}-steps"; @steps-prefix-cls: ~'@{ant-prefix}-steps';
@process-icon-color: @primary-color; @process-icon-color: @primary-color;
@process-title-color: @heading-color; @process-title-color: @heading-color;
@process-description-color: @text-color; @process-description-color: @text-color;
@ -65,7 +65,7 @@
border-radius: @steps-icon-size; border-radius: @steps-icon-size;
font-size: @font-size-lg; font-size: @font-size-lg;
margin-right: 8px; margin-right: 8px;
transition: background-color .3s, border-color .3s; transition: background-color 0.3s, border-color 0.3s;
font-family: @font-family; font-family: @font-family;
> .@{steps-prefix-cls}-icon { > .@{steps-prefix-cls}-icon {
@ -82,13 +82,13 @@
top: 12px; top: 12px;
padding: 0 10px; padding: 0 10px;
&:after { &:after {
content: ""; content: '';
display: inline-block; display: inline-block;
background: @border-color-split; background: @border-color-split;
height: 1px; height: 1px;
border-radius: 1px; border-radius: 1px;
width: 100%; width: 100%;
transition: background .3s; transition: background 0.3s;
} }
} }
&-title { &-title {
@ -99,7 +99,7 @@
position: relative; position: relative;
line-height: @steps-icon-size; line-height: @steps-icon-size;
&:after { &:after {
content: ""; content: '';
height: 1px; height: 1px;
width: 9999px; width: 9999px;
background: @wait-tail-color; background: @wait-tail-color;
@ -153,10 +153,10 @@
} }
.step-item-status(@status) { .step-item-status(@status) {
@icon-color: "@{status}-icon-color"; @icon-color: '@{status}-icon-color';
@title-color: "@{status}-title-color"; @title-color: '@{status}-title-color';
@description-color: "@{status}-description-color"; @description-color: '@{status}-description-color';
@tail-color: "@{status}-tail-color"; @tail-color: '@{status}-tail-color';
&-@{status} &-icon { &-@{status} &-icon {
border-color: @@icon-color; border-color: @@icon-color;
background-color: @steps-background; background-color: @steps-background;

8
components/steps/style/progress-dot.less
View File

@ -10,7 +10,7 @@
padding: 0; padding: 0;
&:after { &:after {
height: 3px; height: 3px;
width: ~"calc(100% - 20px)"; width: ~'calc(100% - 20px)';
margin-left: 12px; margin-left: 12px;
} }
} }
@ -31,11 +31,11 @@
height: 100%; height: 100%;
border-radius: 100px; border-radius: 100px;
position: relative; position: relative;
transition: all .3s; transition: all 0.3s;
/* expand hover area */ /* expand hover area */
&:after { &:after {
content: ""; content: '';
background: rgba(0, 0, 0, .001); background: rgba(0, 0, 0, 0.001);
width: 60px; width: 60px;
height: 32px; height: 32px;
position: absolute; position: absolute;

3
components/steps/style/small.less
View File

@ -1,5 +1,6 @@
.@{steps-prefix-cls}-small { .@{steps-prefix-cls}-small {
&.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) .@{steps-prefix-cls}-item { &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
.@{steps-prefix-cls}-item {
margin-right: 12px; margin-right: 12px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;

4
components/steps/style/vertical.less
View File

@ -37,7 +37,9 @@
display: block; display: block;
} }
> .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-content > .@{steps-prefix-cls}-item-title { > .@{steps-prefix-cls}-item
> .@{steps-prefix-cls}-item-content
> .@{steps-prefix-cls}-item-title {
&:after { &:after {
display: none; display: none;
} }

234
components/style/color/colors.less
View File

@ -1,146 +1,146 @@
@import 'colorPalette'; @import 'colorPalette';
// color palettes // color palettes
@blue-1: color(~`colorPalette("@{blue-6}", 1)`); @blue-1: color(~`colorPalette('@{blue-6}', 1) `);
@blue-2: color(~`colorPalette("@{blue-6}", 2)`); @blue-2: color(~`colorPalette('@{blue-6}', 2) `);
@blue-3: color(~`colorPalette("@{blue-6}", 3)`); @blue-3: color(~`colorPalette('@{blue-6}', 3) `);
@blue-4: color(~`colorPalette("@{blue-6}", 4)`); @blue-4: color(~`colorPalette('@{blue-6}', 4) `);
@blue-5: color(~`colorPalette("@{blue-6}", 5)`); @blue-5: color(~`colorPalette('@{blue-6}', 5) `);
@blue-6: #1890ff; @blue-6: #1890ff;
@blue-7: color(~`colorPalette("@{blue-6}", 7)`); @blue-7: color(~`colorPalette('@{blue-6}', 7) `);
@blue-8: color(~`colorPalette("@{blue-6}", 8)`); @blue-8: color(~`colorPalette('@{blue-6}', 8) `);
@blue-9: color(~`colorPalette("@{blue-6}", 9)`); @blue-9: color(~`colorPalette('@{blue-6}', 9) `);
@blue-10: color(~`colorPalette("@{blue-6}", 10)`); @blue-10: color(~`colorPalette('@{blue-6}', 10) `);
@purple-1: color(~`colorPalette("@{purple-6}", 1)`); @purple-1: color(~`colorPalette('@{purple-6}', 1) `);
@purple-2: color(~`colorPalette("@{purple-6}", 2)`); @purple-2: color(~`colorPalette('@{purple-6}', 2) `);
@purple-3: color(~`colorPalette("@{purple-6}", 3)`); @purple-3: color(~`colorPalette('@{purple-6}', 3) `);
@purple-4: color(~`colorPalette("@{purple-6}", 4)`); @purple-4: color(~`colorPalette('@{purple-6}', 4) `);
@purple-5: color(~`colorPalette("@{purple-6}", 5)`); @purple-5: color(~`colorPalette('@{purple-6}', 5) `);
@purple-6: #722ed1; @purple-6: #722ed1;
@purple-7: color(~`colorPalette("@{purple-6}", 7)`); @purple-7: color(~`colorPalette('@{purple-6}', 7) `);
@purple-8: color(~`colorPalette("@{purple-6}", 8)`); @purple-8: color(~`colorPalette('@{purple-6}', 8) `);
@purple-9: color(~`colorPalette("@{purple-6}", 9)`); @purple-9: color(~`colorPalette('@{purple-6}', 9) `);
@purple-10: color(~`colorPalette("@{purple-6}", 10)`); @purple-10: color(~`colorPalette('@{purple-6}', 10) `);
@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`); @cyan-1: color(~`colorPalette('@{cyan-6}', 1) `);
@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`); @cyan-2: color(~`colorPalette('@{cyan-6}', 2) `);
@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`); @cyan-3: color(~`colorPalette('@{cyan-6}', 3) `);
@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`); @cyan-4: color(~`colorPalette('@{cyan-6}', 4) `);
@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`); @cyan-5: color(~`colorPalette('@{cyan-6}', 5) `);
@cyan-6: #13c2c2; @cyan-6: #13c2c2;
@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`); @cyan-7: color(~`colorPalette('@{cyan-6}', 7) `);
@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`); @cyan-8: color(~`colorPalette('@{cyan-6}', 8) `);
@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`); @cyan-9: color(~`colorPalette('@{cyan-6}', 9) `);
@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`); @cyan-10: color(~`colorPalette('@{cyan-6}', 10) `);
@green-1: color(~`colorPalette("@{green-6}", 1)`); @green-1: color(~`colorPalette('@{green-6}', 1) `);
@green-2: color(~`colorPalette("@{green-6}", 2)`); @green-2: color(~`colorPalette('@{green-6}', 2) `);
@green-3: color(~`colorPalette("@{green-6}", 3)`); @green-3: color(~`colorPalette('@{green-6}', 3) `);
@green-4: color(~`colorPalette("@{green-6}", 4)`); @green-4: color(~`colorPalette('@{green-6}', 4) `);
@green-5: color(~`colorPalette("@{green-6}", 5)`); @green-5: color(~`colorPalette('@{green-6}', 5) `);
@green-6: #52c41a; @green-6: #52c41a;
@green-7: color(~`colorPalette("@{green-6}", 7)`); @green-7: color(~`colorPalette('@{green-6}', 7) `);
@green-8: color(~`colorPalette("@{green-6}", 8)`); @green-8: color(~`colorPalette('@{green-6}', 8) `);
@green-9: color(~`colorPalette("@{green-6}", 9)`); @green-9: color(~`colorPalette('@{green-6}', 9) `);
@green-10: color(~`colorPalette("@{green-6}", 10)`); @green-10: color(~`colorPalette('@{green-6}', 10) `);
@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`); @magenta-1: color(~`colorPalette('@{magenta-6}', 1) `);
@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`); @magenta-2: color(~`colorPalette('@{magenta-6}', 2) `);
@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`); @magenta-3: color(~`colorPalette('@{magenta-6}', 3) `);
@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`); @magenta-4: color(~`colorPalette('@{magenta-6}', 4) `);
@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`); @magenta-5: color(~`colorPalette('@{magenta-6}', 5) `);
@magenta-6: #eb2f96; @magenta-6: #eb2f96;
@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`); @magenta-7: color(~`colorPalette('@{magenta-6}', 7) `);
@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`); @magenta-8: color(~`colorPalette('@{magenta-6}', 8) `);
@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`); @magenta-9: color(~`colorPalette('@{magenta-6}', 9) `);
@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`); @magenta-10: color(~`colorPalette('@{magenta-6}', 10) `);
// alias of magenta // alias of magenta
@pink-1: color(~`colorPalette("@{pink-6}", 1)`); @pink-1: color(~`colorPalette('@{pink-6}', 1) `);
@pink-2: color(~`colorPalette("@{pink-6}", 2)`); @pink-2: color(~`colorPalette('@{pink-6}', 2) `);
@pink-3: color(~`colorPalette("@{pink-6}", 3)`); @pink-3: color(~`colorPalette('@{pink-6}', 3) `);
@pink-4: color(~`colorPalette("@{pink-6}", 4)`); @pink-4: color(~`colorPalette('@{pink-6}', 4) `);
@pink-5: color(~`colorPalette("@{pink-6}", 5)`); @pink-5: color(~`colorPalette('@{pink-6}', 5) `);
@pink-6: #eb2f96; @pink-6: #eb2f96;
@pink-7: color(~`colorPalette("@{pink-6}", 7)`); @pink-7: color(~`colorPalette('@{pink-6}', 7) `);
@pink-8: color(~`colorPalette("@{pink-6}", 8)`); @pink-8: color(~`colorPalette('@{pink-6}', 8) `);
@pink-9: color(~`colorPalette("@{pink-6}", 9)`); @pink-9: color(~`colorPalette('@{pink-6}', 9) `);
@pink-10: color(~`colorPalette("@{pink-6}", 10)`); @pink-10: color(~`colorPalette('@{pink-6}', 10) `);
@red-1: color(~`colorPalette("@{red-6}", 1)`); @red-1: color(~`colorPalette('@{red-6}', 1) `);
@red-2: color(~`colorPalette("@{red-6}", 2)`); @red-2: color(~`colorPalette('@{red-6}', 2) `);
@red-3: color(~`colorPalette("@{red-6}", 3)`); @red-3: color(~`colorPalette('@{red-6}', 3) `);
@red-4: color(~`colorPalette("@{red-6}", 4)`); @red-4: color(~`colorPalette('@{red-6}', 4) `);
@red-5: color(~`colorPalette("@{red-6}", 5)`); @red-5: color(~`colorPalette('@{red-6}', 5) `);
@red-6: #f5222d; @red-6: #f5222d;
@red-7: color(~`colorPalette("@{red-6}", 7)`); @red-7: color(~`colorPalette('@{red-6}', 7) `);
@red-8: color(~`colorPalette("@{red-6}", 8)`); @red-8: color(~`colorPalette('@{red-6}', 8) `);
@red-9: color(~`colorPalette("@{red-6}", 9)`); @red-9: color(~`colorPalette('@{red-6}', 9) `);
@red-10: color(~`colorPalette("@{red-6}", 10)`); @red-10: color(~`colorPalette('@{red-6}', 10) `);
@orange-1: color(~`colorPalette("@{orange-6}", 1)`); @orange-1: color(~`colorPalette('@{orange-6}', 1) `);
@orange-2: color(~`colorPalette("@{orange-6}", 2)`); @orange-2: color(~`colorPalette('@{orange-6}', 2) `);
@orange-3: color(~`colorPalette("@{orange-6}", 3)`); @orange-3: color(~`colorPalette('@{orange-6}', 3) `);
@orange-4: color(~`colorPalette("@{orange-6}", 4)`); @orange-4: color(~`colorPalette('@{orange-6}', 4) `);
@orange-5: color(~`colorPalette("@{orange-6}", 5)`); @orange-5: color(~`colorPalette('@{orange-6}', 5) `);
@orange-6: #fa8c16; @orange-6: #fa8c16;
@orange-7: color(~`colorPalette("@{orange-6}", 7)`); @orange-7: color(~`colorPalette('@{orange-6}', 7) `);
@orange-8: color(~`colorPalette("@{orange-6}", 8)`); @orange-8: color(~`colorPalette('@{orange-6}', 8) `);
@orange-9: color(~`colorPalette("@{orange-6}", 9)`); @orange-9: color(~`colorPalette('@{orange-6}', 9) `);
@orange-10: color(~`colorPalette("@{orange-6}", 10)`); @orange-10: color(~`colorPalette('@{orange-6}', 10) `);
@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`); @yellow-1: color(~`colorPalette('@{yellow-6}', 1) `);
@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`); @yellow-2: color(~`colorPalette('@{yellow-6}', 2) `);
@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`); @yellow-3: color(~`colorPalette('@{yellow-6}', 3) `);
@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`); @yellow-4: color(~`colorPalette('@{yellow-6}', 4) `);
@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`); @yellow-5: color(~`colorPalette('@{yellow-6}', 5) `);
@yellow-6: #fadb14; @yellow-6: #fadb14;
@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`); @yellow-7: color(~`colorPalette('@{yellow-6}', 7) `);
@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`); @yellow-8: color(~`colorPalette('@{yellow-6}', 8) `);
@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`); @yellow-9: color(~`colorPalette('@{yellow-6}', 9) `);
@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`); @yellow-10: color(~`colorPalette('@{yellow-6}', 10) `);
@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`); @volcano-1: color(~`colorPalette('@{volcano-6}', 1) `);
@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`); @volcano-2: color(~`colorPalette('@{volcano-6}', 2) `);
@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`); @volcano-3: color(~`colorPalette('@{volcano-6}', 3) `);
@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`); @volcano-4: color(~`colorPalette('@{volcano-6}', 4) `);
@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`); @volcano-5: color(~`colorPalette('@{volcano-6}', 5) `);
@volcano-6: #fa541c; @volcano-6: #fa541c;
@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`); @volcano-7: color(~`colorPalette('@{volcano-6}', 7) `);
@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`); @volcano-8: color(~`colorPalette('@{volcano-6}', 8) `);
@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`); @volcano-9: color(~`colorPalette('@{volcano-6}', 9) `);
@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`); @volcano-10: color(~`colorPalette('@{volcano-6}', 10) `);
@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`); @geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `);
@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`); @geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `);
@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`); @geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `);
@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`); @geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `);
@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`); @geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `);
@geekblue-6: #2f54eb; @geekblue-6: #2f54eb;
@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`); @geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `);
@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`); @geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `);
@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`); @geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `);
@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`); @geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `);
@lime-1: color(~`colorPalette("@{lime-6}", 1)`); @lime-1: color(~`colorPalette('@{lime-6}', 1) `);
@lime-2: color(~`colorPalette("@{lime-6}", 2)`); @lime-2: color(~`colorPalette('@{lime-6}', 2) `);
@lime-3: color(~`colorPalette("@{lime-6}", 3)`); @lime-3: color(~`colorPalette('@{lime-6}', 3) `);
@lime-4: color(~`colorPalette("@{lime-6}", 4)`); @lime-4: color(~`colorPalette('@{lime-6}', 4) `);
@lime-5: color(~`colorPalette("@{lime-6}", 5)`); @lime-5: color(~`colorPalette('@{lime-6}', 5) `);
@lime-6: #a0d911; @lime-6: #a0d911;
@lime-7: color(~`colorPalette("@{lime-6}", 7)`); @lime-7: color(~`colorPalette('@{lime-6}', 7) `);
@lime-8: color(~`colorPalette("@{lime-6}", 8)`); @lime-8: color(~`colorPalette('@{lime-6}', 8) `);
@lime-9: color(~`colorPalette("@{lime-6}", 9)`); @lime-9: color(~`colorPalette('@{lime-6}', 9) `);
@lime-10: color(~`colorPalette("@{lime-6}", 10)`); @lime-10: color(~`colorPalette('@{lime-6}', 10) `);
@gold-1: color(~`colorPalette("@{gold-6}", 1)`); @gold-1: color(~`colorPalette('@{gold-6}', 1) `);
@gold-2: color(~`colorPalette("@{gold-6}", 2)`); @gold-2: color(~`colorPalette('@{gold-6}', 2) `);
@gold-3: color(~`colorPalette("@{gold-6}", 3)`); @gold-3: color(~`colorPalette('@{gold-6}', 3) `);
@gold-4: color(~`colorPalette("@{gold-6}", 4)`); @gold-4: color(~`colorPalette('@{gold-6}', 4) `);
@gold-5: color(~`colorPalette("@{gold-6}", 5)`); @gold-5: color(~`colorPalette('@{gold-6}', 5) `);
@gold-6: #faad14; @gold-6: #faad14;
@gold-7: color(~`colorPalette("@{gold-6}", 7)`); @gold-7: color(~`colorPalette('@{gold-6}', 7) `);
@gold-8: color(~`colorPalette("@{gold-6}", 8)`); @gold-8: color(~`colorPalette('@{gold-6}', 8) `);
@gold-9: color(~`colorPalette("@{gold-6}", 9)`); @gold-9: color(~`colorPalette('@{gold-6}', 9) `);
@gold-10: color(~`colorPalette("@{gold-6}", 10)`); @gold-10: color(~`colorPalette('@{gold-6}', 10) `);

100
components/style/core/base.less
View File

@ -8,18 +8,20 @@
// Normalize is licensed MIT. https://github.com/necolas/normalize.css // Normalize is licensed MIT. https://github.com/necolas/normalize.css
@font-face { @font-face {
font-family: "Chinese Quote"; font-family: 'Chinese Quote';
src: local("PingFang SC"), local("SimSun"); src: local('PingFang SC'), local('SimSun');
unicode-range: U+2018, U+2019, U+201c, U+201d; unicode-range: U+2018, U+2019, U+201c, U+201d;
} }
// HTML & Body reset // HTML & Body reset
html, body { html,
body {
.square(100%); .square(100%);
} }
// 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 { input::-ms-clear,
input::-ms-reveal {
display: none; display: none;
} }
@ -49,10 +51,22 @@ html {
} }
// IE10+ doesn't honor `<meta name="viewport">` in some cases. // IE10+ doesn't honor `<meta name="viewport">` in some cases.
@-ms-viewport { width: device-width; } @-ms-viewport {
width: device-width;
}
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block; display: block;
} }
@ -65,7 +79,7 @@ body {
margin: 0; // 1 margin: 0; // 1
font-family: @font-family; font-family: @font-family;
font-size: @font-size-base; font-size: @font-size-base;
font-variant: tabular-nums; font-variant: @font-variant-base;
line-height: @line-height-base; line-height: @line-height-base;
color: @text-color; color: @text-color;
background-color: @body-background; // 2 background-color: @body-background; // 2
@ -76,7 +90,7 @@ body {
// might still respond to pointer events. // might still respond to pointer events.
// //
// Credit: https://github.com/suitcss/base // Credit: https://github.com/suitcss/base
[tabindex="-1"]:focus { [tabindex='-1']:focus {
outline: none !important; outline: none !important;
} }
@ -99,9 +113,14 @@ hr {
// //
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top // 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. // margin for easier control within type scales as it avoids margin collapsing.
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0; margin-top: 0;
margin-bottom: .5em; margin-bottom: 0.5em;
color: @heading-color; color: @heading-color;
font-weight: 500; font-weight: 500;
} }
@ -123,7 +142,8 @@ p {
// 4. Duplicate behavior to the data-* attribute for our tooltip plugin // 4. Duplicate behavior to the data-* attribute for our tooltip plugin
abbr[title], abbr[title],
abbr[data-original-title] { // 4 abbr[data-original-title] {
// 4
text-decoration: underline; // 2 text-decoration: underline; // 2
text-decoration: underline dotted; // 2 text-decoration: underline dotted; // 2
cursor: help; // 3 cursor: help; // 3
@ -136,9 +156,9 @@ address {
line-height: inherit; line-height: inherit;
} }
input[type="text"], input[type='text'],
input[type="password"], input[type='password'],
input[type="number"], input[type='number'],
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
} }
@ -162,7 +182,7 @@ dt {
} }
dd { dd {
margin-bottom: .5em; margin-bottom: 0.5em;
margin-left: 0; // Undo browser default margin-left: 0; // Undo browser default
} }
@ -196,8 +216,12 @@ sup {
vertical-align: baseline; vertical-align: baseline;
} }
sub { bottom: -.25em; } sub {
sup { top: -.5em; } bottom: -0.25em;
}
sup {
top: -0.5em;
}
// //
// Links // Links
@ -209,7 +233,7 @@ a {
text-decoration: @link-decoration; text-decoration: @link-decoration;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: color .3s; transition: color 0.3s;
-webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+. -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
&:focus { &:focus {
@ -293,8 +317,8 @@ svg:not(:root) {
a, a,
area, area,
button, button,
[role="button"], [role='button'],
input:not([type=range]), input:not([type='range']),
label, label,
select, select,
summary, summary,
@ -311,8 +335,8 @@ table {
} }
caption { caption {
padding-top: .75em; padding-top: 0.75em;
padding-bottom: .3em; padding-bottom: 0.3em;
color: @text-color-secondary; color: @text-color-secondary;
text-align: left; text-align: left;
caption-side: bottom; caption-side: bottom;
@ -362,23 +386,23 @@ html [type="button"], // 1
// remove inner border and padding from Firefox, but don't restore the outline like Normalize. // remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner, button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type='button']::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type='reset']::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type='submit']::-moz-focus-inner {
padding: 0; padding: 0;
border-style: none; border-style: none;
} }
input[type="radio"], input[type='radio'],
input[type="checkbox"] { input[type='checkbox'] {
box-sizing: border-box; // 1. Add the correct box sizing in IE 10- box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
padding: 0; // 2. remove the padding in IE 10- padding: 0; // 2. remove the padding in IE 10-
} }
input[type="date"], input[type='date'],
input[type="time"], input[type='time'],
input[type="datetime-local"], input[type='datetime-local'],
input[type="month"] { input[type='month'] {
// remove the default appearance of temporal inputs to avoid a Mobile Safari // remove the default appearance of temporal inputs to avoid a Mobile Safari
// bug where setting a custom line-height prevents text from being vertically // bug where setting a custom line-height prevents text from being vertically
// centered within the input. // centered within the input.
@ -413,7 +437,7 @@ legend {
width: 100%; width: 100%;
max-width: 100%; // 1 max-width: 100%; // 1
padding: 0; padding: 0;
margin-bottom: .5em; margin-bottom: 0.5em;
font-size: 1.5em; font-size: 1.5em;
line-height: inherit; line-height: inherit;
color: inherit; // 2 color: inherit; // 2
@ -425,12 +449,12 @@ progress {
} }
// Correct the cursor style of incement and decement buttons in Chrome. // Correct the cursor style of incement and decement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type='number']::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { [type='number']::-webkit-outer-spin-button {
height: auto; height: auto;
} }
[type="search"] { [type='search'] {
// This overrides the extra rounded corners on search inputs in iOS so that our // 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 // `.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 // be added to `.form-control` as it's not specific enough. For details, see
@ -443,8 +467,8 @@ progress {
// remove the inner padding and cancel buttons in Chrome and Safari on macOS. // remove the inner padding and cancel buttons in Chrome and Safari on macOS.
// //
[type="search"]::-webkit-search-cancel-button, [type='search']::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { [type='search']::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
@ -481,7 +505,7 @@ template {
} }
mark { mark {
padding: .2em; padding: 0.2em;
background-color: @yellow-1; background-color: @yellow-1;
} }

2
components/style/core/iconfont.less
View File

@ -1,5 +1,5 @@
@import '../themes/default'; @import '../themes/default';
@import "../mixins/iconfont"; @import '../mixins/iconfont';
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
.iconfont-mixin(); .iconfont-mixin();

8
components/style/core/index.less
View File

@ -1,4 +1,4 @@
@import "../mixins/index"; @import '../mixins/index';
@import "base"; @import 'base';
@import "iconfont"; @import 'iconfont';
@import "motion"; @import 'motion';

16
components/style/core/motion.less
View File

@ -1,15 +1,15 @@
@import "../mixins/motion"; @import '../mixins/motion';
@import "motion/fade"; @import 'motion/fade';
@import "motion/move"; @import 'motion/move';
@import "motion/other"; @import 'motion/other';
@import "motion/slide"; @import 'motion/slide';
@import "motion/swing"; @import 'motion/swing';
@import "motion/zoom"; @import 'motion/zoom';
// For common/openAnimation // For common/openAnimation
.ant-motion-collapse { .ant-motion-collapse {
overflow: hidden; overflow: hidden;
&-active { &-active {
transition: height .15s @ease-in-out, opacity .15s @ease-in-out !important; transition: height 0.15s @ease-in-out, opacity 0.15s @ease-in-out !important;
} }
} }

4
components/style/core/motion/other.less
View File

@ -11,7 +11,7 @@
[ant-click-animating-without-extra-node]:after, [ant-click-animating-without-extra-node]:after,
.ant-click-animating-node { .ant-click-animating-node {
content: ""; content: '';
position: absolute; position: absolute;
top: -1px; top: -1px;
left: -1px; left: -1px;
@ -20,7 +20,7 @@
border-radius: inherit; border-radius: inherit;
border: 0 solid @primary-color; border: 0 solid @primary-color;
opacity: 0.2; opacity: 0.2;
animation: fadeEffect 2s @ease-out-circ, waveEffect .4s @ease-out-circ; animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
animation-fill-mode: forwards; animation-fill-mode: forwards;
display: block; display: block;
pointer-events: none; pointer-events: none;

16
components/style/core/motion/slide.less
View File

@ -19,7 +19,7 @@
0% { 0% {
opacity: 0; opacity: 0;
transform-origin: 0% 0%; transform-origin: 0% 0%;
transform: scaleY(.8); transform: scaleY(0.8);
} }
100% { 100% {
opacity: 1; opacity: 1;
@ -37,7 +37,7 @@
100% { 100% {
opacity: 0; opacity: 0;
transform-origin: 0% 0%; transform-origin: 0% 0%;
transform: scaleY(.8); transform: scaleY(0.8);
} }
} }
@ -45,7 +45,7 @@
0% { 0% {
opacity: 0; opacity: 0;
transform-origin: 100% 100%; transform-origin: 100% 100%;
transform: scaleY(.8); transform: scaleY(0.8);
} }
100% { 100% {
opacity: 1; opacity: 1;
@ -63,7 +63,7 @@
100% { 100% {
opacity: 0; opacity: 0;
transform-origin: 100% 100%; transform-origin: 100% 100%;
transform: scaleY(.8); transform: scaleY(0.8);
} }
} }
@ -71,7 +71,7 @@
0% { 0% {
opacity: 0; opacity: 0;
transform-origin: 0% 0%; transform-origin: 0% 0%;
transform: scaleX(.8); transform: scaleX(0.8);
} }
100% { 100% {
opacity: 1; opacity: 1;
@ -89,7 +89,7 @@
100% { 100% {
opacity: 0; opacity: 0;
transform-origin: 0% 0%; transform-origin: 0% 0%;
transform: scaleX(.8); transform: scaleX(0.8);
} }
} }
@ -97,7 +97,7 @@
0% { 0% {
opacity: 0; opacity: 0;
transform-origin: 100% 0%; transform-origin: 100% 0%;
transform: scaleX(.8); transform: scaleX(0.8);
} }
100% { 100% {
opacity: 1; opacity: 1;
@ -115,6 +115,6 @@
100% { 100% {
opacity: 0; opacity: 0;
transform-origin: 100% 0%; transform-origin: 100% 0%;
transform: scaleX(.8); transform: scaleX(0.8);
} }
} }

2
components/style/core/motion/swing.less
View File

@ -6,7 +6,7 @@
} }
.@{className}-enter.@{className}-enter-active, .@{className}-enter.@{className}-enter-active,
.@{className}-appear.@{className}-appear-active { .@{className}-appear.@{className}-appear-active {
animation-name: ~"@{keyframeName}In"; animation-name: ~'@{keyframeName}In';
animation-play-state: running; animation-play-state: running;
} }
} }

20
components/style/core/motion/zoom.less
View File

@ -46,7 +46,7 @@
@keyframes antZoomBigIn { @keyframes antZoomBigIn {
0% { 0% {
opacity: 0; opacity: 0;
transform: scale(.8); transform: scale(0.8);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
@ -59,7 +59,7 @@
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(.8); transform: scale(0.8);
} }
} }
@ -67,7 +67,7 @@
0% { 0% {
opacity: 0; opacity: 0;
transform-origin: 50% 0%; transform-origin: 50% 0%;
transform: scale(.8); transform: scale(0.8);
} }
100% { 100% {
transform-origin: 50% 0%; transform-origin: 50% 0%;
@ -83,7 +83,7 @@
100% { 100% {
opacity: 0; opacity: 0;
transform-origin: 50% 0%; transform-origin: 50% 0%;
transform: scale(.8); transform: scale(0.8);
} }
} }
@ -91,7 +91,7 @@
0% { 0% {
opacity: 0; opacity: 0;
transform-origin: 0% 50%; transform-origin: 0% 50%;
transform: scale(.8); transform: scale(0.8);
} }
100% { 100% {
transform-origin: 0% 50%; transform-origin: 0% 50%;
@ -107,7 +107,7 @@
100% { 100% {
opacity: 0; opacity: 0;
transform-origin: 0% 50%; transform-origin: 0% 50%;
transform: scale(.8); transform: scale(0.8);
} }
} }
@ -115,7 +115,7 @@
0% { 0% {
opacity: 0; opacity: 0;
transform-origin: 100% 50%; transform-origin: 100% 50%;
transform: scale(.8); transform: scale(0.8);
} }
100% { 100% {
transform-origin: 100% 50%; transform-origin: 100% 50%;
@ -131,7 +131,7 @@
100% { 100% {
opacity: 0; opacity: 0;
transform-origin: 100% 50%; transform-origin: 100% 50%;
transform: scale(.8); transform: scale(0.8);
} }
} }
@ -139,7 +139,7 @@
0% { 0% {
opacity: 0; opacity: 0;
transform-origin: 50% 100%; transform-origin: 50% 100%;
transform: scale(.8); transform: scale(0.8);
} }
100% { 100% {
transform-origin: 50% 100%; transform-origin: 50% 100%;
@ -155,6 +155,6 @@
100% { 100% {
opacity: 0; opacity: 0;
transform-origin: 50% 100%; transform-origin: 50% 100%;
transform: scale(.8); transform: scale(0.8);
} }
} }

4
components/style/index.less
View File

@ -1,2 +1,2 @@
@import "./themes/default"; @import './themes/default';
@import "./core/index"; @import './core/index';

2
components/style/mixins/clearfix.less
View File

@ -4,7 +4,7 @@
zoom: 1; zoom: 1;
&:before, &:before,
&:after { &:after {
content: ""; content: '';
display: table; display: table;
} }
&:after { &:after {

2
components/style/mixins/iconfont.less
View File

@ -33,7 +33,7 @@
@font-scale: unit(@size / 12px); @font-scale: unit(@size / 12px);
font-size: 12px; font-size: 12px;
// IE9 // IE9
font-size: ~"@{size} \9"; font-size: ~'@{size} \9';
transform: scale(@font-scale) rotate(@rotate); transform: scale(@font-scale) rotate(@rotate);
:root & { :root & {
font-size: @font-size-sm; // reset IE9 and above font-size: @font-size-sm; // reset IE9 and above

12
components/style/mixins/index.less
View File

@ -1,8 +1,8 @@
// Mixins // Mixins
// -------------------------------------------------- // --------------------------------------------------
@import "size"; @import 'size';
@import "compatibility"; @import 'compatibility';
@import "clearfix"; @import 'clearfix';
@import "iconfont"; @import 'iconfont';
@import "motion"; @import 'motion';
@import "reset"; @import 'reset';

4
components/style/mixins/motion.less
View File

@ -22,11 +22,11 @@
} }
.@{className}-enter.@{className}-enter-active, .@{className}-enter.@{className}-enter-active,
.@{className}-appear.@{className}-appear-active { .@{className}-appear.@{className}-appear-active {
animation-name: ~"@{keyframeName}In"; animation-name: ~'@{keyframeName}In';
animation-play-state: running; animation-play-state: running;
} }
.@{className}-leave.@{className}-leave-active { .@{className}-leave.@{className}-leave-active {
animation-name: ~"@{keyframeName}Out"; animation-name: ~'@{keyframeName}Out';
animation-play-state: running; animation-play-state: running;
pointer-events: none; pointer-events: none;
} }

2
components/style/mixins/reset.less
View File

@ -3,7 +3,7 @@
.reset-component() { .reset-component() {
font-family: @font-family; font-family: @font-family;
font-size: @font-size-base; font-size: @font-size-base;
font-variant: tabular-nums; font-variant: @font-variant-base;
line-height: @line-height-base; line-height: @line-height-base;
color: @text-color; color: @text-color;
box-sizing: border-box; box-sizing: border-box;

70
components/style/themes/default.less
View File

@ -1,5 +1,5 @@
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
@import "../color/colors"; @import '../color/colors';
// The prefix to use on all css classes from ant. // The prefix to use on all css classes from ant.
@ant-prefix : ant; @ant-prefix : ant;
@ -16,16 +16,18 @@
// Color used by default to control hover and active backgrounds and for // Color used by default to control hover and active backgrounds and for
// alert info backgrounds. // alert info backgrounds.
@primary-1: color(~`colorPalette("@{primary-color}", 1)`); // replace tint(@primary-color, 90%) @primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette("@{primary-color}", 2)`); // replace tint(@primary-color, 80%) @primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette("@{primary-color}", 3)`); // unused @primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
@primary-4: color(~`colorPalette("@{primary-color}", 4)`); // unused @primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
@primary-5: color(~`colorPalette("@{primary-color}", 5)`); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) @primary-5: color(
~`colorPalette('@{primary-color}', 5) `
); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette("@{primary-color}", 7)`); // replace shade(@primary-color, 5%) @primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette("@{primary-color}", 8)`); // unused @primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
@primary-9: color(~`colorPalette("@{primary-color}", 9)`); // unused @primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
@primary-10: color(~`colorPalette("@{primary-color}", 10)`); // unused @primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
// Base Scaffolding Variables // Base Scaffolding Variables
// --- // ---
@ -239,9 +241,9 @@
@zindex-tooltip : 1060; @zindex-tooltip : 1060;
// Animation // Animation
@animation-duration-slow: .3s; // Modal @animation-duration-slow: 0.3s; // Modal
@animation-duration-base: .2s; @animation-duration-base: 0.2s;
@animation-duration-fast: .1s; // Tooltip @animation-duration-fast: 0.1s; // Tooltip
// Form // Form
// --- // ---
@ -280,7 +282,7 @@
//** Tooltip text color //** Tooltip text color
@tooltip-color: #fff; @tooltip-color: #fff;
//** Tooltip background color //** Tooltip background color
@tooltip-bg: rgba(0, 0, 0, .75); @tooltip-bg: rgba(0, 0, 0, 0.75);
//** Tooltip arrow width //** Tooltip arrow width
@tooltip-arrow-width: 5px; @tooltip-arrow-width: 5px;
//** Tooltip distance with trigger //** Tooltip distance with trigger
@ -348,12 +350,13 @@
@table-header-bg: @background-color-light; @table-header-bg: @background-color-light;
@table-header-color: @heading-color; @table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base; @table-header-sort-bg: @background-color-base;
@table-body-sort-bg: rgba(0, 0, 0, .01); @table-body-sort-bg: rgba(0, 0, 0, 0.01);
@table-row-hover-bg: @primary-1; @table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa; @table-selected-row-bg: #fafafa;
@table-expanded-row-bg: #fbfbfb; @table-expanded-row-bg: #fbfbfb;
@table-padding-vertical: 16px; @table-padding-vertical: 16px;
@table-padding-horizontal: 16px; @table-padding-horizontal: 16px;
@table-border-radius-base : @border-radius-base;
// Tag // Tag
// -- // --
@ -361,11 +364,6 @@
@tag-default-color: @text-color; @tag-default-color: @text-color;
@tag-font-size: @font-size-sm; @tag-font-size: @font-size-sm;
// Skeleton
// ---
@skeleton-color: #f2f2f2;
// TimePicker // TimePicker
// --- // ---
@time-picker-panel-column-width: 56px; @time-picker-panel-column-width: 56px;
@ -400,7 +398,7 @@
@card-padding-base: 24px; @card-padding-base: 24px;
@card-padding-wider: 32px; @card-padding-wider: 32px;
@card-actions-background: @background-color-light; @card-actions-background: @background-color-light;
@card-shadow: 0 2px 8px rgba(0, 0, 0, .09); @card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
// Comment // Comment
// --- // ---
@ -423,6 +421,8 @@
@tabs-bar-margin: 0 0 16px 0; @tabs-bar-margin: 0 0 16px 0;
@tabs-horizontal-margin: 0 32px 0 0; @tabs-horizontal-margin: 0 32px 0 0;
@tabs-horizontal-padding: 12px 16px; @tabs-horizontal-padding: 12px 16px;
@tabs-horizontal-padding-lg: 16px;
@tabs-horizontal-padding-sm: 8px 16px;
@tabs-vertical-padding: 8px 24px; @tabs-vertical-padding: 8px 24px;
@tabs-vertical-margin: 0 0 16px 0; @tabs-vertical-margin: 0 0 16px 0;
@tabs-scrolling-size: 32px; @tabs-scrolling-size: 32px;
@ -479,15 +479,15 @@
@slider-margin: 14px 6px 10px; @slider-margin: 14px 6px 10px;
@slider-rail-background-color: @background-color-base; @slider-rail-background-color: @background-color-base;
@slider-rail-background-color-hover: #e1e1e1; @slider-rail-background-color-hover: #e1e1e1;
@slider-track-background-color: @primary-3; @slider-track-background-color: @primary-5;
@slider-track-background-color-hover: @primary-4; @slider-track-background-color-hover: @primary-6;
@slider-handle-color: @primary-3; @slider-handle-color: @primary-5;
@slider-handle-color-hover: @primary-4; @slider-handle-color-hover: @primary-6;
@slider-handle-color-focus: tint(@primary-color, 20%); @slider-handle-color-focus: tint(@primary-color, 20%);
@slider-handle-color-focus-shadow: tint(@primary-color, 50%); @slider-handle-color-focus-shadow: fade(@primary-color, 20%);
@slider-handle-color-tooltip-open: @primary-color; @slider-handle-color-tooltip-open: @primary-color;
@slider-dot-border-color: @border-color-split; @slider-dot-border-color: @border-color-split;
@slider-dot-border-color-active: tint(@primary-color, 50%); @slider-dot-border-color-active: @primary-5;
@slider-disabled-color: @disabled-color; @slider-disabled-color: @disabled-color;
@slider-disabled-background-color: @component-background; @slider-disabled-background-color: @component-background;
@ -523,17 +523,17 @@
// Alert // Alert
// --- // ---
@alert-success-border-color: ~`colorPalette("@{success-color}", 3)`; @alert-success-border-color: ~`colorPalette('@{success-color}', 3) `;
@alert-success-bg-color: ~`colorPalette("@{success-color}", 1)`; @alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `;
@alert-success-icon-color: @success-color; @alert-success-icon-color: @success-color;
@alert-info-border-color: ~`colorPalette("@{info-color}", 3)`; @alert-info-border-color: ~`colorPalette('@{info-color}', 3) `;
@alert-info-bg-color: ~`colorPalette("@{info-color}", 1)`; @alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `;
@alert-info-icon-color: @info-color; @alert-info-icon-color: @info-color;
@alert-warning-border-color: ~`colorPalette("@{warning-color}", 3)`; @alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `;
@alert-warning-bg-color: ~`colorPalette("@{warning-color}", 1)`; @alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `;
@alert-warning-icon-color: @warning-color; @alert-warning-icon-color: @warning-color;
@alert-error-border-color: ~`colorPalette("@{error-color}", 3)`; @alert-error-border-color: ~`colorPalette('@{error-color}', 3) `;
@alert-error-bg-color: ~`colorPalette("@{error-color}", 1)`; @alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `;
@alert-error-icon-color: @error-color; @alert-error-icon-color: @error-color;
// List // List

39
components/style/v2-compatible-reset.less
View File

@ -3,7 +3,44 @@
// or // or
// @import '~antd/style/v2-compatible-reset.css'; // @import '~antd/style/v2-compatible-reset.css';
// unify the setting of elements's margin and padding for browsers // 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 { 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; margin: 0;
padding: 0; padding: 0;
} }

12
components/switch/style/index.less
View File

@ -1,8 +1,8 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@switch-prefix-cls: ~"@{ant-prefix}-switch"; @switch-prefix-cls: ~'@{ant-prefix}-switch';
@switch-duration: .36s; @switch-duration: 0.36s;
.@{switch-prefix-cls} { .@{switch-prefix-cls} {
.reset-component; .reset-component;
@ -37,13 +37,13 @@
top: 1px; top: 1px;
border-radius: 18px; border-radius: 18px;
background-color: @component-background; background-color: @component-background;
content: " "; content: ' ';
cursor: pointer; cursor: pointer;
transition: all @switch-duration @ease-in-out-circ; transition: all @switch-duration @ease-in-out-circ;
} }
&:after { &:after {
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, .2); box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
} }
&:active:before, &:active:before,

59
components/table/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@table-prefix-cls: ~"@{ant-prefix}-table"; @table-prefix-cls: ~'@{ant-prefix}-table';
@table-header-icon-color: #bfbfbf; @table-header-icon-color: #bfbfbf;
@table-header-sort-active-bg: darken(@table-header-bg, 3%); @table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%); @table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@ -16,7 +16,7 @@
clear: both; clear: both;
&-body { &-body {
transition: opacity .3s; transition: opacity 0.3s;
} }
&-empty &-body { &-empty &-body {
@ -27,12 +27,12 @@
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
text-align: left; text-align: left;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @table-border-radius-base @table-border-radius-base 0 0;
} }
&-thead > tr > th { &-thead > tr > th {
background: @table-header-bg; background: @table-header-bg;
transition: background .3s ease; transition: background 0.3s ease;
text-align: left; text-align: left;
color: @table-header-color; color: @table-header-color;
font-weight: 500; font-weight: 500;
@ -47,7 +47,7 @@
font-size: @font-size-sm; font-size: @font-size-sm;
cursor: pointer; cursor: pointer;
color: @table-header-icon-color; color: @table-header-icon-color;
transition: all .3s; transition: all 0.3s;
width: 28px; width: 28px;
position: absolute; position: absolute;
top: 0; top: 0;
@ -77,14 +77,14 @@
margin-top: -(@font-size-lg + 1px) / 2; margin-top: -(@font-size-lg + 1px) / 2;
text-align: center; text-align: center;
color: @table-header-icon-color; color: @table-header-icon-color;
transition: all .3s; transition: all 0.3s;
&-up, &-up,
&-down { &-down {
.iconfont-size-under-12px(11px); .iconfont-size-under-12px(11px);
line-height: 4px; line-height: 4px;
height: 4px; height: 4px;
transition: all .3s; transition: all 0.3s;
display: block; display: block;
&.on { &.on {
color: @primary-color; color: @primary-color;
@ -154,16 +154,16 @@
.@{table-prefix-cls}-column-sorters { .@{table-prefix-cls}-column-sorters {
&:before { &:before {
position: absolute; position: absolute;
content: ""; content: '';
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: transparent; background: transparent;
transition: all .3s; transition: all 0.3s;
} }
&:hover:before { &:hover:before {
background: rgba(0, 0, 0, .04); background: rgba(0, 0, 0, 0.04);
} }
} }
@ -178,11 +178,11 @@
&-thead > tr:first-child > th { &-thead > tr:first-child > th {
&:first-child { &:first-child {
border-top-left-radius: @border-radius-base; border-top-left-radius: @table-border-radius-base;
} }
&:last-child { &:last-child {
border-top-right-radius: @border-radius-base; border-top-right-radius: @table-border-radius-base;
} }
} }
@ -194,12 +194,12 @@
&-tbody > tr > td { &-tbody > tr > td {
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
transition: all .3s, border 0s; transition: all 0.3s, border 0s;
} }
&-thead > tr, &-thead > tr,
&-tbody > tr { &-tbody > tr {
transition: all .3s, height 0s; transition: all 0.3s, height 0s;
&.@{table-prefix-cls}-row-hover, &.@{table-prefix-cls}-row-hover,
&:hover { &:hover {
&:not(.@{table-prefix-cls}-expanded-row) > td { &:not(.@{table-prefix-cls}-expanded-row) > td {
@ -215,11 +215,11 @@
&-footer { &-footer {
padding: @table-padding-vertical @table-padding-horizontal; padding: @table-padding-vertical @table-padding-horizontal;
background: @table-header-bg; background: @table-header-bg;
border-radius: 0 0 @border-radius-base @border-radius-base; border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
position: relative; position: relative;
border-top: @border-width-base @border-style-base @border-color-split; border-top: @border-width-base @border-style-base @border-color-split;
&:before { &:before {
content: ""; content: '';
height: 1px; height: 1px;
background: @table-header-bg; background: @table-header-bg;
position: absolute; position: absolute;
@ -237,7 +237,7 @@
padding: @table-padding-vertical 0; padding: @table-padding-vertical 0;
position: relative; position: relative;
top: 1px; top: 1px;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @table-border-radius-base @table-border-radius-base 0 0;
} }
&.@{table-prefix-cls}-bordered &-title { &.@{table-prefix-cls}-bordered &-title {
@ -248,7 +248,7 @@
&-title + &-content { &-title + &-content {
position: relative; position: relative;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @table-border-radius-base @table-border-radius-base 0 0;
overflow: hidden; overflow: hidden;
.@{table-prefix-cls}-bordered & { .@{table-prefix-cls}-bordered & {
&, &,
@ -280,8 +280,6 @@
&-thead > tr > th, &-thead > tr > th,
&-tbody > tr > td { &-tbody > tr > td {
padding: @table-padding-vertical @table-padding-horizontal; padding: @table-padding-vertical @table-padding-horizontal;
word-break: break-word;
-ms-word-break: break-all;
} }
&-thead > tr > th.@{table-prefix-cls}-selection-column-custom { &-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
@ -313,7 +311,7 @@
} }
&-header table { &-header table {
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @table-border-radius-base @table-border-radius-base 0 0;
} }
&-loading { &-loading {
@ -410,6 +408,7 @@
background: @component-background; background: @component-background;
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: @box-shadow-base; box-shadow: @box-shadow-base;
position: relative;
.@{ant-prefix}-dropdown-menu { .@{ant-prefix}-dropdown-menu {
border: 0; border: 0;
@ -445,7 +444,9 @@
} }
> .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child, > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
> .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-submenu:last-child .@{ant-prefix}-dropdown-menu-submenu-title { > .@{ant-prefix}-dropdown-menu
> .@{ant-prefix}-dropdown-menu-submenu:last-child
.@{ant-prefix}-dropdown-menu-submenu-title {
border-radius: 0; border-radius: 0;
} }
@ -479,7 +480,7 @@
.@{iconfont-css-prefix}-down { .@{iconfont-css-prefix}-down {
color: @table-header-icon-color; color: @table-header-icon-color;
transition: all .3s; transition: all 0.3s;
} }
&-menu { &-menu {
@ -534,7 +535,7 @@
} }
} }
&[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span { &[class*='@{table-prefix-cls}-row-level-0'] .@{table-prefix-cls}-selection-column > span {
display: inline-block; display: inline-block;
} }
} }
@ -590,7 +591,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
overflow: hidden; overflow: hidden;
transition: box-shadow .3s ease; transition: box-shadow 0.3s ease;
border-radius: 0; border-radius: 0;
table { table {
width: auto; width: auto;
@ -619,7 +620,7 @@
} }
&, &,
table { table {
border-radius: @border-radius-base 0 0 0; border-radius: @table-border-radius-base 0 0 0;
} }
.ant-table-thead > tr > th:last-child { .ant-table-thead > tr > th:last-child {
border-top-right-radius: 0; border-top-right-radius: 0;
@ -631,7 +632,7 @@
box-shadow: -6px 0 6px -4px @shadow-color; box-shadow: -6px 0 6px -4px @shadow-color;
&, &,
table { table {
border-radius: 0 @border-radius-base 0 0; border-radius: 0 @table-border-radius-base 0 0;
} }
// hide expand row content in right-fixed Table // hide expand row content in right-fixed Table
// https://github.com/ant-design/ant-design/issues/1898 // https://github.com/ant-design/ant-design/issues/1898

32
components/table/style/size.less
View File

@ -15,8 +15,14 @@
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table, > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table, > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table, > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table, > .@{table-prefix-cls}-fixed-left
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table { > .@{table-prefix-cls}-body-outer
> .@{table-prefix-cls}-body-inner
> table,
> .@{table-prefix-cls}-fixed-right
> .@{table-prefix-cls}-body-outer
> .@{table-prefix-cls}-body-inner
> table {
> .@{table-prefix-cls}-thead > tr > th, > .@{table-prefix-cls}-thead > tr > th,
> .@{table-prefix-cls}-tbody > tr > td { > .@{table-prefix-cls}-tbody > tr > td {
padding: @table-padding-vertical-md @table-padding-horizontal-md; padding: @table-padding-vertical-md @table-padding-horizontal-md;
@ -31,7 +37,7 @@
.@{table-prefix-cls}-small { .@{table-prefix-cls}-small {
border: @border-width-base @border-style-base @border-color-split; border: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base; border-radius: @table-border-radius-base;
> .@{table-prefix-cls}-title, > .@{table-prefix-cls}-title,
> .@{table-prefix-cls}-footer { > .@{table-prefix-cls}-footer {
@ -54,8 +60,14 @@
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table, > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table, > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table, > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table, > .@{table-prefix-cls}-fixed-left
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table { > .@{table-prefix-cls}-body-outer
> .@{table-prefix-cls}-body-inner
> table,
> .@{table-prefix-cls}-fixed-right
> .@{table-prefix-cls}-body-outer
> .@{table-prefix-cls}-body-inner
> table {
border: 0; border: 0;
> .@{table-prefix-cls}-thead > tr > th, > .@{table-prefix-cls}-thead > tr > th,
> .@{table-prefix-cls}-tbody > tr > td { > .@{table-prefix-cls}-tbody > tr > td {
@ -74,8 +86,14 @@
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table, > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table, > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table, > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table, > .@{table-prefix-cls}-fixed-left
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table { > .@{table-prefix-cls}-body-outer
> .@{table-prefix-cls}-body-inner
> table,
> .@{table-prefix-cls}-fixed-right
> .@{table-prefix-cls}-body-outer
> .@{table-prefix-cls}-body-inner
> table {
padding: 0; padding: 0;
} }

20
components/tabs/style/index.less
View File

@ -158,12 +158,6 @@
clear: both; clear: both;
} }
.@{tab-prefix-cls}-tab-disabled {
pointer-events: none;
cursor: default;
color: @disabled-color;
}
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@ -191,20 +185,28 @@
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
margin-right: 8px; margin-right: 8px;
} }
&-disabled {
&,
&:hover {
cursor: not-allowed;
color: @disabled-color;
}
} }
.@{tab-prefix-cls}-tab-active { &-active {
color: @tabs-highlight-color; color: @tabs-highlight-color;
font-weight: 500; font-weight: 500;
} }
} }
}
.@{tab-prefix-cls}-large-bar { .@{tab-prefix-cls}-large-bar {
.@{tab-prefix-cls}-nav-container { .@{tab-prefix-cls}-nav-container {
font-size: @tabs-title-font-size-lg; font-size: @tabs-title-font-size-lg;
} }
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
padding: 16px; padding: @tabs-horizontal-padding-lg;
} }
} }
@ -213,7 +215,7 @@
font-size: @tabs-title-font-size-sm; font-size: @tabs-title-font-size-sm;
} }
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
padding: 8px 16px; padding: @tabs-horizontal-padding-sm;
} }
} }

27
components/tag/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@tag-prefix-cls: ~"@{ant-prefix}-tag"; @tag-prefix-cls: ~'@{ant-prefix}-tag';
.@{tag-prefix-cls} { .@{tag-prefix-cls} {
.reset-component; .reset-component;
@ -29,7 +29,7 @@
color: @tag-default-color; color: @tag-default-color;
} }
>a:first-child:last-child { > a:first-child:last-child {
display: inline-block; display: inline-block;
margin: 0 -8px; margin: 0 -8px;
padding: 0 8px; padding: 0 8px;
@ -39,7 +39,7 @@
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
cursor: pointer; cursor: pointer;
margin-left: 3px; margin-left: 3px;
transition: all .3s; transition: all 0.3s;
color: @text-color-secondary; color: @text-color-secondary;
font-weight: bold; font-weight: bold;
@ -85,24 +85,29 @@
&-zoom-enter, &-zoom-enter,
&-zoom-appear { &-zoom-appear {
animation: antFadeIn .2s @ease-in-out-circ; animation: antFadeIn 0.2s @ease-in-out-circ;
animation-fill-mode: both; animation-fill-mode: both;
} }
&-zoom-leave { &-zoom-leave {
animation: antZoomOut .3s @ease-in-out-circ; animation: antZoomOut 0.3s @ease-in-out-circ;
animation-fill-mode: both; animation-fill-mode: both;
} }
@colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple; &-hidden {
display: none;
}
@colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
purple;
// mixin to iterate over colors and create CSS class for each one // mixin to iterate over colors and create CSS class for each one
.make-color-classes(@i: length(@colors)) when (@i > 0) { .make-color-classes(@i: length(@colors)) when (@i > 0) {
.make-color-classes(@i - 1); .make-color-classes(@i - 1);
@color: extract(@colors, @i); @color: extract(@colors, @i);
@lightColor: "@{color}-1"; @lightColor: '@{color}-1';
@lightBorderColor: "@{color}-3"; @lightBorderColor: '@{color}-3';
@darkColor: "@{color}-6"; @darkColor: '@{color}-6';
&-@{color} { &-@{color} {
color: @@darkColor; color: @@darkColor;
background: @@lightColor; background: @@lightColor;

14
components/time-picker/style/index.less
View File

@ -1,8 +1,8 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../input/style/mixin"; @import '../../input/style/mixin';
@timepicker-prefix-cls: ~"@{ant-prefix}-time-picker"; @timepicker-prefix-cls: ~'@{ant-prefix}-time-picker';
@timepicker-item-height: 32px; @timepicker-item-height: 32px;
.@{timepicker-prefix-cls}-panel { .@{timepicker-prefix-cls}-panel {
@ -44,7 +44,7 @@
} }
&-invalid { &-invalid {
border-color: red; border-color: @error-color;
} }
} }
@ -191,7 +191,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
outline: none; outline: none;
transition: opacity .3s; transition: opacity 0.3s;
width: 128px; width: 128px;
&-input { &-input {
@ -208,7 +208,7 @@
&-icon { &-icon {
position: absolute; position: absolute;
user-select: none; user-select: none;
transition: all .3s @ease-in-out; transition: all 0.3s @ease-in-out;
width: 14px; width: 14px;
height: 14px; height: 14px;
line-height: 14px; line-height: 14px;

7
components/timeline/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@timeline-prefix-cls: ~"@{ant-prefix}-timeline"; @timeline-prefix-cls: ~'@{ant-prefix}-timeline';
@timeline-color: @border-color-split; @timeline-color: @border-color-split;
.@{timeline-prefix-cls} { .@{timeline-prefix-cls} {
@ -89,7 +89,6 @@
&.@{timeline-prefix-cls}-alternate, &.@{timeline-prefix-cls}-alternate,
&.@{timeline-prefix-cls}-right { &.@{timeline-prefix-cls}-right {
.@{timeline-prefix-cls}-item { .@{timeline-prefix-cls}-item {
&-tail, &-tail,
&-head, &-head,
&-head-custom { &-head-custom {

6
components/tooltip/style/index.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@tooltip-prefix-cls: ~"@{ant-prefix}-tooltip"; @tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
// Base class // Base class
.@{tooltip-prefix-cls} { .@{tooltip-prefix-cls} {

17
components/transfer/style/index.less
View File

@ -1,8 +1,8 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../checkbox/style/mixin"; @import '../../checkbox/style/mixin';
@transfer-prefix-cls: ~"@{ant-prefix}-transfer"; @transfer-prefix-cls: ~'@{ant-prefix}-transfer';
.@{transfer-prefix-cls} { .@{transfer-prefix-cls} {
.reset-component; .reset-component;
@ -40,7 +40,7 @@
line-height: @input-height-base; line-height: @input-height-base;
text-align: center; text-align: center;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
transition: all .3s; transition: all 0.3s;
color: @disabled-color; color: @disabled-color;
&:hover { &:hover {
color: @text-color-secondary; color: @text-color-secondary;
@ -104,7 +104,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
padding: 6px @control-padding-horizontal; padding: 6px @control-padding-horizontal;
min-height: 32px; min-height: 32px;
transition: all .3s; transition: all 0.3s;
> span { > span {
padding-right: 0; padding-right: 0;
} }
@ -125,17 +125,12 @@
padding-top: 0; padding-top: 0;
color: @disabled-color; color: @disabled-color;
text-align: center; text-align: center;
display: none;
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 100%; width: 100%;
margin-top: -10px; margin-top: -10px;
} }
&-content:empty + &-body-not-found {
display: block;
}
&-footer { &-footer {
border-top: @border-width-base @border-style-base @border-color-split; border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base; border-radius: 0 0 @border-radius-base @border-radius-base;

20
components/tree-select/style/index.less
View File

@ -1,12 +1,12 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../tree/style/mixin"; @import '../../tree/style/mixin';
@import "../../checkbox/style/mixin"; @import '../../checkbox/style/mixin';
@select-prefix-cls: ~"@{ant-prefix}-select"; @select-prefix-cls: ~'@{ant-prefix}-select';
@select-tree-prefix-cls: ~"@{ant-prefix}-select-tree"; @select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-select-tree-checkbox"); .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-select-tree-checkbox');
.@{select-tree-prefix-cls} { .@{select-tree-prefix-cls} {
.reset-component; .reset-component;
@ -36,8 +36,8 @@
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: @text-color; color: @text-color;
transition: all .3s; transition: all 0.3s;
width: ~"calc(100% - 24px)"; width: ~'calc(100% - 24px)';
&:hover { &:hover {
background-color: @item-hover-bg; background-color: @item-hover-bg;
} }
@ -49,7 +49,7 @@
&.@{select-tree-prefix-cls}-checkbox { &.@{select-tree-prefix-cls}-checkbox {
margin: 0 4px 0 0; margin: 0 4px 0 0;
+ .@{select-tree-prefix-cls}-node-content-wrapper { + .@{select-tree-prefix-cls}-node-content-wrapper {
width: ~"calc(100% - 46px)"; width: ~'calc(100% - 46px)';
} }
} }
&.@{select-tree-prefix-cls}-switcher, &.@{select-tree-prefix-cls}-switcher,

8
components/tree/style/directory.less
View File

@ -1,6 +1,6 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@tree-prefix-cls: ~"@{ant-prefix}-tree"; @tree-prefix-cls: ~'@{ant-prefix}-tree';
.@{tree-prefix-cls} { .@{tree-prefix-cls} {
&.@{tree-prefix-cls}-directory { &.@{tree-prefix-cls}-directory {
@ -42,12 +42,12 @@
} }
&:before { &:before {
content: ""; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
height: @tree-title-height; height: @tree-title-height;
transition: all .3s; transition: all 0.3s;
} }
> span { > span {

27
components/tree/style/index.less
View File

@ -1,20 +1,21 @@
@import "../../style/themes/default"; @import '../../style/themes/default';
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@import "../../checkbox/style/mixin"; @import '../../checkbox/style/mixin';
@import "./mixin"; @import './mixin';
@import "./directory"; @import './directory';
@tree-prefix-cls: ~"@{ant-prefix}-tree"; @tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-showline-icon-color: @text-color-secondary; @tree-showline-icon-color: @text-color-secondary;
.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-tree-checkbox"); .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');
.@{tree-prefix-cls} { .@{tree-prefix-cls} {
.reset-component; .reset-component;
margin: 0; margin: 0;
padding: 0; padding: 0;
ol, ul { ol,
ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -27,7 +28,7 @@
white-space: nowrap; white-space: nowrap;
outline: 0; outline: 0;
span[draggable], span[draggable],
span[draggable="true"] { span[draggable='true'] {
user-select: none; user-select: none;
border-top: 2px transparent solid; border-top: 2px transparent solid;
border-bottom: 2px transparent solid; border-bottom: 2px transparent solid;
@ -107,7 +108,7 @@
text-decoration: none; text-decoration: none;
vertical-align: top; vertical-align: top;
color: @text-color; color: @text-color;
transition: all .3s; transition: all 0.3s;
height: @tree-title-height; height: @tree-title-height;
line-height: @tree-title-height; line-height: @tree-title-height;
&:hover { &:hover {
@ -206,13 +207,13 @@
background: @component-background; background: @component-background;
color: @tree-showline-icon-color; color: @tree-showline-icon-color;
&.@{tree-prefix-cls}-switcher-noop { &.@{tree-prefix-cls}-switcher-noop {
.antTreeShowLineIcon("tree-doc-icon"); .antTreeShowLineIcon('tree-doc-icon');
} }
&.@{tree-prefix-cls}-switcher_open { &.@{tree-prefix-cls}-switcher_open {
.antTreeShowLineIcon("tree-showline-open-icon"); .antTreeShowLineIcon('tree-showline-open-icon');
} }
&.@{tree-prefix-cls}-switcher_close { &.@{tree-prefix-cls}-switcher_close {
.antTreeShowLineIcon("tree-showline-close-icon"); .antTreeShowLineIcon('tree-showline-close-icon');
} }
} }
} }

12
components/tree/style/mixin.less
View File

@ -1,16 +1,16 @@
@import "../../style/mixins/index"; @import '../../style/mixins/index';
@tree-prefix-cls: ~"@{ant-prefix}-tree"; @tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-select-prefix-cls: ~"@{ant-prefix}-select"; @tree-select-prefix-cls: ~'@{ant-prefix}-select';
.antTreeSwitcherIcon(@type: "tree-default-open-icon") { .antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
.@{tree-prefix-cls}-switcher-icon, .@{tree-prefix-cls}-switcher-icon,
.@{tree-select-prefix-cls}-switcher-icon { .@{tree-select-prefix-cls}-switcher-icon {
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
svg { svg {
transition: transform .3s; transition: transform 0.3s;
} }
} }
} }
@ -22,7 +22,7 @@
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
svg { svg {
transition: transform .3s; transition: transform 0.3s;
} }
} }
} }

4
scripts/syncStyleFromAntd.js
View File

@ -6,7 +6,7 @@ const path = require('path')
const owner = 'ant-design' const owner = 'ant-design'
const repo = 'ant-design' const repo = 'ant-design'
const tag = '3.10.9' const tag = '3.11.6'
const clientId = '5f6ccfdc4cdc69f8ba12' const clientId = '5f6ccfdc4cdc69f8ba12'
const clientSecret = process.env.CLIENT_SECRET const clientSecret = process.env.CLIENT_SECRET
@ -15,7 +15,7 @@ const github = new GitHub()
async function syncFiles (data = []) { async function syncFiles (data = []) {
for (const item of data) { for (const item of data) {
try { try {
const { data: itemData } = await github.repos.getContent({ const { data: itemData } = await github.repos.getContents({
owner, owner,
repo, repo,
path: `${item.path}`, path: `${item.path}`,