From 14dfebab0baaa495be9a24295fb40095322cf2a2 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 2 Jan 2019 21:01:56 +0800 Subject: [PATCH] feat: update style to 3.11.6 --- components/affix/style/index.less | 2 +- components/alert/style/index.less | 19 +- components/anchor/style/index.less | 8 +- components/auto-complete/style/index.less | 12 +- components/avatar/style/index.less | 10 +- components/back-top/style/index.less | 13 +- components/badge/style/index.less | 23 +- components/breadcrumb/style/index.less | 8 +- components/button/style/index.less | 22 +- components/button/style/mixin.less | 32 +- components/calendar/style/index.less | 12 +- components/card/style/index.less | 53 +- components/carousel/style/index.less | 14 +- components/cascader/style/index.less | 12 +- components/checkbox/style/index.less | 4 +- components/checkbox/style/mixin.less | 14 +- components/collapse/style/index.less | 12 +- components/comment/style/index.js | 4 +- components/date-picker/style/Calendar.less | 10 +- components/date-picker/style/DecadePanel.less | 4 +- components/date-picker/style/MonthPanel.less | 7 +- components/date-picker/style/Picker.less | 6 +- components/date-picker/style/RangePicker.less | 4 +- components/date-picker/style/TimePicker.less | 2 +- components/date-picker/style/WeekPicker.less | 2 +- components/date-picker/style/YearPanel.less | 7 +- components/date-picker/style/index.less | 30 +- components/divider/style/index.less | 8 +- components/drawer/style/drawer.less | 6 +- components/drawer/style/index.less | 6 +- components/dropdown/style/index.less | 29 +- components/form/style/index.less | 80 ++- components/form/style/mixin.less | 36 +- components/grid/style/index.less | 6 +- components/grid/style/mixin.less | 23 +- components/icon/style/index.less | 6 +- components/input-number/style/index.less | 8 +- components/input/style/index.less | 14 +- components/input/style/mixin.less | 60 +-- components/input/style/search-input.less | 12 +- components/layout/style/index.less | 12 +- components/list/style/index.less | 8 +- components/locale-provider/style/index.less | 2 +- components/menu/style/dark.less | 6 +- components/menu/style/index.less | 60 ++- components/message/style/index.less | 8 +- components/modal/style/confirm.less | 4 +- components/modal/style/index.less | 8 +- components/modal/style/modal.less | 10 +- components/notification/style/index.less | 12 +- components/pagination/style/index.less | 22 +- components/popover/style/index.less | 55 +- components/progress/style/index.less | 18 +- components/radio/style/index.less | 25 +- components/rate/style/index.less | 10 +- components/select/style/index.less | 26 +- components/skeleton/style/index.less | 21 +- components/slider/style/index.less | 12 +- components/spin/style/index.less | 44 +- components/steps/style/index.less | 22 +- components/steps/style/progress-dot.less | 8 +- components/steps/style/small.less | 3 +- components/steps/style/vertical.less | 4 +- components/style/color/colors.less | 234 ++++----- components/style/core/base.less | 100 ++-- components/style/core/iconfont.less | 4 +- components/style/core/index.less | 8 +- components/style/core/motion.less | 16 +- components/style/core/motion/other.less | 4 +- components/style/core/motion/slide.less | 16 +- components/style/core/motion/swing.less | 2 +- components/style/core/motion/zoom.less | 20 +- components/style/index.less | 4 +- components/style/mixins/clearfix.less | 2 +- components/style/mixins/iconfont.less | 2 +- components/style/mixins/index.less | 12 +- components/style/mixins/motion.less | 4 +- components/style/mixins/reset.less | 2 +- components/style/themes/default.less | 470 +++++++++--------- components/style/v2-compatible-reset.less | 39 +- components/switch/style/index.less | 12 +- components/table/style/index.less | 59 +-- components/table/style/size.less | 32 +- components/tabs/style/card-style.less | 2 +- components/tabs/style/index.less | 28 +- components/tag/style/index.less | 27 +- components/time-picker/style/index.less | 14 +- components/timeline/style/index.less | 7 +- components/tooltip/style/index.less | 6 +- components/transfer/style/index.less | 17 +- components/tree-select/style/index.less | 52 +- components/tree/style/directory.less | 8 +- components/tree/style/index.less | 27 +- components/tree/style/mixin.less | 12 +- components/upload/style/index.less | 2 +- scripts/syncStyleFromAntd.js | 4 +- 96 files changed, 1241 insertions(+), 1047 deletions(-) diff --git a/components/affix/style/index.less b/components/affix/style/index.less index cd61d1ed0..9f19860e5 100644 --- a/components/affix/style/index.less +++ b/components/affix/style/index.less @@ -1,4 +1,4 @@ -@import "../../style/themes/default"; +@import '../../style/themes/default'; .@{ant-prefix}-affix { position: fixed; diff --git a/components/alert/style/index.less b/components/alert/style/index.less index a876d6921..180e9cf2f 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -1,11 +1,12 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@alert-prefix-cls: ~"@{ant-prefix}-alert"; +@alert-prefix-cls: ~'@{ant-prefix}-alert'; @alert-message-color: @heading-color; @alert-text-color: @text-color; @alert-close-color: @text-color-secondary; +@alert-close-hover-color: #404040; .@{alert-prefix-cls} { .reset-component; @@ -17,6 +18,10 @@ padding: 8px 15px; } + &&-closable { + padding-right: 30px; + } + &-icon { top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2; left: 16px; @@ -72,9 +77,9 @@ .@{iconfont-css-prefix}-close { color: @alert-close-color; - transition: color .3s; + transition: color 0.3s; &:hover { - color: #404040; + color: @alert-close-hover-color; } } } @@ -127,12 +132,12 @@ margin: 0; padding-top: 0; padding-bottom: 0; - transition: all .3s @ease-in-out-circ; + transition: all 0.3s @ease-in-out-circ; transform-origin: 50% 0; } &-slide-up-leave { - animation: antAlertSlideUpOut .3s @ease-in-out-circ; + animation: antAlertSlideUpOut 0.3s @ease-in-out-circ; animation-fill-mode: both; } diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 3a5ddec9a..ec2386b82 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -1,5 +1,5 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; @anchor-border-width: 2px; @@ -38,7 +38,7 @@ border: 2px solid @primary-color; background-color: @component-background; left: 50%; - transition: top .3s ease-in-out; + transition: top 0.3s ease-in-out; transform: translateX(-50%); &.visible { display: inline-block; @@ -57,7 +57,7 @@ &-title { display: block; position: relative; - transition: all .3s; + transition: all 0.3s; color: @text-color; white-space: nowrap; overflow: hidden; diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less index 74e45c21c..4c9dc25e3 100644 --- a/components/auto-complete/style/index.less +++ b/components/auto-complete/style/index.less @@ -1,10 +1,10 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../input/style/mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../input/style/mixin'; -@input-prefix-cls: ~"@{ant-prefix}-input"; -@select-prefix-cls: ~"@{ant-prefix}-select"; -@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete"; +@input-prefix-cls: ~'@{ant-prefix}-input'; +@select-prefix-cls: ~'@{ant-prefix}-select'; +@autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete'; .@{autocomplete-prefix-cls} { .reset-component; diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less index da52c414d..8283ff76d 100644 --- a/components/avatar/style/index.less +++ b/components/avatar/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@avatar-prefix-cls: ~"@{ant-prefix}-avatar"; +@avatar-prefix-cls: ~'@{ant-prefix}-avatar'; .@{avatar-prefix-cls} { .reset-component; @@ -45,10 +45,6 @@ line-height: @size; border-radius: 50%; - & > * { - line-height: @size; - } - &-string { position: absolute; left: 50%; diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less index 27d59ff6d..c1a0d29b2 100644 --- a/components/back-top/style/index.less +++ b/components/back-top/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@backtop-prefix-cls: ~"@{ant-prefix}-back-top"; +@backtop-prefix-cls: ~'@{ant-prefix}-back-top'; .@{backtop-prefix-cls} { .reset-component; @@ -20,12 +20,12 @@ background-color: @back-top-bg; color: @back-top-color; text-align: center; - transition: all .3s @ease-in-out; + transition: all 0.3s @ease-in-out; overflow: hidden; &:hover { 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; width: 14px; 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; } } diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 78616faa5..81ef4bc97 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -1,8 +1,8 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@badge-prefix-cls: ~"@{ant-prefix}-badge"; -@number-prefix-cls: ~"@{ant-prefix}-scroll-number"; +@badge-prefix-cls: ~'@{ant-prefix}-badge'; +@number-prefix-cls: ~'@{ant-prefix}-scroll-number'; .@{badge-prefix-cls} { .reset-component; @@ -47,13 +47,18 @@ } &-count, - &-dot { + &-dot, + .@{number-prefix-cls}-custom-component { position: absolute; right: 0; transform: translateX(50%); transform-origin: 100%; } + .@{number-prefix-cls}-custom-component { + transform: translate(50%, -50%); + } + &-status { line-height: inherit; vertical-align: baseline; @@ -81,7 +86,7 @@ height: 100%; border-radius: 50%; border: 1px solid @processing-color; - content: ""; + content: ''; animation: antStatusProcessing 1.2s infinite ease-in-out; } } @@ -103,12 +108,12 @@ &-zoom-appear, &-zoom-enter { - animation: antZoomBadgeIn .3s @ease-out-back; + animation: antZoomBadgeIn 0.3s @ease-out-back; animation-fill-mode: both; } &-zoom-leave { - animation: antZoomBadgeOut .3s @ease-in-back; + animation: antZoomBadgeOut 0.3s @ease-in-back; animation-fill-mode: both; } @@ -142,7 +147,7 @@ overflow: hidden; &-only { display: inline-block; - transition: all .3s @ease-in-out; + transition: all 0.3s @ease-in-out; height: @badge-height; > p { height: @badge-height; diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index 2d73ab20c..30caa8344 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb"; +@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb'; .@{breadcrumb-prefix-cls} { .reset-component; @@ -14,7 +14,7 @@ a { color: @breadcrumb-link-color; - transition: color .3s; + transition: color 0.3s; &:hover { color: @breadcrumb-link-color-hover; } diff --git a/components/button/style/index.less b/components/button/style/index.less index c2a1cbf60..9e6a01cf1 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -1,8 +1,8 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "./mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import './mixin'; -@btn-prefix-cls: ~"@{ant-prefix}-btn"; +@btn-prefix-cls: ~'@{ant-prefix}-btn'; // for compatible @btn-ghost-color: @text-color; @@ -82,16 +82,16 @@ right: -1px; background: #fff; opacity: 0.35; - content: ""; + content: ''; border-radius: inherit; z-index: 1; - transition: opacity .2s; + transition: opacity 0.2s; pointer-events: none; display: none; } .@{iconfont-css-prefix} { - transition: margin-left .3s @ease-in-out; + transition: margin-left 0.3s @ease-in-out; } &&-loading:before { @@ -102,7 +102,7 @@ padding-left: 29px; pointer-events: none; position: relative; - .@{iconfont-css-prefix} { + .@{iconfont-css-prefix}:not(:last-child) { margin-left: -14px; } } @@ -150,12 +150,12 @@ } &-two-chinese-chars:first-letter { - letter-spacing: .34em; + letter-spacing: 0.34em; } &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) { - letter-spacing: .34em; - margin-right: -.34em; + letter-spacing: 0.34em; + margin-right: -0.34em; } &-block { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 138ca4903..285d47cff 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -24,17 +24,21 @@ .button-variant-primary(@color; @background) { .button-color(@color; @background; @background); - text-shadow: 0 -1px 0 rgba(0, 0, 0, .12); - box-shadow: 0 2px 0 rgba(0, 0, 0, .045); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); &:hover, &:focus { - .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`); + .button-color( + @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` + ); } &:active, &.active { - .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`); + .button-color( + @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` + ); } .button-disabled(); @@ -60,16 +64,20 @@ .button-color(@color; @background; @border); &:hover { - .button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`); + .button-color( + @btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) ` + ); } &:focus { - .button-color(~`colorPalette("@{color}", 5)`; #fff; ~`colorPalette("@{color}", 5)`); + .button-color(~`colorPalette('@{color}', 5) `; #fff; ~`colorPalette('@{color}', 5) `); } &:active, &.active { - .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`); + .button-color( + @btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) ` + ); } .button-disabled(); @@ -81,12 +89,12 @@ &:hover, &:focus { - .button-color(~`colorPalette("@{color}", 5)`; transparent; ~`colorPalette("@{color}", 5)`); + .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); } &:active, &.active { - .button-color(~`colorPalette("@{color}", 7)`; transparent; ~`colorPalette("@{color}", 7)`); + .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); } .button-disabled(); @@ -101,7 +109,7 @@ > a:only-child { color: currentColor; &:after { - content: ""; + content: ''; position: absolute; top: 0; left: 0; @@ -161,9 +169,9 @@ white-space: nowrap; .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base); user-select: none; - transition: all .3s @ease-in-out; + transition: all 0.3s @ease-in-out; 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} { line-height: 1; diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index 0db0f391b..02581a5ac 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@full-calendar-prefix-cls: ~"@{ant-prefix}-fullcalendar"; +@full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar'; .@{full-calendar-prefix-cls} { .reset-component; @@ -84,7 +84,7 @@ &-month, &-date { text-align: center; - transition: all .3s; + transition: all 0.3s; } &-value { @@ -97,7 +97,7 @@ padding: 0; background: transparent; line-height: 24px; - transition: all .3s; + transition: all 0.3s; &:hover { background: @item-hover-bg; @@ -180,7 +180,7 @@ height: 116px; padding: 4px 8px; border-top: 2px solid @border-color-split; - transition: background .3s; + transition: background 0.3s; &:hover { background: @item-hover-bg; diff --git a/components/card/style/index.less b/components/card/style/index.less index 9ecb1f2c3..effdb88e7 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@card-prefix-cls: ~"@{ant-prefix}-card"; +@card-prefix-cls: ~'@{ant-prefix}-card'; @card-head-height: 48px; @card-hover-border: rgba(0, 0, 0, 0.09); @card-radius: @border-radius-sm; @@ -11,7 +11,7 @@ background: @component-background; border-radius: @card-radius; position: relative; - transition: all .3s; + transition: all 0.3s; &-hoverable { cursor: pointer; @@ -66,11 +66,10 @@ &-extra { float: right; - padding: @card-head-padding + 1.5px 0; + padding: @card-head-padding 0; font-size: @font-size-base; color: @text-color; font-weight: normal; - text-align: right; // https://stackoverflow.com/a/22429853/3040605 margin-left: auto; } @@ -88,11 +87,13 @@ &-grid { border-radius: 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%; float: left; padding: @card-padding-base; - transition: all .3s; + transition: all 0.3s; &:hover { position: relative; z-index: 1; @@ -143,7 +144,7 @@ &:hover { color: @primary-color; - transition: color .3s; + transition: color 0.3s; } & > .anticon { @@ -179,7 +180,7 @@ &-padding-transition &-head, &-padding-transition &-body { - transition: padding .3s; + transition: padding 0.3s; } &-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 { user-select: none; } @@ -244,7 +260,12 @@ height: 14px; margin: 4px 0; 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; background-size: 600% 600%; } @@ -253,9 +274,9 @@ @keyframes card-loading { 0%, 100% { - background-position: 0 50%; - } - 50% { - background-position: 100% 50%; - } + background-position: 0 50%; + } + 50% { + background-position: 100% 50%; + } } diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index 64d1267c7..19eff4e17 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -1,5 +1,5 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; .@{ant-prefix}-carousel { .reset-component; @@ -49,7 +49,7 @@ &:before, &:after { - content: ""; + content: ''; display: table; } @@ -65,7 +65,7 @@ float: left; height: 100%; min-height: 1px; - [dir="rtl"] & { + [dir='rtl'] & { float: right; } img { @@ -133,14 +133,14 @@ .slick-prev { left: -25px; &:before { - content: "←"; + content: '←'; } } .slick-next { right: -25px; &:before { - content: "→"; + content: '→'; } } @@ -174,7 +174,7 @@ outline: none; font-size: 0; color: transparent; - transition: all .5s; + transition: all 0.5s; padding: 0; &:hover, &:focus { diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index 5de52826e..a688905cf 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -1,8 +1,8 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../input/style/mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../input/style/mixin'; -@cascader-prefix-cls: ~"@{ant-prefix}-cascader"; +@cascader-prefix-cls: ~'@{ant-prefix}-cascader'; .@{cascader-prefix-cls} { .reset-component; @@ -28,7 +28,7 @@ background-color: @component-background; border-radius: @border-radius-base; outline: 0; - transition: color .3s; + transition: color 0.3s; &-with-value &-label { color: transparent; @@ -101,7 +101,7 @@ margin-top: -6px; line-height: 12px; color: @disabled-color; - transition: transform .2s; + transition: transform 0.2s; &&-expand { transform: rotate(180deg); } diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less index fa88d365a..2d669f4f7 100644 --- a/components/checkbox/style/index.less +++ b/components/checkbox/style/index.less @@ -1,4 +1,4 @@ -@import "../../style/themes/default"; -@import "./mixin"; +@import '../../style/themes/default'; +@import './mixin'; .antCheckboxFn(); diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 81fc57010..259dfb5de 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -1,7 +1,7 @@ -@import "../../style/mixins/index"; +@import '../../style/mixins/index'; -.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") { - @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner"; +.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') { + @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner'; // 一般状态 .@{checkbox-prefix-cls} { .reset-component; @@ -28,7 +28,7 @@ height: 100%; border-radius: @border-radius-sm; border: 1px solid @checkbox-color; - content: ""; + content: ''; animation: antCheckboxEffect 0.36s ease-in-out; animation-fill-mode: both; visibility: hidden; @@ -49,7 +49,7 @@ border: @checkbox-border-width @border-style-base @border-color-base; border-radius: @border-radius-sm; background-color: @checkbox-check-color; - transition: all .3s; + transition: all 0.3s; // Fix IE checked style // https://github.com/ant-design/ant-design/issues/12597 border-collapse: separate; @@ -68,7 +68,7 @@ border-top: 0; border-left: 0; content: ' '; - transition: all .1s @ease-in-back, opacity .1s; + transition: all 0.1s @ease-in-back, opacity 0.1s; opacity: 0; } } @@ -96,7 +96,7 @@ border-top: 0; border-left: 0; content: ' '; - transition: all .2s @ease-out-back .1s; + transition: all 0.2s @ease-out-back 0.1s; opacity: 1; } diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 74447fb11..b6305e384 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@collapse-prefix-cls: ~"@{ant-prefix}-collapse"; +@collapse-prefix-cls: ~'@{ant-prefix}-collapse'; .collapse-close() { transform: rotate(0); @@ -33,7 +33,7 @@ color: @heading-color; cursor: pointer; position: relative; - transition: all .3s; + transition: all 0.3s; .arrow { .iconfont-mixin(); @@ -64,7 +64,7 @@ } &-anim-active { - transition: height .2s @ease-out; + transition: height 0.2s @ease-out; } &-content { @@ -88,7 +88,7 @@ } } - & > &-item > &-header[aria-expanded="true"] { + & > &-item > &-header[aria-expanded='true'] { .anticon-right svg { .collapse-open(); } diff --git a/components/comment/style/index.js b/components/comment/style/index.js index cf31ed80f..3a3ab0de5 100644 --- a/components/comment/style/index.js +++ b/components/comment/style/index.js @@ -1,2 +1,2 @@ -import '../../style/index.less' -import './index.less' +import '../../style/index.less'; +import './index.less'; diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index 93fed470d..7fc09eb7d 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -38,7 +38,7 @@ position: absolute; top: 0; 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; font-size: 16px; display: inline-block; @@ -214,7 +214,9 @@ 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 { background: @primary-color; color: #fff; @@ -240,10 +242,10 @@ } &-disabled-cell&-today &-date { position: relative; - margin-right: 5px; + padding-right: 5px; padding-left: 5px; &:before { - content: " "; + content: ' '; position: absolute; top: -1px; left: 5px; diff --git a/components/date-picker/style/DecadePanel.less b/components/date-picker/style/DecadePanel.less index fc563ebbf..386eb3aab 100644 --- a/components/date-picker/style/DecadePanel.less +++ b/components/date-picker/style/DecadePanel.less @@ -15,11 +15,11 @@ } .@{calendar-prefix-cls}-decade-panel-header { - .calendarPanelHeader(~"@{calendar-prefix-cls}-decade-panel"); + .calendarPanelHeader(~'@{calendar-prefix-cls}-decade-panel'); } .@{calendar-prefix-cls}-decade-panel-body { - height: ~"calc(100% - 40px)"; + height: ~'calc(100% - 40px)'; } .@{calendar-prefix-cls}-decade-panel-table { diff --git a/components/date-picker/style/MonthPanel.less b/components/date-picker/style/MonthPanel.less index fbeceec8c..e2d7a0b91 100644 --- a/components/date-picker/style/MonthPanel.less +++ b/components/date-picker/style/MonthPanel.less @@ -9,7 +9,8 @@ background: @component-background; 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%; } } @@ -19,11 +20,11 @@ } .@{calendar-prefix-cls}-month-panel-header { - .calendarPanelHeader(~"@{calendar-prefix-cls}-month-panel"); + .calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel'); } .@{calendar-prefix-cls}-month-panel-body { - height: ~"calc(100% - 40px)"; + height: ~'calc(100% - 40px)'; } .@{calendar-prefix-cls}-month-panel-table { diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less index b9b085a88..cddc67f9f 100644 --- a/components/date-picker/style/Picker.less +++ b/components/date-picker/style/Picker.less @@ -1,4 +1,4 @@ -@import "../../button/style/mixin"; +@import '../../button/style/mixin'; .@{calendar-prefix-cls}-picker-container { .reset-component; @@ -65,7 +65,7 @@ margin-top: -7px; line-height: 14px; font-size: @font-size-sm; - transition: all .3s; + transition: all 0.3s; user-select: none; z-index: 1; } @@ -89,7 +89,7 @@ } &-icon { - font-family: "anticon"; + font-family: 'anticon'; font-size: @font-size-base; color: @disabled-color; display: inline-block; diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index 62cfe035d..94b0ef66c 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -28,7 +28,7 @@ .@{calendar-prefix-cls}-date-panel { &::after { - content: "."; + content: '.'; display: block; height: 0; clear: both; @@ -134,7 +134,7 @@ z-index: 1; } &:before { - content: ""; + content: ''; display: block; background: @item-active-bg; border-radius: 0; diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index 6bda07546..25e080cdc 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -90,7 +90,7 @@ } li:last-child:after { - content: ""; + content: ''; height: 202px; display: block; } diff --git a/components/date-picker/style/WeekPicker.less b/components/date-picker/style/WeekPicker.less index c2f674808..83eecea40 100644 --- a/components/date-picker/style/WeekPicker.less +++ b/components/date-picker/style/WeekPicker.less @@ -3,7 +3,7 @@ opacity: 0.5; } .@{calendar-prefix-cls}-body tr { - transition: all .3s; + transition: all 0.3s; cursor: pointer; &:hover { background: @primary-1; diff --git a/components/date-picker/style/YearPanel.less b/components/date-picker/style/YearPanel.less index cd7a328bc..8c7dd764a 100644 --- a/components/date-picker/style/YearPanel.less +++ b/components/date-picker/style/YearPanel.less @@ -9,7 +9,8 @@ background: @component-background; 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%; } } @@ -19,11 +20,11 @@ } .@{calendar-prefix-cls}-year-panel-header { - .calendarPanelHeader(~"@{calendar-prefix-cls}-year-panel"); + .calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel'); } .@{calendar-prefix-cls}-year-panel-body { - height: ~"calc(100% - 40px)"; + height: ~'calc(100% - 40px)'; } .@{calendar-prefix-cls}-year-panel-table { diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index 466b7e889..d8e6026dc 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -1,17 +1,17 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../input/style/mixin"; -@import "../../button/style/mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../input/style/mixin'; +@import '../../button/style/mixin'; -@calendar-prefix-cls: ~"@{ant-prefix}-calendar"; -@calendar-timepicker-prefix-cls: ~"@{ant-prefix}-calendar-time-picker"; +@calendar-prefix-cls: ~'@{ant-prefix}-calendar'; +@calendar-timepicker-prefix-cls: ~'@{ant-prefix}-calendar-time-picker'; -@import "Picker"; -@import "Calendar"; -@import "RangePicker"; -@import "TimePicker"; -@import "MonthPanel"; -@import "YearPanel"; -@import "DecadePanel"; -@import "MonthPicker"; -@import "WeekPicker"; +@import 'Picker'; +@import 'Calendar'; +@import 'RangePicker'; +@import 'TimePicker'; +@import 'MonthPanel'; +@import 'YearPanel'; +@import 'DecadePanel'; +@import 'MonthPicker'; +@import 'WeekPicker'; diff --git a/components/divider/style/index.less b/components/divider/style/index.less index c7e641189..c6ff97b74 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@divider-prefix-cls: ~"@{ant-prefix}-divider"; +@divider-prefix-cls: ~'@{ant-prefix}-divider'; .@{divider-prefix-cls} { .reset-component; @@ -39,7 +39,7 @@ margin: 16px 0; &:before, &:after { - content: ""; + content: ''; display: table-cell; position: relative; top: 50%; diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less index 6475c781c..4288673bd 100644 --- a/components/drawer/style/drawer.less +++ b/components/drawer/style/drawer.less @@ -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} { position: fixed; @@ -169,7 +169,7 @@ height: 0; opacity: 0; 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; } &-open { diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less index 40a49a53b..a081a08ca 100644 --- a/components/drawer/style/index.less +++ b/components/drawer/style/index.less @@ -1,3 +1,3 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "./drawer"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import './drawer'; diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index ec0e955b0..19cfa8eb1 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@dropdown-prefix-cls: ~"@{ant-prefix}-dropdown"; +@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown'; .@{dropdown-prefix-cls} { .reset-component; @@ -11,6 +11,16 @@ z-index: @zindex-dropdown; display: block; + &:before { + position: absolute; + top: -7px; + left: -7px; + right: 0; + bottom: -7px; + content: ' '; + opacity: 0.0001; + } + &-wrap { position: relative; @@ -19,7 +29,7 @@ } .@{iconfont-css-prefix}-down:before { - transition: transform .2s; + transition: transform 0.2s; } } @@ -45,11 +55,12 @@ border-radius: @border-radius-base; box-shadow: @box-shadow-base; background-clip: padding-box; + -webkit-transform: translate3d(0, 0, 0); &-item-group-title { color: @text-color-secondary; padding: 5px @control-padding-horizontal; - transition: all .3s; + transition: all 0.3s; } &-submenu-popup { @@ -71,7 +82,7 @@ color: @text-color; white-space: nowrap; cursor: pointer; - transition: all .3s; + transition: all 0.3s; line-height: 22px; > .anticon:first-child { @@ -84,7 +95,7 @@ display: block; padding: 5px @control-padding-horizontal; margin: -5px -@control-padding-horizontal; - transition: all .3s; + transition: all 0.3s; &:focus { text-decoration: none; } @@ -187,7 +198,7 @@ .@{dropdown-prefix-cls}-trigger, .@{dropdown-prefix-cls}-link { - > .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) { + > .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down { .iconfont-size-under-12px(10px); } } @@ -199,7 +210,7 @@ padding-left: @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); } } diff --git a/components/form/style/index.less b/components/form/style/index.less index 5d9fcf671..f8521beb8 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -1,11 +1,11 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../input/style/mixin"; -@import "../../button/style/mixin"; -@import "../../grid/style/mixin"; -@import "./mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../input/style/mixin'; +@import '../../button/style/mixin'; +@import '../../grid/style/mixin'; +@import './mixin'; -@form-prefix-cls: ~"@{ant-prefix}-form"; +@form-prefix-cls: ~'@{ant-prefix}-form'; @form-component-height: @input-height-base; @form-component-max-height: @input-height-lg; @form-feedback-icon-size: @font-size-base; @@ -19,7 +19,7 @@ .@{form-prefix-cls}-item-required:before { display: inline-block; margin-right: 4px; - content: "*"; + content: '*'; font-family: SimSun; line-height: 1; font-size: @font-size-base; @@ -30,8 +30,8 @@ } // Radio && Checkbox -input[type="radio"], -input[type="checkbox"] { +input[type='radio'], +input[type='checkbox'] { &[disabled], &.disabled { cursor: not-allowed; @@ -74,12 +74,6 @@ input[type="checkbox"] { margin-bottom: @form-item-margin-bottom; vertical-align: top; - // nested FormItem - &-control > &:last-child, - & [class^="@{ant-prefix}-col-"] > &:only-child { - margin-bottom: -@form-item-margin-bottom; - } - &-control { line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220 position: relative; @@ -91,7 +85,8 @@ input[type="checkbox"] { } &-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 { @@ -107,10 +102,10 @@ input[type="checkbox"] { &:after { & when (@form-item-trailing-colon=true) { - content: ":"; + content: ':'; } & when not (@form-item-trailing-colon=true) { - content: " "; + content: ' '; } margin: 0 8px 0 2px; position: relative; @@ -124,7 +119,7 @@ input[type="checkbox"] { } &-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 // Fix https://github.com/ant-design/ant-design/issues/12803 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; clear: both; } @@ -165,11 +160,15 @@ form { > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, > .@{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-selection__clear { + :not(.@{ant-prefix}-input-group-addon) + > .@{ant-prefix}-select + .@{ant-prefix}-select-selection__clear { right: 28px; } > .@{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; } @@ -201,6 +200,7 @@ form { textarea.@{ant-prefix}-input { height: auto; + margin-bottom: 4px; } // input[type=file] @@ -208,8 +208,8 @@ form { background: transparent; } - input[type="radio"], - input[type="checkbox"] { + input[type='radio'], + input[type='checkbox'] { width: 14px; height: 14px; } @@ -416,7 +416,7 @@ form { margin-top: -10px; text-align: center; font-size: @form-feedback-icon-size; - animation: zoomIn .3s @ease-out-back; + animation: zoomIn 0.3s @ease-out-back; z-index: 1; & svg { @@ -449,6 +449,9 @@ form { .@{ant-prefix}-select { &-selection { border-color: @warning-color; + &:hover { + border-color: @warning-color; + } } &-open .@{ant-prefix}-select-selection, &-focused .@{ant-prefix}-select-selection { @@ -495,6 +498,9 @@ form { .@{ant-prefix}-select { &-selection { border-color: @error-color; + &:hover { + border-color: @error-color; + } } &-open .@{ant-prefix}-select-selection, &-focused .@{ant-prefix}-select-selection { @@ -552,6 +558,25 @@ form { .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input { .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 { @@ -566,7 +591,8 @@ form { margin-bottom: @form-item-margin-bottom; &-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; } } } diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less index 1004c5dcf..e4d4c5fe4 100644 --- a/components/form/style/mixin.less +++ b/components/form/style/mixin.less @@ -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) { .@{ant-prefix}-form-explain, @@ -25,6 +25,24 @@ .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 { color: @text-color; } @@ -60,22 +78,22 @@ font-size: @font-size-base; } - input[type="search"] { + input[type='search'] { box-sizing: border-box; } // Position radios and checkboxes better - input[type="radio"], - input[type="checkbox"] { + input[type='radio'], + input[type='checkbox'] { line-height: normal; } - input[type="file"] { + input[type='file'] { display: block; } // Make range inputs behave like textual form controls - input[type="range"] { + input[type='range'] { display: block; width: 100%; } @@ -87,9 +105,9 @@ } // Focus for file, radio, and checkbox - input[type="file"]:focus, - input[type="radio"]:focus, - input[type="checkbox"]:focus { + input[type='file']:focus, + input[type='radio']:focus, + input[type='checkbox']:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; diff --git a/components/grid/style/index.less b/components/grid/style/index.less index ad23d6d96..ef23a3288 100644 --- a/components/grid/style/index.less +++ b/components/grid/style/index.less @@ -1,6 +1,6 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "./mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import './mixin'; // Grid system .@{ant-prefix}-row { diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less index bac74f319..4e0548164 100644 --- a/components/grid/style/mixin.less +++ b/components/grid/style/mixin.less @@ -1,4 +1,4 @@ -@import "../../style/mixins/index"; +@import '../../style/mixins/index'; // mixins for grid system // ------------------------ @@ -12,12 +12,12 @@ .make-grid-columns() { .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, @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}"; - .col((@index + 1), ~"@{list}, @{item}"); + @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, @list) when (@index > @grid-columns) { @{list} { @@ -32,15 +32,18 @@ } .float-grid-columns(@class) { - .col(@index) { // initial - @item: ~".@{ant-prefix}-col@{class}-@{index}"; + .col(@index) { + // initial + @item: ~'.@{ant-prefix}-col@{class}-@{index}'; .col((@index + 1), @item); } - .col(@index, @list) when (@index =< @grid-columns) { // general - @item: ~".@{ant-prefix}-col@{class}-@{index}"; - .col((@index + 1), ~"@{list}, @{item}"); + .col(@index, @list) when (@index =< @grid-columns) { + // general + @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} { float: left; flex: 0 0 auto; diff --git a/components/icon/style/index.less b/components/icon/style/index.less index 56da29589..373c41968 100644 --- a/components/icon/style/index.less +++ b/components/icon/style/index.less @@ -1,4 +1,4 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@icon-prefix-cls: ~"@{ant-prefix}-icon"; +@icon-prefix-cls: ~'@{ant-prefix}-icon'; diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index 2bb7298f9..4a1cd27fb 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -1,8 +1,8 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../input/style/mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../input/style/mixin'; -@input-number-prefix-cls: ~"@{ant-prefix}-input-number"; +@input-number-prefix-cls: ~'@{ant-prefix}-input-number'; .@{input-number-prefix-cls} { .reset-component; diff --git a/components/input/style/index.less b/components/input/style/index.less index 0d93f4343..25bac308a 100644 --- a/components/input/style/index.less +++ b/components/input/style/index.less @@ -1,6 +1,6 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "./mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import './mixin'; // Input styles .@{ant-prefix}-input { @@ -11,7 +11,7 @@ //== Style for input-group: input with label, with button or dropdown... .@{ant-prefix}-input-group { .reset-component; - .input-group(~"@{ant-prefix}-input"); + .input-group(~'@{ant-prefix}-input'); &-wrapper { display: inline-block; vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403 @@ -22,12 +22,12 @@ // Input with affix: prefix or suffix .@{ant-prefix}-input-affix-wrapper { .reset-component; - .input-affix-wrapper(~"@{ant-prefix}-input"); + .input-affix-wrapper(~'@{ant-prefix}-input'); // https://github.com/ant-design/ant-design/issues/6144 .@{ant-prefix}-input { - min-height: 100%; // use min-height, assume that no smaller height to override + min-height: 100%; // use min-height, assume that no smaller height to override } } -@import "./search-input"; +@import './search-input'; diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 5f8ffaa33..d782fa35f 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -1,5 +1,5 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; @input-affix-width: 19px; @@ -18,16 +18,16 @@ // input status // == when focus or actived .active(@color: @outline-color) { - border-color: ~`colorPalette("@{color}", 5)`; + border-color: ~`colorPalette('@{color}', 5) `; outline: 0; 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 .hover(@color: @input-hover-border-color) { - border-color: ~`colorPalette("@{color}", 5)`; - border-right-width: 1px !important; + border-color: ~`colorPalette('@{color}', 5) `; + border-right-width: @border-width-base !important; } .disabled() { @@ -55,7 +55,7 @@ border: @border-width-base @border-style-base @input-border-color; border-radius: @border-radius-base; .placeholder(); // Reset placeholder - transition: all .3s; + transition: all 0.3s; &:hover { .hover(); @@ -74,7 +74,7 @@ max-width: 100%; // prevent textearea resize from coming out of its container height: auto; vertical-align: bottom; - transition: all .3s, height 0s; + transition: all 0.3s, height 0s; min-height: @input-height-base; } @@ -97,13 +97,13 @@ width: 100%; // Undo padding and float of grid classes - &[class*="col-"] { + &[class*='col-'] { float: none; padding-left: 0; padding-right: 0; } - > [class*="col-"] { + > [class*='col-'] { padding-right: 8px; &:last-child { padding-right: 0; @@ -156,7 +156,7 @@ border: @border-width-base @border-style-base @input-border-color; border-radius: @border-radius-base; position: relative; - transition: all .3s; + transition: all 0.3s; // Reset Select's style in addon .@{ant-prefix}-select { @@ -181,7 +181,7 @@ // https://github.com/ant-design/ant-design/issues/3714 > i:only-child:after { position: absolute; - content: ""; + content: ''; top: 0; left: 0; right: 0; @@ -267,28 +267,26 @@ &-wrap, > .@{inputClass} { &:not(:first-child):not(:last-child) { - border-right-width: 1px; - border-right-color: transparent; + border-right-width: @border-width-base; &:hover { - .hover(); + z-index: 1; } &:focus { - .active(); + z-index: 1; } } } & > * { border-radius: 0; - border-right-width: 0; vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139 float: none; display: inline-block; } - // https://github.com/ant-design/ant-design/issues/11863 - & > span:not(:last-child) > .@{inputClass} { - border-right-width: 0; + & > *:not(:last-child) { + border-right-width: @border-width-base; + margin-right: -@border-width-base; } // Undo float for .ant-input-group .ant-input @@ -304,13 +302,12 @@ & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor, & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input { border-radius: 0; - border-right-width: 1px; - border-right-color: transparent; + border-right-width: @border-width-base; &:hover { - .hover(); + z-index: 1; } &:focus { - .active(); + z-index: 1; } } @@ -335,17 +332,7 @@ & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input { border-top-right-radius: @border-radius-base; border-bottom-right-radius: @border-radius-base; - border-right-width: 1px; - border-right-color: @input-border-color; - &:hover { - .hover(); - } - &:focus { - .active(); - .@{ant-prefix}-cascader-input { - .active(); - } - } + border-right-width: @border-width-base; } // https://github.com/ant-design/ant-design/issues/12493 @@ -365,13 +352,14 @@ } .@{inputClass} { - position: static; + position: relative; } .@{inputClass}-prefix, .@{inputClass}-suffix { position: absolute; top: 50%; + z-index: 2; transform: translateY(-50%); line-height: 0; color: @input-color; diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less index 9d77b7d1f..057b08ef8 100644 --- a/components/input/style/search-input.less +++ b/components/input/style/search-input.less @@ -1,15 +1,15 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../button/style/mixin"; -@import "./mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../button/style/mixin'; +@import './mixin'; -@search-prefix: ~"@{ant-prefix}-input-search"; +@search-prefix: ~'@{ant-prefix}-input-search'; .@{search-prefix} { &-icon { color: @text-color-secondary; cursor: pointer; - transition: all .3s; + transition: all 0.3s; &:hover { color: #333; } diff --git a/components/layout/style/index.less b/components/layout/style/index.less index 2bfa089a5..ed2fca114 100644 --- a/components/layout/style/index.less +++ b/components/layout/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@layout-prefix-cls: ~"@{ant-prefix}-layout"; +@layout-prefix-cls: ~'@{ant-prefix}-layout'; .@{layout-prefix-cls} { display: flex; @@ -50,7 +50,7 @@ } &-sider { - transition: all .2s; + transition: all 0.2s; position: relative; background: @layout-sider-background; @@ -84,7 +84,7 @@ color: @layout-trigger-color; background: @layout-trigger-background; z-index: 1; - transition: all .2s; + transition: all 0.2s; } &-zero-width { @@ -105,7 +105,7 @@ font-size: @layout-zero-trigger-width / 2; border-radius: 0 @border-radius-base @border-radius-base 0; cursor: pointer; - transition: background .3s ease; + transition: background 0.3s ease; &:hover { background: tint(@layout-sider-background, 10%); diff --git a/components/list/style/index.less b/components/list/style/index.less index 4546f627a..45520433c 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@list-prefix-cls: ~"@{ant-prefix}-list"; +@list-prefix-cls: ~'@{ant-prefix}-list'; .@{list-prefix-cls} { .reset-component; @@ -53,7 +53,7 @@ line-height: 22px; > a { color: @text-color; - transition: all .3s; + transition: all 0.3s; &:hover { color: @primary-color; } diff --git a/components/locale-provider/style/index.less b/components/locale-provider/style/index.less index c171cc249..df1dee5e0 100644 --- a/components/locale-provider/style/index.less +++ b/components/locale-provider/style/index.less @@ -1,2 +1,2 @@ // placeholder -@import "../../style/themes/default"; +@import '../../style/themes/default'; diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less index 4428b9178..562c94ac0 100644 --- a/components/menu/style/dark.less +++ b/components/menu/style/dark.less @@ -5,8 +5,8 @@ color: @menu-dark-color; background: @menu-dark-bg; .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { - opacity: .45; - transition: all .3s; + opacity: 0.45; + transition: all 0.3s; &:after, &:before { background: @menu-dark-arrow-color; @@ -20,7 +20,7 @@ &-dark &-inline&-sub { 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 { diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 0a3740dd4..82c2bb131 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@menu-prefix-cls: ~"@{ant-prefix}-menu"; +@menu-prefix-cls: ~'@{ant-prefix}-menu'; // default theme .@{menu-prefix-cls} { @@ -14,7 +14,7 @@ color: @menu-item-color; background: @menu-bg; line-height: 0; // Fix display inline-block gap - transition: background .3s, width .2s; + transition: background 0.3s, width 0.2s; .clearfix; ul, @@ -33,12 +33,13 @@ font-size: @font-size-base; line-height: @line-height-base; padding: 8px 16px; - transition: all .3s; + transition: all 0.3s; } &-submenu, &-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, @@ -48,7 +49,7 @@ &-submenu &-sub { 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 { @@ -67,7 +68,7 @@ left: 0; bottom: 0; right: 0; - content: ""; + content: ''; } } @@ -153,14 +154,15 @@ position: relative; display: block; 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} { min-width: 14px; margin-right: 10px; 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 { - 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; } } @@ -193,7 +195,7 @@ right: 0; bottom: 0; content: ' '; - opacity: .0001; + opacity: 0.0001; } } @@ -201,7 +203,7 @@ background-color: @menu-bg; border-radius: @border-radius-base; &-submenu-title:after { - transition: transform .3s @ease-in-out; + transition: transform 0.3s @ease-in-out; } } @@ -210,14 +212,14 @@ &-vertical-right, &-inline { > .@{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; top: 50%; right: 16px; width: 10px; &:before, &:after { - content: ""; + content: ''; position: absolute; vertical-align: baseline; background: #fff; @@ -225,7 +227,8 @@ width: 6px; height: 1.5px; 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 { transform: rotate(45deg) translateY(-2px); @@ -252,7 +255,9 @@ } &-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); &:after { transform: rotate(-45deg) translateX(-2px); @@ -314,7 +319,7 @@ } &:after { - content: "\20"; + content: '\20'; display: block; height: 0; clear: both; @@ -328,15 +333,15 @@ .@{menu-prefix-cls}-item { position: relative; &:after { - content: ""; + content: ''; position: absolute; right: 0; top: 0; bottom: 0; border-right: @menu-item-active-border-width solid @menu-highlight-color; - transform: scaleY(.0001); + transform: scaleY(0.0001); 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}-item-selected { &: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; transform: scaleY(1); } @@ -381,7 +386,7 @@ .@{menu-prefix-cls}-item, .@{menu-prefix-cls}-submenu-title { - width: ~"calc(100% + 1px)"; + width: ~'calc(100% + 1px)'; } .@{menu-prefix-cls}-submenu-title { @@ -392,8 +397,13 @@ &-inline-collapsed { width: @menu-collapsed-width; > .@{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-list > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title, + > .@{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-list + > .@{menu-prefix-cls}-submenu + > .@{menu-prefix-cls}-submenu-title, > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { left: 0; text-overflow: clip; diff --git a/components/message/style/index.less b/components/message/style/index.less index bef367345..fca96c3b5 100644 --- a/components/message/style/index.less +++ b/components/message/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@message-prefix-cls: ~"@{ant-prefix}-message"; +@message-prefix-cls: ~'@{ant-prefix}-message'; .@{message-prefix-cls} { .reset-component; @@ -56,7 +56,7 @@ &-notice.move-up-leave.move-up-leave-active { animation-name: MessageMoveOut; overflow: hidden; - animation-duration: .3s; + animation-duration: 0.3s; } } diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less index 68ebb7c0e..87dec63df 100644 --- a/components/modal/style/confirm.less +++ b/components/modal/style/confirm.less @@ -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} { .@{ant-prefix}-modal-header { diff --git a/components/modal/style/index.less b/components/modal/style/index.less index 6f5d0b74d..39d556571 100644 --- a/components/modal/style/index.less +++ b/components/modal/style/index.less @@ -1,4 +1,4 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "./modal"; -@import "./confirm"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import './modal'; +@import './confirm'; diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 7c40f9704..1d879696e 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -1,5 +1,5 @@ -@dialog-prefix-cls: ~"@{ant-prefix}-modal"; -@table-prefix-cls: ~"@{ant-prefix}-table"; +@dialog-prefix-cls: ~'@{ant-prefix}-modal'; +@table-prefix-cls: ~'@{ant-prefix}-table'; .@{dialog-prefix-cls} { .reset-component; @@ -49,7 +49,7 @@ font-weight: 700; line-height: 1; text-decoration: none; - transition: color .3s; + transition: color 0.3s; color: @text-color-secondary; outline: 0; padding: 0; @@ -117,7 +117,7 @@ background-color: @modal-mask-bg; height: 100%; z-index: @zindex-modal-mask; - filter: ~"alpha(opacity=50)"; + filter: ~'alpha(opacity=50)'; &-hidden { display: none; @@ -132,7 +132,7 @@ .@{dialog-prefix-cls}-centered { text-align: center; &:before { - content: ""; + content: ''; display: inline-block; height: 100%; vertical-align: middle; diff --git a/components/notification/style/index.less b/components/notification/style/index.less index aee8bacbc..d81edaa5e 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@notification-prefix-cls: ~"@{ant-prefix}-notification"; +@notification-prefix-cls: ~'@{ant-prefix}-notification'; @notification-width: 384px; @notification-padding-vertical: 16px; @notification-padding-horizontal: 24px; @@ -14,7 +14,7 @@ position: fixed; z-index: @zindex-notification; width: @notification-width; - max-width: ~"calc(100vw - 32px)"; + max-width: ~'calc(100vw - 32px)'; margin-right: 24px; &-topLeft, @@ -52,13 +52,13 @@ // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140 &-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; pointer-events: none; display: block; max-width: 4px; &:before { - content: ""; + content: ''; display: block; } } diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index 66383b3ce..2b5d945b7 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -1,8 +1,8 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../input/style/mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../input/style/mixin'; -@pagination-prefix-cls: ~"@{ant-prefix}-pagination"; +@pagination-prefix-cls: ~'@{ant-prefix}-pagination'; .@{pagination-prefix-cls} { .reset-component; @@ -15,7 +15,7 @@ } &:after { - content: " "; + content: ' '; display: block; height: 0; clear: both; @@ -57,7 +57,7 @@ &:focus, &:hover { - transition: all .3s; + transition: all 0.3s; border-color: @primary-color; a { color: @primary-color; @@ -95,7 +95,7 @@ color: @primary-color; letter-spacing: -1px; opacity: 0; - transition: all .2s; + transition: all 0.2s; &-svg { top: 0; right: 0; @@ -112,7 +112,7 @@ color: @disabled-color; text-align: center; opacity: 1; - transition: all .2s; + transition: all 0.2s; top: 0; right: 0; bottom: 0; @@ -150,7 +150,7 @@ height: @pagination-item-size; line-height: @pagination-item-size; text-align: center; - transition: all .3s; + transition: all 0.3s; display: inline-block; vertical-align: middle; } @@ -174,7 +174,7 @@ border-radius: @border-radius-base; outline: none; display: block; - transition: all .3s; + transition: all 0.3s; font-size: 12px; height: 100%; text-align: center; @@ -260,7 +260,7 @@ padding: 0 6px; height: 100%; text-align: center; - transition: border-color .3s; + transition: border-color 0.3s; &:hover { border-color: @primary-color; diff --git a/components/popover/style/index.less b/components/popover/style/index.less index 4860be35d..d535f0c62 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@popover-prefix-cls: ~"@{ant-prefix}-popover"; +@popover-prefix-cls: ~'@{ant-prefix}-popover'; .@{popover-prefix-cls} { .reset-component; @@ -16,7 +16,7 @@ text-align: left; &:after { - content: ""; + content: ''; position: absolute; background: rgba(255, 255, 255, 0.01); } @@ -101,6 +101,7 @@ &-arrow { background: @popover-bg; + background-color: inherit; width: sqrt(@popover-arrow-width * @popover-arrow-width * 2); height: sqrt(@popover-arrow-width * @popover-arrow-width * 2); transform: rotate(45deg); @@ -111,70 +112,70 @@ } &-placement-top > &-content > &-arrow, - &-placement-topLeft > &-content > &-arrow, - &-placement-topRight > &-content > &-arrow { + &-placement-topLeft > &-content > &-arrow, + &-placement-topRight > &-content > &-arrow { bottom: @popover-distance - @popover-arrow-width + 1.5px; box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); } - &-placement-top > &-content > &-arrow { + &-placement-top > &-content > &-arrow { left: 50%; transform: translateX(-50%) rotate(45deg); } - &-placement-topLeft > &-content > &-arrow { + &-placement-topLeft > &-content > &-arrow { left: 16px; } - &-placement-topRight > &-content > &-arrow { + &-placement-topRight > &-content > &-arrow { right: 16px; } - &-placement-right > &-content > &-arrow, - &-placement-rightTop > &-content > &-arrow, - &-placement-rightBottom > &-content > &-arrow { + &-placement-right > &-content > &-arrow, + &-placement-rightTop > &-content > &-arrow, + &-placement-rightBottom > &-content > &-arrow { left: @popover-distance - @popover-arrow-width + 2px; box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); } - &-placement-right > &-content > &-arrow { + &-placement-right > &-content > &-arrow { top: 50%; transform: translateY(-50%) rotate(45deg); } - &-placement-rightTop > &-content > &-arrow { + &-placement-rightTop > &-content > &-arrow { top: 12px; } - &-placement-rightBottom > &-content > &-arrow { + &-placement-rightBottom > &-content > &-arrow { bottom: 12px; } - &-placement-bottom > &-content > &-arrow, - &-placement-bottomLeft > &-content > &-arrow, - &-placement-bottomRight > &-content > &-arrow { + &-placement-bottom > &-content > &-arrow, + &-placement-bottomLeft > &-content > &-arrow, + &-placement-bottomRight > &-content > &-arrow { top: @popover-distance - @popover-arrow-width + 2px; box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06); } - &-placement-bottom > &-content > &-arrow { + &-placement-bottom > &-content > &-arrow { left: 50%; transform: translateX(-50%) rotate(45deg); } - &-placement-bottomLeft > &-content > &-arrow { + &-placement-bottomLeft > &-content > &-arrow { left: 16px; } - &-placement-bottomRight > &-content > &-arrow { + &-placement-bottomRight > &-content > &-arrow { right: 16px; } - &-placement-left > &-content > &-arrow, - &-placement-leftTop > &-content > &-arrow, - &-placement-leftBottom > &-content > &-arrow { + &-placement-left > &-content > &-arrow, + &-placement-leftTop > &-content > &-arrow, + &-placement-leftBottom > &-content > &-arrow { right: @popover-distance - @popover-arrow-width + 2px; box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); } - &-placement-left > &-content > &-arrow { + &-placement-left > &-content > &-arrow { top: 50%; transform: translateY(-50%) rotate(45deg); } - &-placement-leftTop > &-content > &-arrow { + &-placement-leftTop > &-content > &-arrow { top: 12px; } - &-placement-leftBottom > &-content > &-arrow { + &-placement-leftBottom > &-content > &-arrow { bottom: 12px; } } diff --git a/components/progress/style/index.less b/components/progress/style/index.less index 91a873ce1..7ba6036f0 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@progress-prefix-cls: ~"@{ant-prefix}-progress"; +@progress-prefix-cls: ~'@{ant-prefix}-progress'; .@{progress-prefix-cls} { .reset-component; @@ -24,8 +24,8 @@ margin-right: 0; padding-right: 0; .@{progress-prefix-cls}-show-info & { - padding-right: ~"calc(2em + 8px)"; - margin-right: ~"calc(-2em - 8px)"; + padding-right: ~'calc(2em + 8px)'; + margin-right: ~'calc(-2em - 8px)'; } } @@ -44,13 +44,13 @@ &-circle-path { stroke: @progress-default-color; - animation: ~"@{ant-prefix}-progress-appear" .3s; + animation: ~'@{ant-prefix}-progress-appear' 0.3s; } &-success-bg, &-bg { background-color: @progress-default-color; - transition: all .4s @ease-out-circ 0s; + transition: all 0.4s @ease-out-circ 0s; position: relative; } @@ -79,7 +79,7 @@ &-status-active { .@{progress-prefix-cls}-bg:before { - content: ""; + content: ''; opacity: 0; position: absolute; top: 0; @@ -88,7 +88,7 @@ bottom: 0; background: @component-background; 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; } } diff --git a/components/radio/style/index.less b/components/radio/style/index.less index b85768576..54f36fbae 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -1,10 +1,10 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@radio-prefix-cls: ~"@{ant-prefix}-radio"; -@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group"; -@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner"; -@radio-duration: .3s; +@radio-prefix-cls: ~'@{ant-prefix}-radio'; +@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group'; +@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner'; +@radio-duration: 0.3s; .@{radio-group-prefix-cls} { .reset-component; @@ -46,7 +46,7 @@ height: 100%; border-radius: 50%; border: 1px solid @radio-dot-color; - content: ""; + content: ''; animation: antRadioEffect 0.36s ease-in-out; animation-fill-mode: both; visibility: hidden; @@ -105,7 +105,7 @@ .@{radio-inner-prefix-cls} { border-color: @radio-dot-color; &:after { - transform: scale(.875); + transform: scale(0.875); opacity: 1; transition: all @radio-duration @ease-in-out-circ; } @@ -116,6 +116,7 @@ .@{radio-inner-prefix-cls} { border-color: @border-color-base !important; background-color: @input-disabled-bg; + cursor: not-allowed; &:after { background-color: #ccc; } @@ -178,7 +179,7 @@ span.@{radio-prefix-cls} + * { &:not(:first-child) { &::before { - content: ""; + content: ''; display: block; top: 0; left: -1px; @@ -208,8 +209,8 @@ span.@{radio-prefix-cls} + * { } .@{radio-prefix-cls}-inner, - input[type="checkbox"], - input[type="radio"] { + input[type='checkbox'], + input[type='radio'] { opacity: 0; width: 0; height: 0; @@ -296,7 +297,7 @@ span.@{radio-prefix-cls} + * { } // 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} { vertical-align: text-bottom; } diff --git a/components/rate/style/index.less b/components/rate/style/index.less index 111bc6dd8..aa64b5888 100644 --- a/components/rate/style/index.less +++ b/components/rate/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@rate-prefix-cls: ~"@{ant-prefix}-rate"; +@rate-prefix-cls: ~'@{ant-prefix}-rate'; .@{rate-prefix-cls} { .reset-component; @@ -27,7 +27,7 @@ display: inline-block; margin-right: 8px; position: relative; - transition: all .3s; + transition: all 0.3s; color: inherit; cursor: pointer; @@ -38,7 +38,7 @@ &-first, &-second { user-select: none; - transition: all .3s; + transition: all 0.3s; color: @rate-star-bg; .@{iconfont-css-prefix} { vertical-align: middle; diff --git a/components/select/style/index.less b/components/select/style/index.less index 829b57bd3..a54939984 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -1,8 +1,8 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../input/style/mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../input/style/mixin'; -@select-prefix-cls: ~"@{ant-prefix}-select"; +@select-prefix-cls: ~'@{ant-prefix}-select'; .selection__clear() { display: inline-block; @@ -64,7 +64,7 @@ font-size: @font-size-sm; & &-icon svg { - transition: transform .3s; + transition: transform 0.3s; } } @@ -81,7 +81,7 @@ // strange align fix for chrome but works // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif border-top-width: @border-width-base + 0.02px; - transition: all .3s @ease-in-out; + transition: all 0.3s @ease-in-out; &:hover { .hover; @@ -229,7 +229,8 @@ } &-selection__placeholder, - &-search__field__placeholder { // for TreeSelect compatibility + &-search__field__placeholder { + // for TreeSelect compatibility position: absolute; top: 50%; left: 0; @@ -313,7 +314,8 @@ } > 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; height: @input-height-base - 8px; line-height: @input-height-base - 8px - 2px; @@ -330,7 +332,7 @@ max-width: 99%; position: relative; overflow: hidden; - transition: padding .3s @ease-in-out; + transition: padding 0.3s @ease-in-out; padding: 0 20px 0 10px; &__disabled { padding: 0 10px; @@ -343,7 +345,7 @@ overflow: hidden; text-overflow: ellipsis; max-width: 100%; - transition: margin .3s @ease-in-out; + transition: margin 0.3s @ease-in-out; } .@{select-prefix-cls}-selection__choice__remove { @@ -353,7 +355,7 @@ cursor: pointer; display: inline-block; font-weight: bold; - transition: all .3s; + transition: all 0.3s; font-size: @font-size-sm; .iconfont-size-under-12px(10px); position: absolute; @@ -405,7 +407,7 @@ height: 100%; position: relative; z-index: 1; - transition: all .3s @ease-in-out, height 0s; + transition: all 0.3s @ease-in-out, height 0s; box-shadow: none; } } diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index 1d5054c45..fe4c2d295 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -1,10 +1,10 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@skeleton-prefix-cls: ~"@{ant-prefix}-skeleton"; -@skeleton-avatar-prefix-cls: ~"@{skeleton-prefix-cls}-avatar"; -@skeleton-title-prefix-cls: ~"@{skeleton-prefix-cls}-title"; -@skeleton-paragraph-prefix-cls: ~"@{skeleton-prefix-cls}-paragraph"; +@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton'; +@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar'; +@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title'; +@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph'; @skeleton-to-color: shade(@skeleton-color, 5%); @@ -108,8 +108,13 @@ } .skeleton-color() { - background: linear-gradient(90deg, @skeleton-color 25%, @skeleton-to-color 37%, @skeleton-color 63%); - animation: ~"@{skeleton-prefix-cls}-loading" 1.4s ease infinite; + background: linear-gradient( + 90deg, + @skeleton-color 25%, + @skeleton-to-color 37%, + @skeleton-color 63% + ); + animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite; background-size: 400% 100%; } diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 3c33a94fc..db24d73a7 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@slider-prefix-cls: ~"@{ant-prefix}-slider"; +@slider-prefix-cls: ~'@{ant-prefix}-slider'; .@{slider-prefix-cls} { .reset-component; @@ -24,7 +24,7 @@ height: 4px; border-radius: 2px; background-color: @slider-rail-background-color; - transition: background-color .3s; + transition: background-color 0.3s; } &-track { @@ -45,7 +45,9 @@ border-radius: 50%; border: solid 2px @slider-handle-color; 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 { border-color: @slider-handle-color-focus; diff --git a/components/spin/style/index.less b/components/spin/style/index.less index 5a91d5277..8e3137c5d 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@spin-prefix-cls: ~"@{ant-prefix}-spin"; +@spin-prefix-cls: ~'@{ant-prefix}-spin'; @spin-dot-default: @text-color-secondary; .@{spin-prefix-cls} { @@ -26,7 +26,7 @@ display: block; position: absolute; height: 100%; - max-height: 360px; + max-height: 400px; width: 100%; z-index: 4; .@{spin-prefix-cls}-dot { @@ -74,8 +74,23 @@ &-container { position: relative; - transition: opacity .3s; - .clearfix; + transition: opacity 0.3s; + + &: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 { @@ -83,23 +98,10 @@ user-select: none; overflow: hidden; opacity: 0.5; - -webkit-filter: blur(0.5px); - filter: blur(0.5px); - - /* autoprefixer: off */ - filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)"; &:after { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: #fff; - opacity: 0.3; - transition: all .3s; - z-index: 10; + opacity: 0.4; + pointer-events: auto; } } diff --git a/components/steps/style/index.less b/components/steps/style/index.less index bae8e7ce0..11c80468b 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@steps-prefix-cls: ~"@{ant-prefix}-steps"; +@steps-prefix-cls: ~'@{ant-prefix}-steps'; @process-icon-color: @primary-color; @process-title-color: @heading-color; @process-description-color: @text-color; @@ -65,7 +65,7 @@ border-radius: @steps-icon-size; font-size: @font-size-lg; margin-right: 8px; - transition: background-color .3s, border-color .3s; + transition: background-color 0.3s, border-color 0.3s; font-family: @font-family; > .@{steps-prefix-cls}-icon { @@ -82,13 +82,13 @@ top: 12px; padding: 0 10px; &:after { - content: ""; + content: ''; display: inline-block; background: @border-color-split; height: 1px; border-radius: 1px; width: 100%; - transition: background .3s; + transition: background 0.3s; } } &-title { @@ -99,7 +99,7 @@ position: relative; line-height: @steps-icon-size; &:after { - content: ""; + content: ''; height: 1px; width: 9999px; background: @wait-tail-color; @@ -153,10 +153,10 @@ } .step-item-status(@status) { - @icon-color: "@{status}-icon-color"; - @title-color: "@{status}-title-color"; - @description-color: "@{status}-description-color"; - @tail-color: "@{status}-tail-color"; + @icon-color: '@{status}-icon-color'; + @title-color: '@{status}-title-color'; + @description-color: '@{status}-description-color'; + @tail-color: '@{status}-tail-color'; &-@{status} &-icon { border-color: @@icon-color; background-color: @steps-background; diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less index 94ece6a8b..4b0f1c172 100644 --- a/components/steps/style/progress-dot.less +++ b/components/steps/style/progress-dot.less @@ -10,7 +10,7 @@ padding: 0; &:after { height: 3px; - width: ~"calc(100% - 20px)"; + width: ~'calc(100% - 20px)'; margin-left: 12px; } } @@ -31,11 +31,11 @@ height: 100%; border-radius: 100px; position: relative; - transition: all .3s; + transition: all 0.3s; /* expand hover area */ &:after { - content: ""; - background: rgba(0, 0, 0, .001); + content: ''; + background: rgba(0, 0, 0, 0.001); width: 60px; height: 32px; position: absolute; diff --git a/components/steps/style/small.less b/components/steps/style/small.less index 4bcb22601..27b189356 100644 --- a/components/steps/style/small.less +++ b/components/steps/style/small.less @@ -1,5 +1,6 @@ .@{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; &:last-child { margin-right: 0; diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less index 702e8143e..e8b440930 100644 --- a/components/steps/style/vertical.less +++ b/components/steps/style/vertical.less @@ -37,7 +37,9 @@ 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 { display: none; } diff --git a/components/style/color/colors.less b/components/style/color/colors.less index 9793a86d2..b489eed0c 100644 --- a/components/style/color/colors.less +++ b/components/style/color/colors.less @@ -1,146 +1,146 @@ @import 'colorPalette'; // color palettes -@blue-1: color(~`colorPalette("@{blue-6}", 1)`); -@blue-2: color(~`colorPalette("@{blue-6}", 2)`); -@blue-3: color(~`colorPalette("@{blue-6}", 3)`); -@blue-4: color(~`colorPalette("@{blue-6}", 4)`); -@blue-5: color(~`colorPalette("@{blue-6}", 5)`); +@blue-1: color(~`colorPalette('@{blue-6}', 1) `); +@blue-2: color(~`colorPalette('@{blue-6}', 2) `); +@blue-3: color(~`colorPalette('@{blue-6}', 3) `); +@blue-4: color(~`colorPalette('@{blue-6}', 4) `); +@blue-5: color(~`colorPalette('@{blue-6}', 5) `); @blue-6: #1890ff; -@blue-7: color(~`colorPalette("@{blue-6}", 7)`); -@blue-8: color(~`colorPalette("@{blue-6}", 8)`); -@blue-9: color(~`colorPalette("@{blue-6}", 9)`); -@blue-10: color(~`colorPalette("@{blue-6}", 10)`); +@blue-7: color(~`colorPalette('@{blue-6}', 7) `); +@blue-8: color(~`colorPalette('@{blue-6}', 8) `); +@blue-9: color(~`colorPalette('@{blue-6}', 9) `); +@blue-10: color(~`colorPalette('@{blue-6}', 10) `); -@purple-1: color(~`colorPalette("@{purple-6}", 1)`); -@purple-2: color(~`colorPalette("@{purple-6}", 2)`); -@purple-3: color(~`colorPalette("@{purple-6}", 3)`); -@purple-4: color(~`colorPalette("@{purple-6}", 4)`); -@purple-5: color(~`colorPalette("@{purple-6}", 5)`); +@purple-1: color(~`colorPalette('@{purple-6}', 1) `); +@purple-2: color(~`colorPalette('@{purple-6}', 2) `); +@purple-3: color(~`colorPalette('@{purple-6}', 3) `); +@purple-4: color(~`colorPalette('@{purple-6}', 4) `); +@purple-5: color(~`colorPalette('@{purple-6}', 5) `); @purple-6: #722ed1; -@purple-7: color(~`colorPalette("@{purple-6}", 7)`); -@purple-8: color(~`colorPalette("@{purple-6}", 8)`); -@purple-9: color(~`colorPalette("@{purple-6}", 9)`); -@purple-10: color(~`colorPalette("@{purple-6}", 10)`); +@purple-7: color(~`colorPalette('@{purple-6}', 7) `); +@purple-8: color(~`colorPalette('@{purple-6}', 8) `); +@purple-9: color(~`colorPalette('@{purple-6}', 9) `); +@purple-10: color(~`colorPalette('@{purple-6}', 10) `); -@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`); -@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`); -@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`); -@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`); -@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`); +@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `); +@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `); +@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `); +@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `); +@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `); @cyan-6: #13c2c2; -@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`); -@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`); -@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`); -@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`); +@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `); +@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `); +@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `); +@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `); -@green-1: color(~`colorPalette("@{green-6}", 1)`); -@green-2: color(~`colorPalette("@{green-6}", 2)`); -@green-3: color(~`colorPalette("@{green-6}", 3)`); -@green-4: color(~`colorPalette("@{green-6}", 4)`); -@green-5: color(~`colorPalette("@{green-6}", 5)`); +@green-1: color(~`colorPalette('@{green-6}', 1) `); +@green-2: color(~`colorPalette('@{green-6}', 2) `); +@green-3: color(~`colorPalette('@{green-6}', 3) `); +@green-4: color(~`colorPalette('@{green-6}', 4) `); +@green-5: color(~`colorPalette('@{green-6}', 5) `); @green-6: #52c41a; -@green-7: color(~`colorPalette("@{green-6}", 7)`); -@green-8: color(~`colorPalette("@{green-6}", 8)`); -@green-9: color(~`colorPalette("@{green-6}", 9)`); -@green-10: color(~`colorPalette("@{green-6}", 10)`); +@green-7: color(~`colorPalette('@{green-6}', 7) `); +@green-8: color(~`colorPalette('@{green-6}', 8) `); +@green-9: color(~`colorPalette('@{green-6}', 9) `); +@green-10: color(~`colorPalette('@{green-6}', 10) `); -@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`); -@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`); -@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`); -@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`); -@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`); +@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `); +@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `); +@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `); +@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `); +@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `); @magenta-6: #eb2f96; -@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`); -@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`); -@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`); -@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`); +@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `); +@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `); +@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `); +@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `); // alias of magenta -@pink-1: color(~`colorPalette("@{pink-6}", 1)`); -@pink-2: color(~`colorPalette("@{pink-6}", 2)`); -@pink-3: color(~`colorPalette("@{pink-6}", 3)`); -@pink-4: color(~`colorPalette("@{pink-6}", 4)`); -@pink-5: color(~`colorPalette("@{pink-6}", 5)`); +@pink-1: color(~`colorPalette('@{pink-6}', 1) `); +@pink-2: color(~`colorPalette('@{pink-6}', 2) `); +@pink-3: color(~`colorPalette('@{pink-6}', 3) `); +@pink-4: color(~`colorPalette('@{pink-6}', 4) `); +@pink-5: color(~`colorPalette('@{pink-6}', 5) `); @pink-6: #eb2f96; -@pink-7: color(~`colorPalette("@{pink-6}", 7)`); -@pink-8: color(~`colorPalette("@{pink-6}", 8)`); -@pink-9: color(~`colorPalette("@{pink-6}", 9)`); -@pink-10: color(~`colorPalette("@{pink-6}", 10)`); +@pink-7: color(~`colorPalette('@{pink-6}', 7) `); +@pink-8: color(~`colorPalette('@{pink-6}', 8) `); +@pink-9: color(~`colorPalette('@{pink-6}', 9) `); +@pink-10: color(~`colorPalette('@{pink-6}', 10) `); -@red-1: color(~`colorPalette("@{red-6}", 1)`); -@red-2: color(~`colorPalette("@{red-6}", 2)`); -@red-3: color(~`colorPalette("@{red-6}", 3)`); -@red-4: color(~`colorPalette("@{red-6}", 4)`); -@red-5: color(~`colorPalette("@{red-6}", 5)`); +@red-1: color(~`colorPalette('@{red-6}', 1) `); +@red-2: color(~`colorPalette('@{red-6}', 2) `); +@red-3: color(~`colorPalette('@{red-6}', 3) `); +@red-4: color(~`colorPalette('@{red-6}', 4) `); +@red-5: color(~`colorPalette('@{red-6}', 5) `); @red-6: #f5222d; -@red-7: color(~`colorPalette("@{red-6}", 7)`); -@red-8: color(~`colorPalette("@{red-6}", 8)`); -@red-9: color(~`colorPalette("@{red-6}", 9)`); -@red-10: color(~`colorPalette("@{red-6}", 10)`); +@red-7: color(~`colorPalette('@{red-6}', 7) `); +@red-8: color(~`colorPalette('@{red-6}', 8) `); +@red-9: color(~`colorPalette('@{red-6}', 9) `); +@red-10: color(~`colorPalette('@{red-6}', 10) `); -@orange-1: color(~`colorPalette("@{orange-6}", 1)`); -@orange-2: color(~`colorPalette("@{orange-6}", 2)`); -@orange-3: color(~`colorPalette("@{orange-6}", 3)`); -@orange-4: color(~`colorPalette("@{orange-6}", 4)`); -@orange-5: color(~`colorPalette("@{orange-6}", 5)`); +@orange-1: color(~`colorPalette('@{orange-6}', 1) `); +@orange-2: color(~`colorPalette('@{orange-6}', 2) `); +@orange-3: color(~`colorPalette('@{orange-6}', 3) `); +@orange-4: color(~`colorPalette('@{orange-6}', 4) `); +@orange-5: color(~`colorPalette('@{orange-6}', 5) `); @orange-6: #fa8c16; -@orange-7: color(~`colorPalette("@{orange-6}", 7)`); -@orange-8: color(~`colorPalette("@{orange-6}", 8)`); -@orange-9: color(~`colorPalette("@{orange-6}", 9)`); -@orange-10: color(~`colorPalette("@{orange-6}", 10)`); +@orange-7: color(~`colorPalette('@{orange-6}', 7) `); +@orange-8: color(~`colorPalette('@{orange-6}', 8) `); +@orange-9: color(~`colorPalette('@{orange-6}', 9) `); +@orange-10: color(~`colorPalette('@{orange-6}', 10) `); -@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`); -@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`); -@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`); -@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`); -@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`); +@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `); +@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `); +@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `); +@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `); +@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `); @yellow-6: #fadb14; -@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`); -@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`); -@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`); -@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`); +@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `); +@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `); +@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `); +@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `); -@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`); -@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`); -@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`); -@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`); -@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`); +@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `); +@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `); +@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `); +@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `); +@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `); @volcano-6: #fa541c; -@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`); -@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`); -@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`); -@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`); +@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `); +@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `); +@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `); +@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `); -@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`); -@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`); -@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`); -@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`); -@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`); +@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `); +@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `); +@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `); +@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `); +@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `); @geekblue-6: #2f54eb; -@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`); -@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`); -@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`); -@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`); +@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `); +@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `); +@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `); +@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `); -@lime-1: color(~`colorPalette("@{lime-6}", 1)`); -@lime-2: color(~`colorPalette("@{lime-6}", 2)`); -@lime-3: color(~`colorPalette("@{lime-6}", 3)`); -@lime-4: color(~`colorPalette("@{lime-6}", 4)`); -@lime-5: color(~`colorPalette("@{lime-6}", 5)`); +@lime-1: color(~`colorPalette('@{lime-6}', 1) `); +@lime-2: color(~`colorPalette('@{lime-6}', 2) `); +@lime-3: color(~`colorPalette('@{lime-6}', 3) `); +@lime-4: color(~`colorPalette('@{lime-6}', 4) `); +@lime-5: color(~`colorPalette('@{lime-6}', 5) `); @lime-6: #a0d911; -@lime-7: color(~`colorPalette("@{lime-6}", 7)`); -@lime-8: color(~`colorPalette("@{lime-6}", 8)`); -@lime-9: color(~`colorPalette("@{lime-6}", 9)`); -@lime-10: color(~`colorPalette("@{lime-6}", 10)`); +@lime-7: color(~`colorPalette('@{lime-6}', 7) `); +@lime-8: color(~`colorPalette('@{lime-6}', 8) `); +@lime-9: color(~`colorPalette('@{lime-6}', 9) `); +@lime-10: color(~`colorPalette('@{lime-6}', 10) `); -@gold-1: color(~`colorPalette("@{gold-6}", 1)`); -@gold-2: color(~`colorPalette("@{gold-6}", 2)`); -@gold-3: color(~`colorPalette("@{gold-6}", 3)`); -@gold-4: color(~`colorPalette("@{gold-6}", 4)`); -@gold-5: color(~`colorPalette("@{gold-6}", 5)`); +@gold-1: color(~`colorPalette('@{gold-6}', 1) `); +@gold-2: color(~`colorPalette('@{gold-6}', 2) `); +@gold-3: color(~`colorPalette('@{gold-6}', 3) `); +@gold-4: color(~`colorPalette('@{gold-6}', 4) `); +@gold-5: color(~`colorPalette('@{gold-6}', 5) `); @gold-6: #faad14; -@gold-7: color(~`colorPalette("@{gold-6}", 7)`); -@gold-8: color(~`colorPalette("@{gold-6}", 8)`); -@gold-9: color(~`colorPalette("@{gold-6}", 9)`); -@gold-10: color(~`colorPalette("@{gold-6}", 10)`); +@gold-7: color(~`colorPalette('@{gold-6}', 7) `); +@gold-8: color(~`colorPalette('@{gold-6}', 8) `); +@gold-9: color(~`colorPalette('@{gold-6}', 9) `); +@gold-10: color(~`colorPalette('@{gold-6}', 10) `); diff --git a/components/style/core/base.less b/components/style/core/base.less index 56a568450..0eae71fde 100644 --- a/components/style/core/base.less +++ b/components/style/core/base.less @@ -8,18 +8,20 @@ // Normalize is licensed MIT. https://github.com/necolas/normalize.css @font-face { - font-family: "Chinese Quote"; - src: local("PingFang SC"), local("SimSun"); + font-family: 'Chinese Quote'; + src: local('PingFang SC'), local('SimSun'); unicode-range: U+2018, U+2019, U+201c, U+201d; } // HTML & Body reset -html, body { +html, +body { .square(100%); } // 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; } @@ -49,10 +51,22 @@ html { } // IE10+ doesn't honor `` 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) -article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { +article, +aside, +dialog, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { display: block; } @@ -65,7 +79,7 @@ body { margin: 0; // 1 font-family: @font-family; font-size: @font-size-base; - font-variant: tabular-nums; + font-variant: @font-variant-base; line-height: @line-height-base; color: @text-color; background-color: @body-background; // 2 @@ -76,7 +90,7 @@ body { // might still respond to pointer events. // // Credit: https://github.com/suitcss/base -[tabindex="-1"]:focus { +[tabindex='-1']:focus { outline: none !important; } @@ -99,9 +113,14 @@ hr { // // By default, `

`-`

` all receive top and bottom margins. We nuke the top // margin for easier control within type scales as it avoids margin collapsing. -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; - margin-bottom: .5em; + margin-bottom: 0.5em; color: @heading-color; font-weight: 500; } @@ -123,7 +142,8 @@ p { // 4. Duplicate behavior to the data-* attribute for our tooltip plugin abbr[title], -abbr[data-original-title] { // 4 +abbr[data-original-title] { + // 4 text-decoration: underline; // 2 text-decoration: underline dotted; // 2 cursor: help; // 3 @@ -136,9 +156,9 @@ address { line-height: inherit; } -input[type="text"], -input[type="password"], -input[type="number"], +input[type='text'], +input[type='password'], +input[type='number'], textarea { -webkit-appearance: none; } @@ -162,7 +182,7 @@ dt { } dd { - margin-bottom: .5em; + margin-bottom: 0.5em; margin-left: 0; // Undo browser default } @@ -196,8 +216,12 @@ sup { vertical-align: baseline; } -sub { bottom: -.25em; } -sup { top: -.5em; } +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} // // Links @@ -209,7 +233,7 @@ a { text-decoration: @link-decoration; outline: none; 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+. &:focus { @@ -293,8 +317,8 @@ svg:not(:root) { a, area, button, -[role="button"], -input:not([type=range]), +[role='button'], +input:not([type='range']), label, select, summary, @@ -311,8 +335,8 @@ table { } caption { - padding-top: .75em; - padding-bottom: .3em; + padding-top: 0.75em; + padding-bottom: 0.3em; color: @text-color-secondary; text-align: left; 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. button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { padding: 0; border-style: none; } -input[type="radio"], -input[type="checkbox"] { +input[type='radio'], +input[type='checkbox'] { box-sizing: border-box; // 1. Add the correct box sizing in IE 10- padding: 0; // 2. remove the padding in IE 10- } -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { +input[type='date'], +input[type='time'], +input[type='datetime-local'], +input[type='month'] { // remove the default appearance of temporal inputs to avoid a Mobile Safari // bug where setting a custom line-height prevents text from being vertically // centered within the input. @@ -413,7 +437,7 @@ legend { width: 100%; max-width: 100%; // 1 padding: 0; - margin-bottom: .5em; + margin-bottom: 0.5em; font-size: 1.5em; line-height: inherit; color: inherit; // 2 @@ -425,12 +449,12 @@ progress { } // Correct the cursor style of incement and decement buttons in Chrome. -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { height: auto; } -[type="search"] { +[type='search'] { // This overrides the extra rounded corners on search inputs in iOS so that our // `.form-control` class can properly style them. Note that this cannot simply // be added to `.form-control` as it's not specific enough. For details, see @@ -443,8 +467,8 @@ progress { // remove the inner padding and cancel buttons in Chrome and Safari on macOS. // -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { -webkit-appearance: none; } @@ -481,7 +505,7 @@ template { } mark { - padding: .2em; + padding: 0.2em; background-color: @yellow-1; } diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less index 1d236c8a2..3f1a9fbb9 100644 --- a/components/style/core/iconfont.less +++ b/components/style/core/iconfont.less @@ -1,8 +1,8 @@ @import '../themes/default'; -@import "../mixins/iconfont"; +@import '../mixins/iconfont'; .@{iconfont-css-prefix} { - .iconfont-mixin(); + .iconfont-mixin(); } .@{iconfont-css-prefix}-spin:before { diff --git a/components/style/core/index.less b/components/style/core/index.less index 4901d0612..bce88707d 100644 --- a/components/style/core/index.less +++ b/components/style/core/index.less @@ -1,4 +1,4 @@ -@import "../mixins/index"; -@import "base"; -@import "iconfont"; -@import "motion"; +@import '../mixins/index'; +@import 'base'; +@import 'iconfont'; +@import 'motion'; diff --git a/components/style/core/motion.less b/components/style/core/motion.less index e47ce302a..930182b23 100644 --- a/components/style/core/motion.less +++ b/components/style/core/motion.less @@ -1,15 +1,15 @@ -@import "../mixins/motion"; -@import "motion/fade"; -@import "motion/move"; -@import "motion/other"; -@import "motion/slide"; -@import "motion/swing"; -@import "motion/zoom"; +@import '../mixins/motion'; +@import 'motion/fade'; +@import 'motion/move'; +@import 'motion/other'; +@import 'motion/slide'; +@import 'motion/swing'; +@import 'motion/zoom'; // For common/openAnimation .ant-motion-collapse { overflow: hidden; &-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; } } diff --git a/components/style/core/motion/other.less b/components/style/core/motion/other.less index 6ad5a623d..e11fe8f19 100644 --- a/components/style/core/motion/other.less +++ b/components/style/core/motion/other.less @@ -11,7 +11,7 @@ [ant-click-animating-without-extra-node]:after, .ant-click-animating-node { - content: ""; + content: ''; position: absolute; top: -1px; left: -1px; @@ -20,7 +20,7 @@ border-radius: inherit; border: 0 solid @primary-color; 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; display: block; pointer-events: none; diff --git a/components/style/core/motion/slide.less b/components/style/core/motion/slide.less index 216cff084..23420128e 100644 --- a/components/style/core/motion/slide.less +++ b/components/style/core/motion/slide.less @@ -19,7 +19,7 @@ 0% { opacity: 0; transform-origin: 0% 0%; - transform: scaleY(.8); + transform: scaleY(0.8); } 100% { opacity: 1; @@ -37,7 +37,7 @@ 100% { opacity: 0; transform-origin: 0% 0%; - transform: scaleY(.8); + transform: scaleY(0.8); } } @@ -45,7 +45,7 @@ 0% { opacity: 0; transform-origin: 100% 100%; - transform: scaleY(.8); + transform: scaleY(0.8); } 100% { opacity: 1; @@ -63,7 +63,7 @@ 100% { opacity: 0; transform-origin: 100% 100%; - transform: scaleY(.8); + transform: scaleY(0.8); } } @@ -71,7 +71,7 @@ 0% { opacity: 0; transform-origin: 0% 0%; - transform: scaleX(.8); + transform: scaleX(0.8); } 100% { opacity: 1; @@ -89,7 +89,7 @@ 100% { opacity: 0; transform-origin: 0% 0%; - transform: scaleX(.8); + transform: scaleX(0.8); } } @@ -97,7 +97,7 @@ 0% { opacity: 0; transform-origin: 100% 0%; - transform: scaleX(.8); + transform: scaleX(0.8); } 100% { opacity: 1; @@ -115,6 +115,6 @@ 100% { opacity: 0; transform-origin: 100% 0%; - transform: scaleX(.8); + transform: scaleX(0.8); } } diff --git a/components/style/core/motion/swing.less b/components/style/core/motion/swing.less index dcf299a01..8aac66c20 100644 --- a/components/style/core/motion/swing.less +++ b/components/style/core/motion/swing.less @@ -6,7 +6,7 @@ } .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active { - animation-name: ~"@{keyframeName}In"; + animation-name: ~'@{keyframeName}In'; animation-play-state: running; } } diff --git a/components/style/core/motion/zoom.less b/components/style/core/motion/zoom.less index 420b42f8e..2754360e0 100644 --- a/components/style/core/motion/zoom.less +++ b/components/style/core/motion/zoom.less @@ -46,7 +46,7 @@ @keyframes antZoomBigIn { 0% { opacity: 0; - transform: scale(.8); + transform: scale(0.8); } 100% { transform: scale(1); @@ -59,7 +59,7 @@ } 100% { opacity: 0; - transform: scale(.8); + transform: scale(0.8); } } @@ -67,7 +67,7 @@ 0% { opacity: 0; transform-origin: 50% 0%; - transform: scale(.8); + transform: scale(0.8); } 100% { transform-origin: 50% 0%; @@ -83,7 +83,7 @@ 100% { opacity: 0; transform-origin: 50% 0%; - transform: scale(.8); + transform: scale(0.8); } } @@ -91,7 +91,7 @@ 0% { opacity: 0; transform-origin: 0% 50%; - transform: scale(.8); + transform: scale(0.8); } 100% { transform-origin: 0% 50%; @@ -107,7 +107,7 @@ 100% { opacity: 0; transform-origin: 0% 50%; - transform: scale(.8); + transform: scale(0.8); } } @@ -115,7 +115,7 @@ 0% { opacity: 0; transform-origin: 100% 50%; - transform: scale(.8); + transform: scale(0.8); } 100% { transform-origin: 100% 50%; @@ -131,7 +131,7 @@ 100% { opacity: 0; transform-origin: 100% 50%; - transform: scale(.8); + transform: scale(0.8); } } @@ -139,7 +139,7 @@ 0% { opacity: 0; transform-origin: 50% 100%; - transform: scale(.8); + transform: scale(0.8); } 100% { transform-origin: 50% 100%; @@ -155,6 +155,6 @@ 100% { opacity: 0; transform-origin: 50% 100%; - transform: scale(.8); + transform: scale(0.8); } } diff --git a/components/style/index.less b/components/style/index.less index a33fdfc3a..0a1269031 100644 --- a/components/style/index.less +++ b/components/style/index.less @@ -1,2 +1,2 @@ -@import "./themes/default"; -@import "./core/index"; +@import './themes/default'; +@import './core/index'; diff --git a/components/style/mixins/clearfix.less b/components/style/mixins/clearfix.less index 8eefb38be..c0c7a7e70 100644 --- a/components/style/mixins/clearfix.less +++ b/components/style/mixins/clearfix.less @@ -4,7 +4,7 @@ zoom: 1; &:before, &:after { - content: ""; + content: ''; display: table; } &:after { diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less index a18f0c271..b4dadb09c 100644 --- a/components/style/mixins/iconfont.less +++ b/components/style/mixins/iconfont.less @@ -33,7 +33,7 @@ @font-scale: unit(@size / 12px); font-size: 12px; // IE9 - font-size: ~"@{size} \9"; + font-size: ~'@{size} \9'; transform: scale(@font-scale) rotate(@rotate); :root & { font-size: @font-size-sm; // reset IE9 and above diff --git a/components/style/mixins/index.less b/components/style/mixins/index.less index ccf2212a6..44c88a764 100644 --- a/components/style/mixins/index.less +++ b/components/style/mixins/index.less @@ -1,8 +1,8 @@ // Mixins // -------------------------------------------------- -@import "size"; -@import "compatibility"; -@import "clearfix"; -@import "iconfont"; -@import "motion"; -@import "reset"; +@import 'size'; +@import 'compatibility'; +@import 'clearfix'; +@import 'iconfont'; +@import 'motion'; +@import 'reset'; diff --git a/components/style/mixins/motion.less b/components/style/mixins/motion.less index 84b2c82eb..50aff38f8 100644 --- a/components/style/mixins/motion.less +++ b/components/style/mixins/motion.less @@ -22,11 +22,11 @@ } .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active { - animation-name: ~"@{keyframeName}In"; + animation-name: ~'@{keyframeName}In'; animation-play-state: running; } .@{className}-leave.@{className}-leave-active { - animation-name: ~"@{keyframeName}Out"; + animation-name: ~'@{keyframeName}Out'; animation-play-state: running; pointer-events: none; } diff --git a/components/style/mixins/reset.less b/components/style/mixins/reset.less index 8ce32e394..5a9c8107d 100644 --- a/components/style/mixins/reset.less +++ b/components/style/mixins/reset.less @@ -3,7 +3,7 @@ .reset-component() { font-family: @font-family; font-size: @font-size-base; - font-variant: tabular-nums; + font-variant: @font-variant-base; line-height: @line-height-base; color: @text-color; box-sizing: border-box; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index db5d8bcf1..c7697f45e 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -1,61 +1,63 @@ /* 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. -@ant-prefix : ant; +@ant-prefix : ant; // -------- Colors ----------- -@primary-color : @blue-6; -@info-color : @blue-6; -@success-color : @green-6; -@processing-color : @blue-6; -@error-color : @red-6; -@highlight-color : @red-6; -@warning-color : @gold-6; -@normal-color : #d9d9d9; +@primary-color : @blue-6; +@info-color : @blue-6; +@success-color : @green-6; +@processing-color : @blue-6; +@error-color : @red-6; +@highlight-color : @red-6; +@warning-color : @gold-6; +@normal-color : #d9d9d9; // Color used by default to control hover and active backgrounds and for // alert info backgrounds. -@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-3: color(~`colorPalette("@{primary-color}", 3)`); // 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-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-8: color(~`colorPalette("@{primary-color}", 8)`); // unused -@primary-9: color(~`colorPalette("@{primary-color}", 9)`); // unused -@primary-10: color(~`colorPalette("@{primary-color}", 10)`); // unused +@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-3: color(~`colorPalette('@{primary-color}', 3) `); // 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-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-8: color(~`colorPalette('@{primary-color}', 8) `); // unused +@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused +@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused // Base Scaffolding Variables // --- // Background color for `` -@body-background : #fff; +@body-background : #fff; // Base background color for most components -@component-background : #fff; -@font-family : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, +@component-background : #fff; +@font-family : "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; -@code-family : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; -@heading-color : fade(#000, 85%); -@text-color : fade(#000, 65%); -@text-color-secondary : fade(#000, 45%); -@heading-color-dark : fade(#fff, 100%); -@text-color-dark : fade(#fff, 85%); +@code-family : "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; +@heading-color : fade(#000, 85%); +@text-color : fade(#000, 65%); +@text-color-secondary : fade(#000, 45%); +@heading-color-dark : fade(#fff, 100%); +@text-color-dark : fade(#fff, 85%); @text-color-secondary-dark: fade(#fff, 65%); -@font-variant-base : tabular-nums; -@font-size-base : 14px; -@font-size-lg : @font-size-base + 2px; -@font-size-sm : 12px; -@line-height-base : 1.5; -@border-radius-base : 4px; -@border-radius-sm : 2px; +@font-variant-base : tabular-nums; +@font-size-base : 14px; +@font-size-lg : @font-size-base + 2px; +@font-size-sm : 12px; +@line-height-base : 1.5; +@border-radius-base : 4px; +@border-radius-sm : 2px; // vertical paddings -@padding-lg : 24px; // containers -@padding-md : 16px; // small containers and buttons -@padding-sm : 12px; // Form controls and items -@padding-xs : 8px; // small items +@padding-lg : 24px; // containers +@padding-md : 16px; // small containers and buttons +@padding-sm : 12px; // Form controls and items +@padding-xs : 8px; // small items // vertical padding for all form controls @control-padding-horizontal: @padding-sm; @@ -63,215 +65,215 @@ // The background colors for active and hover states for things like // list items or table cells. -@item-active-bg : @primary-1; -@item-hover-bg : @primary-1; +@item-active-bg : @primary-1; +@item-hover-bg : @primary-1; // ICONFONT -@iconfont-css-prefix : anticon; +@iconfont-css-prefix : anticon; // LINK -@link-color : @primary-color; -@link-hover-color : color(~`colorPalette("@{link-color}", 5)`); -@link-active-color : color(~`colorPalette("@{link-color}", 7)`); -@link-decoration : none; -@link-hover-decoration : none; +@link-color : @primary-color; +@link-hover-color : color(~`colorPalette("@{link-color}", 5)`); +@link-active-color : color(~`colorPalette("@{link-color}", 7)`); +@link-decoration : none; +@link-hover-decoration : none; // Animation -@ease-base-out : cubic-bezier(0.7, 0.3, 0.1, 1); -@ease-base-in : cubic-bezier(0.9, 0, 0.3, 0.7); -@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); -@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); -@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1); -@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46); -@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6); -@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); -@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1); -@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); -@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); -@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); -@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); -@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); +@ease-base-out : cubic-bezier(0.7, 0.3, 0.1, 1); +@ease-base-in : cubic-bezier(0.9, 0, 0.3, 0.7); +@ease-out : cubic-bezier(0.215, 0.61, 0.355, 1); +@ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19); +@ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1); +@ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46); +@ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6); +@ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46); +@ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1); +@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34); +@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86); +@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); +@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); +@ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1); // Border color -@border-color-base : hsv(0, 0, 85%); // base border outline a component -@border-color-split : hsv(0, 0, 91%); // split border inside a component -@border-width-base : 1px; // width of the border for a component -@border-style-base : solid; // style of a components border +@border-color-base : hsv(0, 0, 85%); // base border outline a component +@border-color-split : hsv(0, 0, 91%); // split border inside a component +@border-width-base : 1px; // width of the border for a component +@border-style-base : solid; // style of a components border // Outline -@outline-blur-size : 0; -@outline-width : 2px; -@outline-color : @primary-color; +@outline-blur-size : 0; +@outline-width : 2px; +@outline-color : @primary-color; -@background-color-light : hsv(0, 0, 98%); // background of header and selected item -@background-color-base : hsv(0, 0, 96%); // Default grey background color +@background-color-light : hsv(0, 0, 98%); // background of header and selected item +@background-color-base : hsv(0, 0, 96%); // Default grey background color // Disabled states -@disabled-color : fade(#000, 25%); -@disabled-bg : @background-color-base; -@disabled-color-dark : fade(#fff, 35%); +@disabled-color : fade(#000, 25%); +@disabled-bg : @background-color-base; +@disabled-color-dark : fade(#fff, 35%); // Shadow -@shadow-color : rgba(0, 0, 0, .15); -@box-shadow-base : @shadow-1-down; -@shadow-1-up : 0 -2px 8px @shadow-color; -@shadow-1-down : 0 2px 8px @shadow-color; -@shadow-1-left : -2px 0 8px @shadow-color; -@shadow-1-right : 2px 0 8px @shadow-color; -@shadow-2 : 0 4px 12px @shadow-color; +@shadow-color : rgba(0, 0, 0, .15); +@box-shadow-base : @shadow-1-down; +@shadow-1-up : 0 -2px 8px @shadow-color; +@shadow-1-down : 0 2px 8px @shadow-color; +@shadow-1-left : -2px 0 8px @shadow-color; +@shadow-1-right : 2px 0 8px @shadow-color; +@shadow-2 : 0 4px 12px @shadow-color; // Buttons -@btn-font-weight : 400; +@btn-font-weight : 400; @btn-border-radius-base : @border-radius-base; -@btn-border-radius-sm : @border-radius-base; +@btn-border-radius-sm : @border-radius-base; -@btn-primary-color : #fff; -@btn-primary-bg : @primary-color; +@btn-primary-color : #fff; +@btn-primary-bg : @primary-color; -@btn-default-color : @text-color; -@btn-default-bg : #fff; -@btn-default-border : @border-color-base; +@btn-default-color : @text-color; +@btn-default-bg : #fff; +@btn-default-border : @border-color-base; -@btn-danger-color : @error-color; -@btn-danger-bg : @background-color-base; -@btn-danger-border : @border-color-base; +@btn-danger-color : @error-color; +@btn-danger-bg : @background-color-base; +@btn-danger-border : @border-color-base; -@btn-disable-color : @disabled-color; -@btn-disable-bg : @disabled-bg; -@btn-disable-border : @border-color-base; +@btn-disable-color : @disabled-color; +@btn-disable-bg : @disabled-bg; +@btn-disable-border : @border-color-base; -@btn-padding-base : 0 @padding-md - 1px; -@btn-font-size-lg : @font-size-lg; -@btn-font-size-sm : @font-size-base; -@btn-padding-lg : @btn-padding-base; -@btn-padding-sm : 0 @padding-xs - 1px; +@btn-padding-base : 0 @padding-md - 1px; +@btn-font-size-lg : @font-size-lg; +@btn-font-size-sm : @font-size-base; +@btn-padding-lg : @btn-padding-base; +@btn-padding-sm : 0 @padding-xs - 1px; -@btn-height-base : 32px; -@btn-height-lg : 40px; -@btn-height-sm : 24px; +@btn-height-base : 32px; +@btn-height-lg : 40px; +@btn-height-sm : 24px; -@btn-circle-size : @btn-height-base; -@btn-circle-size-lg : @btn-height-lg; -@btn-circle-size-sm : @btn-height-sm; +@btn-circle-size : @btn-height-base; +@btn-circle-size-lg : @btn-height-lg; +@btn-circle-size-sm : @btn-height-sm; -@btn-group-border : @primary-5; +@btn-group-border : @primary-5; // Checkbox -@checkbox-size : 16px; -@checkbox-color : @primary-color; -@checkbox-check-color : #fff; -@checkbox-border-width : @border-width-base; +@checkbox-size : 16px; +@checkbox-color : @primary-color; +@checkbox-check-color : #fff; +@checkbox-border-width : @border-width-base; // Radio -@radio-size : 16px; -@radio-dot-color : @primary-color; +@radio-size : 16px; +@radio-dot-color : @primary-color; // Radio buttons -@radio-button-bg : @btn-default-bg; -@radio-button-color : @btn-default-color; -@radio-button-hover-color : @primary-5; +@radio-button-bg : @btn-default-bg; +@radio-button-color : @btn-default-color; +@radio-button-hover-color : @primary-5; @radio-button-active-color : @primary-7; // Media queries breakpoints // Extra small screen / phone -@screen-xs : 480px; -@screen-xs-min : @screen-xs; +@screen-xs : 480px; +@screen-xs-min : @screen-xs; // Small screen / tablet -@screen-sm : 576px; -@screen-sm-min : @screen-sm; +@screen-sm : 576px; +@screen-sm-min : @screen-sm; // Medium screen / desktop -@screen-md : 768px; -@screen-md-min : @screen-md; +@screen-md : 768px; +@screen-md-min : @screen-md; // Large screen / wide desktop -@screen-lg : 992px; -@screen-lg-min : @screen-lg; +@screen-lg : 992px; +@screen-lg-min : @screen-lg; // Extra large screen / full hd -@screen-xl : 1200px; -@screen-xl-min : @screen-xl; +@screen-xl : 1200px; +@screen-xl-min : @screen-xl; // Extra extra large screen / large descktop -@screen-xxl : 1600px; -@screen-xxl-min : @screen-xxl; +@screen-xxl : 1600px; +@screen-xxl-min : @screen-xxl; // provide a maximum -@screen-xs-max : (@screen-sm-min - 1px); -@screen-sm-max : (@screen-md-min - 1px); -@screen-md-max : (@screen-lg-min - 1px); -@screen-lg-max : (@screen-xl-min - 1px); -@screen-xl-max : (@screen-xxl-min - 1px); +@screen-xs-max : (@screen-sm-min - 1px); +@screen-sm-max : (@screen-md-min - 1px); +@screen-md-max : (@screen-lg-min - 1px); +@screen-lg-max : (@screen-xl-min - 1px); +@screen-xl-max : (@screen-xxl-min - 1px); // Grid system -@grid-columns : 24; -@grid-gutter-width : 0; +@grid-columns : 24; +@grid-gutter-width : 0; // Layout -@layout-body-background : #f0f2f5; -@layout-header-background : #001529; -@layout-footer-background : @layout-body-background; -@layout-header-height : 64px; -@layout-header-padding : 0 50px; -@layout-footer-padding : 24px 50px; -@layout-sider-background : @layout-header-background; -@layout-trigger-height : 48px; -@layout-trigger-background : #002140; -@layout-trigger-color : #fff; -@layout-zero-trigger-width : 36px; -@layout-zero-trigger-height : 42px; +@layout-body-background : #f0f2f5; +@layout-header-background : #001529; +@layout-footer-background : @layout-body-background; +@layout-header-height : 64px; +@layout-header-padding : 0 50px; +@layout-footer-padding : 24px 50px; +@layout-sider-background : @layout-header-background; +@layout-trigger-height : 48px; +@layout-trigger-background : #002140; +@layout-trigger-color : #fff; +@layout-zero-trigger-width : 36px; +@layout-zero-trigger-height : 42px; // Layout light theme -@layout-sider-background-light : #fff; +@layout-sider-background-light : #fff; @layout-trigger-background-light: #fff; -@layout-trigger-color-light : @text-color; +@layout-trigger-color-light : @text-color; // z-index list -@zindex-affix : 10; -@zindex-back-top : 10; -@zindex-modal-mask : 1000; -@zindex-modal : 1000; -@zindex-notification : 1010; -@zindex-message : 1010; -@zindex-popover : 1030; -@zindex-picker : 1050; -@zindex-dropdown : 1050; -@zindex-tooltip : 1060; +@zindex-affix : 10; +@zindex-back-top : 10; +@zindex-modal-mask : 1000; +@zindex-modal : 1000; +@zindex-notification : 1010; +@zindex-message : 1010; +@zindex-popover : 1030; +@zindex-picker : 1050; +@zindex-dropdown : 1050; +@zindex-tooltip : 1060; // Animation -@animation-duration-slow: .3s; // Modal -@animation-duration-base: .2s; -@animation-duration-fast: .1s; // Tooltip +@animation-duration-slow: 0.3s; // Modal +@animation-duration-base: 0.2s; +@animation-duration-fast: 0.1s; // Tooltip // Form // --- -@label-required-color : @highlight-color; -@label-color : @heading-color; -@form-item-margin-bottom : 24px; -@form-item-trailing-colon : true; +@label-required-color : @highlight-color; +@label-color : @heading-color; +@form-item-margin-bottom : 24px; +@form-item-trailing-colon : true; @form-vertical-label-padding : 0 0 8px; -@form-vertical-label-margin : 0; +@form-vertical-label-margin : 0; // Input // --- -@input-height-base : 32px; -@input-height-lg : 40px; -@input-height-sm : 24px; -@input-padding-horizontal : @control-padding-horizontal - 1px; +@input-height-base : 32px; +@input-height-lg : 40px; +@input-height-sm : 24px; +@input-padding-horizontal : @control-padding-horizontal - 1px; @input-padding-horizontal-base: @input-padding-horizontal; @input-padding-horizontal-sm : @control-padding-horizontal-sm - 1px; @input-padding-horizontal-lg : @input-padding-horizontal; @input-padding-vertical-base : 4px; -@input-padding-vertical-sm : 1px; -@input-padding-vertical-lg : 6px; -@input-placeholder-color : hsv(0, 0, 75%); -@input-color : @text-color; -@input-border-color : @border-color-base; -@input-bg : #fff; -@input-addon-bg : @background-color-light; -@input-hover-border-color : @primary-color; -@input-disabled-bg : @disabled-bg; -@input-outline-offset : 0 0; +@input-padding-vertical-sm : 1px; +@input-padding-vertical-lg : 6px; +@input-placeholder-color : hsv(0, 0, 75%); +@input-color : @text-color; +@input-border-color : @border-color-base; +@input-bg : #fff; +@input-addon-bg : @background-color-light; +@input-hover-border-color : @primary-color; +@input-disabled-bg : @disabled-bg; +@input-outline-offset : 0 0; // Tooltip // --- @@ -280,7 +282,7 @@ //** Tooltip text color @tooltip-color: #fff; //** Tooltip background color -@tooltip-bg: rgba(0, 0, 0, .75); +@tooltip-bg: rgba(0, 0, 0, 0.75); //** Tooltip arrow width @tooltip-arrow-width: 5px; //** Tooltip distance with trigger @@ -348,12 +350,13 @@ @table-header-bg: @background-color-light; @table-header-color: @heading-color; @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-selected-row-bg: #fafafa; @table-expanded-row-bg: #fbfbfb; @table-padding-vertical: 16px; @table-padding-horizontal: 16px; +@table-border-radius-base : @border-radius-base; // Tag // -- @@ -361,11 +364,6 @@ @tag-default-color: @text-color; @tag-font-size: @font-size-sm; -// Skeleton -// --- -@skeleton-color: #f2f2f2; - - // TimePicker // --- @time-picker-panel-column-width: 56px; @@ -400,7 +398,7 @@ @card-padding-base: 24px; @card-padding-wider: 32px; @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 // --- @@ -423,6 +421,8 @@ @tabs-bar-margin: 0 0 16px 0; @tabs-horizontal-margin: 0 32px 0 0; @tabs-horizontal-padding: 12px 16px; +@tabs-horizontal-padding-lg: 16px; +@tabs-horizontal-padding-sm: 8px 16px; @tabs-vertical-padding: 8px 24px; @tabs-vertical-margin: 0 0 16px 0; @tabs-scrolling-size: 32px; @@ -465,57 +465,57 @@ // Breadcrumb // --- -@breadcrumb-base-color: @text-color-secondary; -@breadcrumb-last-item-color: @text-color; -@breadcrumb-font-size: @font-size-base; -@breadcrumb-icon-font-size: @font-size-base; -@breadcrumb-link-color: @text-color-secondary; -@breadcrumb-link-color-hover: @primary-5; -@breadcrumb-separator-color: @text-color-secondary; -@breadcrumb-separator-margin: 0 @padding-xs; +@breadcrumb-base-color: @text-color-secondary; +@breadcrumb-last-item-color: @text-color; +@breadcrumb-font-size: @font-size-base; +@breadcrumb-icon-font-size: @font-size-base; +@breadcrumb-link-color: @text-color-secondary; +@breadcrumb-link-color-hover: @primary-5; +@breadcrumb-separator-color: @text-color-secondary; +@breadcrumb-separator-margin: 0 @padding-xs; // Slider // --- -@slider-margin: 14px 6px 10px; -@slider-rail-background-color: @background-color-base; -@slider-rail-background-color-hover: #e1e1e1; -@slider-track-background-color: @primary-3; -@slider-track-background-color-hover: @primary-4; -@slider-handle-color: @primary-3; -@slider-handle-color-hover: @primary-4; -@slider-handle-color-focus: tint(@primary-color, 20%); -@slider-handle-color-focus-shadow: tint(@primary-color, 50%); -@slider-handle-color-tooltip-open: @primary-color; -@slider-dot-border-color: @border-color-split; -@slider-dot-border-color-active: tint(@primary-color, 50%); -@slider-disabled-color: @disabled-color; -@slider-disabled-background-color: @component-background; +@slider-margin: 14px 6px 10px; +@slider-rail-background-color: @background-color-base; +@slider-rail-background-color-hover: #e1e1e1; +@slider-track-background-color: @primary-5; +@slider-track-background-color-hover: @primary-6; +@slider-handle-color: @primary-5; +@slider-handle-color-hover: @primary-6; +@slider-handle-color-focus: tint(@primary-color, 20%); +@slider-handle-color-focus-shadow: fade(@primary-color, 20%); +@slider-handle-color-tooltip-open: @primary-color; +@slider-dot-border-color: @border-color-split; +@slider-dot-border-color-active: @primary-5; +@slider-disabled-color: @disabled-color; +@slider-disabled-background-color: @component-background; // Tree // --- -@tree-title-height: 24px; -@tree-child-padding: 18px; -@tree-directory-selected-color: #fff; -@tree-directory-selected-bg: @primary-color; +@tree-title-height: 24px; +@tree-child-padding: 18px; +@tree-directory-selected-color: #fff; +@tree-directory-selected-bg: @primary-color; // Collapse // --- -@collapse-header-padding: 12px 0 12px 40px; -@collapse-header-bg: @background-color-light; -@collapse-content-padding: @padding-md; -@collapse-content-bg: @component-background; +@collapse-header-padding: 12px 0 12px 40px; +@collapse-header-bg: @background-color-light; +@collapse-content-padding: @padding-md; +@collapse-content-bg: @component-background; // Skeleton // --- -@skeleton-color: #f2f2f2; +@skeleton-color: #f2f2f2; // Transfer // --- -@transfer-disabled-bg: @disabled-bg; +@transfer-disabled-bg: @disabled-bg; // Message // --- -@message-notice-content-padding: 10px 16px; +@message-notice-content-padding: 10px 16px; // Motion // --- @@ -523,24 +523,24 @@ // Alert // --- -@alert-success-border-color: ~`colorPalette("@{success-color}", 3)`; -@alert-success-bg-color: ~`colorPalette("@{success-color}", 1)`; +@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `; +@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `; @alert-success-icon-color: @success-color; -@alert-info-border-color: ~`colorPalette("@{info-color}", 3)`; -@alert-info-bg-color: ~`colorPalette("@{info-color}", 1)`; +@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `; +@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `; @alert-info-icon-color: @info-color; -@alert-warning-border-color: ~`colorPalette("@{warning-color}", 3)`; -@alert-warning-bg-color: ~`colorPalette("@{warning-color}", 1)`; +@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `; +@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `; @alert-warning-icon-color: @warning-color; -@alert-error-border-color: ~`colorPalette("@{error-color}", 3)`; -@alert-error-bg-color: ~`colorPalette("@{error-color}", 1)`; +@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `; +@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `; @alert-error-icon-color: @error-color; // List // --- -@list-empty-text-padding: @padding-md; -@list-item-padding: @padding-sm 0; -@list-item-content-margin: 0 0 @padding-md 0; -@list-item-meta-margin-bottom: @padding-md; -@list-item-meta-avatar-margin-right: @padding-md; -@list-item-meta-title-margin-bottom: @padding-sm; +@list-empty-text-padding: @padding-md; +@list-item-padding: @padding-sm 0; +@list-item-content-margin: 0 0 @padding-md 0; +@list-item-meta-margin-bottom: @padding-md; +@list-item-meta-avatar-margin-right: @padding-md; +@list-item-meta-title-margin-bottom: @padding-sm; diff --git a/components/style/v2-compatible-reset.less b/components/style/v2-compatible-reset.less index c60350ebb..7fe3a6d7e 100644 --- a/components/style/v2-compatible-reset.less +++ b/components/style/v2-compatible-reset.less @@ -3,7 +3,44 @@ // or // @import '~antd/style/v2-compatible-reset.css'; // unify the setting of elements's margin and padding for browsers -body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { +body, +div, +dl, +dt, +dd, +ul, +ol, +li, +h1, +h2, +h3, +h4, +h5, +h6, +pre, +code, +form, +fieldset, +legend, +input, +textarea, +p, +blockquote, +th, +td, +hr, +button, +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { margin: 0; padding: 0; } diff --git a/components/switch/style/index.less b/components/switch/style/index.less index 51dbdadef..c670c4582 100644 --- a/components/switch/style/index.less +++ b/components/switch/style/index.less @@ -1,8 +1,8 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@switch-prefix-cls: ~"@{ant-prefix}-switch"; -@switch-duration: .36s; +@switch-prefix-cls: ~'@{ant-prefix}-switch'; +@switch-duration: 0.36s; .@{switch-prefix-cls} { .reset-component; @@ -37,13 +37,13 @@ top: 1px; border-radius: 18px; background-color: @component-background; - content: " "; + content: ' '; cursor: pointer; transition: all @switch-duration @ease-in-out-circ; } &: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, diff --git a/components/table/style/index.less b/components/table/style/index.less index b45e82a9d..5f5cdae39 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@table-prefix-cls: ~"@{ant-prefix}-table"; +@table-prefix-cls: ~'@{ant-prefix}-table'; @table-header-icon-color: #bfbfbf; @table-header-sort-active-bg: darken(@table-header-bg, 3%); @table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%); @@ -16,7 +16,7 @@ clear: both; &-body { - transition: opacity .3s; + transition: opacity 0.3s; } &-empty &-body { @@ -27,12 +27,12 @@ width: 100%; border-collapse: collapse; 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 { background: @table-header-bg; - transition: background .3s ease; + transition: background 0.3s ease; text-align: left; color: @table-header-color; font-weight: 500; @@ -47,7 +47,7 @@ font-size: @font-size-sm; cursor: pointer; color: @table-header-icon-color; - transition: all .3s; + transition: all 0.3s; width: 28px; position: absolute; top: 0; @@ -77,14 +77,14 @@ margin-top: -(@font-size-lg + 1px) / 2; text-align: center; color: @table-header-icon-color; - transition: all .3s; + transition: all 0.3s; &-up, &-down { .iconfont-size-under-12px(11px); line-height: 4px; height: 4px; - transition: all .3s; + transition: all 0.3s; display: block; &.on { color: @primary-color; @@ -154,16 +154,16 @@ .@{table-prefix-cls}-column-sorters { &:before { position: absolute; - content: ""; + content: ''; top: 0; left: 0; right: 0; bottom: 0; background: transparent; - transition: all .3s; + transition: all 0.3s; } &:hover:before { - background: rgba(0, 0, 0, .04); + background: rgba(0, 0, 0, 0.04); } } @@ -178,11 +178,11 @@ &-thead > tr:first-child > th { &:first-child { - border-top-left-radius: @border-radius-base; + border-top-left-radius: @table-border-radius-base; } &:last-child { - border-top-right-radius: @border-radius-base; + border-top-right-radius: @table-border-radius-base; } } @@ -194,12 +194,12 @@ &-tbody > tr > td { border-bottom: @border-width-base @border-style-base @border-color-split; - transition: all .3s, border 0s; + transition: all 0.3s, border 0s; } &-thead > tr, &-tbody > tr { - transition: all .3s, height 0s; + transition: all 0.3s, height 0s; &.@{table-prefix-cls}-row-hover, &:hover { &:not(.@{table-prefix-cls}-expanded-row) > td { @@ -215,11 +215,11 @@ &-footer { padding: @table-padding-vertical @table-padding-horizontal; 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; border-top: @border-width-base @border-style-base @border-color-split; &:before { - content: ""; + content: ''; height: 1px; background: @table-header-bg; position: absolute; @@ -237,7 +237,7 @@ padding: @table-padding-vertical 0; position: relative; 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 { @@ -248,7 +248,7 @@ &-title + &-content { 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; .@{table-prefix-cls}-bordered & { &, @@ -280,8 +280,6 @@ &-thead > tr > th, &-tbody > tr > td { 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 { @@ -313,7 +311,7 @@ } &-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 { @@ -410,6 +408,7 @@ background: @component-background; border-radius: @border-radius-base; box-shadow: @box-shadow-base; + position: relative; .@{ant-prefix}-dropdown-menu { 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-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; } @@ -479,7 +480,7 @@ .@{iconfont-css-prefix}-down { color: @table-header-icon-color; - transition: all .3s; + transition: all 0.3s; } &-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; } } @@ -590,7 +591,7 @@ position: absolute; top: 0; overflow: hidden; - transition: box-shadow .3s ease; + transition: box-shadow 0.3s ease; border-radius: 0; table { width: auto; @@ -619,7 +620,7 @@ } &, 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 { border-top-right-radius: 0; @@ -631,7 +632,7 @@ box-shadow: -6px 0 6px -4px @shadow-color; &, 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 // https://github.com/ant-design/ant-design/issues/1898 diff --git a/components/table/style/size.less b/components/table/style/size.less index c9c8a8705..7c957bbda 100644 --- a/components/table/style/size.less +++ b/components/table/style/size.less @@ -15,8 +15,14 @@ > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > 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-left > .@{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}-fixed-left + > .@{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}-tbody > tr > td { padding: @table-padding-vertical-md @table-padding-horizontal-md; @@ -31,7 +37,7 @@ .@{table-prefix-cls}-small { 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}-footer { @@ -54,8 +60,14 @@ > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > 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-left > .@{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}-fixed-left + > .@{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; > .@{table-prefix-cls}-thead > tr > th, > .@{table-prefix-cls}-tbody > tr > td { @@ -74,8 +86,14 @@ > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > 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-left > .@{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}-fixed-left + > .@{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; } diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index bf65d4fa0..be6172647 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -155,4 +155,4 @@ padding-bottom: 0; padding-top: 1px; } -} \ No newline at end of file +} diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 166b7a749..37fe67480 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -158,12 +158,6 @@ clear: both; } - .@{tab-prefix-cls}-tab-disabled { - pointer-events: none; - cursor: default; - color: @disabled-color; - } - .@{tab-prefix-cls}-tab { display: inline-block; height: 100%; @@ -191,11 +185,19 @@ .@{iconfont-css-prefix} { margin-right: 8px; } - } - .@{tab-prefix-cls}-tab-active { - color: @tabs-highlight-color; - font-weight: 500; + &-disabled { + &, + &:hover { + cursor: not-allowed; + color: @disabled-color; + } + } + + &-active { + color: @tabs-highlight-color; + font-weight: 500; + } } } @@ -204,7 +206,7 @@ font-size: @tabs-title-font-size-lg; } .@{tab-prefix-cls}-tab { - padding: 16px; + padding: @tabs-horizontal-padding-lg; } } @@ -213,7 +215,7 @@ font-size: @tabs-title-font-size-sm; } .@{tab-prefix-cls}-tab { - padding: 8px 16px; + padding: @tabs-horizontal-padding-sm; } } @@ -410,4 +412,4 @@ .@{tab-prefix-cls}-left-content, .@{tab-prefix-cls}-right-content { .tabs-no-animation(); -} \ No newline at end of file +} diff --git a/components/tag/style/index.less b/components/tag/style/index.less index 50b066203..ae23f3ee9 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@tag-prefix-cls: ~"@{ant-prefix}-tag"; +@tag-prefix-cls: ~'@{ant-prefix}-tag'; .@{tag-prefix-cls} { .reset-component; @@ -29,7 +29,7 @@ color: @tag-default-color; } - >a:first-child:last-child { + > a:first-child:last-child { display: inline-block; margin: 0 -8px; padding: 0 8px; @@ -39,7 +39,7 @@ .iconfont-size-under-12px(10px); cursor: pointer; margin-left: 3px; - transition: all .3s; + transition: all 0.3s; color: @text-color-secondary; font-weight: bold; @@ -85,24 +85,29 @@ &-zoom-enter, &-zoom-appear { - animation: antFadeIn .2s @ease-in-out-circ; + animation: antFadeIn 0.2s @ease-in-out-circ; animation-fill-mode: both; } &-zoom-leave { - animation: antZoomOut .3s @ease-in-out-circ; + animation: antZoomOut 0.3s @ease-in-out-circ; 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 .make-color-classes(@i: length(@colors)) when (@i > 0) { .make-color-classes(@i - 1); @color: extract(@colors, @i); - @lightColor: "@{color}-1"; - @lightBorderColor: "@{color}-3"; - @darkColor: "@{color}-6"; + @lightColor: '@{color}-1'; + @lightBorderColor: '@{color}-3'; + @darkColor: '@{color}-6'; &-@{color} { color: @@darkColor; background: @@lightColor; diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index 1ddca1af1..b31cab2f9 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -1,8 +1,8 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../input/style/mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../input/style/mixin'; -@timepicker-prefix-cls: ~"@{ant-prefix}-time-picker"; +@timepicker-prefix-cls: ~'@{ant-prefix}-time-picker'; @timepicker-item-height: 32px; .@{timepicker-prefix-cls}-panel { @@ -44,7 +44,7 @@ } &-invalid { - border-color: red; + border-color: @error-color; } } @@ -191,7 +191,7 @@ position: relative; display: inline-block; outline: none; - transition: opacity .3s; + transition: opacity 0.3s; width: 128px; &-input { @@ -208,7 +208,7 @@ &-icon { position: absolute; user-select: none; - transition: all .3s @ease-in-out; + transition: all 0.3s @ease-in-out; width: 14px; height: 14px; line-height: 14px; diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index c310207ca..82f8ea154 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@timeline-prefix-cls: ~"@{ant-prefix}-timeline"; +@timeline-prefix-cls: ~'@{ant-prefix}-timeline'; @timeline-color: @border-color-split; .@{timeline-prefix-cls} { @@ -89,7 +89,6 @@ &.@{timeline-prefix-cls}-alternate, &.@{timeline-prefix-cls}-right { .@{timeline-prefix-cls}-item { - &-tail, &-head, &-head-custom { diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index c27237753..492ec25db 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -1,7 +1,7 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; -@tooltip-prefix-cls: ~"@{ant-prefix}-tooltip"; +@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip'; // Base class .@{tooltip-prefix-cls} { diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 7697769a0..b0f285afe 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -1,8 +1,8 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../checkbox/style/mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../checkbox/style/mixin'; -@transfer-prefix-cls: ~"@{ant-prefix}-transfer"; +@transfer-prefix-cls: ~'@{ant-prefix}-transfer'; .@{transfer-prefix-cls} { .reset-component; @@ -40,7 +40,7 @@ line-height: @input-height-base; text-align: center; .@{iconfont-css-prefix} { - transition: all .3s; + transition: all 0.3s; color: @disabled-color; &:hover { color: @text-color-secondary; @@ -104,7 +104,7 @@ text-overflow: ellipsis; padding: 6px @control-padding-horizontal; min-height: 32px; - transition: all .3s; + transition: all 0.3s; > span { padding-right: 0; } @@ -125,17 +125,12 @@ padding-top: 0; color: @disabled-color; text-align: center; - display: none; position: absolute; top: 50%; width: 100%; margin-top: -10px; } - &-content:empty + &-body-not-found { - display: block; - } - &-footer { border-top: @border-width-base @border-style-base @border-color-split; border-radius: 0 0 @border-radius-base @border-radius-base; diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index 063fd98bd..410b54048 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -1,12 +1,12 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../tree/style/mixin"; -@import "../../checkbox/style/mixin"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../tree/style/mixin'; +@import '../../checkbox/style/mixin'; -@select-prefix-cls: ~"@{ant-prefix}-select"; -@select-tree-prefix-cls: ~"@{ant-prefix}-select-tree"; +@select-prefix-cls: ~'@{ant-prefix}-select'; +@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} { .reset-component; @@ -36,8 +36,8 @@ cursor: pointer; text-decoration: none; color: @text-color; - transition: all .3s; - width: ~"calc(100% - 24px)"; + transition: all 0.3s; + width: ~'calc(100% - 24px)'; &:hover { background-color: @item-hover-bg; } @@ -49,7 +49,7 @@ &.@{select-tree-prefix-cls}-checkbox { margin: 0 4px 0 0; + .@{select-tree-prefix-cls}-node-content-wrapper { - width: ~"calc(100% - 46px)"; + width: ~'calc(100% - 46px)'; } } &.@{select-tree-prefix-cls}-switcher, @@ -101,26 +101,26 @@ } &.@{select-tree-prefix-cls}-switcher_open, - &.@{select-tree-prefix-cls}-switcher_close { - .@{select-prefix-cls}-switcher-loading-icon { - display: inline-block; + &.@{select-tree-prefix-cls}-switcher_close { + .@{select-prefix-cls}-switcher-loading-icon { + display: inline-block; + position: absolute; + left: 0; + width: 24px; + height: 24px; + color: @primary-color; + transform: none; + font-size: 14px; + svg { position: absolute; + top: 0; + right: 0; + bottom: 0; left: 0; - width: 24px; - height: 24px; - color: @primary-color; - transform: none; - font-size: 14px; - svg { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin: auto; - } + margin: auto; } } + } } } } diff --git a/components/tree/style/directory.less b/components/tree/style/directory.less index c33e683b2..7718db4cd 100644 --- a/components/tree/style/directory.less +++ b/components/tree/style/directory.less @@ -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}-directory { @@ -42,12 +42,12 @@ } &:before { - content: ""; + content: ''; position: absolute; left: 0; right: 0; height: @tree-title-height; - transition: all .3s; + transition: all 0.3s; } > span { diff --git a/components/tree/style/index.less b/components/tree/style/index.less index 66ecf23ff..102afcda8 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -1,20 +1,21 @@ -@import "../../style/themes/default"; -@import "../../style/mixins/index"; -@import "../../checkbox/style/mixin"; -@import "./mixin"; -@import "./directory"; +@import '../../style/themes/default'; +@import '../../style/mixins/index'; +@import '../../checkbox/style/mixin'; +@import './mixin'; +@import './directory'; -@tree-prefix-cls: ~"@{ant-prefix}-tree"; +@tree-prefix-cls: ~'@{ant-prefix}-tree'; @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} { .reset-component; margin: 0; padding: 0; - ol, ul { + ol, + ul { list-style: none; margin: 0; padding: 0; @@ -27,7 +28,7 @@ white-space: nowrap; outline: 0; span[draggable], - span[draggable="true"] { + span[draggable='true'] { user-select: none; border-top: 2px transparent solid; border-bottom: 2px transparent solid; @@ -107,7 +108,7 @@ text-decoration: none; vertical-align: top; color: @text-color; - transition: all .3s; + transition: all 0.3s; height: @tree-title-height; line-height: @tree-title-height; &:hover { @@ -206,13 +207,13 @@ background: @component-background; color: @tree-showline-icon-color; &.@{tree-prefix-cls}-switcher-noop { - .antTreeShowLineIcon("tree-doc-icon"); + .antTreeShowLineIcon('tree-doc-icon'); } &.@{tree-prefix-cls}-switcher_open { - .antTreeShowLineIcon("tree-showline-open-icon"); + .antTreeShowLineIcon('tree-showline-open-icon'); } &.@{tree-prefix-cls}-switcher_close { - .antTreeShowLineIcon("tree-showline-close-icon"); + .antTreeShowLineIcon('tree-showline-close-icon'); } } } diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less index e122789d5..360990533 100644 --- a/components/tree/style/mixin.less +++ b/components/tree/style/mixin.less @@ -1,16 +1,16 @@ -@import "../../style/mixins/index"; +@import '../../style/mixins/index'; -@tree-prefix-cls: ~"@{ant-prefix}-tree"; -@tree-select-prefix-cls: ~"@{ant-prefix}-select"; +@tree-prefix-cls: ~'@{ant-prefix}-tree'; +@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-select-prefix-cls}-switcher-icon { .iconfont-size-under-12px(10px); display: inline-block; font-weight: bold; svg { - transition: transform .3s; + transition: transform 0.3s; } } } @@ -22,7 +22,7 @@ display: inline-block; font-weight: normal; svg { - transition: transform .3s; + transition: transform 0.3s; } } } diff --git a/components/upload/style/index.less b/components/upload/style/index.less index fd70c796d..181ee0f6f 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -467,4 +467,4 @@ padding: 0; opacity: 0; } -} \ No newline at end of file +} diff --git a/scripts/syncStyleFromAntd.js b/scripts/syncStyleFromAntd.js index 7e1ad8ac6..ff3f9fb3d 100644 --- a/scripts/syncStyleFromAntd.js +++ b/scripts/syncStyleFromAntd.js @@ -6,7 +6,7 @@ const path = require('path') const owner = 'ant-design' const repo = 'ant-design' -const tag = '3.10.9' +const tag = '3.11.6' const clientId = '5f6ccfdc4cdc69f8ba12' const clientSecret = process.env.CLIENT_SECRET @@ -15,7 +15,7 @@ const github = new GitHub() async function syncFiles (data = []) { for (const item of data) { try { - const { data: itemData } = await github.repos.getContent({ + const { data: itemData } = await github.repos.getContents({ owner, repo, path: `${item.path}`,