From 00cc40a26067884b37f8f11c9f84a7d26f439612 Mon Sep 17 00:00:00 2001 From: ng-zorro-bot Date: Thu, 17 Jun 2021 02:15:58 +0000 Subject: [PATCH] chore: sync ant-design v4.16.3 --- components/badge/style/index.less | 15 +++ components/cascader/style/index.less | 12 +- components/checkbox/style/mixin.less | 7 ++ components/collapse/style/index.less | 16 +-- components/date-picker/style/index.less | 24 ++-- components/descriptions/style/index.less | 2 +- components/dropdown/style/index.less | 127 ++++++++++---------- components/form/style/components.less | 4 +- components/form/style/mixin.less | 18 ++- components/form/style/status.less | 17 ++- components/layout/style/index.less | 5 + components/menu/style/dark.less | 3 +- components/menu/style/index.less | 144 +++++++++++++++++------ components/menu/style/light.less | 12 ++ components/message/style/index.less | 2 +- components/modal/style/modal.less | 2 +- components/notification/style/index.less | 17 +-- components/radio/style/index.less | 9 +- components/rate/style/index.less | 11 +- components/select/style/index.less | 12 +- components/steps/style/progress.less | 1 + components/steps/style/rtl.less | 7 ++ components/tooltip/style/index.less | 1 + components/transfer/style/index.less | 4 - components/typography/style/index.less | 1 + 25 files changed, 302 insertions(+), 171 deletions(-) create mode 100644 components/menu/style/light.less diff --git a/components/badge/style/index.less b/components/badge/style/index.less index df18e5902a7..435f08a66a7 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -62,6 +62,10 @@ right: 0; transform: translate(50%, -50%); transform-origin: 100% 0%; + + &.@{iconfont-css-prefix}-spin { + animation: antBadgeLoadingCircle 1s infinite linear; + } } &-status { @@ -244,5 +248,16 @@ } } +@keyframes antBadgeLoadingCircle { + 0% { + transform-origin: 50%; + } + + 100% { + transform: translate(50%, -50%) rotate(360deg); + transform-origin: 50%; + } +} + @import './ribbon'; @import './rtl'; diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index 89cc37e6370..b0a78fcc60d 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -144,21 +144,21 @@ &-hidden { display: none; } - &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, - &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft { + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft { animation-name: antSlideUpIn; } - &.slide-up-enter.slide-up-enter-active&-placement-topLeft, - &.slide-up-appear.slide-up-appear-active&-placement-topLeft { + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft { animation-name: antSlideDownIn; } - &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft { + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft { animation-name: antSlideUpOut; } - &.slide-up-leave.slide-up-leave-active&-placement-topLeft { + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft { animation-name: antSlideDownOut; } } diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index ef8262ce1da..f822f205af5 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -151,6 +151,13 @@ line-height: unset; cursor: pointer; + &::after { + display: inline-block; + width: 0; + overflow: hidden; + content: '\a0'; + } + &.@{checkbox-prefix-cls}-wrapper-disabled { cursor: not-allowed; } diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 7b83e895a09..58008356da8 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -24,7 +24,6 @@ > .@{collapse-prefix-cls}-header { position: relative; padding: @collapse-header-padding; - padding-left: @collapse-header-padding-extra; color: @heading-color; line-height: @line-height-base; cursor: pointer; @@ -32,17 +31,10 @@ .clearfix(); .@{collapse-prefix-cls}-arrow { - .iconfont-mixin(); - - position: absolute; - top: ((@font-size-base * @line-height-base - @font-size-sm) / 2); - left: @collapse-header-arrow-left; display: inline-block; - padding: @collapse-header-padding; - padding-right: 0; - padding-bottom: 0; - padding-left: 0; + margin-right: 12px; font-size: @font-size-sm; + vertical-align: -1px; & svg { transition: transform 0.24s; @@ -80,8 +72,12 @@ padding-right: @collapse-header-padding-extra; .@{collapse-prefix-cls}-arrow { + position: absolute; + top: 50%; right: @padding-md; left: auto; + margin: 0; + transform: translateY(-50%); } } } diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index b9c2297dc09..b707b9bd052 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -235,27 +235,27 @@ } } - &.slide-up-enter.slide-up-enter-active&-placement-topLeft, - &.slide-up-enter.slide-up-enter-active&-placement-topRight, - &.slide-up-appear.slide-up-appear-active&-placement-topLeft, - &.slide-up-appear.slide-up-appear-active&-placement-topRight { + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft, + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight { animation-name: antSlideDownIn; } - &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, - &.slide-up-enter.slide-up-enter-active&-placement-bottomRight, - &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft, - &.slide-up-appear.slide-up-appear-active&-placement-bottomRight { + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft, + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomRight, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomRight { animation-name: antSlideUpIn; } - &.slide-up-leave.slide-up-leave-active&-placement-topLeft, - &.slide-up-leave.slide-up-leave-active&-placement-topRight { + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft, + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight { animation-name: antSlideDownOut; } - &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft, - &.slide-up-leave.slide-up-leave-active&-placement-bottomRight { + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft, + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomRight { animation-name: antSlideUpOut; } } diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index da75b372303..f291ae44b99 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -1,4 +1,4 @@ -@import '../../style/themes/default'; +@import '../../style/themes/index'; @import '../../style/mixins/index'; @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 41a3b4e3a76..7a241d83b21 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -32,7 +32,7 @@ } .@{iconfont-css-prefix}-down::before { - transition: transform 0.2s; + transition: transform @animation-duration-base; } } @@ -43,7 +43,8 @@ } &-hidden, - &-menu-hidden { + &-menu-hidden, + &-menu-submenu-hidden { display: none; } @@ -132,7 +133,7 @@ &-item-group-title { padding: 5px @control-padding-horizontal; color: @text-color-secondary; - transition: all 0.3s; + transition: all @animation-duration-slow; } &-submenu-popup { @@ -153,6 +154,42 @@ } } + // ======================= Item Content ======================= + &-item { + position: relative; + display: flex; + align-items: center; + } + + &-item-icon { + min-width: 12px; + margin-right: 8px; + font-size: @font-size-sm; + } + + &-title-content { + flex: auto; + + > a { + color: inherit; + transition: all @animation-duration-slow; + + &:hover { + color: inherit; + } + + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + content: ''; + } + } + } + + // =========================== Item =========================== &-item, &-submenu-title { clear: both; @@ -164,35 +201,7 @@ line-height: @dropdown-line-height; white-space: nowrap; cursor: pointer; - transition: all 0.3s; - - > .@{iconfont-css-prefix}:first-child, - > a > .@{iconfont-css-prefix}:first-child, - > span > .@{iconfont-css-prefix}:first-child { - min-width: 12px; - margin-right: 8px; - font-size: @font-size-sm; - vertical-align: -0.1em; - } - - > a { - display: block; - margin: -5px -@control-padding-horizontal; - padding: 5px @control-padding-horizontal; - color: @text-color; - transition: all 0.3s; - &:hover { - color: @text-color; - } - } - - > .@{iconfont-css-prefix} + span > a { - color: @text-color; - transition: all 0.3s; - &:hover { - color: @text-color; - } - } + transition: all @animation-duration-slow; &:first-child { & when (@dropdown-edge-child-vertical-padding = 0) { @@ -206,8 +215,7 @@ } } - &-selected, - &-selected > a { + &-selected { color: @dropdown-selected-color; background-color: @item-active-bg; } @@ -226,21 +234,8 @@ cursor: not-allowed; } - > .@{iconfont-css-prefix} + span > a, - > a { - position: relative; - color: @disabled-color; + a { pointer-events: none; - - &::after { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - cursor: not-allowed; - content: ''; - } } } @@ -303,33 +298,33 @@ } } - &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft, - &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft, - &.slide-down-enter.slide-down-enter-active&-placement-bottomCenter, - &.slide-down-appear.slide-down-appear-active&-placement-bottomCenter, - &.slide-down-enter.slide-down-enter-active&-placement-bottomRight, - &.slide-down-appear.slide-down-appear-active&-placement-bottomRight { + &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft, + &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft, + &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomCenter, + &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomCenter, + &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight, + &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight { animation-name: antSlideUpIn; } - &.slide-up-enter.slide-up-enter-active&-placement-topLeft, - &.slide-up-appear.slide-up-appear-active&-placement-topLeft, - &.slide-up-enter.slide-up-enter-active&-placement-topCenter, - &.slide-up-appear.slide-up-appear-active&-placement-topCenter, - &.slide-up-enter.slide-up-enter-active&-placement-topRight, - &.slide-up-appear.slide-up-appear-active&-placement-topRight { + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft, + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topCenter, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topCenter, + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight { animation-name: antSlideDownIn; } - &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft, - &.slide-down-leave.slide-down-leave-active&-placement-bottomCenter, - &.slide-down-leave.slide-down-leave-active&-placement-bottomRight { + &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft, + &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomCenter, + &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight { animation-name: antSlideUpOut; } - &.slide-up-leave.slide-up-leave-active&-placement-topLeft, - &.slide-up-leave.slide-up-leave-active&-placement-topCenter, - &.slide-up-leave.slide-up-leave-active&-placement-topRight { + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft, + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topCenter, + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight { animation-name: antSlideDownOut; } } diff --git a/components/form/style/components.less b/components/form/style/components.less index bc6c03b8df9..0379fbdc712 100644 --- a/components/form/style/components.less +++ b/components/form/style/components.less @@ -61,7 +61,9 @@ width: 100%; } - // Don't impact select inside input group + // Don't impact select inside input group and calendar header select + .@{ant-prefix}-picker-calendar-year-select, + .@{ant-prefix}-picker-calendar-month-select, .@{ant-prefix}-input-group .@{ant-prefix}-select, .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker { width: auto; diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less index 5e2d0c2c7f1..549e7bd100d 100644 --- a/components/form/style/mixin.less +++ b/components/form/style/mixin.less @@ -20,16 +20,22 @@ } .@{ant-prefix}-input-disabled { - background-color: @input-disabled-bg; - border-color: @input-border-color; + &, + &:hover { + background-color: @input-disabled-bg; + border-color: @input-border-color; + } } .@{ant-prefix}-input-affix-wrapper-disabled { - background-color: @input-disabled-bg; - border-color: @input-border-color; + &, + &:hover { + background-color: @input-disabled-bg; + border-color: @input-border-color; - input:focus { - box-shadow: none !important; + input:focus { + box-shadow: none !important; + } } } diff --git a/components/form/style/status.less b/components/form/style/status.less index e04b607b84e..75add0b1bb1 100644 --- a/components/form/style/status.less +++ b/components/form/style/status.less @@ -182,7 +182,9 @@ .@{ant-prefix}-input-group-addon .@{ant-prefix}-select { &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input) .@{ant-prefix}-select-selector { + background-color: inherit; border: 0; + box-shadow: none; } } @@ -221,9 +223,18 @@ } } - .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input { - background-color: @form-error-input-bg; - .active(@error-color); + // cascader + .@{ant-prefix}-cascader-picker { + &:hover + .@{ant-prefix}-cascader-picker-label:hover + + .@{ant-prefix}-cascader-input.@{ant-prefix}-input { + border-color: @error-color; + } + + &:focus .@{ant-prefix}-cascader-input { + background-color: @form-error-input-bg; + .active(@error-color); + } } // transfer diff --git a/components/layout/style/index.less b/components/layout/style/index.less index 75b91938e2f..86a912e70a7 100644 --- a/components/layout/style/index.less +++ b/components/layout/style/index.less @@ -2,6 +2,7 @@ @import '../../style/mixins/index'; @layout-prefix-cls: ~'@{ant-prefix}-layout'; +@layout-menu-prefix-cls: ~'@{ant-prefix}-menu'; .@{layout-prefix-cls} { display: flex; @@ -66,6 +67,10 @@ // /~https://github.com/ant-design/ant-design/issues/7967 // solution from https://stackoverflow.com/a/33132624/3040605 padding-top: 0.1px; + + .@{layout-menu-prefix-cls}.@{layout-menu-prefix-cls}-inline-collapsed { + width: auto; + } } &-has-trigger { diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less index 1ad2abf991d..ed8a853f1ed 100644 --- a/components/menu/style/dark.less +++ b/components/menu/style/dark.less @@ -87,8 +87,7 @@ > span > a { color: @menu-dark-highlight-color; } - > .@{menu-prefix-cls}-submenu-title, - > .@{menu-prefix-cls}-submenu-title:hover { + > .@{menu-prefix-cls}-submenu-title { > .@{menu-prefix-cls}-submenu-arrow { opacity: 1; &::after, diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 22c109d6127..aa649f47cd3 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -3,6 +3,13 @@ @import './status'; @menu-prefix-cls: ~'@{ant-prefix}-menu'; +@menu-animation-duration-normal: 0.15s; + +.accessibility-focus() { + box-shadow: 0 0 0 2px fade(@primary-color, 20%); +} + +// TODO: Should remove icon style compatible in v5 // default theme .@{menu-prefix-cls} { @@ -18,9 +25,14 @@ background: @menu-bg; outline: none; box-shadow: @box-shadow-base; - transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s; + transition: background @animation-duration-slow, + width @animation-duration-slow cubic-bezier(0.2, 0, 0, 1) 0s; .clearfix(); + &&-root:focus-visible { + .accessibility-focus(); + } + ul, ol { margin: 0; @@ -28,7 +40,17 @@ list-style: none; } - &-hidden { + // Overflow ellipsis + &-overflow { + display: flex; + + &-item { + flex: none; + } + } + + &-hidden, + &-submenu-hidden { display: none; } @@ -38,16 +60,18 @@ color: @menu-item-group-title-color; font-size: @menu-item-group-title-font-size; line-height: @menu-item-group-height; - transition: all 0.3s; + transition: all @animation-duration-slow; } &-horizontal &-submenu { - transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out; + transition: border-color @animation-duration-slow @ease-in-out, + background @animation-duration-slow @ease-in-out; } &-submenu, &-submenu-inline { - transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out, - padding 0.15s @ease-in-out; + transition: border-color @animation-duration-slow @ease-in-out, + background @animation-duration-slow @ease-in-out, + padding @menu-animation-duration-normal @ease-in-out; } &-submenu-selected { @@ -61,7 +85,8 @@ &-submenu &-sub { cursor: initial; - transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out; + transition: background @animation-duration-slow @ease-in-out, + padding @animation-duration-slow @ease-in-out; } &-item a { @@ -95,14 +120,6 @@ background-color: @border-color-split; } - &-item:hover, - &-item-active, - &:not(&-inline) &-submenu-open, - &-submenu-active, - &-submenu-title:hover { - color: @menu-highlight-color; - } - &-horizontal &-item, &-horizontal &-submenu { margin-top: -1px; @@ -172,7 +189,7 @@ &-horizontal &-item, &-horizontal &-submenu-title { - transition: border-color 0.3s, background 0.3s; + transition: border-color @animation-duration-slow, background @animation-duration-slow; } &-item, @@ -183,26 +200,37 @@ padding: @menu-item-padding; white-space: nowrap; cursor: pointer; - transition: border-color 0.3s, background 0.3s, padding 0.15s @ease-in-out; + transition: border-color @animation-duration-slow, background @animation-duration-slow, + padding @animation-duration-slow @ease-in-out; .@{menu-prefix-cls}-item-icon, .@{iconfont-css-prefix} { min-width: 14px; - margin-right: @menu-icon-margin-right; font-size: @menu-icon-size; - transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out, color 0.3s; + transition: font-size @menu-animation-duration-normal @ease-out, + margin @animation-duration-slow @ease-in-out, color @animation-duration-slow; + span { + margin-left: @menu-icon-margin-right; opacity: 1; - transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out, color 0.3s; + transition: opacity @animation-duration-slow @ease-in-out, margin @animation-duration-slow, + color @animation-duration-slow; } } + .@{menu-prefix-cls}-item-icon.svg { + vertical-align: -0.125em; + } + &.@{menu-prefix-cls}-item-only-child { > .@{iconfont-css-prefix}, > .@{menu-prefix-cls}-item-icon { margin-right: 0; } } + + &:focus-visible { + .accessibility-focus(); + } } & > &-item-divider { @@ -248,7 +276,7 @@ background-color: @menu-bg; border-radius: @border-radius-base; &-submenu-title::after { - transition: transform 0.3s @ease-in-out; + transition: transform @animation-duration-slow @ease-in-out; } } @@ -264,10 +292,11 @@ width: 10px; color: @menu-item-color; transform: translateY(-50%); - transition: transform 0.3s @ease-in-out; + transition: transform @animation-duration-slow @ease-in-out; } &-arrow { + // → &::before, &::after { position: absolute; @@ -275,8 +304,9 @@ height: 1.5px; background-color: currentColor; border-radius: 2px; - transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out, top 0.3s @ease-in-out, - color 0.3s @ease-in-out; + transition: background @animation-duration-slow @ease-in-out, + transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out, + color @animation-duration-slow @ease-in-out; content: ''; } &::before { @@ -292,7 +322,9 @@ color: @menu-highlight-color; } + .@{menu-prefix-cls}-inline-collapsed &-arrow, &-inline &-arrow { + // ↓ &::before { transform: rotate(-45deg) translateX(2.5px); } @@ -306,6 +338,7 @@ } &-open&-inline > &-title > &-arrow { + // ↑ transform: translateY(-2px); &::after { transform: rotate(-45deg) translateX(-2.5px); @@ -331,19 +364,19 @@ &:not(.@{menu-prefix-cls}-dark) { > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-submenu { - margin: @menu-item-padding; margin-top: -1px; margin-bottom: 0; padding: @menu-item-padding; - padding-right: 0; - padding-left: 0; &:hover, &-active, &-open, &-selected { color: @menu-highlight-color; - border-bottom: 2px solid @menu-highlight-color; + + &::after { + border-bottom: 2px solid @menu-highlight-color; + } } } } @@ -354,7 +387,16 @@ top: 1px; display: inline-block; vertical-align: bottom; - border-bottom: 2px solid transparent; + + &::after { + position: absolute; + right: @menu-item-padding-horizontal; + bottom: 0; + left: @menu-item-padding-horizontal; + border-bottom: 2px solid transparent; + transition: border-color @animation-duration-slow @ease-in-out; + content: ''; + } } > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { @@ -398,7 +440,8 @@ border-right: @menu-item-active-border-width solid @menu-highlight-color; transform: scaleY(0.0001); opacity: 0; - transition: transform 0.15s @ease-out, opacity 0.15s @ease-out; + transition: transform @menu-animation-duration-normal @ease-out, + opacity @menu-animation-duration-normal @ease-out; content: ''; } } @@ -431,6 +474,7 @@ } &-vertical { + .@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-submenu-title { padding-right: 34px; } @@ -443,7 +487,8 @@ &::after { transform: scaleY(1); opacity: 1; - transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out; + transition: transform @menu-animation-duration-normal @ease-in-out, + opacity @menu-animation-duration-normal @ease-in-out; } } @@ -452,13 +497,37 @@ width: ~'calc(100% + 1px)'; } + .@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-submenu-title { padding-right: 34px; } + + // Motion enhance for first level + &.@{menu-prefix-cls}-root { + .@{menu-prefix-cls}-item, + .@{menu-prefix-cls}-submenu-title { + display: flex; + align-items: center; + transition: border-color @animation-duration-slow, background @animation-duration-slow, + padding 0.1s @ease-out; + + > .@{menu-prefix-cls}-title-content { + flex: auto; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + } + + > * { + flex: none; + } + } + } } - &-inline-collapsed { + &&-inline-collapsed { width: @menu-collapsed-width; + > .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list @@ -471,8 +540,9 @@ left: 0; padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)'; text-overflow: clip; + .@{menu-prefix-cls}-submenu-arrow { - display: none; + opacity: 0; } .@{menu-prefix-cls}-item-icon, @@ -482,7 +552,6 @@ line-height: @menu-item-height; + span { display: inline-block; - max-width: 0; opacity: 0; } } @@ -564,8 +633,12 @@ &-submenu-disabled { color: @disabled-color !important; background: none; - border-color: transparent !important; cursor: not-allowed; + + &::after { + border-color: transparent !important; + } + a { color: @disabled-color !important; pointer-events: none; @@ -590,5 +663,6 @@ } } +@import './light'; @import './dark'; @import './rtl'; diff --git a/components/menu/style/light.less b/components/menu/style/light.less new file mode 100644 index 00000000000..06cd6d0c07d --- /dev/null +++ b/components/menu/style/light.less @@ -0,0 +1,12 @@ +.@{menu-prefix-cls} { + // light theme + &-light { + .@{menu-prefix-cls}-item:hover, + .@{menu-prefix-cls}-item-active, + .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-inline) .@{menu-prefix-cls}-submenu-open, + .@{menu-prefix-cls}-submenu-active, + .@{menu-prefix-cls}-submenu-title:hover { + color: @menu-highlight-color; + } + } +} diff --git a/components/message/style/index.less b/components/message/style/index.less index 67245372bd2..3459ef650f2 100644 --- a/components/message/style/index.less +++ b/components/message/style/index.less @@ -51,7 +51,7 @@ font-size: @font-size-lg; } - &-notice.move-up-leave.move-up-leave-active { + &-notice.@{ant-prefix}-move-up-leave.@{ant-prefix}-move-up-leave-active { animation-name: MessageMoveOut; animation-duration: 0.3s; } diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 7f0d2242372..d9470ef367d 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -93,7 +93,7 @@ @modal-footer-border-color-split; border-radius: 0 0 @border-radius-base @border-radius-base; - .@{ant-prefix}-btn + .@{ant-prefix}-btn { + .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) { margin-bottom: 0; margin-left: 8px; } diff --git a/components/notification/style/index.less b/components/notification/style/index.less index a998f119486..7ded96f53d1 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -31,14 +31,19 @@ cursor: pointer; } - &-hook-holder, + &-hook-holder { + position: relative; + } + &-notice { position: relative; width: @notification-width; max-width: ~'calc(100vw - @{notification-margin-edge} * 2)'; margin-bottom: @notification-margin-bottom; margin-left: auto; + padding: @notification-padding; overflow: hidden; + line-height: @line-height-base; word-wrap: break-word; background: @notification-bg; border-radius: @border-radius-base; @@ -49,16 +54,6 @@ margin-right: auto; margin-left: 0; } - } - - &-hook-holder > &-notice { - margin-bottom: 0; - box-shadow: none; - } - - &-notice { - padding: @notification-padding; - line-height: @line-height-base; &-message { margin-bottom: 8px; diff --git a/components/radio/style/index.less b/components/radio/style/index.less index bc72ed2b346..4bdea7230ff 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -32,6 +32,13 @@ align-items: baseline; margin-right: @radio-wrapper-margin-right; cursor: pointer; + + &::after { + display: inline-block; + width: 0; + overflow: hidden; + content: '\a0'; + } } .@{radio-prefix-cls} { @@ -77,7 +84,7 @@ position: absolute; top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width; left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width; - display: table; + display: block; width: @radio-dot-size; height: @radio-dot-size; background-color: @radio-dot-color; diff --git a/components/rate/style/index.less b/components/rate/style/index.less index d5e9353be43..5c93a12d9d8 100644 --- a/components/rate/style/index.less +++ b/components/rate/style/index.less @@ -27,21 +27,22 @@ display: inline-block; color: inherit; cursor: pointer; - transition: all 0.3s; &:not(:last-child) { margin-right: 8px; } > div { - &:focus { - outline: 0; - } + transition: all 0.3s; &:hover, - &:focus { + &:focus-visible { transform: @rate-star-hover-scale; } + + &:focus:not(:focus-visible) { + outline: 0; + } } &-first, diff --git a/components/select/style/index.less b/components/select/style/index.less index bcf637473a7..d2ae04a76c0 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -199,21 +199,21 @@ outline: none; box-shadow: @box-shadow-base; - &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, - &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft { + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft { animation-name: antSlideUpIn; } - &.slide-up-enter.slide-up-enter-active&-placement-topLeft, - &.slide-up-appear.slide-up-appear-active&-placement-topLeft { + &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft, + &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft { animation-name: antSlideDownIn; } - &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft { + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft { animation-name: antSlideUpOut; } - &.slide-up-leave.slide-up-leave-active&-placement-topLeft { + &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft { animation-name: antSlideDownOut; } diff --git a/components/steps/style/progress.less b/components/steps/style/progress.less index f5560feeea5..586f2c20dc4 100644 --- a/components/steps/style/progress.less +++ b/components/steps/style/progress.less @@ -10,6 +10,7 @@ } &.@{steps-prefix-cls}-horizontal .@{steps-prefix-cls}-item:first-child { + padding-bottom: 4px; padding-left: 4px; } diff --git a/components/steps/style/rtl.less b/components/steps/style/rtl.less index 2f8220892c7..47f9dfbc11f 100644 --- a/components/steps/style/rtl.less +++ b/components/steps/style/rtl.less @@ -242,3 +242,10 @@ } } } + +// RTL Steps with progress +.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal { + .@{steps-prefix-cls}-item:first-child.@{steps-prefix-cls}-item-active { + padding-right: 4px; + } +} diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index 4b485cb158e..73c9059eed1 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -18,6 +18,7 @@ position: absolute; z-index: @zindex-tooltip; display: block; + width: max-content; max-width: @tooltip-max-width; visibility: visible; diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index d68ef455ecf..1d4d36db8ba 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -209,10 +209,6 @@ &-footer { border-top: @border-width-base @border-style-base @border-color-split; } - - &-checkbox .@{ant-prefix}-checkbox { - top: 0; - } } &-operation { diff --git a/components/typography/style/index.less b/components/typography/style/index.less index bb6a6e072d1..04f75668566 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -262,6 +262,7 @@ &-single-line { white-space: nowrap; } + &-ellipsis-single-line { overflow: hidden; text-overflow: ellipsis;