diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 1c3f87c2d9..92d0042b20 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -14,39 +14,6 @@ padding-left: 4px; overflow: auto; background-color: @anchor-bg; - - &-horizontal { - margin-left: unset; - padding-left: unset; - margin-bottom: -4px; - padding-bottom: 4px; - - .ant-anchor { - display: flex; - - &-ink { - top: unset; - bottom: 0; - width: 100%; - height: unset; - - &:before { - width: 100%; - height: 2px; - } - - &-ball { - transform: translate(-50%, -50%); - } - } - - &-link { - &:first-of-type { - padding-inline: 0; - } - } - } - } } &-ink { diff --git a/components/anchor/style/patch.less b/components/anchor/style/patch.less index 88749b4fdd..ea9575dde5 100644 --- a/components/anchor/style/patch.less +++ b/components/anchor/style/patch.less @@ -1,3 +1,43 @@ +@import '../../style/themes/index'; + nz-link { display: block; } + +.@{ant-prefix}-anchor { + &-wrapper { + // This is a feature of Antd 5, so we need add in the patch file. + &-horizontal { + margin-left: unset; + padding-left: unset; + margin-bottom: -4px; + padding-bottom: 4px; + + .ant-anchor { + display: flex; + + &-ink { + top: unset; + bottom: 0; + width: 100%; + height: unset; + + &:before { + width: 100%; + height: 2px; + } + + &-ball { + transform: translate(-50%, -50%); + } + } + + &-link { + &:first-of-type { + padding-inline: 0; + } + } + } + } + } +} diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index ae4a39d949..3d7c0336ed 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -26,7 +26,7 @@ width: 100%; height: 100%; border: 1px solid @checkbox-color; - border-radius: @border-radius-base; + border-radius: @checkbox-border-radius; visibility: hidden; animation: antCheckboxEffect 0.36s ease-in-out; animation-fill-mode: backwards; diff --git a/components/collapse/collapse-panel.component.ts b/components/collapse/collapse-panel.component.ts index c5c3afda28..4b68593a19 100644 --- a/components/collapse/collapse-panel.component.ts +++ b/components/collapse/collapse-panel.component.ts @@ -56,7 +56,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel'; } - {{ nzHeader }} + + {{ nzHeader }} + @if (nzExtra) {
{{ nzExtra }} diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 5cecd1fc7e..2cccb86fbb 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -43,6 +43,10 @@ } } + .@{collapse-prefix-cls}-header-text { + flex: auto; + } + .@{collapse-prefix-cls}-extra { margin-left: auto; } @@ -55,6 +59,7 @@ .@{collapse-prefix-cls}-header-collapsible-only { cursor: default; .@{collapse-prefix-cls}-header-text { + flex: none; cursor: pointer; } } diff --git a/components/core/animation/drawer.ts b/components/core/animation/drawer.ts new file mode 100644 index 0000000000..0d3627480c --- /dev/null +++ b/components/core/animation/drawer.ts @@ -0,0 +1,13 @@ +/** + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE + */ + +import { AnimationTriggerMetadata, animate, style, transition, trigger } from '@angular/animations'; + +import { AnimationDuration } from './animation-consts'; + +export const drawerMaskMotion: AnimationTriggerMetadata = trigger('drawerMaskMotion', [ + transition(':enter', [style({ opacity: 0 }), animate(`${AnimationDuration.SLOW}`, style({ opacity: 1 }))]), + transition(':leave', [style({ opacity: 1 }), animate(`${AnimationDuration.SLOW}`, style({ opacity: 0 }))]) +]); diff --git a/components/core/animation/help.ts b/components/core/animation/form.ts similarity index 100% rename from components/core/animation/help.ts rename to components/core/animation/form.ts diff --git a/components/core/animation/public-api.ts b/components/core/animation/public-api.ts index 480faca714..4beeb4cdb2 100644 --- a/components/core/animation/public-api.ts +++ b/components/core/animation/public-api.ts @@ -5,10 +5,11 @@ export * from './animation-consts'; export * from './collapse'; +export * from './drawer'; export * from './fade'; -export * from './help'; +export * from './form'; export * from './move'; export * from './notification'; export * from './slide'; -export * from './zoom'; export * from './thumb'; +export * from './zoom'; diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less index e146a3cc31..8d59a38af2 100644 --- a/components/date-picker/style/status.less +++ b/components/date-picker/style/status.less @@ -20,7 +20,7 @@ &:focus { .active(@text-color, @hoverBorderColor, @outlineColor); } - + .@{picker-prefix-cls}-active-bar { background: @hoverBorderColor; } diff --git a/components/drawer/drawer.component.ts b/components/drawer/drawer.component.ts index b316a1c12a..0d4411250e 100644 --- a/components/drawer/drawer.component.ts +++ b/components/drawer/drawer.component.ts @@ -35,6 +35,7 @@ import { import { Observable, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { drawerMaskMotion } from 'ng-zorro-antd/core/animation'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; @@ -77,8 +78,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer'; [style.transition]="placementChanging ? 'none' : null" [style.zIndex]="nzZIndex" > - @if (nzMask) { -
+ @if (nzMask && isOpen) { +
}
& { + top: 0; + bottom: 0; + left: 0; + box-shadow: @shadow-1-right; } - } - &-right { - right: 0; - - .@{drawer-prefix-cls} { - &-content-wrapper { - right: 0; - } - } - &.@{drawer-prefix-cls}-open { - .@{drawer-prefix-cls}-content-wrapper { - box-shadow: @shadow-1-left; - } - // https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug. - &.no-mask { - right: 1px; - transform: translateX(1px); - } + .@{drawer-prefix-cls}-right > & { + top: 0; + right: 0; + bottom: 0; + box-shadow: @shadow-1-left; } - } - - &-top, - &-bottom { - left: 0; - width: 100%; - height: 0%; - .@{drawer-prefix-cls}-content-wrapper { - width: 100%; - } - &.@{drawer-prefix-cls}-open { - height: 100%; - transition: transform @animation-duration-slow @drawer-animation-ease; + .@{drawer-prefix-cls}-top > & { + top: 0; + right: 0; + left: 0; + box-shadow: @shadow-1-down; } - } - &-top { - top: 0; - - &.@{drawer-prefix-cls}-open { - .@{drawer-prefix-cls}-content-wrapper { - box-shadow: @shadow-1-down; - } + .@{drawer-prefix-cls}-bottom > & { + right: 0; + bottom: 0; + left: 0; + box-shadow: @shadow-1-up; } } - &-bottom { - bottom: 0; - - .@{drawer-prefix-cls} { - &-content-wrapper { - bottom: 0; - } - } - &.@{drawer-prefix-cls}-open { - .@{drawer-prefix-cls}-content-wrapper { - box-shadow: @shadow-1-up; - } - - &.no-mask { - bottom: 1px; - transform: translateY(1px); - } - } + &-content { + width: 100%; + height: 100%; + overflow: auto; + background: @drawer-bg; + pointer-events: auto; } - &.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask { + // ===================== Panel ====================== + &-wrapper-body { + display: flex; + flex-direction: column; + width: 100%; height: 100%; - opacity: 1; - transition: none; - animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease; - pointer-events: auto; } - &-title { - flex: 1; - margin: 0; - color: @heading-color; - font-weight: 500; + // Header + &-header { + display: flex; + flex: 0; + align-items: center; + padding: @drawer-header-padding; font-size: @drawer-title-font-size; line-height: @drawer-title-line-height; + border-bottom: @border-width-base @border-style-base @border-color-split; + + &-title { + display: flex; + flex: 1; + align-items: center; + min-width: 0; + min-height: 0; + } } - &-content { - position: relative; - z-index: 1; - overflow: auto; - background-color: @drawer-bg; - background-clip: padding-box; - border: 0; + &-extra { + flex: none; } &-close { @@ -172,78 +133,28 @@ } } - &-header { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - padding: @drawer-header-padding; - color: @text-color; - background: @drawer-bg; - border-bottom: @border-width-base @border-style-base @border-color-split; - border-radius: @border-radius-base @border-radius-base 0 0; - - &-title { - display: flex; - flex: 1; - align-items: center; - justify-content: space-between; - } - - &-close-only { - padding-bottom: 0; - border: none; - } - } - - &-wrapper-body { - display: flex; - flex-flow: column nowrap; - width: 100%; - height: 100%; + &-title { + flex: 1; + margin: 0; + color: @heading-color; + font-weight: 500; + font-size: @drawer-title-font-size; + line-height: @drawer-title-line-height; } + // Body &-body { - flex-grow: 1; + flex: 1; + min-width: 0; + min-height: 0; padding: @drawer-body-padding; overflow: auto; - font-size: @font-size-base; - line-height: @line-height-base; - word-wrap: break-word; } + // Footer &-footer { flex-shrink: 0; padding: @drawer-footer-padding-vertical @drawer-footer-padding-horizontal; border-top: @border-width-base @border-style-base @border-color-split; } - - &-mask { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 0; - background-color: @modal-mask-bg; - opacity: 0; - transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow; - pointer-events: none; - } - - // =================== Hook Components =================== - .@{picker-prefix-cls} { - &-clear { - background: @popover-background; - } - } -} - -@keyframes antdDrawerFadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } } diff --git a/components/drawer/style/entry.less b/components/drawer/style/entry.less index 06547c43ac..96cebe33bf 100644 --- a/components/drawer/style/entry.less +++ b/components/drawer/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import './patch.less'; diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less index 77efacf49d..98801b13f0 100644 --- a/components/drawer/style/index.less +++ b/components/drawer/style/index.less @@ -1,6 +1,7 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import './drawer'; +@import './motion'; @import './rtl'; .popover-customize-bg(@drawer-prefix-cls, @popover-background); diff --git a/components/drawer/style/motion.less b/components/drawer/style/motion.less new file mode 100644 index 0000000000..fc392b484a --- /dev/null +++ b/components/drawer/style/motion.less @@ -0,0 +1,138 @@ +@import (reference) '../../style/themes/index'; + +@drawer-prefix-cls: ~'@{ant-prefix}-drawer'; + +.panel-motion { + &-enter, + &-appear, + &-leave { + &-start { + transition: none; + } + + &-active { + transition: all @animation-duration-slow; + } + } +} + +.@{drawer-prefix-cls} { + // ======================== Mask ======================== + &-mask-motion { + &-enter, + &-appear, + &-leave { + &-active { + transition: all @animation-duration-slow; + } + } + + &-enter, + &-appear { + opacity: 0; + + &-active { + opacity: 1; + } + } + + &-leave { + opacity: 1; + + &-active { + opacity: 0; + } + } + } + + // ======================= Panel ======================== + &-panel-motion { + // Left + &-left { + .panel-motion(); + + &-enter, + &-appear { + transform: translateX(-100%); + + &-active { + transform: translateX(0); + } + } + + &-leave { + transform: translateX(0); + + &-active { + transform: translateX(-100%); + } + } + } + + // Right + &-right { + .panel-motion(); + + &-enter, + &-appear { + transform: translateX(100%); + + &-active { + transform: translateX(0); + } + } + + &-leave { + transform: translateX(0); + + &-active { + transform: translateX(100%); + } + } + } + + // Top + &-top { + .panel-motion(); + + &-enter, + &-appear { + transform: translateY(-100%); + + &-active { + transform: translateY(0); + } + } + + &-leave { + transform: translateY(0); + + &-active { + transform: translateY(-100%); + } + } + } + + // Bottom + &-bottom { + .panel-motion(); + + &-enter, + &-appear { + transform: translateY(100%); + + &-active { + transform: translateY(0); + } + } + + &-leave { + transform: translateY(0); + + &-active { + transform: translateY(100%); + } + } + } + } +} diff --git a/components/drawer/style/patch.less b/components/drawer/style/patch.less new file mode 100644 index 0000000000..b1a8e7774a --- /dev/null +++ b/components/drawer/style/patch.less @@ -0,0 +1,8 @@ +.@{drawer-prefix-cls} { + // Fix the issue of the drawer content shadow when the drawer is closed + &:not(.@{drawer-prefix-cls}-open) { + .@{drawer-prefix-cls}-content-wrapper { + box-shadow: none; + } + } +} diff --git a/components/form/style/index.less b/components/form/style/index.less index 105b9aaf43..3fcbb6019d 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -62,11 +62,8 @@ margin-bottom: @form-item-margin-bottom; vertical-align: top; - // We delay one frame (0.017s) here to let CSSMotion goes - transition: margin-bottom @animation-duration-slow 0.017s linear; &-with-help { - margin-bottom: 0; transition: none; } @@ -203,9 +200,7 @@ } &-explain-connected { - height: 0; - min-height: 0; - opacity: 0; + width: 100%; } &-extra { @@ -214,7 +209,7 @@ &-with-help &-explain { height: auto; - min-height: @form-item-margin-bottom; + // min-height: @form-item-margin-bottom; opacity: 1; } @@ -249,15 +244,22 @@ // >>>>>>>>>> Motion <<<<<<<<<< // Explain holder .@{ant-prefix}-show-help { - transition: height @animation-duration-slow linear, min-height @animation-duration-slow linear, - margin-bottom @animation-duration-slow @ease-in-out, - opacity @animation-duration-slow @ease-in-out; + transition: opacity @animation-duration-slow @ease-in-out; + + &-appear, + &-enter { + opacity: 0; + + &-active { + opacity: 1; + } + } &-leave { - min-height: @form-item-margin-bottom; + opacity: 1; &-active { - min-height: 0; + opacity: 0; } } } @@ -279,6 +281,11 @@ } } + &-leave { + transition: height @animation-duration-base @ease-in-out, + opacity @animation-duration-base @ease-in-out, transform @animation-duration-base @ease-in-out !important; + } + &-leave-active { transform: translateY(-5px); } diff --git a/components/form/style/patch.less b/components/form/style/patch.less index 49d0c1467f..e3b0d834b6 100644 --- a/components/form/style/patch.less +++ b/components/form/style/patch.less @@ -1,4 +1,14 @@ -// Force disable css override transition in index.less configured since we use animations instead -nz-form-item.ant-form-item { - transition: none; +// Since zorro's form-item-margin-bottom doesn't currently animate, we need to fix some of the heights. +.@{form-item-prefix-cls}{ + &-explain-connected { + height: 0; + } + + &-with-help { + margin-bottom: 0; + } + + &-with-help &-explain { + min-height: @form-item-margin-bottom; + } } diff --git a/components/form/style/vertical.less b/components/form/style/vertical.less index 775d9c67d3..52730e9e44 100644 --- a/components/form/style/vertical.less +++ b/components/form/style/vertical.less @@ -40,7 +40,9 @@ .@{form-prefix-cls}-vertical { .@{form-item-prefix-cls} { - flex-direction: column; + &-row { + flex-direction: column; + } &-label > label { height: auto; diff --git a/components/grid/style/index.less b/components/grid/style/index.less index 3dcb534789..1f767de56c 100644 --- a/components/grid/style/index.less +++ b/components/grid/style/index.less @@ -6,6 +6,7 @@ .@{row-prefix-cls} { display: flex; flex-flow: row wrap; + min-width: 0; &::before, &::after { diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index 97662c0c8a..6008890709 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -27,8 +27,8 @@ width: 90px; margin: 0; padding: 0; - border: @border-width-base @border-style-base @border-color-base; - border-radius: @border-radius-base; + border: @border-width-base @border-style-base @input-border-color; + border-radius: @control-border-radius; &-handler { position: relative; @@ -102,7 +102,7 @@ text-align: left; background-color: transparent; border: 0; - border-radius: @border-radius-base; + border-radius: @control-border-radius; outline: 0; transition: all 0.3s linear; appearance: textfield !important; @@ -142,7 +142,7 @@ width: 22px; height: 100%; background: @input-number-handler-bg; - border-radius: 0 @border-radius-base @border-radius-base 0; + border-radius: 0 @control-border-radius @control-border-radius 0; opacity: 0; transition: opacity 0.24s linear 0.1s; @@ -176,7 +176,7 @@ } &-handler-up { - border-top-right-radius: @border-radius-base; + border-top-right-radius: @control-border-radius; cursor: pointer; &-inner { @@ -192,8 +192,8 @@ &-handler-down { top: 0; - border-top: @border-width-base @border-style-base @border-color-base; - border-bottom-right-radius: @border-radius-base; + border-top: @border-width-base @border-style-base @input-number-handler-border-color; + border-bottom-right-radius: @control-border-radius; cursor: pointer; &-inner { @@ -210,6 +210,11 @@ } } + &:hover:not(.@{input-number-prefix-cls}-borderless) &-handler-down, + &-focused:not(.@{input-number-prefix-cls}-borderless) &-handler-down { + border-top: @border-width-base @border-style-base @input-number-handler-border-color; + } + &-handler-up-disabled, &-handler-down-disabled { cursor: not-allowed; diff --git a/components/layout/style/index.less b/components/layout/style/index.less index 1e46d9d302..f699c0b451 100644 --- a/components/layout/style/index.less +++ b/components/layout/style/index.less @@ -65,7 +65,7 @@ &-children { height: 100%; margin-top: -0.1px; - // Hack for fixing margin collapse bug + // Hack for fixing margin collaspe bug // https://github.com/ant-design/ant-design/issues/7967 // solution from https://stackoverflow.com/a/33132624/3040605 padding-top: 0.1px; diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 074145756c..46d413f126 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -29,7 +29,6 @@ &-button { .operation-unit(); color: @page-header-back-color; - cursor: pointer; } } diff --git a/components/popover/style/index.less b/components/popover/style/index.less index b256228c6c..5954e48855 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -65,7 +65,6 @@ background-clip: padding-box; border-radius: @border-radius-base; box-shadow: @box-shadow-base; - box-shadow: ~'0 0 8px @{shadow-color} \9'; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { @@ -113,7 +112,7 @@ margin-bottom: 4px; text-align: right; - button { + button:not(:first-child) { margin-left: 8px; } } diff --git a/components/select/style/status.less b/components/select/style/status.less index a746a04f62..56beacdae3 100644 --- a/components/select/style/status.less +++ b/components/select/style/status.less @@ -1,6 +1,7 @@ @import '../../input/style/mixin'; @select-prefix-cls: ~'@{ant-prefix}-select'; +@pagination-prefix-cls: ~'@{ant-prefix}-pagination'; .select-status-color( @text-color; @@ -9,7 +10,7 @@ @hoverBorderColor; @outlineColor; ) { - &.@{select-prefix-cls}:not(.@{select-prefix-cls}-disabled):not(.@{select-prefix-cls}-customize-input) { + &.@{select-prefix-cls}:not(.@{select-prefix-cls}-disabled):not(.@{select-prefix-cls}-customize-input):not(.@{pagination-prefix-cls}-size-changer) { .@{select-prefix-cls}-selector { background-color: @background-color; border-color: @border-color !important; diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index 8c0a91a9af..359d727824 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -215,6 +215,11 @@ min-width: @size * 2; .skeleton-element-common-size(@size); + &.@{skeleton-button-prefix-cls}-square { + width: @size; + min-width: @size; + } + &.@{skeleton-button-prefix-cls}-circle { width: @size; min-width: @size; diff --git a/components/steps/style/progress.less b/components/steps/style/progress.less index 586f2c20dc..8d0a487a87 100644 --- a/components/steps/style/progress.less +++ b/components/steps/style/progress.less @@ -9,9 +9,17 @@ } } - &.@{steps-prefix-cls}-horizontal .@{steps-prefix-cls}-item:first-child { - padding-bottom: 4px; - padding-left: 4px; + &.@{steps-prefix-cls}-horizontal { + .@{steps-prefix-cls}-item:first-child { + padding-bottom: 4px; + padding-left: 4px; + } + } + + &.@{steps-prefix-cls}-label-vertical { + .@{steps-prefix-cls}-item .@{steps-prefix-cls}-item-tail { + top: 14px !important; + } } .@{steps-prefix-cls}-item-icon { diff --git a/components/style/mixins/operation-unit.less b/components/style/mixins/operation-unit.less index 2dc85bf11c..b69517111b 100644 --- a/components/style/mixins/operation-unit.less +++ b/components/style/mixins/operation-unit.less @@ -1,11 +1,10 @@ .operation-unit() { color: @link-color; - text-decoration: none; outline: none; cursor: pointer; transition: color 0.3s; - &:focus, + &:focus-visible, &:hover { color: @link-hover-color; } diff --git a/components/style/themes/compact.less b/components/style/themes/compact.less index 5f4dc860fe..c650b9ec52 100644 --- a/components/style/themes/compact.less +++ b/components/style/themes/compact.less @@ -203,7 +203,6 @@ // Card // --- -@card-padding-base: 16px; @card-head-height: 36px; @card-head-font-size: @card-head-font-size-sm; @card-head-padding: 8.5px; diff --git a/components/table/style/index.less b/components/table/style/index.less index 47777ea34a..5ee121747a 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -482,6 +482,12 @@ &-row-expand-icon-cell { text-align: center; + + .@{table-prefix-cls}-row-expand-icon { + display: inline-flex; + float: none; + vertical-align: sub; + } } &-row-indent { @@ -492,7 +498,7 @@ &-row-expand-icon { .operation-unit(); position: relative; - display: inline-flex; + float: left; box-sizing: border-box; width: @expand-icon-size; height: @expand-icon-size; @@ -500,11 +506,9 @@ color: inherit; line-height: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)) * 2 + @border-width-base * 3; - vertical-align: -2.5px; background: @table-expand-icon-bg; border: @border-width-base @border-style-base @table-border-color; border-radius: @border-radius-base; - outline: none; transform: scale((unit(@checkbox-size) / unit(@expand-icon-size))); transition: all 0.3s; user-select: none; @@ -561,14 +565,10 @@ } .@{table-prefix-cls}-row-indent + & { + margin-top: ((@font-size-base * @line-height-base - @border-width-base * 3) / 2) - + ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)); margin-right: @padding-xs; } - - + .@{table-prefix-cls}-cell-content { - display: inline-block !important; - width: calc(100% - (@expand-icon-size + @padding-xs)); - vertical-align: top; - } } tr&-expanded-row { @@ -632,6 +632,10 @@ pointer-events: none; } + &-cell-fix-left-all::after { + display: none; + } + &-cell-fix-right-first::after, &-cell-fix-right-last::after { position: absolute; diff --git a/components/tag/style/entry.less b/components/tag/style/entry.less index 06547c43ac..96cebe33bf 100644 --- a/components/tag/style/entry.less +++ b/components/tag/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import './patch.less'; diff --git a/components/tag/style/index.less b/components/tag/style/index.less index f227225180..f65fd369d4 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -94,11 +94,6 @@ background: @@lightColor; border-color: @@lightBorderColor; } - - &-borderless { - border-color: transparent; - } - &-@{color}-inverse { color: @text-color-inverse; background: @@darkColor; diff --git a/components/tag/style/patch.less b/components/tag/style/patch.less new file mode 100644 index 0000000000..e91a6341e4 --- /dev/null +++ b/components/tag/style/patch.less @@ -0,0 +1,6 @@ +.@{tag-prefix-cls} { + // This is a feature of Antd 5, so we need add in the patch file. + &-borderless { + border-color: transparent; + } +} diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index 1c8419e568..d2ad5e1263 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -5,7 +5,8 @@ @tooltip-arrow-shadow-width: 3px; -@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) + @tooltip-arrow-shadow-width * 2; +@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) + + @tooltip-arrow-shadow-width * 2; @tooltip-arrow-offset-vertical: 5px; // 8 - 3px @tooltip-arrow-offset-horizontal: 13px; // 16 - 3px @@ -81,9 +82,10 @@ &-content { // Use linear gradient to mix box shadow of tooltip inner - --antd-arrow-background-color: var( - --color, // used when setting custom color, fallback is provide line below in case no color is set - linear-gradient(to right bottom, fadeout(@tooltip-bg, 10%), @tooltip-bg) // fallback + --antd-arrow-background-color: linear-gradient( + to right bottom, + fadeout(@tooltip-bg, 10%), + @tooltip-bg ); position: absolute; diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index c40b5537c4..99a2760037 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -127,9 +127,14 @@ } &-remove { - .operation-unit(); position: relative; color: @border-color-base; + cursor: pointer; + transition: all 0.3s; + + &:hover { + color: @link-hover-color; + } &::after { position: absolute; @@ -139,10 +144,6 @@ left: -50%; content: ''; } - - &:hover { - color: @link-hover-color; - } } } diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 571cef7da8..52182ece5e 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -529,6 +529,7 @@ .@{upload-prefix-cls}-animate-inline-leave { animation-duration: @animation-duration-slow; animation-timing-function: @ease-in-out-circ; + animation-fill-mode: forwards; } .@{upload-prefix-cls}-animate-inline-appear,