From a4d415392f7c65802aadbb21ea373640b5ea80dc Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Tue, 5 Mar 2019 13:16:32 +0800 Subject: [PATCH] feat: update style css to 3.13.6 --- components/alert/style/index.less | 52 +++++----- components/anchor/style/index.less | 36 +++---- components/auto-complete/style/index.less | 14 +-- components/avatar/style/index.less | 10 +- components/back-top/style/index.less | 14 +-- components/badge/style/index.less | 71 ++++++------- components/button/style/index.less | 37 ++++--- components/button/style/mixin.less | 120 +++++++++------------- components/calendar/style/index.less | 71 +++++++------ components/card/style/index.less | 110 +++++++++----------- components/card/style/size.less | 25 +++++ components/carousel/style/index.less | 81 ++++++++------- components/cascader/style/index.js | 1 + components/cascader/style/index.less | 62 +++++------ components/checkbox/style/mixin.less | 84 +++++++-------- components/collapse/style/index.less | 35 ++----- components/comment/style/index.less | 22 ++-- scripts/syncStyleFromAntd.js | 2 +- 18 files changed, 418 insertions(+), 429 deletions(-) create mode 100644 components/card/style/size.less diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 180e9cf2f..fcb57381c 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -6,7 +6,7 @@ @alert-message-color: @heading-color; @alert-text-color: @text-color; @alert-close-color: @text-color-secondary; -@alert-close-hover-color: #404040; +@alert-close-hover-color: @icon-color-hover; .@{alert-prefix-cls} { .reset-component; @@ -23,56 +23,56 @@ } &-icon { + position: absolute; top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2; left: 16px; - position: absolute; } &-description { + display: none; font-size: @font-size-base; line-height: 22px; - display: none; } &-success { - border: @border-width-base @border-style-base @alert-success-border-color; background-color: @alert-success-bg-color; + border: @border-width-base @border-style-base @alert-success-border-color; .@{alert-prefix-cls}-icon { color: @alert-success-icon-color; } } &-info { - border: @border-width-base @border-style-base @alert-info-border-color; background-color: @alert-info-bg-color; + border: @border-width-base @border-style-base @alert-info-border-color; .@{alert-prefix-cls}-icon { color: @alert-info-icon-color; } } &-warning { - border: @border-width-base @border-style-base @alert-warning-border-color; background-color: @alert-warning-bg-color; + border: @border-width-base @border-style-base @alert-warning-border-color; .@{alert-prefix-cls}-icon { color: @alert-warning-icon-color; } } &-error { - border: @border-width-base @border-style-base @alert-error-border-color; background-color: @alert-error-bg-color; + border: @border-width-base @border-style-base @alert-error-border-color; .@{alert-prefix-cls}-icon { color: @alert-error-icon-color; } } &-close-icon { - font-size: @font-size-sm; position: absolute; - right: 16px; top: 8px; - line-height: 22px; + right: 16px; overflow: hidden; + font-size: @font-size-sm; + line-height: 22px; cursor: pointer; .@{iconfont-css-prefix}-close { @@ -90,11 +90,11 @@ } &-with-description { - padding: 15px 15px 15px 64px; position: relative; - border-radius: @border-radius-base; + padding: 15px 15px 15px 64px; color: @alert-text-color; line-height: @line-height-base; + border-radius: @border-radius-base; } &-with-description&-no-icon { @@ -112,15 +112,15 @@ position: absolute; top: 16px; right: 16px; - cursor: pointer; font-size: @font-size-base; + cursor: pointer; } &-with-description &-message { - font-size: @font-size-lg; - color: @alert-message-color; display: block; margin-bottom: 4px; + color: @alert-message-color; + font-size: @font-size-lg; } &-with-description &-description { @@ -132,8 +132,8 @@ margin: 0; padding-top: 0; padding-bottom: 0; - transition: all 0.3s @ease-in-out-circ; transform-origin: 50% 0; + transition: all 0.3s @ease-in-out-circ; } &-slide-up-leave { @@ -142,34 +142,34 @@ } &-banner { - border-radius: 0; - border: 0; margin-bottom: 0; + border: 0; + border-radius: 0; } } @keyframes antAlertSlideUpIn { 0% { - opacity: 0; - transform-origin: 0% 0%; transform: scaleY(0); + transform-origin: 0% 0%; + opacity: 0; } 100% { - opacity: 1; - transform-origin: 0% 0%; transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; } } @keyframes antAlertSlideUpOut { 0% { - opacity: 1; - transform-origin: 0% 0%; transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; } 100% { - opacity: 0; - transform-origin: 0% 0%; transform: scaleY(0); + transform-origin: 0% 0%; + opacity: 0; } } diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index ec2386b82..c4b724d13 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -9,37 +9,37 @@ padding-left: @anchor-border-width; &-wrapper { - background-color: @component-background; - overflow: auto; - padding-left: 4px; margin-left: -4px; + padding-left: 4px; + overflow: auto; + background-color: @component-background; } &-ink { position: absolute; - height: 100%; - left: 0; top: 0; - &:before { - content: ' '; + left: 0; + height: 100%; + &::before { position: relative; + display: block; width: @anchor-border-width; height: 100%; - display: block; - background-color: @border-color-split; margin: 0 auto; + background-color: @border-color-split; + content: ' '; } &-ball { - display: none; position: absolute; + left: 50%; + display: none; width: 8px; height: 8px; - border-radius: 8px; - border: 2px solid @primary-color; background-color: @component-background; - left: 50%; - transition: top 0.3s ease-in-out; + border: 2px solid @primary-color; + border-radius: 8px; transform: translateX(-50%); + transition: top 0.3s ease-in-out; &.visible { display: inline-block; } @@ -55,14 +55,14 @@ line-height: 1.143; &-title { - display: block; position: relative; - transition: all 0.3s; + display: block; + margin-bottom: 6px; + overflow: hidden; color: @text-color; white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; - margin-bottom: 6px; + transition: all 0.3s; &:only-child { margin-bottom: 0; diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less index 2399ac5f5..b7713e341 100644 --- a/components/auto-complete/style/index.less +++ b/components/auto-complete/style/index.less @@ -15,14 +15,14 @@ border: 0; box-shadow: none; &__rendered { - margin-left: 0; - margin-right: 0; height: 100%; + margin-right: 0; + margin-left: 0; line-height: @input-height-base; } &__placeholder { - margin-left: (@input-padding-horizontal-base + 1px); margin-right: (@input-padding-horizontal-base + 1px); + margin-left: (@input-padding-horizontal-base + 1px); } &--single { @@ -44,10 +44,10 @@ } .@{input-prefix-cls} { + height: @input-height-base; + line-height: @line-height-base; background: transparent; border-width: @border-width-base; - line-height: @line-height-base; - height: @input-height-base; &:focus, &:hover { .hover; @@ -63,9 +63,9 @@ line-height: @input-height-lg; } .@{input-prefix-cls} { + height: @input-height-lg; padding-top: @input-padding-vertical-lg; padding-bottom: @input-padding-vertical-lg; - height: @input-height-lg; } } @@ -74,9 +74,9 @@ line-height: @input-height-sm; } .@{input-prefix-cls} { + height: @input-height-sm; padding-top: @input-padding-vertical-sm; padding-bottom: @input-padding-vertical-sm; - height: @input-height-sm; } } } diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less index 8283ff76d..e1ec77ad6 100644 --- a/components/avatar/style/index.less +++ b/components/avatar/style/index.less @@ -5,14 +5,14 @@ .@{avatar-prefix-cls} { .reset-component; + position: relative; display: inline-block; - text-align: center; - background: @avatar-bg; + overflow: hidden; color: @avatar-color; white-space: nowrap; - position: relative; - overflow: hidden; + text-align: center; vertical-align: middle; + background: @avatar-bg; &-image { background: transparent; @@ -33,9 +33,9 @@ } & > img { + display: block; width: 100%; height: 100%; - display: block; } } diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less index c1a0d29b2..e4280723e 100644 --- a/components/back-top/style/index.less +++ b/components/back-top/style/index.less @@ -5,23 +5,23 @@ .@{backtop-prefix-cls} { .reset-component; - z-index: @zindex-back-top; position: fixed; right: 100px; bottom: 50px; - height: 40px; + z-index: @zindex-back-top; width: 40px; + height: 40px; cursor: pointer; &-content { - height: 40px; width: 40px; - border-radius: 20px; - background-color: @back-top-bg; + height: 40px; + overflow: hidden; color: @back-top-color; text-align: center; + background-color: @back-top-bg; + border-radius: 20px; transition: all 0.3s @ease-in-out; - overflow: hidden; &:hover { background-color: @back-top-hover-bg; @@ -30,9 +30,9 @@ } &-icon { - margin: 12px auto; width: 14px; height: 16px; + margin: 12px auto; 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 81ef4bc97..4f43ec1ba 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -8,27 +8,26 @@ .reset-component; position: relative; display: inline-block; - line-height: 1; color: unset; + line-height: 1; &-count { - top: -@badge-height / 2; - height: @badge-height; - border-radius: @badge-height / 2; + z-index: @zindex-badge; min-width: @badge-height; - background: @highlight-color; - color: #fff; - line-height: @badge-height; - text-align: center; + height: @badge-height; padding: 0 6px; - font-size: @badge-font-size; + color: @badge-text-color; font-weight: @badge-font-weight; + font-size: @badge-font-size; + line-height: @badge-height; white-space: nowrap; - box-shadow: 0 0 0 1px #fff; - z-index: 10; + text-align: center; + background: @highlight-color; + border-radius: @badge-height / 2; + box-shadow: 0 0 0 1px @shadow-color-inverse; a, a:hover { - color: #fff; + color: @badge-text-color; } } @@ -37,26 +36,22 @@ } &-dot { - top: -@badge-dot-size / 2; - height: @badge-dot-size; + z-index: @zindex-badge; width: @badge-dot-size; - border-radius: 100%; + height: @badge-dot-size; background: @highlight-color; - z-index: 10; - box-shadow: 0 0 0 1px #fff; + border-radius: 100%; + box-shadow: 0 0 0 1px @shadow-color-inverse; } &-count, &-dot, .@{number-prefix-cls}-custom-component { position: absolute; + top: 0; right: 0; - transform: translateX(50%); - transform-origin: 100%; - } - - .@{number-prefix-cls}-custom-component { transform: translate(50%, -50%); + transform-origin: 100% 0%; } &-status { @@ -64,30 +59,30 @@ vertical-align: baseline; &-dot { - width: @badge-status-size; - height: @badge-status-size; - display: inline-block; - border-radius: 50%; - vertical-align: middle; position: relative; top: -1px; + display: inline-block; + width: @badge-status-size; + height: @badge-status-size; + vertical-align: middle; + border-radius: 50%; } &-success { background-color: @success-color; } &-processing { - background-color: @processing-color; position: relative; - &:after { + background-color: @processing-color; + &::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - border-radius: 50%; border: 1px solid @processing-color; - content: ''; + border-radius: 50%; animation: antStatusProcessing 1.2s infinite ease-in-out; + content: ''; } } &-default { @@ -100,9 +95,9 @@ background-color: @warning-color; } &-text { + margin-left: 8px; color: @text-color; font-size: @font-size-base; - margin-left: 8px; } } @@ -121,9 +116,9 @@ vertical-align: middle; .@{ant-prefix}-scroll-number { + position: relative; top: auto; display: block; - position: relative; } .@{badge-prefix-cls}-count { @@ -147,8 +142,8 @@ overflow: hidden; &-only { display: inline-block; - transition: all 0.3s @ease-in-out; height: @badge-height; + transition: all 0.3s @ease-in-out; > p { height: @badge-height; margin: 0; @@ -158,20 +153,20 @@ @keyframes antZoomBadgeIn { 0% { + transform: scale(0) translate(50%, -50%); opacity: 0; - transform: scale(0) translateX(50%); } 100% { - transform: scale(1) translateX(50%); + transform: scale(1) translate(50%, -50%); } } @keyframes antZoomBadgeOut { 0% { - transform: scale(1) translateX(50%); + transform: scale(1) translate(50%, -50%); } 100% { + transform: scale(0) translate(50%, -50%); opacity: 0; - transform: scale(0) translateX(50%); } } diff --git a/components/button/style/index.less b/components/button/style/index.less index 6f782647e..ef3719775 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -23,8 +23,8 @@ // Ref: https://github.com/ant-design/ant-design/issues/7034 > i, > span { - pointer-events: none; display: inline-block; + pointer-events: none; } &-primary { @@ -69,29 +69,34 @@ .btn-danger; } + &-round { + .btn-round(@btn-prefix-cls); + } + &-circle, &-circle-outline { .btn-circle(@btn-prefix-cls); } - &:before { + &::before { position: absolute; top: -1px; - left: -1px; - bottom: -1px; right: -1px; - background: #fff; - opacity: 0.35; - content: ''; - border-radius: inherit; + bottom: -1px; + left: -1px; z-index: 1; + display: none; + background: @component-background; + border-radius: inherit; + opacity: 0.35; transition: opacity 0.2s; pointer-events: none; - display: none; + content: ''; } .@{iconfont-css-prefix} { transition: margin-left 0.3s @ease-in-out; + // Follow icon blur under windows. Change the render. // https://github.com/ant-design/ant-design/issues/13924 &.@{iconfont-css-prefix}-plus, @@ -102,14 +107,14 @@ } } - &&-loading:before { + &&-loading::before { display: block; } &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) { + position: relative; padding-left: 29px; pointer-events: none; - position: relative; .@{iconfont-css-prefix}:not(:last-child) { margin-left: -14px; } @@ -127,8 +132,8 @@ } &:not(&-circle):not(&-circle-outline)&-icon-only { - padding-left: 8px; padding-right: 8px; + padding-left: 8px; } // http://stackoverflow.com/a/21281554/3040605 @@ -144,9 +149,9 @@ } &-background-ghost { + color: @component-background; background: transparent !important; - border-color: #fff; - color: #fff; + border-color: @component-background; } &-background-ghost&-primary { @@ -157,13 +162,13 @@ .button-variant-ghost(@btn-danger-color); } - &-two-chinese-chars:first-letter { + &-two-chinese-chars::first-letter { letter-spacing: 0.34em; } &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) { - letter-spacing: 0.34em; margin-right: -0.34em; + letter-spacing: 0.34em; } &-block { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 285d47cff..b8e0adb68 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -1,13 +1,14 @@ // mixins for button // ------------------------ .button-size(@height; @padding; @font-size; @border-radius) { + height: @height; padding: @padding; font-size: @font-size; border-radius: @border-radius; - height: @height; } .button-disabled() { + &-disabled, &.disabled, &[disabled] { &, @@ -24,8 +25,8 @@ .button-variant-primary(@color; @background) { .button-color(@color; @background; @background); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); - box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); + text-shadow: @btn-text-shadow; + box-shadow: @btn-primary-shadow; &:hover, &:focus { @@ -49,57 +50,53 @@ &:hover, &:focus { - .button-color(@primary-5; @background; @primary-5); + .button-color( + ~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5) + ` + ); } - &:active, &.active { - .button-color(@primary-7; @background; @primary-7); + .button-color( + ~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7) + ` + ); } - .button-disabled(); } - .button-variant-danger(@color; @background; @border) { .button-color(@color; @background; @border); - &:hover { .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) `; @component-background; ~`colorPalette('@{color}', 5) ` + ); } - &:active, &.active { .button-color( @btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) ` ); } - .button-disabled(); } - .button-variant-ghost(@color) { .button-color(@color; transparent; @color); text-shadow: none; - &:hover, &:focus { .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); } - &:active, &.active { .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); } - .button-disabled(); } - .button-color(@color; @background; @border) { color: @color; background-color: @background; @@ -108,44 +105,39 @@ // http://stackoverflow.com/a/17253457 > a:only-child { color: currentColor; - &:after { - content: ''; + &::after { position: absolute; top: 0; - left: 0; - bottom: 0; right: 0; + bottom: 0; + left: 0; background: transparent; + content: ''; } } } - .button-group-base(@btnClassName) { position: relative; display: inline-block; > .@{btnClassName}, > span > .@{btnClassName} { position: relative; - &:hover, &:focus, &:active, &.active { z-index: 2; } - &:disabled { z-index: 0; } } - // size &-lg > .@{btnClassName}, &-lg > span > .@{btnClassName} { .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0); line-height: @btn-height-lg - 2px; } - &-sm > .@{btnClassName}, &-sm > span > .@{btnClassName} { .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0); @@ -155,43 +147,37 @@ } } } - // Base styles of buttons // -------------------------------------------------- .btn() { + position: relative; display: inline-block; font-weight: @btn-font-weight; + white-space: nowrap; text-align: center; - touch-action: manipulation; - cursor: pointer; background-image: none; border: @border-width-base @border-style-base transparent; - white-space: nowrap; - .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base); - user-select: none; + box-shadow: @btn-shadow; + cursor: pointer; transition: all 0.3s @ease-in-out; - position: relative; - box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); - + user-select: none; + touch-action: manipulation; + .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base); > .@{iconfont-css-prefix} { line-height: 1; } - &, &:active, &:focus { outline: 0; } - &:not([disabled]):hover { text-decoration: none; } - &:not([disabled]):active { outline: 0; box-shadow: none; } - &.disabled, &[disabled] { cursor: not-allowed; @@ -199,21 +185,17 @@ pointer-events: none; } } - &-lg { .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base); } - &-sm { .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm); } } - // primary button style .btn-primary() { .button-variant-primary(@btn-primary-color; @btn-primary-bg); } - // default button style .btn-default() { .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border); @@ -221,48 +203,54 @@ &:focus, &:active, &.active { - background: @btn-default-bg; text-decoration: none; + background: @btn-default-bg; } } - // ghost button style .btn-ghost() { .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border); } - // dashed button style .btn-dashed() { .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border); border-style: dashed; } - // danger button style .btn-danger() { .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border); } - +// round button +.btn-round(@btnClassName: btn) { + .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base + 2px; @btn-circle-size); + &.@{btnClassName}-lg { + .button-size( + @btn-circle-size-lg; 0 @btn-circle-size-lg / 2; @btn-font-size-lg + 2px; @btn-circle-size-lg + ); + } + &.@{btnClassName}-sm { + .button-size( + @btn-circle-size-sm; 0 @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm + ); + } +} // circle button: the content only contains icon .btn-circle(@btnClassName: btn) { .square(@btn-circle-size); .button-size(@btn-circle-size; 0; @font-size-base + 2px; 50%); - &.@{btnClassName}-lg { .square(@btn-circle-size-lg); .button-size(@btn-circle-size-lg; 0; @btn-font-size-lg + 2px; 50%); } - &.@{btnClassName}-sm { .square(@btn-circle-size-sm); .button-size(@btn-circle-size-sm; 0; @font-size-base; 50%); } } - // Horizontal button groups styl // -------------------------------------------------- .btn-group(@btnClassName: btn) { .button-group-base(@btnClassName); - .@{btnClassName} + .@{btnClassName}, .@{btnClassName} + &, span + .@{btnClassName}, @@ -272,15 +260,12 @@ & + & { margin-left: -1px; } - .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) { border-left-color: transparent; } - .@{btnClassName} { border-radius: 0; } - > .@{btnClassName}:first-child, > span:first-child > .@{btnClassName} { margin-left: 0; @@ -291,19 +276,16 @@ > span:only-child > .@{btnClassName} { border-radius: @btn-border-radius-base; } - > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName} { - border-bottom-left-radius: @btn-border-radius-base; border-top-left-radius: @btn-border-radius-base; + border-bottom-left-radius: @btn-border-radius-base; } - > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName} { - border-bottom-right-radius: @btn-border-radius-base; border-top-right-radius: @btn-border-radius-base; + border-bottom-right-radius: @btn-border-radius-base; } - &-sm { > .@{btnClassName}:only-child { border-radius: @btn-border-radius-sm; @@ -313,35 +295,31 @@ } > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName} { - border-bottom-left-radius: @btn-border-radius-sm; border-top-left-radius: @btn-border-radius-sm; + border-bottom-left-radius: @btn-border-radius-sm; } > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName} { - border-bottom-right-radius: @btn-border-radius-sm; border-top-right-radius: @btn-border-radius-sm; + border-bottom-right-radius: @btn-border-radius-sm; } } - & > & { float: left; } - & > &:not(:first-child):not(:last-child) > .@{btnClassName} { border-radius: 0; } - & > &:first-child:not(:last-child) { > .@{btnClassName}:last-child { - border-bottom-right-radius: 0; - border-top-right-radius: 0; padding-right: 8px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } } - & > &:last-child:not(:first-child) > .@{btnClassName}:first-child { - border-bottom-left-radius: 0; - border-top-left-radius: 0; padding-left: 8px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } } diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index 02581a5ac..e1e908209 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -5,11 +5,24 @@ .@{full-calendar-prefix-cls} { .reset-component; - outline: none; border-top: @border-width-base @border-style-base @border-color-base; + outline: none; - &-month-select { - margin-left: 5px; + .@{ant-prefix}-select&-year-select { + min-width: 90px; + + &.@{ant-prefix}-select-sm { + min-width: 70px; + } + } + + .@{ant-prefix}-select&-month-select { + min-width: 80px; + margin-left: 8px; + + &.@{ant-prefix}-select-sm { + min-width: 60px; + } } &-header { @@ -27,8 +40,8 @@ label.@{ant-prefix}-radio-button { height: 22px; - line-height: 20px; padding: 0 10px; + line-height: 20px; } } @@ -42,11 +55,11 @@ } table { - border-collapse: collapse; - max-width: 100%; - background-color: transparent; width: 100%; + max-width: 100%; height: 256px; + background-color: transparent; + border-collapse: collapse; } table, @@ -60,14 +73,14 @@ } &-calendar-table { - border-spacing: 0; margin-bottom: 0; + border-spacing: 0; } &-column-header { - line-height: 18px; - padding: 0; width: 33px; + padding: 0; + line-height: 18px; text-align: center; .@{full-calendar-prefix-cls}-column-header-inner { display: block; @@ -89,14 +102,14 @@ &-value { display: block; - margin: 0 auto; - color: @text-color; - border-radius: @border-radius-sm; width: 24px; height: 24px; + margin: 0 auto; padding: 0; - background: transparent; + color: @text-color; line-height: 24px; + background: transparent; + border-radius: @border-radius-sm; transition: all 0.3s; &:hover { @@ -105,8 +118,8 @@ } &:active { + color: @text-color-inverse; background: @primary-color; - color: #fff; } } @@ -121,8 +134,8 @@ &-selected-day &-value, &-month-panel-selected-cell &-value { + color: @text-color-inverse; background: @primary-color; - color: #fff; } &-disabled-cell-first-of-row &-value { @@ -141,16 +154,16 @@ } &-month-panel-table { - table-layout: fixed; width: 100%; + table-layout: fixed; border-collapse: separate; } &-content { position: absolute; - width: 100%; - left: 0; bottom: -9px; + left: 0; + width: 100%; } &-fullscreen { @@ -173,12 +186,12 @@ &-fullscreen &-month, &-fullscreen &-date { - text-align: left; - margin: 0 4px; display: block; - color: @text-color; height: 116px; + margin: 0 4px; padding: 4px 8px; + color: @text-color; + text-align: left; border-top: 2px solid @border-color-split; transition: background 0.3s; @@ -193,15 +206,15 @@ } &-fullscreen &-column-header { - text-align: right; padding-right: 12px; padding-bottom: 5px; + text-align: right; } &-fullscreen &-value { + width: auto; text-align: right; background: transparent; - width: auto; } &-fullscreen &-today &-value { @@ -210,8 +223,8 @@ &-fullscreen &-month-panel-current-cell &-month, &-fullscreen &-today &-date { - border-top-color: @primary-color; background: transparent; + border-top-color: @primary-color; } &-fullscreen &-month-panel-current-cell &-value, @@ -235,12 +248,10 @@ } &-fullscreen &-content { - height: 88px; - overflow-y: auto; position: static; width: auto; - left: auto; - bottom: auto; + height: 88px; + overflow-y: auto; } &-disabled-cell &-date { @@ -258,9 +269,9 @@ } &-disabled-cell &-value { + width: auto; color: @disabled-color; border-radius: 0; - width: auto; cursor: not-allowed; } } diff --git a/components/card/style/index.less b/components/card/style/index.less index effdb88e7..9254d3a14 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -3,21 +3,23 @@ @card-prefix-cls: ~'@{ant-prefix}-card'; @card-head-height: 48px; -@card-hover-border: rgba(0, 0, 0, 0.09); -@card-radius: @border-radius-sm; +@card-hover-border: fade(@black, 9%); + +@gradient-min: fade(@card-background, 20%); +@gradient-max: fade(@card-background, 40%); .@{card-prefix-cls} { .reset-component; + position: relative; background: @component-background; border-radius: @card-radius; - position: relative; transition: all 0.3s; &-hoverable { cursor: pointer; &:hover { - box-shadow: @card-shadow; border-color: @card-hover-border; + box-shadow: @card-shadow; } } @@ -26,16 +28,16 @@ } &-head { - background: @card-head-background; - border-bottom: @border-width-base @border-style-base @border-color-split; - padding: 0 @card-padding-base; - border-radius: @card-radius @card-radius 0 0; - .clearfix; - margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png min-height: @card-head-height; - font-size: @font-size-lg; + margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png + padding: 0 @card-padding-base; color: @card-head-color; font-weight: 500; + font-size: @font-size-lg; + background: @card-head-background; + border-bottom: @border-width-base @border-style-base @border-color-split; + border-radius: @card-radius @card-radius 0 0; + .clearfix; &-wrapper { display: flex; @@ -43,20 +45,20 @@ } &-title { + display: inline-block; + flex: 1; padding: @card-head-padding 0; - text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - flex: 1; - display: inline-block; + text-overflow: ellipsis; } .@{ant-prefix}-tabs { - margin-bottom: -17px; clear: both; - font-size: @font-size-base; + margin-bottom: -17px; color: @text-color; font-weight: normal; + font-size: @font-size-base; &-bar { border-bottom: @border-width-base @border-style-base @border-color-split; @@ -66,12 +68,12 @@ &-extra { float: right; - padding: @card-head-padding 0; - font-size: @font-size-base; - color: @text-color; - font-weight: normal; // https://stackoverflow.com/a/22429853/3040605 margin-left: auto; + padding: @card-head-padding 0; + color: @text-color; + font-weight: normal; + font-size: @font-size-base; } &-body { @@ -85,14 +87,14 @@ } &-grid { - border-radius: 0; + float: left; + width: 33.33%; + padding: @card-padding-base; border: 0; + border-radius: 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; - width: 33.33%; - float: left; - padding: @card-padding-base; transition: all 0.3s; &:hover { position: relative; @@ -102,8 +104,8 @@ } &-contain-tabs > &-head &-head-title { - padding-bottom: 0; min-height: @card-head-height - @card-head-padding; + padding-bottom: 0; } &-contain-tabs &-extra { @@ -112,8 +114,8 @@ &-cover { > * { - width: 100%; display: block; + width: 100%; } img { border-radius: @card-radius @card-radius 0 0; @@ -121,26 +123,26 @@ } &-actions { - border-top: @border-width-base @border-style-base @border-color-split; - background: @card-actions-background; - .clearfix; - list-style: none; margin: 0; padding: 0; + list-style: none; + background: @card-actions-background; + border-top: @border-width-base @border-style-base @border-color-split; + .clearfix; & > li { float: left; - text-align: center; margin: 12px 0; color: @text-color-secondary; + text-align: center; & > span { - display: inline-block; - font-size: 14px; - cursor: pointer; - line-height: 22px; - min-width: 32px; position: relative; + display: inline-block; + min-width: 32px; + font-size: 14px; + line-height: 22px; + cursor: pointer; &:hover { color: @primary-color; @@ -153,10 +155,10 @@ } a { - color: @text-color-secondary; - line-height: 22px; display: inline-block; width: 100%; + color: @text-color-secondary; + line-height: 22px; &:hover { color: @primary-color; @@ -206,8 +208,8 @@ .clearfix; &-avatar { - padding-right: 16px; float: left; + padding-right: 16px; } &-detail { @@ -218,12 +220,12 @@ } &-title { - font-size: @font-size-lg; - text-overflow: ellipsis; overflow: hidden; - white-space: nowrap; color: @card-head-color; font-weight: 500; + font-size: @font-size-lg; + white-space: nowrap; + text-overflow: ellipsis; } &-description { @@ -233,17 +235,6 @@ &-loading { overflow: hidden; - position: relative; - - &:after { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: @card-padding-base; - background: @component-background; - content: ''; - } } &-loading &-body { @@ -259,15 +250,10 @@ &-loading-block { height: 14px; margin: 4px 0; - border-radius: @card-radius; - 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: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min); background-size: 600% 600%; + border-radius: @card-radius; + animation: card-loading 1.4s ease infinite; } } @@ -280,3 +266,5 @@ background-position: 100% 50%; } } + +@import './size'; diff --git a/components/card/style/size.less b/components/card/style/size.less new file mode 100644 index 000000000..6282910af --- /dev/null +++ b/components/card/style/size.less @@ -0,0 +1,25 @@ +@card-head-height-sm: 36px; +@card-padding-base-sm: @card-padding-base / 2; +@card-head-padding-sm: @card-head-padding / 2; +@card-head-font-size-sm: @font-size-base; + +.@{card-prefix-cls}-small { + > .@{card-prefix-cls}-head { + min-height: @card-head-height-sm; + padding: 0 @card-padding-base-sm; + font-size: @card-head-font-size-sm; + + > .@{card-prefix-cls}-head-wrapper { + > .@{card-prefix-cls}-head-title { + padding: @card-head-padding-sm 0; + } + > .@{card-prefix-cls}-extra { + padding: @card-head-padding-sm 0; + font-size: @card-head-font-size-sm; + } + } + } + > .@{card-prefix-cls}-body { + padding: @card-padding-base-sm; + } +} diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index 19eff4e17..ddb3c4b89 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -15,10 +15,10 @@ } .slick-list { position: relative; - overflow: hidden; display: block; margin: 0; padding: 0; + overflow: hidden; &:focus { outline: none; @@ -43,17 +43,17 @@ .slick-track { position: relative; - left: 0; top: 0; + left: 0; display: block; - &:before, - &:after { - content: ''; + &::before, + &::after { display: table; + content: ''; } - &:after { + &::after { clear: both; } @@ -62,6 +62,7 @@ } } .slick-slide { + display: none; float: left; height: 100%; min-height: 1px; @@ -75,8 +76,6 @@ display: none; } - display: none; - &.dragging img { pointer-events: none; } @@ -103,43 +102,43 @@ .slick-prev, .slick-next { position: absolute; - display: block; - height: 20px; - width: 20px; - line-height: 0; - font-size: 0; - cursor: pointer; - background: transparent; - color: transparent; top: 50%; + display: block; + width: 20px; + height: 20px; margin-top: -10px; padding: 0; + color: transparent; + font-size: 0; + line-height: 0; + background: transparent; border: 0; outline: none; + cursor: pointer; &:hover, &:focus { - outline: none; - background: transparent; color: transparent; - &:before { + background: transparent; + outline: none; + &::before { opacity: 1; } } - &.slick-disabled:before { + &.slick-disabled::before { opacity: 0.25; } } .slick-prev { left: -25px; - &:before { + &::before { content: '←'; } } .slick-next { right: -25px; - &:before { + &::before { content: '→'; } } @@ -148,43 +147,43 @@ .slick-dots { position: absolute; bottom: 12px; - list-style: none; display: block; - text-align: center; - margin: 0; - padding: 0; width: 100%; height: @carousel-dot-height; + margin: 0; + padding: 0; + text-align: center; + list-style: none; li { position: relative; display: inline-block; - vertical-align: top; - text-align: center; margin: 0 2px; padding: 0; + text-align: center; + vertical-align: top; button { - border: 0; - cursor: pointer; - background: #fff; - opacity: 0.3; display: block; width: @carousel-dot-width; height: @carousel-dot-height; + padding: 0; + color: transparent; + font-size: 0; + background: @component-background; + border: 0; border-radius: 1px; outline: none; - font-size: 0; - color: transparent; + cursor: pointer; + opacity: 0.3; transition: all 0.5s; - padding: 0; &:hover, &:focus { opacity: 0.75; } } &.slick-active button { - background: #fff; - opacity: 1; width: @carousel-dot-active-width; + background: @component-background; + opacity: 1; &:hover, &:focus { opacity: 1; @@ -196,12 +195,12 @@ .@{ant-prefix}-carousel-vertical { .slick-dots { - width: @carousel-dot-height; - bottom: auto; - right: 12px; top: 50%; - transform: translateY(-50%); + right: 12px; + bottom: auto; + width: @carousel-dot-height; height: auto; + transform: translateY(-50%); li { margin: 0 2px; vertical-align: baseline; diff --git a/components/cascader/style/index.js b/components/cascader/style/index.js index 0e54062b3..b64c64e2f 100644 --- a/components/cascader/style/index.js +++ b/components/cascader/style/index.js @@ -2,4 +2,5 @@ import '../../style/index.less'; import './index.less'; // style dependencies +import '../../empty/style'; import '../../input/style'; diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index a688905cf..e4353fd00 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -8,12 +8,12 @@ .reset-component; &-input.@{ant-prefix}-input { + position: relative; + width: 100%; // Add important to fix https://github.com/ant-design/ant-design/issues/5078 // because input.less will compile after cascader.less background-color: transparent !important; cursor: pointer; - width: 100%; - position: relative; } &-picker-show-search &-input.@{ant-prefix}-input { @@ -24,10 +24,10 @@ .reset-component; position: relative; display: inline-block; - cursor: pointer; background-color: @component-background; border-radius: @border-radius-base; outline: 0; + cursor: pointer; transition: color 0.3s; &-with-value &-label { @@ -35,9 +35,9 @@ } &-disabled { - cursor: not-allowed; - background: @input-disabled-bg; color: @disabled-color; + background: @input-disabled-bg; + cursor: not-allowed; .@{cascader-prefix-cls}-input { cursor: not-allowed; } @@ -53,32 +53,32 @@ &-label { position: absolute; - left: 0; - height: 20px; - line-height: 20px; top: 50%; + left: 0; + width: 100%; + height: 20px; margin-top: -10px; + padding: 0 @control-padding-horizontal; + overflow: hidden; + line-height: 20px; white-space: nowrap; text-overflow: ellipsis; - overflow: hidden; - width: 100%; - padding: 0 @control-padding-horizontal; } &-clear { - opacity: 0; position: absolute; + top: 50%; right: @control-padding-horizontal; z-index: 2; - background: @component-background; - top: 50%; - font-size: @font-size-sm; - color: @disabled-color; width: 12px; height: 12px; margin-top: -6px; + color: @disabled-color; + font-size: @font-size-sm; line-height: 12px; + background: @component-background; cursor: pointer; + opacity: 0; transition: color 0.3s ease, opacity 0.15s ease; &:hover { color: @text-color-secondary; @@ -92,15 +92,15 @@ // arrow &-arrow { position: absolute; - z-index: 1; top: 50%; right: @control-padding-horizontal; + z-index: 1; width: 12px; height: 12px; - font-size: 12px; margin-top: -6px; - line-height: 12px; color: @disabled-color; + font-size: 12px; + line-height: 12px; transition: transform 0.2s; &&-expand { transform: rotate(180deg); @@ -114,19 +114,19 @@ } &-menus { - font-size: @font-size-base; - background: @component-background; position: absolute; z-index: @zindex-dropdown; + font-size: @font-size-base; + white-space: nowrap; + background: @component-background; border-radius: @border-radius-base; box-shadow: @box-shadow-base; - white-space: nowrap; ul, ol { - list-style: none; margin: 0; padding: 0; + list-style: none; } &-empty, @@ -153,22 +153,22 @@ } &-menu { display: inline-block; - vertical-align: top; min-width: 111px; height: 180px; - list-style: none; margin: 0; padding: 0; - border-right: @border-width-base @border-style-base @border-color-split; overflow: auto; + vertical-align: top; + list-style: none; + border-right: @border-width-base @border-style-base @border-color-split; -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857 &:first-child { border-radius: @border-radius-base 0 0 @border-radius-base; } &:last-child { - border-right-color: transparent; margin-right: -1px; + border-right-color: transparent; border-radius: 0 @border-radius-base @border-radius-base 0; } &:only-child { @@ -178,15 +178,15 @@ &-menu-item { padding: 5px @control-padding-horizontal; line-height: 22px; - cursor: pointer; white-space: nowrap; + cursor: pointer; transition: all 0.3s; &:hover { background: @item-hover-bg; } &-disabled { - cursor: not-allowed; color: @disabled-color; + cursor: not-allowed; &:hover { background: transparent; } @@ -194,8 +194,8 @@ &-active:not(&-disabled) { &, &:hover { - background: @background-color-base; font-weight: 600; + background: @background-color-base; } } &-expand { @@ -206,9 +206,9 @@ &-expand &-expand-icon, &-expand &-loading-icon { .iconfont-size-under-12px(10px); - color: @text-color-secondary; position: absolute; right: @control-padding-horizontal; + color: @text-color-secondary; } & &-keyword { diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 259dfb5de..5454c9aca 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -5,14 +5,14 @@ // 一般状态 .@{checkbox-prefix-cls} { .reset-component; - white-space: nowrap; - cursor: pointer; - outline: none; + position: relative; + top: -0.09em; display: inline-block; line-height: 1; - position: relative; + white-space: nowrap; vertical-align: middle; - top: -0.09em; + outline: none; + cursor: pointer; .@{checkbox-prefix-cls}-wrapper:hover &-inner, &:hover &-inner, @@ -20,22 +20,22 @@ border-color: @checkbox-color; } - &-checked:after { + &-checked::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - border-radius: @border-radius-sm; border: 1px solid @checkbox-color; - content: ''; + border-radius: @border-radius-sm; + visibility: hidden; animation: antCheckboxEffect 0.36s ease-in-out; animation-fill-mode: both; - visibility: hidden; + content: ''; } - &:hover:after, - .@{checkbox-prefix-cls}-wrapper:hover &:after { + &:hover::after, + .@{checkbox-prefix-cls}-wrapper:hover &::after { visibility: visible; } @@ -46,58 +46,58 @@ display: block; width: @checkbox-size; height: @checkbox-size; + background-color: @checkbox-check-color; border: @checkbox-border-width @border-style-base @border-color-base; border-radius: @border-radius-sm; - background-color: @checkbox-check-color; - transition: all 0.3s; // Fix IE checked style // https://github.com/ant-design/ant-design/issues/12597 border-collapse: separate; + transition: all 0.3s; - &:after { + &::after { @check-width: (@checkbox-size / 14) * 5px; @check-height: (@checkbox-size / 14) * 8px; - transform: rotate(45deg) scale(0); position: absolute; - left: (@checkbox-size - @check-width) / 2 - 0.5px * (@checkbox-size / 14); - top: (@checkbox-size - @check-height) / 2 - 2px * (@checkbox-size / 14); + top: 50%; + left: 21%; display: table; width: @check-width; height: @check-height; border: 2px solid @checkbox-check-color; border-top: 0; border-left: 0; - content: ' '; - transition: all 0.1s @ease-in-back, opacity 0.1s; + transform: rotate(45deg) scale(0) translate(-50%, -50%); opacity: 0; + transition: all 0.1s @ease-in-back, opacity 0.1s; + content: ' '; } } &-input { position: absolute; + top: 0; + right: 0; + bottom: 0; left: 0; z-index: 1; - cursor: pointer; - opacity: 0; - top: 0; - bottom: 0; - right: 0; width: 100%; height: 100%; + cursor: pointer; + opacity: 0; } } // 选中状态 - .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after { - transform: rotate(45deg) scale(1); + .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after { position: absolute; display: table; border: 2px solid @checkbox-check-color; border-top: 0; border-left: 0; - content: ' '; - transition: all 0.2s @ease-out-back 0.1s; + transform: rotate(45deg) scale(1) translate(-50%, -50%); opacity: 1; + transition: all 0.2s @ease-out-back 0.1s; + content: ' '; } .@{checkbox-prefix-cls}-checked { @@ -111,9 +111,9 @@ cursor: not-allowed; &.@{checkbox-prefix-cls}-checked { - .@{checkbox-inner-prefix-cls}:after { - animation-name: none; + .@{checkbox-inner-prefix-cls}::after { border-color: @disabled-color; + animation-name: none; } } @@ -122,12 +122,12 @@ } .@{checkbox-inner-prefix-cls} { - border-color: @border-color-base !important; background-color: @input-disabled-bg; - &:after { - animation-name: none; + border-color: @border-color-base !important; + &::after { border-color: @input-disabled-bg; border-collapse: separate; + animation-name: none; } } @@ -139,9 +139,9 @@ .@{checkbox-prefix-cls}-wrapper { .reset-component; + display: inline-block; line-height: unset; cursor: pointer; - display: inline-block; & + & { margin-left: 8px; } @@ -149,8 +149,8 @@ .@{checkbox-prefix-cls}-wrapper + span, .@{checkbox-prefix-cls} + span { - padding-left: 8px; padding-right: 8px; + padding-left: 8px; } .@{checkbox-prefix-cls}-group { @@ -174,23 +174,23 @@ background-color: #fff; border-color: @border-color-base; } - .@{checkbox-inner-prefix-cls}:after { + .@{checkbox-inner-prefix-cls}::after { @indeterminate-width: @checkbox-size - 8px; @indeterminate-height: @checkbox-size - 8px; - content: ' '; - transform: translate(-50%, -50%) scale(1); - border: 0; - left: 50%; top: 50%; + left: 50%; width: @indeterminate-width; height: @indeterminate-height; background-color: @checkbox-color; + border: 0; + transform: translate(-50%, -50%) scale(1); opacity: 1; + content: ' '; } - &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after { - border-color: @disabled-color; + &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after { background-color: @disabled-color; + border-color: @disabled-color; } } } diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index b6305e384..e9d6fbee9 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -3,19 +3,12 @@ @collapse-prefix-cls: ~'@{ant-prefix}-collapse'; -.collapse-close() { - transform: rotate(0); -} -.collapse-open() { - transform: rotate(90deg); -} - .@{collapse-prefix-cls} { .reset-component; background-color: @collapse-header-bg; - border-radius: @border-radius-base; border: @border-width-base @border-style-base @border-color-base; border-bottom: 0; + border-radius: @border-radius-base; & > &-item { border-bottom: @border-width-base @border-style-base @border-color-base; @@ -28,25 +21,25 @@ } > .@{collapse-prefix-cls}-header { - line-height: 22px; + position: relative; padding: @collapse-header-padding; color: @heading-color; + line-height: 22px; cursor: pointer; - position: relative; transition: all 0.3s; - .arrow { + .@{collapse-prefix-cls}-arrow { .iconfont-mixin(); - font-size: @font-size-sm; position: absolute; - display: inline-block; - line-height: 46px; - vertical-align: top; top: 50%; - transform: translateY(-50%); left: @padding-md; + display: inline-block; + margin-top: 2px; + font-size: @font-size-sm; + line-height: 46px; + transform: translateY(-50%); + & svg { - .collapse-close(); transition: transform 0.24s; } } @@ -88,12 +81,6 @@ } } - & > &-item > &-header[aria-expanded='true'] { - .anticon-right svg { - .collapse-open(); - } - } - &-borderless { background-color: @component-background; border: 0; @@ -120,8 +107,8 @@ & &-item-disabled > &-header { &, & > .arrow { - cursor: not-allowed; color: @disabled-color; + cursor: not-allowed; } } } diff --git a/components/comment/style/index.less b/components/comment/style/index.less index 891ea4209..573308f1b 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -7,13 +7,13 @@ position: relative; &-inner { - padding: @comment-padding-base; display: flex; + padding: @comment-padding-base; } &-avatar { - flex-shrink: 0; position: relative; + flex-shrink: 0; margin-right: 12px; cursor: pointer; img { @@ -25,28 +25,28 @@ &-content { position: relative; - font-size: 14px; flex: 1 1 auto; min-width: 1px; + font-size: 14px; word-wrap: break-word; &-author { - margin-bottom: 4px; - font-size: 14px; display: flex; justify-content: flex-start; + margin-bottom: 4px; + font-size: 14px; & > a, & > span { height: 18px; + padding-right: 8px; font-size: 12px; line-height: 18px; - padding-right: 8px; } &-name { - transition: color 0.3s; - font-size: 14px; color: @comment-author-name-color; + font-size: 14px; + transition: color 0.3s; > * { color: @comment-author-name-color; &:hover { @@ -56,9 +56,9 @@ } &-time { - cursor: auto; color: @comment-author-time-color; white-space: nowrap; + cursor: auto; } } @@ -75,10 +75,10 @@ color: @comment-action-color; > span { padding-right: 10px; - transition: color 0.3s; - font-size: 12px; color: @comment-action-color; + font-size: 12px; cursor: pointer; + transition: color 0.3s; user-select: none; &:hover { color: @comment-action-hover-color; diff --git a/scripts/syncStyleFromAntd.js b/scripts/syncStyleFromAntd.js index dff73b66d..e190580cf 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.11.6'; +const tag = '3.13.6'; const clientId = '5f6ccfdc4cdc69f8ba12'; const clientSecret = process.env.CLIENT_SECRET;