From 87842f20f2299fa2619f3874cf11fd5e67db17e4 Mon Sep 17 00:00:00 2001 From: laffery86 Date: Fri, 31 Jul 2026 20:15:47 +0800 Subject: [PATCH 1/7] refactor(module:style): remove standalone RTL styles --- components/alert/style/index.less | 10 +- components/alert/style/rtl.less | 40 --- components/anchor/style/index.less | 14 +- components/anchor/style/rtl.less | 35 --- components/avatar/style/group.less | 4 +- components/avatar/style/index.less | 1 - components/avatar/style/rtl.less | 15 -- components/badge/style/index.less | 50 +++- components/badge/style/ribbon.less | 12 +- components/badge/style/rtl.less | 100 ------- components/breadcrumb/style/index.less | 6 +- components/breadcrumb/style/patch.less | 6 - components/breadcrumb/style/rtl.less | 29 --- components/button/style/index.less | 23 +- components/button/style/mixin.less | 20 +- components/button/style/rtl.less | 90 ------- components/button/style/space-compact.less | 34 --- components/calendar/style/index.less | 18 +- components/calendar/style/rtl.less | 46 ---- components/card/style/index.less | 25 +- components/card/style/patch.less | 9 - components/carousel/style/index.less | 40 +-- components/carousel/style/rtl.less | 66 ----- components/cascader/style/index.less | 6 +- components/cascader/style/rtl.less | 19 -- components/checkbox/style/index.less | 2 - components/checkbox/style/mixin.less | 8 +- components/checkbox/style/rtl.less | 28 -- components/collapse/style/index.less | 4 - components/comment/style/index.less | 12 +- components/comment/style/rtl.less | 51 ---- components/date-picker/style/index.less | 17 +- components/date-picker/style/panel.less | 68 +++-- components/date-picker/style/rtl.less | 246 ------------------ components/descriptions/style/index.less | 11 +- components/descriptions/style/rtl.less | 33 --- components/divider/style/index.less | 24 +- components/divider/style/rtl.less | 38 --- components/drawer/style/drawer.less | 2 +- components/drawer/style/index.less | 4 +- components/drawer/style/rtl.less | 16 -- components/dropdown/style/index.less | 25 +- components/dropdown/style/patch.less | 13 - components/dropdown/style/rtl.less | 90 ------- components/empty/style/index.less | 2 - components/empty/style/rtl.less | 10 - components/float-button/style/index.less | 8 - components/form/style/index.less | 173 ++++++++++++- components/form/style/rtl.less | 204 --------------- components/grid/style/index.less | 2 - components/grid/style/rtl.less | 7 - components/input-number/style/index.less | 21 +- components/input-number/style/rtl.less | 73 ------ components/input/style/affix.less | 8 +- components/input/style/allow-clear.less | 4 +- components/input/style/index.less | 5 +- components/input/style/mixin.less | 77 +++--- components/input/style/patch.less | 19 -- components/input/style/rtl.less | 210 --------------- components/input/style/search-input.less | 34 +-- components/layout/style/index.less | 1 - components/layout/style/rtl.less | 10 - components/list/style/index.less | 24 +- components/list/style/responsive.less | 6 +- components/list/style/rtl.less | 139 ---------- components/mention/style/index.less | 2 - components/mention/style/rtl.less | 10 - components/menu/style/index.less | 163 +++++++++++- components/menu/style/patch.less | 14 +- components/menu/style/rtl.less | 165 ------------ components/message/style/index.less | 3 +- components/message/style/rtl.less | 17 -- components/modal/style/confirm.less | 10 +- components/modal/style/index.less | 3 +- components/modal/style/modal.less | 6 +- components/modal/style/rtl.less | 74 ------ components/notification/style/index.less | 13 +- components/notification/style/rtl.less | 53 ---- components/page-header/style/index.less | 10 +- components/page-header/style/rtl.less | 77 ------ components/pagination/style/index.less | 19 +- components/pagination/style/rtl.less | 55 ---- components/popover/style/index.less | 8 +- components/popover/style/rtl.less | 39 --- components/progress/style/index.less | 18 +- components/progress/style/rtl.less | 37 --- components/radio/style/index.less | 22 +- components/radio/style/rtl.less | 61 ----- components/rate/style/index.less | 6 +- components/rate/style/rtl.less | 21 -- components/result/style/index.less | 6 +- components/result/style/rtl.less | 25 -- components/segmented/style/index.less | 6 +- components/segmented/style/rtl.less | 15 -- components/select/style/index.less | 2 - components/select/style/rtl.less | 13 - components/skeleton/style/index.less | 35 ++- components/skeleton/style/rtl.less | 48 ---- components/slider/style/index.less | 16 +- components/slider/style/rtl.less | 49 ---- components/space/style/index.less | 1 - components/space/style/rtl.less | 14 - components/spin/style/index.less | 2 - components/spin/style/rtl.less | 20 -- components/splitter/style/index.less | 2 - components/splitter/style/rtl.less | 20 -- components/statistic/style/index.less | 6 +- components/statistic/style/rtl.less | 21 -- components/steps/style/index.less | 285 +++++++++++++++++++- components/steps/style/rtl.less | 287 --------------------- components/style/mixins/compact-item.less | 64 ++--- components/style/themes/default.less | 1 - components/style/themes/variable.less | 1 - components/switch/style/index.less | 32 +-- components/switch/style/rtl.less | 52 ---- components/table/style/index.less | 52 +++- components/table/style/patch.less | 6 +- components/table/style/rtl.less | 168 ------------ components/tabs/style/card-style.less | 6 +- components/tabs/style/card-style.rtl.less | 20 -- components/tabs/style/card.less | 2 +- components/tabs/style/index.less | 11 +- components/tabs/style/patch.less | 9 - components/tabs/style/rtl.less | 86 ------ components/tag/style/index.less | 8 +- components/tag/style/rtl.less | 28 -- components/timeline/style/index.less | 36 ++- components/timeline/style/rtl.less | 135 ---------- components/tooltip/style/index.less | 3 +- components/tooltip/style/rtl.less | 8 - components/transfer/style/index.less | 17 +- components/transfer/style/rtl.less | 71 ----- components/tree-select/style/index.less | 7 +- components/tree/style/index.less | 2 - components/tree/style/mixin.less | 5 +- components/tree/style/rtl.less | 72 ------ components/typography/style/index.less | 16 +- components/typography/style/rtl.less | 54 ---- components/upload/style/index.less | 29 +-- components/upload/style/patch.less | 3 - components/upload/style/rtl.less | 165 ------------ 141 files changed, 1149 insertions(+), 4246 deletions(-) delete mode 100644 components/alert/style/rtl.less delete mode 100644 components/anchor/style/rtl.less delete mode 100644 components/avatar/style/rtl.less delete mode 100644 components/badge/style/rtl.less delete mode 100644 components/breadcrumb/style/rtl.less delete mode 100644 components/button/style/rtl.less delete mode 100644 components/calendar/style/rtl.less delete mode 100644 components/carousel/style/rtl.less delete mode 100644 components/cascader/style/rtl.less delete mode 100644 components/checkbox/style/rtl.less delete mode 100644 components/comment/style/rtl.less delete mode 100644 components/date-picker/style/rtl.less delete mode 100644 components/descriptions/style/rtl.less delete mode 100644 components/divider/style/rtl.less delete mode 100644 components/drawer/style/rtl.less delete mode 100644 components/dropdown/style/rtl.less delete mode 100644 components/empty/style/rtl.less delete mode 100644 components/form/style/rtl.less delete mode 100644 components/grid/style/rtl.less delete mode 100644 components/input-number/style/rtl.less delete mode 100644 components/input/style/rtl.less delete mode 100644 components/layout/style/rtl.less delete mode 100644 components/list/style/rtl.less delete mode 100644 components/mention/style/rtl.less delete mode 100644 components/menu/style/rtl.less delete mode 100644 components/message/style/rtl.less delete mode 100644 components/modal/style/rtl.less delete mode 100644 components/notification/style/rtl.less delete mode 100644 components/page-header/style/rtl.less delete mode 100644 components/pagination/style/rtl.less delete mode 100644 components/popover/style/rtl.less delete mode 100644 components/progress/style/rtl.less delete mode 100644 components/radio/style/rtl.less delete mode 100644 components/rate/style/rtl.less delete mode 100644 components/result/style/rtl.less delete mode 100644 components/segmented/style/rtl.less delete mode 100644 components/select/style/rtl.less delete mode 100644 components/skeleton/style/rtl.less delete mode 100644 components/slider/style/rtl.less delete mode 100644 components/space/style/rtl.less delete mode 100644 components/spin/style/rtl.less delete mode 100644 components/splitter/style/rtl.less delete mode 100644 components/statistic/style/rtl.less delete mode 100644 components/steps/style/rtl.less delete mode 100644 components/switch/style/rtl.less delete mode 100644 components/table/style/rtl.less delete mode 100644 components/tabs/style/card-style.rtl.less delete mode 100644 components/tabs/style/rtl.less delete mode 100644 components/tag/style/rtl.less delete mode 100644 components/timeline/style/rtl.less delete mode 100644 components/tooltip/style/rtl.less delete mode 100644 components/transfer/style/rtl.less delete mode 100644 components/tree/style/rtl.less delete mode 100644 components/typography/style/rtl.less delete mode 100644 components/upload/style/patch.less delete mode 100644 components/upload/style/rtl.less diff --git a/components/alert/style/index.less b/components/alert/style/index.less index d212fce56b7..6ca0ebd0851 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -19,7 +19,7 @@ } &-icon { - margin-right: @margin-xs; + margin-inline-end: @margin-xs; } &-description { @@ -67,11 +67,11 @@ } &-action { - margin-left: @margin-xs; + margin-inline-start: @margin-xs; } &-close-icon { - margin-left: @margin-xs; + margin-inline-start: @margin-xs; padding: 0; overflow: hidden; font-size: @font-size-sm; @@ -110,7 +110,7 @@ } &-with-description &-icon { - margin-right: @alert-with-description-padding-vertical; + margin-inline-end: @alert-with-description-padding-vertical; font-size: @alert-with-description-icon-size; } @@ -151,5 +151,3 @@ border-radius: 0; } } - -@import './rtl'; diff --git a/components/alert/style/rtl.less b/components/alert/style/rtl.less deleted file mode 100644 index 31d63146c09..00000000000 --- a/components/alert/style/rtl.less +++ /dev/null @@ -1,40 +0,0 @@ -.@{alert-prefix-cls} { - &&-rtl { - direction: rtl; - } - - &-icon { - .@{alert-prefix-cls}-rtl & { - margin-right: auto; - margin-left: @margin-xs; - } - } - - &-action { - .@{alert-prefix-cls}-rtl & { - margin-right: @margin-xs; - margin-left: auto; - } - } - - &-close-icon { - .@{alert-prefix-cls}-rtl & { - margin-right: @margin-xs; - margin-left: auto; - } - } - - &-with-description { - .@{alert-prefix-cls}-rtl& { - padding-right: @alert-with-description-icon-size; - padding-left: @alert-with-description-padding-vertical; - } - - .@{alert-prefix-cls}-icon { - .@{alert-prefix-cls}-rtl& { - margin-right: auto; - margin-left: @alert-with-description-padding-vertical; - } - } - } -} diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 3cdf42229cf..16a9868ac37 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -7,11 +7,11 @@ .reset-component(); position: relative; - padding-left: @anchor-border-width; + padding-inline-start: @anchor-border-width; &-wrapper { - margin-left: -4px; - padding-left: 4px; + margin-inline-start: -4px; + padding-inline-start: 4px; overflow: auto; background-color: @anchor-bg; } @@ -19,7 +19,7 @@ &-ink { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; height: 100%; &::before { @@ -34,7 +34,7 @@ &-ball { position: absolute; - left: 50%; + inset-inline-start: 50%; display: none; width: 8px; height: 8px; @@ -83,4 +83,6 @@ } } -@import './rtl'; +.@{ant-prefix}-anchor-ink-ball:dir(rtl) { + transform: translateX(50%); +} diff --git a/components/anchor/style/rtl.less b/components/anchor/style/rtl.less deleted file mode 100644 index f1774d51a31..00000000000 --- a/components/anchor/style/rtl.less +++ /dev/null @@ -1,35 +0,0 @@ -.@{ant-prefix}-anchor { - &-rtl { - direction: rtl; - } - - &-wrapper { - .@{ant-prefix}-anchor-rtl& { - margin-right: -4px; - margin-left: 0; - padding-right: 4px; - padding-left: 0; - } - } - - &-ink { - .@{ant-prefix}-anchor-rtl & { - right: 0; - left: auto; - } - - &-ball { - .@{ant-prefix}-anchor-rtl & { - right: 50%; - left: 0; - transform: translateX(50%); - } - } - } - - &-link { - .@{ant-prefix}-anchor-rtl & { - padding: @anchor-link-top @anchor-link-left @anchor-link-top 0; - } - } -} diff --git a/components/avatar/style/group.less b/components/avatar/style/group.less index 8116ae25a68..51fe644b7fc 100644 --- a/components/avatar/style/group.less +++ b/components/avatar/style/group.less @@ -5,13 +5,13 @@ border: 1px solid @avatar-group-border-color; &:not(:first-child) { - margin-left: @avatar-group-overlapping; + margin-inline-start: @avatar-group-overlapping; } } &-popover { .@{ant-prefix}-avatar + .@{ant-prefix}-avatar { - margin-left: @avatar-group-space; + margin-inline-start: @avatar-group-space; } } } diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less index 62c158384d2..154c9ad896d 100644 --- a/components/avatar/style/index.less +++ b/components/avatar/style/index.less @@ -67,4 +67,3 @@ } @import './group'; -@import './rtl'; diff --git a/components/avatar/style/rtl.less b/components/avatar/style/rtl.less deleted file mode 100644 index ba3e2d4d60e..00000000000 --- a/components/avatar/style/rtl.less +++ /dev/null @@ -1,15 +0,0 @@ -.@{avatar-prefix-cls}-group { - &-rtl { - .@{avatar-prefix-cls}:not(:first-child) { - margin-right: @avatar-group-overlapping; - margin-left: 0; - } - } - - &-popover.@{ant-prefix}-popover-rtl { - .@{ant-prefix}-avatar + .@{ant-prefix}-avatar { - margin-right: @avatar-group-space; - margin-left: 0; - } - } -} diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 66285e84356..e2ccc0f0b9a 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -67,7 +67,7 @@ .@{number-prefix-cls}-custom-component { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; transform: translate(50%, -50%); transform-origin: 100% 0%; @@ -101,7 +101,7 @@ &::after { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; border: 1px solid @processing-color; @@ -280,4 +280,48 @@ } @import './ribbon'; -@import './rtl'; +.@{badge-prefix-cls} { + + &:not(&-not-a-wrapper) &-count, + &:not(&-not-a-wrapper) &-dot, + &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { + &:dir(rtl) { + direction: ltr; + transform: translate(-50%, -50%); + transform-origin: 0% 0%; + } + } + + &:not(&-not-a-wrapper):dir(rtl) { + .@{badge-prefix-cls}-zoom-appear, + .@{badge-prefix-cls}-zoom-enter { + animation-name: antZoomBadgeInReverse; + } + + .@{badge-prefix-cls}-zoom-leave { + animation-name: antZoomBadgeOutReverse; + } + } +} + +@keyframes antZoomBadgeInReverse { + 0% { + transform: scale(0) translate(-50%, -50%); + opacity: 0; + } + + 100% { + transform: scale(1) translate(-50%, -50%); + } +} + +@keyframes antZoomBadgeOutReverse { + 0% { + transform: scale(1) translate(-50%, -50%); + } + + 100% { + transform: scale(0) translate(-50%, -50%); + opacity: 0; + } +} diff --git a/components/badge/style/ribbon.less b/components/badge/style/ribbon.less index 5fa3c237518..cdadf554cff 100644 --- a/components/badge/style/ribbon.less +++ b/components/badge/style/ribbon.less @@ -52,19 +52,19 @@ // placement &.@{ribbon-prefix-cls}-placement-end { - right: -8px; - border-bottom-right-radius: 0; + inset-inline-end: -8px; + border-end-end-radius: 0; .@{ribbon-prefix-cls}-corner { - right: 0; + inset-inline-end: 0; border-color: currentcolor transparent transparent currentcolor; } } &.@{ribbon-prefix-cls}-placement-start { - left: -8px; - border-bottom-left-radius: 0; + inset-inline-start: -8px; + border-end-start-radius: 0; .@{ribbon-prefix-cls}-corner { - left: 0; + inset-inline-start: 0; border-color: currentcolor currentcolor transparent transparent; } } diff --git a/components/badge/style/rtl.less b/components/badge/style/rtl.less deleted file mode 100644 index 01cedc6778c..00000000000 --- a/components/badge/style/rtl.less +++ /dev/null @@ -1,100 +0,0 @@ -.@{badge-prefix-cls} { - &-rtl { - direction: rtl; - } - - &:not(&-not-a-wrapper) &-count, - &:not(&-not-a-wrapper) &-dot, - &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { - .@{badge-prefix-cls}-rtl& { - right: auto; - left: 0; - direction: ltr; - transform: translate(-50%, -50%); - transform-origin: 0% 0%; - } - } - - &-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { - right: auto; - left: 0; - transform: translate(-50%, -50%); - transform-origin: 0% 0%; - } - - &-status { - &-text { - .@{badge-prefix-cls}-rtl & { - margin-right: @margin-xs; - margin-left: 0; - } - } - } - - &:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl { - .@{badge-prefix-cls}-zoom-appear, - .@{badge-prefix-cls}-zoom-enter { - animation-name: antZoomBadgeInRtl; - } - - .@{badge-prefix-cls}-zoom-leave { - animation-name: antZoomBadgeOutRtl; - } - } -} - -.@{ribbon-prefix-cls}-rtl { - direction: rtl; - &.@{ribbon-prefix-cls}-placement-end { - right: unset; - left: -8px; - border-bottom-right-radius: @border-radius-sm; - border-bottom-left-radius: 0; - .@{ribbon-prefix-cls}-corner { - right: unset; - left: 0; - border-color: currentcolor currentcolor transparent transparent; - - &::after { - border-color: currentcolor currentcolor transparent transparent; - } - } - } - &.@{ribbon-prefix-cls}-placement-start { - right: -8px; - left: unset; - border-bottom-right-radius: 0; - border-bottom-left-radius: @border-radius-sm; - .@{ribbon-prefix-cls}-corner { - right: 0; - left: unset; - border-color: currentcolor transparent transparent currentcolor; - - &::after { - border-color: currentcolor transparent transparent currentcolor; - } - } - } -} - -@keyframes antZoomBadgeInRtl { - 0% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; - } - - 100% { - transform: scale(1) translate(-50%, -50%); - } -} - -@keyframes antZoomBadgeOutRtl { - 0% { - transform: scale(1) translate(-50%, -50%); - } - - 100% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; - } -} diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index 78ed8fa5786..656d7afd926 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -50,15 +50,13 @@ &-link { > .@{iconfont-css-prefix} + span, > .@{iconfont-css-prefix} + a { - margin-left: 4px; + margin-inline-start: 4px; } } &-overlay-link { > .@{iconfont-css-prefix} { - margin-left: 4px; + margin-inline-start: 4px; } } } - -@import './rtl'; diff --git a/components/breadcrumb/style/patch.less b/components/breadcrumb/style/patch.less index 863d3ff667c..04b42fcb3b1 100644 --- a/components/breadcrumb/style/patch.less +++ b/components/breadcrumb/style/patch.less @@ -13,12 +13,6 @@ color: @breadcrumb-last-item-color; } } - - &-rtl { - > nz-breadcrumb-item { - float: right; - } - } } nz-breadcrumb { diff --git a/components/breadcrumb/style/rtl.less b/components/breadcrumb/style/rtl.less deleted file mode 100644 index c1141c9937e..00000000000 --- a/components/breadcrumb/style/rtl.less +++ /dev/null @@ -1,29 +0,0 @@ -.@{breadcrumb-prefix-cls} { - &-rtl { - .clearfix(); - direction: rtl; - - > span { - float: right; - } - } - - &-link { - > .@{iconfont-css-prefix} + span, - > .@{iconfont-css-prefix} + a { - .@{breadcrumb-prefix-cls}-rtl & { - margin-right: 4px; - margin-left: 0; - } - } - } - - &-overlay-link { - > .@{iconfont-css-prefix} { - .@{breadcrumb-prefix-cls}-rtl & { - margin-right: 4px; - margin-left: 0; - } - } - } -} diff --git a/components/button/style/index.less b/components/button/style/index.less index d629d886acb..fa954d9258c 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -33,8 +33,8 @@ .btn-primary(); .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) { - border-right-color: @btn-group-border; - border-left-color: @btn-group-border; + border-inline-end-color: @btn-group-border; + border-inline-start-color: @btn-group-border; &:disabled { border-color: @btn-default-border; @@ -43,20 +43,20 @@ .@{btn-prefix-cls}-group &:first-child { &:not(:last-child) { - border-right-color: @btn-group-border; + border-inline-end-color: @btn-group-border; &[disabled] { - border-right-color: @btn-default-border; + border-inline-end-color: @btn-default-border; } } } .@{btn-prefix-cls}-group &:last-child:not(:first-child), .@{btn-prefix-cls}-group & + & { - border-left-color: @btn-group-border; + border-inline-start-color: @btn-group-border; &[disabled] { - border-left-color: @btn-default-border; + border-inline-start-color: @btn-default-border; } } } @@ -136,9 +136,9 @@ &::before { position: absolute; top: -@btn-border-width; - right: -@btn-border-width; + inset-inline-end: -@btn-border-width; bottom: -@btn-border-width; - left: -@btn-border-width; + inset-inline-start: -@btn-border-width; z-index: 1; display: none; background: @component-background; @@ -175,7 +175,7 @@ transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out; .@{iconfont-css-prefix} { - padding-right: @padding-xs; + padding-inline-end: @padding-xs; animation: none; // for smooth button padding transition svg { @@ -197,7 +197,7 @@ // To ensure that a space will be placed between character and `Icon`. > .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} { - margin-left: @margin-xs; + margin-inline-start: @margin-xs; } &&-background-ghost { @@ -250,7 +250,7 @@ } &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) { - margin-right: -0.34em; + margin-inline-end: -0.34em; letter-spacing: 0.34em; } @@ -290,4 +290,3 @@ a.@{btn-prefix-cls} { } @import './space-compact'; -@import './rtl'; diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 24380a4ea1a..8d09295cdc5 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -515,7 +515,7 @@ > span + span, & + .@{btnClassName}, & + & { - margin-left: -1px; + margin-inline-start: -1px; } .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) { border-left-color: transparent; @@ -525,7 +525,7 @@ } > .@{btnClassName}:first-child, > span:first-child > .@{btnClassName} { - margin-left: 0; + margin-inline-start: 0; } > .@{btnClassName}:only-child { border-radius: @btn-border-radius-base; @@ -535,13 +535,13 @@ } > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName} { - border-top-left-radius: @btn-border-radius-base; - border-bottom-left-radius: @btn-border-radius-base; + border-start-start-radius: @btn-border-radius-base; + border-end-start-radius: @btn-border-radius-base; } > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName} { - border-top-right-radius: @btn-border-radius-base; - border-bottom-right-radius: @btn-border-radius-base; + border-start-end-radius: @btn-border-radius-base; + border-end-end-radius: @btn-border-radius-base; } &-sm { @@ -553,13 +553,13 @@ } > .@{btnClassName}:first-child:not(:last-child), > span:first-child:not(:last-child) > .@{btnClassName} { - border-top-left-radius: @btn-border-radius-sm; - border-bottom-left-radius: @btn-border-radius-sm; + border-start-start-radius: @btn-border-radius-sm; + border-end-start-radius: @btn-border-radius-sm; } > .@{btnClassName}:last-child:not(:first-child), > span:last-child:not(:first-child) > .@{btnClassName} { - border-top-right-radius: @btn-border-radius-sm; - border-bottom-right-radius: @btn-border-radius-sm; + border-start-end-radius: @btn-border-radius-sm; + border-end-end-radius: @btn-border-radius-sm; } } diff --git a/components/button/style/rtl.less b/components/button/style/rtl.less deleted file mode 100644 index 4e36324de07..00000000000 --- a/components/button/style/rtl.less +++ /dev/null @@ -1,90 +0,0 @@ -.@{btn-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-primary { - .@{btn-prefix-cls}-group &:last-child:not(:first-child), - .@{btn-prefix-cls}-group & + & { - .@{btn-prefix-cls}-group-rtl& { - border-right-color: @btn-group-border; - border-left-color: @btn-default-border; - } - - &[disabled] { - .@{btn-prefix-cls}-group-rtl& { - border-right-color: @btn-default-border; - border-left-color: @btn-group-border; - } - } - } - } - - & > &-loading-icon { - .@{iconfont-css-prefix} { - .@{btn-prefix-cls}-rtl& { - padding-right: 0; - padding-left: @margin-xs; - } - } - } - - > .@{iconfont-css-prefix} + span, - > span + .@{iconfont-css-prefix} { - .@{btn-prefix-cls}-rtl& { - margin-right: 8px; - margin-left: 0; - } - } -} - -// mixin -.btn-group(@btnClassName: btn) { - .@{btnClassName} + .@{btnClassName}, - .@{btnClassName} + &, - span + .@{btnClassName}, - .@{btnClassName} + span, - > span + span, - & + .@{btnClassName}, - & + & { - .@{btnClassName}-rtl&, - .@{btnClassName}-group-rtl& { - margin-right: -1px; - margin-left: auto; - } - } - - &.@{btnClassName}-group-rtl { - direction: rtl; - } - - > .@{btnClassName}:first-child:not(:last-child), - > span:first-child:not(:last-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0; - } - } - - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base; - } - } - - &-sm { - > .@{btnClassName}:first-child:not(:last-child), - > span:first-child:not(:last-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-radius: 0 @btn-border-radius-sm @btn-border-radius-sm 0; - } - } - - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-radius: @btn-border-radius-sm 0 0 @btn-border-radius-sm; - } - } - } -} diff --git a/components/button/style/space-compact.less b/components/button/style/space-compact.less index 936117365a8..c2fff11aaca 100644 --- a/components/button/style/space-compact.less +++ b/components/button/style/space-compact.less @@ -29,40 +29,6 @@ } } - // ----------RTL---------- - &-compact-item-rtl { - &.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - &.@{btn-prefix-cls}-sm { - &.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - // ----------RTL Special styles for Primary Button---------- - &.@{btn-prefix-cls}-primary { - &:not([disabled]) + &:not([disabled]) { - &::after { - right: -@border-width-base; - } - } - } - } - // Button in Space.Compact when direction=vertical .compact-item-vertical(@btn-prefix-cls); diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index 18f73842683..e9793b46e5a 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -20,11 +20,11 @@ .@{calendar-prefix-cls}-month-select { min-width: 70px; - margin-left: @padding-xs; + margin-inline-start: @padding-xs; } .@{calendar-prefix-cls}-mode-switch { - margin-left: @padding-xs; + margin-inline-start: @padding-xs; } } @@ -53,8 +53,7 @@ border-radius: @border-radius-base; .@{calendar-picker-prefix-cls}-calendar-header { - padding-right: @padding-xs; - padding-left: @padding-xs; + padding-inline: @padding-xs; } .@{calendar-picker-prefix-cls}-panel { @@ -81,7 +80,7 @@ .@{calendar-picker-prefix-cls}-panel { display: block; width: 100%; - text-align: right; + text-align: end; background: @calendar-full-bg; border: 0; @@ -93,7 +92,8 @@ th { height: auto; - padding: 0 12px 5px 0; + padding-block-end: 5px; + padding-inline-end: 12px; line-height: 18px; } } @@ -151,7 +151,7 @@ overflow-y: auto; color: @text-color; line-height: @line-height-base; - text-align: left; + text-align: start; } &-today { @@ -182,7 +182,7 @@ .@{calendar-prefix-cls}-mode-switch { width: 100%; margin-top: @padding-xs; - margin-left: 0; + margin-inline-start: 0; > label { width: 50%; @@ -192,5 +192,3 @@ } } } - -@import './rtl'; diff --git a/components/calendar/style/rtl.less b/components/calendar/style/rtl.less deleted file mode 100644 index 06464daad0f..00000000000 --- a/components/calendar/style/rtl.less +++ /dev/null @@ -1,46 +0,0 @@ -.@{calendar-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-header { - .@{calendar-prefix-cls}-month-select { - .@{calendar-prefix-cls}-rtl & { - margin-right: @padding-xs; - margin-left: 0; - } - } - - .@{calendar-prefix-cls}-mode-switch { - .@{calendar-prefix-cls}-rtl & { - margin-right: @padding-xs; - margin-left: 0; - } - } - } - - // ========================== Full ========================== - &-full { - .@{calendar-picker-prefix-cls}-panel { - .@{calendar-prefix-cls}-rtl& { - text-align: left; - } - - .@{calendar-picker-prefix-cls}-body { - th { - .@{calendar-prefix-cls}-rtl& { - padding: 0 0 5px 12px; - } - } - } - - .@{calendar-prefix-cls}-date { - &-content { - .@{calendar-prefix-cls}-rtl& { - text-align: right; - } - } - } - } - } -} diff --git a/components/card/style/index.less b/components/card/style/index.less index c05691eb659..4f9d905ff2e 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -15,10 +15,6 @@ background: @card-background; border-radius: @card-radius; - &-rtl { - direction: rtl; - } - &-hoverable { cursor: pointer; transition: box-shadow 0.3s, border-color 0.3s; @@ -81,16 +77,11 @@ &-extra { // https://stackoverflow.com/a/22429853/3040605 - margin-left: auto; + margin-inline-start: auto; padding: @card-head-padding 0; color: @card-head-extra-color; font-weight: normal; font-size: @font-size-base; - - .@{card-prefix-cls}-rtl & { - margin-right: auto; - margin-left: 0; - } } &-body { @@ -200,12 +191,7 @@ } &:not(:last-child) { - border-right: @border-width-base @border-style-base @border-color-split; - - .@{card-prefix-cls}-rtl & { - border-right: none; - border-left: @border-width-base @border-style-base @border-color-split; - } + border-inline-end: @border-width-base @border-style-base @border-color-split; } } } @@ -234,12 +220,7 @@ .clearfix(); &-avatar { - padding-right: 16px; - - .@{card-prefix-cls}-rtl & { - padding-right: 0; - padding-left: 16px; - } + padding-inline-end: 16px; } &-detail { diff --git a/components/card/style/patch.less b/components/card/style/patch.less index a56eeb7ba17..3008467429f 100644 --- a/components/card/style/patch.less +++ b/components/card/style/patch.less @@ -1,12 +1,3 @@ -@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton'; -.@{card-prefix-cls} { - &-rtl { - .@{skeleton-prefix-cls}-header { - padding: 0 0 0 @card-head-padding; - } - } -} - nz-card { display: block; } diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index 3f752f6ea9b..a2307263ac0 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -72,7 +72,7 @@ .slick-track { position: relative; top: 0; - left: 0; + inset-inline-start: 0; display: block; &::before, @@ -92,7 +92,7 @@ .slick-slide { display: none; - float: left; + float: inline-start; height: 100%; min-height: 1px; @@ -180,21 +180,27 @@ } .slick-prev { - right: auto; - left: @carousel-arrow-offset; + inset-inline-start: @carousel-arrow-offset; &::after { transform: rotate(-45deg); } + + &:dir(rtl)::after { + transform: rotate(135deg); + } } .slick-next { - right: @carousel-arrow-offset; - left: auto; + inset-inline-end: @carousel-arrow-offset; &::after { transform: rotate(135deg); } + + &:dir(rtl)::after { + transform: rotate(-45deg); + } } // Vertical mode (dots on left or right) @@ -225,16 +231,16 @@ .slick-dots { position: absolute; - right: 0; + inset-inline-end: 0; bottom: 0; - left: 0; + inset-inline-start: 0; z-index: 15; display: flex !important; justify-content: center; - margin-right: 15%; + margin-inline-end: 15%; margin-bottom: 0; - margin-left: 15%; - padding-left: 0; + margin-inline-start: 15%; + padding-inline-start: 0; list-style: none; &-bottom { @@ -284,9 +290,9 @@ &::after { position: absolute; top: -@carousel-dot-margin; - right: -@carousel-dot-margin; + inset-inline-end: -@carousel-dot-margin; bottom: -@carousel-dot-margin; - left: -@carousel-dot-margin; + inset-inline-start: -@carousel-dot-margin; content: ''; } } @@ -319,13 +325,11 @@ transform: translateY(-50%); &-left { - right: auto; - left: 12px; + inset-inline-start: 12px; } &-right { - right: 12px; - left: auto; + inset-inline-end: 12px; } li { @@ -351,5 +355,3 @@ } } } - -@import './rtl'; diff --git a/components/carousel/style/rtl.less b/components/carousel/style/rtl.less deleted file mode 100644 index 38214fd9a67..00000000000 --- a/components/carousel/style/rtl.less +++ /dev/null @@ -1,66 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@carousel-prefix-cls: ~'@{ant-prefix}-carousel'; - -.@{carousel-prefix-cls} { - &-rtl { - direction: rtl; - - .slick-next { - right: auto; - left: @carousel-arrow-offset; - - &::after { - // In RTL, next points to the left - transform: rotate(-45deg); - } - } - - .slick-prev { - right: @carousel-arrow-offset; - left: auto; - - &::after { - // In RTL, previous points to the right - transform: rotate(135deg); - } - } - } - - .slick-track { - .@{carousel-prefix-cls}-rtl & { - right: 0; - left: auto; - } - } - // Dots - .slick-dots { - .@{carousel-prefix-cls}-rtl& { - flex-direction: row-reverse; - } - } -} - -.@{ant-prefix}-carousel-vertical { - .slick-dots { - .@{carousel-prefix-cls}-rtl& { - flex-direction: column; - } - } -} - -// Vertical arrows in RTL follow the same reversal as LTR (prev up, next down) -.@{carousel-prefix-cls} { - .@{carousel-prefix-cls}-rtl & { - .slick-vertical { - .slick-prev::after { - transform: rotate(45deg); - } - - .slick-next::after { - transform: rotate(-135deg); - } - } - } -} diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index 459cecc4fb3..0f5fd904785 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -12,7 +12,7 @@ &-checkbox { top: 0; - margin-right: @padding-xs; + margin-inline-end: @padding-xs; } &-menus { @@ -88,7 +88,7 @@ &-expand &-expand-icon, &-loading-icon { - margin-left: @padding-xss; + margin-inline-start: @padding-xss; color: @text-color-secondary; font-size: 10px; @@ -106,5 +106,3 @@ // ===================== Compact Item Styles ===================== .compact-item(@cascader-prefix-cls); } - -@import './rtl'; diff --git a/components/cascader/style/rtl.less b/components/cascader/style/rtl.less deleted file mode 100644 index c70bf1dd3a9..00000000000 --- a/components/cascader/style/rtl.less +++ /dev/null @@ -1,19 +0,0 @@ -// We can not import reference of `./index` directly since it will make dead loop in less -@import (reference) '../../style/themes/index'; -@cascader-prefix-cls: ~'@{ant-prefix}-cascader'; - -.@{cascader-prefix-cls}-rtl { - .@{cascader-prefix-cls}-menu-item { - &-expand-icon, - &-loading-icon { - margin-right: @padding-xss; - margin-left: 0; - } - } - - .@{cascader-prefix-cls}-checkbox { - top: 0; - margin-right: 0; - margin-left: @padding-xs; - } -} diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less index cdb84297c97..3f50d589733 100644 --- a/components/checkbox/style/index.less +++ b/components/checkbox/style/index.less @@ -2,5 +2,3 @@ @import './mixin'; .antCheckboxFn(); - -@import './rtl'; diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index 3d7c0336eda..f44883318f2 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -167,7 +167,7 @@ } & + & { - margin-left: 8px; + margin-inline-start: 8px; } &&-in-form-item { @@ -188,15 +188,15 @@ display: inline-block; &-item { - margin-right: @checkbox-group-item-margin-right; + margin-inline-end: @checkbox-group-item-margin-right; &:last-child { - margin-right: 0; + margin-inline-end: 0; } } &-item + &-item { - margin-left: 0; + margin-inline-start: 0; } } diff --git a/components/checkbox/style/rtl.less b/components/checkbox/style/rtl.less deleted file mode 100644 index fa15b4df1a9..00000000000 --- a/components/checkbox/style/rtl.less +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../style/mixins/index'; - -.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') { - .@{checkbox-prefix-cls}-rtl { - direction: rtl; - } - - .@{checkbox-prefix-cls}-group { - &-item { - .@{checkbox-prefix-cls}-group-rtl & { - margin-right: 0; - margin-left: @checkbox-group-item-margin-right; - } - - &:last-child { - .@{checkbox-prefix-cls}-group-rtl & { - margin-left: 0 !important; - } - } - } - - &-item + &-item { - .@{checkbox-prefix-cls}-group-rtl & { - margin-left: @checkbox-group-item-margin-right; - } - } - } -} diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index f2839911c35..fb4dd9ce9de 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -12,10 +12,6 @@ border: @border-width-base @border-style-base @border-color-base; border-radius: @collapse-panel-border-radius; - &-rtl { - direction: rtl; - } - & > &-item { border-bottom: @border-width-base @border-style-base @border-color-base; diff --git a/components/comment/style/index.less b/components/comment/style/index.less index 3f1c96244a4..743a3a7f89e 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -15,7 +15,7 @@ &-avatar { position: relative; flex-shrink: 0; - margin-right: @margin-sm; + margin-inline-end: @margin-sm; cursor: pointer; img { @@ -41,7 +41,7 @@ & > a, & > span { - padding-right: @padding-xs; + padding-inline-end: @padding-xs; font-size: @comment-font-size-sm; line-height: 18px; } @@ -76,14 +76,14 @@ &-actions { margin-top: @comment-actions-margin-top; margin-bottom: @comment-actions-margin-bottom; - padding-left: 0; + padding-inline-start: 0; > li { display: inline-block; color: @comment-action-color; > span { - margin-right: 10px; + margin-inline-end: 10px; color: @comment-action-color; font-size: @comment-font-size-sm; cursor: pointer; @@ -98,8 +98,6 @@ } &-nested { - margin-left: @comment-nest-indent; + margin-inline-start: @comment-nest-indent; } } - -@import './rtl'; diff --git a/components/comment/style/rtl.less b/components/comment/style/rtl.less deleted file mode 100644 index a930d838462..00000000000 --- a/components/comment/style/rtl.less +++ /dev/null @@ -1,51 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@comment-prefix-cls: ~'@{ant-prefix}-comment'; - -.@{comment-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-avatar { - .@{comment-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 12px; - } - } - - &-content { - &-author { - & > a, - & > span { - .@{comment-prefix-cls}-rtl & { - padding-right: 0; - padding-left: 8px; - } - } - } - } - - &-actions { - .@{comment-prefix-cls}-rtl & { - padding-right: 0; - } - - > li { - > span { - .@{comment-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 10px; - } - } - } - } - - &-nested { - .@{comment-prefix-cls}-rtl & { - margin-right: @comment-nest-indent; - margin-left: 0; - } - } -} diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index 4686550286d..f1995d6d198 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -152,14 +152,14 @@ &-prefix { flex: 0 0 auto; - margin-right: (@padding-xs / 2); + margin-inline-end: (@padding-xs / 2); } &-suffix { display: flex; flex: none; align-self: center; - margin-left: (@padding-xs / 2); + margin-inline-start: (@padding-xs / 2); color: @disabled-color; line-height: 1; pointer-events: none; @@ -168,7 +168,7 @@ vertical-align: top; &:not(:last-child) { - margin-right: 8px; + margin-inline-end: 8px; } } } @@ -176,7 +176,7 @@ &-clear { position: absolute; top: 50%; - right: 0; + inset-inline-end: 0; color: @disabled-color; line-height: 1; background: @component-background; @@ -224,7 +224,7 @@ // Clear .@{picker-prefix-cls}-clear { - right: @input-padding-horizontal-base; + inset-inline-end: @input-padding-horizontal-base; } &:hover { @@ -237,7 +237,7 @@ .@{picker-prefix-cls}-active-bar { bottom: -@border-width-base; height: 2px; - margin-left: @input-padding-horizontal-base; + margin-inline-start: @input-padding-horizontal-base; background: @primary-color; opacity: 0; transition: all @animation-duration-slow ease-out; @@ -258,11 +258,11 @@ &.@{picker-prefix-cls}-small { .@{picker-prefix-cls}-clear { - right: @input-padding-horizontal-sm; + inset-inline-end: @input-padding-horizontal-sm; } .@{picker-prefix-cls}-active-bar { - margin-left: @input-padding-horizontal-sm; + margin-inline-start: @input-padding-horizontal-sm; } } } @@ -412,4 +412,3 @@ } @import './panel'; -@import './rtl'; diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less index 5a5d41b3d1c..1324ece36f1 100644 --- a/components/date-picker/style/panel.less +++ b/components/date-picker/style/panel.less @@ -225,11 +225,11 @@ } &-in-view&-range-start::before { - left: 50%; + inset-inline-start: 50%; } &-in-view&-range-end::before { - right: 50%; + inset-inline-end: 50%; } // >>> Range Hover @@ -257,8 +257,8 @@ &-range-hover-start::after, &-range-hover-end::after, &-range-hover::after { - right: 0; - left: 2px; + inset-inline-end: 0; + inset-inline-start: 2px; } // Hover with in range @@ -278,12 +278,14 @@ // range start border-radius &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} { - border-radius: @border-radius-base 0 0 @border-radius-base; + border-start-start-radius: @border-radius-base; + border-end-start-radius: @border-radius-base; } // range end border-radius &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} { - border-radius: 0 @border-radius-base @border-radius-base 0; + border-start-end-radius: @border-radius-base; + border-end-end-radius: @border-radius-base; } // DatePanel only @@ -303,22 +305,22 @@ .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName}::after { - right: -5px - @border-width-base; - left: 0; + inset-inline-end: -5px - @border-width-base; + inset-inline-start: 0; } .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after { - right: 0; - left: -5px - @border-width-base; + inset-inline-end: 0; + inset-inline-start: -5px - @border-width-base; } // Hover with range start & end &-range-hover&-range-start::after { - right: 50%; + inset-inline-end: 50%; } &-range-hover&-range-end::after { - left: 50%; + inset-inline-start: 50%; } // Edge start @@ -327,10 +329,10 @@ &-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after, &-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after, &-in-view&-range-hover-start::after { - left: 6px; - border-left: @border-width-base dashed @picker-date-hover-range-border-color; - border-top-left-radius: @border-radius-base; - border-bottom-left-radius: @border-radius-base; + inset-inline-start: 6px; + border-inline-start: @border-width-base dashed @picker-date-hover-range-border-color; + border-start-start-radius: @border-radius-base; + border-end-start-radius: @border-radius-base; } // Edge end @@ -339,10 +341,10 @@ &-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after, &-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after, &-in-view&-range-hover-end::after { - right: 6px; - border-right: @border-width-base dashed @picker-date-hover-range-border-color; - border-top-right-radius: @border-radius-base; - border-bottom-right-radius: @border-radius-base; + inset-inline-end: 6px; + border-inline-end: @border-width-base dashed @picker-date-hover-range-border-color; + border-start-end-radius: @border-radius-base; + border-end-end-radius: @border-radius-base; } // >>> Disabled @@ -471,26 +473,16 @@ } .@{picker-prefix-cls}-cell-range-hover-start::after { - left: @hover-cell-fixed-distance; - border-left: @border-width-base dashed @picker-date-hover-range-border-color; - border-radius: @border-radius-base 0 0 @border-radius-base; - - .@{picker-prefix-cls}-panel-rtl & { - right: @hover-cell-fixed-distance; - border-right: @border-width-base dashed @picker-date-hover-range-border-color; - border-radius: 0 @border-radius-base @border-radius-base 0; - } + inset-inline-start: @hover-cell-fixed-distance; + border-inline-start: @border-width-base dashed @picker-date-hover-range-border-color; + border-start-start-radius: @border-radius-base; + border-end-start-radius: @border-radius-base; } .@{picker-prefix-cls}-cell-range-hover-end::after { - right: @hover-cell-fixed-distance; - border-right: @border-width-base dashed @picker-date-hover-range-border-color; - border-radius: 0 @border-radius-base @border-radius-base 0; - - .@{picker-prefix-cls}-panel-rtl & { - left: @hover-cell-fixed-distance; - border-left: @border-width-base dashed @picker-date-hover-range-border-color; - border-radius: @border-radius-base 0 0 @border-radius-base; - } + inset-inline-end: @hover-cell-fixed-distance; + border-inline-end: @border-width-base dashed @picker-date-hover-range-border-color; + border-start-end-radius: @border-radius-base; + border-end-end-radius: @border-radius-base; } } diff --git a/components/date-picker/style/rtl.less b/components/date-picker/style/rtl.less deleted file mode 100644 index 3a74800e92a..00000000000 --- a/components/date-picker/style/rtl.less +++ /dev/null @@ -1,246 +0,0 @@ -.@{picker-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-suffix { - .@{picker-prefix-cls}-rtl & { - margin-right: (@padding-xs / 2); - margin-left: 0; - } - } - - &-clear { - .@{picker-prefix-cls}-rtl & { - right: auto; - left: 0; - } - } - - &-separator { - .@{picker-prefix-cls}-rtl & { - transform: rotate(180deg); - } - } - - &-header { - &-view { - button { - &:not(:first-child) { - .@{picker-prefix-cls}-panel-rtl & { - margin-right: @padding-xs; - margin-left: 0; - } - } - } - } - } - - // ======================== Range ========================= - &-range { - // Clear - .@{picker-prefix-cls}-clear { - .@{picker-prefix-cls}-rtl& { - right: auto; - left: @input-padding-horizontal-base; - } - } - - // Active bar - .@{picker-prefix-cls}-active-bar { - .@{picker-prefix-cls}-rtl& { - margin-right: @input-padding-horizontal-base; - margin-left: 0; - } - } - - &.@{picker-prefix-cls}-small { - .@{picker-prefix-cls}-active-bar { - .@{picker-prefix-cls}-rtl& { - margin-right: @input-padding-horizontal-sm; - } - } - } - } - - // ======================== Ranges ======================== - &-ranges { - .@{picker-prefix-cls}-dropdown-rtl & { - text-align: right; - } - - .@{picker-prefix-cls}-ok { - .@{picker-prefix-cls}-dropdown-rtl & { - float: left; - margin-right: @padding-xs; - margin-left: 0; - } - } - } - - // ======================== Panel ======================== - &-panel { - &-rtl { - direction: rtl; - } - } - - &-prev-icon, - &-super-prev-icon { - .@{picker-prefix-cls}-panel-rtl & { - transform: rotate(135deg); - } - } - - &-next-icon, - &-super-next-icon { - .@{picker-prefix-cls}-panel-rtl & { - transform: rotate(-45deg); - } - } - - &-cell { - .picker-cell-inner(~'@{picker-cell-inner-cls}'); - } - - // ======================== Body ========================== - .picker-cell-inner(@cellClassName) { - .@{cellClassName} { - position: relative; - z-index: 2; - display: inline-block; - min-width: @picker-panel-cell-height; - height: @picker-panel-cell-height; - line-height: @picker-panel-cell-height; - border-radius: @border-radius-base; - transition: background @animation-duration-slow, border @animation-duration-slow; - } - - &-in-view&-range-start::before { - .@{picker-prefix-cls}-panel-rtl & { - right: 50%; - left: 0; - } - } - - &-in-view&-range-end::before { - .@{picker-prefix-cls}-panel-rtl & { - right: 0; - left: 50%; - } - } - - &-in-view&-range-start&-range-end::before { - .@{picker-prefix-cls}-panel-rtl & { - right: 50%; - left: 50%; - } - } - - .@{picker-prefix-cls}-date-panel - &-in-view&-in-range&-range-hover-start - .@{cellClassName}::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 0; - left: -5px - @border-width-base; - } - } - - .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after { - .@{picker-prefix-cls}-panel-rtl & { - right: -5px - @border-width-base; - left: 0; - } - } - - // Hover with range start & end - &-range-hover&-range-start::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 0; - left: 50%; - } - } - - &-range-hover&-range-end::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 50%; - left: 0; - } - } - - // range start border-radius - &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} { - .@{picker-prefix-cls}-panel-rtl & { - border-radius: 0 @border-radius-base @border-radius-base 0; - } - } - - // range end border-radius - &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} { - .@{picker-prefix-cls}-panel-rtl & { - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - - // Edge start - tr > &-in-view&-range-hover:not(&-selected):first-child::after, - &-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after, - &-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after, - &-in-view&-range-hover-start::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 6px; - left: 0; - border-right: @border-width-base dashed @picker-date-hover-range-border-color; - border-left: none; - border-radius: 0 @border-radius-base @border-radius-base 0; - } - } - - // Edge end - tr > &-in-view&-range-hover:not(&-selected):last-child::after, - &-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after, - &-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after, - &-in-view&-range-hover-end::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 0; - left: 6px; - border-right: none; - border-left: @border-width-base dashed @picker-date-hover-range-border-color; - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - - tr > &-in-view&-range-hover-start:last-child::after, - tr > &-in-view&-range-hover-end:first-child::after, - &-in-view&-start&-range-hover-edge-start:not(&-range-hover)::after, - &-in-view&-start&-range-hover-end&-range-hover-edge-start:not(&-range-hover)::after, - &-in-view&-end&-range-hover-start&-range-hover-edge-end:not(&-range-hover)::after, - tr > &-in-view&-start&-range-hover&-range-hover-edge-start:last-child::after, - tr > &-in-view&-end&-range-hover&-range-hover-edge-end:first-child::after { - .@{picker-prefix-cls}-panel-rtl & { - right: 6px; - left: 6px; - border-right: @border-width-base dashed @picker-date-hover-range-border-color; - border-left: @border-width-base dashed @picker-date-hover-range-border-color; - border-radius: @border-radius-base; - } - } - } - - // ======================== Footer ======================== - &-footer { - &-extra { - .@{picker-prefix-cls}-dropdown-rtl & { - direction: rtl; - text-align: right; - } - } - } - - // ====================== Time Panel ====================== - &-time-panel { - .@{picker-prefix-cls}-panel-rtl & { - direction: ltr; - } - } -} diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index 7a038d7a69e..0540bb9325b 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -65,8 +65,9 @@ position: relative; top: -0.5px; - margin: 0 @descriptions-item-label-colon-margin-right 0 - @descriptions-item-label-colon-margin-left; + margin-block: 0; + margin-inline: @descriptions-item-label-colon-margin-left + @descriptions-item-label-colon-margin-right; } &.@{descriptions-prefix-cls}-item-no-colon::after { @@ -136,10 +137,10 @@ .@{descriptions-prefix-cls}-item-label, .@{descriptions-prefix-cls}-item-content { padding: @descriptions-default-padding; - border-right: 1px solid @border-color-split; + border-inline-end: 1px solid @border-color-split; &:last-child { - border-right: none; + border-inline-end: none; } } @@ -174,5 +175,3 @@ } } } - -@import './rtl'; diff --git a/components/descriptions/style/rtl.less b/components/descriptions/style/rtl.less deleted file mode 100644 index 73d22dc3bc3..00000000000 --- a/components/descriptions/style/rtl.less +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; - -.@{descriptions-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-item-label { - &::after { - .@{descriptions-prefix-cls}-rtl & { - margin: 0 @descriptions-item-label-colon-margin-left 0 - @descriptions-item-label-colon-margin-right; - } - } - } - - &-bordered { - .@{descriptions-prefix-cls}-item-label, - .@{descriptions-prefix-cls}-item-content { - .@{descriptions-prefix-cls}-rtl& { - border-right: none; - border-left: 1px solid @border-color-split; - - &:last-child { - border-left: none; - } - } - } - } -} diff --git a/components/divider/style/index.less b/components/divider/style/index.less index 42bca4c0a76..c265bf8c1e0 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -130,4 +130,26 @@ } } -@import './rtl'; + + +.@{divider-prefix-cls} { + &-horizontal&-with-text-left:dir(rtl) { + &::before { + width: 100% - @divider-orientation-margin; + } + + &::after { + width: @divider-orientation-margin; + } + } + + &-horizontal&-with-text-right:dir(rtl) { + &::before { + width: @divider-orientation-margin; + } + + &::after { + width: 100% - @divider-orientation-margin; + } + } +} diff --git a/components/divider/style/rtl.less b/components/divider/style/rtl.less deleted file mode 100644 index 7cdc84f00b5..00000000000 --- a/components/divider/style/rtl.less +++ /dev/null @@ -1,38 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@divider-prefix-cls: ~'@{ant-prefix}-divider'; - -.@{divider-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-horizontal&-with-text-left { - &::before { - .@{divider-prefix-cls}-rtl& { - width: 100% - @divider-orientation-margin; - } - } - - &::after { - .@{divider-prefix-cls}-rtl& { - width: @divider-orientation-margin; - } - } - } - - &-horizontal&-with-text-right { - &::before { - .@{divider-prefix-cls}-rtl& { - width: @divider-orientation-margin; - } - } - - &::after { - .@{divider-prefix-cls}-rtl& { - width: 100% - @divider-orientation-margin; - } - } - } -} diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less index 15ff700bc28..640313cb639 100644 --- a/components/drawer/style/drawer.less +++ b/components/drawer/style/drawer.less @@ -102,7 +102,7 @@ &-close { display: inline-block; - margin-right: 12px; + margin-inline-end: 12px; color: @modal-close-color; font-weight: 700; font-size: @font-size-lg; diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less index 6ce50b7c1e9..26882c7c3d7 100644 --- a/components/drawer/style/index.less +++ b/components/drawer/style/index.less @@ -3,6 +3,8 @@ @import './drawer'; @import './motion'; @import './animation'; -@import './rtl'; + +@drawer-prefix-cls: ~'@{ant-prefix}-drawer'; + .popover-customize-bg(@drawer-prefix-cls, @popover-background); diff --git a/components/drawer/style/rtl.less b/components/drawer/style/rtl.less deleted file mode 100644 index f710bfa7dd8..00000000000 --- a/components/drawer/style/rtl.less +++ /dev/null @@ -1,16 +0,0 @@ -@import '../../style/themes/index'; - -@drawer-prefix-cls: ~'@{ant-prefix}-drawer'; - -.@{drawer-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-close { - .@{drawer-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 12px; - } - } -} diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 77322df596b..3f28d499005 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -11,7 +11,7 @@ position: absolute; top: -9999px; - left: -9999px; + inset-inline-start: -9999px; z-index: @zindex-dropdown; display: block; @@ -54,7 +54,7 @@ position: relative; margin: 0; padding: @dropdown-edge-child-vertical-padding 0; - text-align: left; + text-align: start; list-style-type: none; background-color: @dropdown-menu-bg; background-clip: padding-box; @@ -81,8 +81,7 @@ } ul { - margin-right: 0.3em; - margin-left: 0.3em; + margin-inline: 0.3em; } } @@ -95,7 +94,7 @@ &-item-icon { min-width: 12px; - margin-right: 8px; + margin-inline-end: 8px; font-size: @font-size-sm; } @@ -113,9 +112,9 @@ &::after { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 0; - left: 0; + inset-inline-start: 0; content: ''; } } @@ -181,10 +180,10 @@ .@{dropdown-prefix-cls}-menu-submenu-expand-icon { position: absolute; - right: @padding-xs; + inset-inline-end: @padding-xs; .@{dropdown-prefix-cls}-menu-submenu-arrow-icon { - margin-right: 0 !important; + margin-inline-end: 0 !important; color: @text-color-secondary; font-size: 10px; font-style: normal; @@ -199,7 +198,7 @@ } &-submenu-title { - padding-right: @control-padding-horizontal + @font-size-sm; + padding-inline-end: @control-padding-horizontal + @font-size-sm; } &-submenu-vertical { @@ -209,9 +208,9 @@ &-submenu-vertical > & { position: absolute; top: 0; - left: 100%; + inset-inline-start: 100%; min-width: 100%; - margin-left: 4px; + margin-inline-start: 4px; transform-origin: 0 0; } @@ -320,5 +319,3 @@ } } } - -@import './rtl'; diff --git a/components/dropdown/style/patch.less b/components/dropdown/style/patch.less index be5bc42ff45..d8f815b2dbe 100644 --- a/components/dropdown/style/patch.less +++ b/components/dropdown/style/patch.less @@ -14,16 +14,3 @@ margin-block: calc(@popover-distance - @popover-arrow-width / 2) } } - -.@{dropdown-prefix-cls} { - &-menu { - &-item, - &-submenu-title { - .@{dropdown-prefix-cls}-menu-submenu-arrow { - .@{dropdown-prefix-cls}-rtl & { - transform: rotate(180deg); - } - } - } - } -} diff --git a/components/dropdown/style/rtl.less b/components/dropdown/style/rtl.less deleted file mode 100644 index 8d77d8301ac..00000000000 --- a/components/dropdown/style/rtl.less +++ /dev/null @@ -1,90 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown'; - -.@{dropdown-prefix-cls} { - &-rtl { - direction: rtl; - } - - &::before { - .@{dropdown-prefix-cls}-rtl& { - right: -7px; - left: 0; - } - } - - &-menu { - &&-rtl { - direction: rtl; - text-align: right; - } - - &-item-group-title { - .@{dropdown-prefix-cls}-rtl &, - .@{dropdown-prefix-cls}-menu-submenu-rtl & { - direction: rtl; - text-align: right; - } - } - - &-submenu-popup { - &.@{dropdown-prefix-cls}-menu-submenu-rtl { - transform-origin: 100% 0; - } - - ul, - li { - .@{dropdown-prefix-cls}-rtl & { - text-align: right; - } - } - } - - &-item, - &-submenu-title { - .@{dropdown-prefix-cls}-rtl & { - text-align: right; - } - - > .@{iconfont-css-prefix}:first-child, - > span > .@{iconfont-css-prefix}:first-child { - .@{dropdown-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 8px; - } - } - - .@{dropdown-prefix-cls}-menu-submenu-expand-icon { - .@{dropdown-prefix-cls}-rtl & { - right: auto; - left: @padding-xs; - } - - .@{dropdown-prefix-cls}-menu-submenu-arrow-icon { - .@{dropdown-prefix-cls}-rtl & { - margin-left: 0 !important; - transform: scaleX(-1); - } - } - } - } - - &-submenu-title { - .@{dropdown-prefix-cls}-rtl & { - padding-right: @control-padding-horizontal; - padding-left: @control-padding-horizontal + @font-size-sm; - } - } - - &-submenu-vertical > & { - .@{dropdown-prefix-cls}-rtl & { - right: 100%; - left: 0; - margin-right: 4px; - margin-left: 0; - } - } - } -} diff --git a/components/empty/style/index.less b/components/empty/style/index.less index c696372c132..256c4c40e88 100644 --- a/components/empty/style/index.less +++ b/components/empty/style/index.less @@ -147,5 +147,3 @@ } } } - -@import './rtl'; diff --git a/components/empty/style/rtl.less b/components/empty/style/rtl.less deleted file mode 100644 index bf3f6c46e7c..00000000000 --- a/components/empty/style/rtl.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@empty-prefix-cls: ~'@{ant-prefix}-empty'; - -.@{empty-prefix-cls} { - &-rtl { - direction: rtl; - } -} diff --git a/components/float-button/style/index.less b/components/float-button/style/index.less index af0065dcc64..7fdf69dbea9 100644 --- a/components/float-button/style/index.less +++ b/components/float-button/style/index.less @@ -89,10 +89,6 @@ border: none; } -.@{float-btn-prefix-cls}-rtl { - direction: rtl; -} - .@{float-btn-prefix-cls}-circle { height: @float-button-size; border-radius: 50%; @@ -196,10 +192,6 @@ justify-content: center; } - &&-rtl { - direction: rtl; - } - .@{float-btn-prefix-cls} { position: static; } diff --git a/components/form/style/index.less b/components/form/style/index.less index b4ff46106ab..2a9017247ce 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -44,6 +44,7 @@ &-large { .formSize(@input-height-lg); } + } .explainAndExtraDistance(@num) when (@num >= 0) { @@ -82,11 +83,11 @@ flex-grow: 0; overflow: hidden; white-space: nowrap; - text-align: right; + text-align: end; vertical-align: middle; &-left { - text-align: left; + text-align: start; } &-wrap { @@ -114,7 +115,7 @@ .@{form-item-prefix-cls}-required-mark-hidden )::before { display: inline-block; - margin-right: 4px; + margin-inline-end: 4px; color: @label-required-color; font-size: @form-item-label-font-size; font-family: SimSun, sans-serif; @@ -129,7 +130,7 @@ // Optional mark .@{form-item-prefix-cls}-optional { display: inline-block; - margin-left: @margin-xss; + margin-inline-start: @margin-xss; color: @text-color-secondary; .@{form-prefix-cls}-hide-required-mark & { @@ -155,7 +156,7 @@ position: relative; top: -0.5px; - margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left; + margin-inline: @form-item-label-colon-margin-left @form-item-label-colon-margin-right; } &.@{form-item-prefix-cls}-no-colon::after { @@ -336,4 +337,164 @@ } } -@import './rtl'; + + + +// ================================================================ +// = Item = +// ================================================================ +.@{form-item-prefix-cls} { + // ============================================================== + // = Input = + // ============================================================== + &-control { + &:dir(rtl):first-child { + width: 100%; + } + } + + // status + &-has-feedback { + .@{ant-prefix}-input { + &:dir(rtl) { + padding-right: @input-padding-horizontal-base; + padding-left: 24px; + } + } + + .@{ant-prefix}-input-affix-wrapper { + .@{ant-prefix}-input-suffix { + &:dir(rtl) { + padding-right: @input-padding-horizontal-base; + padding-left: 18px; + } + } + .@{ant-prefix}-input { + &:dir(rtl) { + padding: 0; + } + } + } + + .@{ant-prefix}-input-number-affix-wrapper { + .@{ant-prefix}-input-number { + &:dir(rtl) { + padding: 0; + } + } + } + + .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) { + .@{ant-prefix}-input-suffix { + &:dir(rtl) { + right: auto; + left: 28px; + } + } + } + + .@{ant-prefix}-input-number { + &:dir(rtl) { + padding-left: 18px; + } + } + + > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, + > .@{ant-prefix}-select .@{ant-prefix}-select-clear, + :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, + :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear, + :not(.@{ant-prefix}-input-number-group-addon) + > .@{ant-prefix}-select + .@{ant-prefix}-select-arrow, + :not(.@{ant-prefix}-input-number-group-addon) + > .@{ant-prefix}-select + .@{ant-prefix}-select-clear { + &:dir(rtl) { + right: auto; + left: 32px; + } + } + + > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value, + :not(.@{ant-prefix}-input-group-addon) + > .@{ant-prefix}-select + .@{ant-prefix}-select-selection-selected-value, + :not(.@{ant-prefix}-input-number-group-addon) + > .@{ant-prefix}-select + .@{ant-prefix}-select-selection-selected-value { + &:dir(rtl) { + padding-right: 0; + padding-left: 42px; + } + } + + .@{ant-prefix}-cascader-picker { + &-arrow { + &:dir(rtl) { + margin-right: 0; + margin-left: 19px; + } + } + + &-clear { + &:dir(rtl) { + right: auto; + left: 32px; + } + } + } + + .@{ant-prefix}-picker { + &:dir(rtl) { + padding-right: @input-padding-horizontal-base; + padding-left: @input-padding-horizontal-base + @font-size-base * 1.3; + } + + &-large { + &:dir(rtl) { + padding-right: @input-padding-horizontal-lg; + padding-left: @input-padding-horizontal-lg + @font-size-base * 1.3; + } + } + + &-small { + &:dir(rtl) { + padding-right: @input-padding-horizontal-sm; + padding-left: @input-padding-horizontal-sm + @font-size-base * 1.3; + } + } + } + + &.@{form-item-prefix-cls} { + &-has-success, + &-has-warning, + &-has-error, + &-is-validating { + // ====================== Icon ====================== + .@{form-item-prefix-cls}-children-icon { + &:dir(rtl) { + right: auto; + left: 0; + } + } + } + } + } +} + +// inline +.@{form-prefix-cls}-inline { + .@{form-prefix-cls}-item { + &:dir(rtl) { + margin-right: 0; + margin-left: 16px; + } + } +} + +// vertical +.make-vertical-layout-label() { + &:dir(rtl) { + text-align: right; + } +} diff --git a/components/form/style/rtl.less b/components/form/style/rtl.less deleted file mode 100644 index 0a5c8ebc347..00000000000 --- a/components/form/style/rtl.less +++ /dev/null @@ -1,204 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; -@import '../../button/style/mixin'; -@import '../../grid/style/mixin'; - -@form-prefix-cls: ~'@{ant-prefix}-form'; -@form-item-prefix-cls: ~'@{form-prefix-cls}-item'; - -.@{form-prefix-cls} { - &-rtl { - direction: rtl; - } -} - -// ================================================================ -// = Item = -// ================================================================ -.@{form-item-prefix-cls} { - // ============================================================== - // = Label = - // ============================================================== - &-label { - .@{form-prefix-cls}-rtl & { - text-align: left; - } - - > label { - &.@{form-item-prefix-cls}-required::before { - .@{form-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 4px; - } - } - - &::after { - .@{form-prefix-cls}-rtl & { - margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right; - } - } - - .@{form-item-prefix-cls}-optional { - .@{form-prefix-cls}-rtl & { - margin-right: @margin-xss; - margin-left: 0; - } - } - } - } - - // ============================================================== - // = Input = - // ============================================================== - &-control { - .@{ant-prefix}-col-rtl &:first-child { - width: 100%; - } - } - - // status - &-has-feedback { - .@{ant-prefix}-input { - .@{form-prefix-cls}-rtl & { - padding-right: @input-padding-horizontal-base; - padding-left: 24px; - } - } - - .@{ant-prefix}-input-affix-wrapper { - .@{ant-prefix}-input-suffix { - .@{form-prefix-cls}-rtl & { - padding-right: @input-padding-horizontal-base; - padding-left: 18px; - } - } - .@{ant-prefix}-input { - .@{form-prefix-cls}-rtl & { - padding: 0; - } - } - } - - .@{ant-prefix}-input-number-affix-wrapper { - .@{ant-prefix}-input-number { - .@{form-prefix-cls}-rtl & { - padding: 0; - } - } - } - - .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) { - .@{ant-prefix}-input-suffix { - .@{form-prefix-cls}-rtl & { - right: auto; - left: 28px; - } - } - } - - .@{ant-prefix}-input-number { - .@{form-prefix-cls}-rtl & { - padding-left: 18px; - } - } - - > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, - > .@{ant-prefix}-select .@{ant-prefix}-select-clear, - :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, - :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear, - :not(.@{ant-prefix}-input-number-group-addon) - > .@{ant-prefix}-select - .@{ant-prefix}-select-arrow, - :not(.@{ant-prefix}-input-number-group-addon) - > .@{ant-prefix}-select - .@{ant-prefix}-select-clear { - .@{form-prefix-cls}-rtl & { - right: auto; - left: 32px; - } - } - - > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value, - :not(.@{ant-prefix}-input-group-addon) - > .@{ant-prefix}-select - .@{ant-prefix}-select-selection-selected-value, - :not(.@{ant-prefix}-input-number-group-addon) - > .@{ant-prefix}-select - .@{ant-prefix}-select-selection-selected-value { - .@{form-prefix-cls}-rtl & { - padding-right: 0; - padding-left: 42px; - } - } - - .@{ant-prefix}-cascader-picker { - &-arrow { - .@{form-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 19px; - } - } - - &-clear { - .@{form-prefix-cls}-rtl & { - right: auto; - left: 32px; - } - } - } - - .@{ant-prefix}-picker { - .@{form-prefix-cls}-rtl & { - padding-right: @input-padding-horizontal-base; - padding-left: @input-padding-horizontal-base + @font-size-base * 1.3; - } - - &-large { - .@{form-prefix-cls}-rtl & { - padding-right: @input-padding-horizontal-lg; - padding-left: @input-padding-horizontal-lg + @font-size-base * 1.3; - } - } - - &-small { - .@{form-prefix-cls}-rtl & { - padding-right: @input-padding-horizontal-sm; - padding-left: @input-padding-horizontal-sm + @font-size-base * 1.3; - } - } - } - - &.@{form-item-prefix-cls} { - &-has-success, - &-has-warning, - &-has-error, - &-is-validating { - // ====================== Icon ====================== - .@{form-item-prefix-cls}-children-icon { - .@{form-prefix-cls}-rtl & { - right: auto; - left: 0; - } - } - } - } - } -} - -// inline -.@{form-prefix-cls}-inline { - .@{form-prefix-cls}-item { - .@{form-prefix-cls}-rtl& { - margin-right: 0; - margin-left: 16px; - } - } -} - -// vertical -.make-vertical-layout-label() { - .@{form-prefix-cls}-rtl & { - text-align: right; - } -} diff --git a/components/grid/style/index.less b/components/grid/style/index.less index 8fcebd45b7e..4999d9ed16b 100644 --- a/components/grid/style/index.less +++ b/components/grid/style/index.less @@ -124,5 +124,3 @@ @media (min-width: @screen-xxxl-min) { .make-grid(-xxxl); } - -@import './rtl'; diff --git a/components/grid/style/rtl.less b/components/grid/style/rtl.less deleted file mode 100644 index 0a6b0a78018..00000000000 --- a/components/grid/style/rtl.less +++ /dev/null @@ -1,7 +0,0 @@ -@import './mixin'; - -.@{row-prefix-cls} { - &-rtl { - direction: rtl; - } -} diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index 2d6697729b8..8d4b198f52a 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -42,7 +42,7 @@ font-weight: bold; line-height: 0; text-align: center; - border-left: @border-width-base @border-style-base @input-number-handler-border-color; + border-inline-start: @border-width-base @border-style-base @input-number-handler-border-color; transition: all 0.1s linear; &:active { @@ -60,7 +60,7 @@ .iconfont-mixin(); position: absolute; - right: 4px; + inset-inline-end: 4px; width: 12px; height: 12px; color: @text-color-secondary; @@ -100,7 +100,7 @@ width: 100%; height: @input-height-base - 2px; padding: 0 @control-padding-horizontal - 1px; - text-align: left; + text-align: start; background-color: transparent; border: 0; border-radius: @control-border-radius; @@ -139,11 +139,12 @@ &-handler-wrap { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; width: 22px; height: 100%; background: @input-number-handler-bg; - border-radius: 0 @control-border-radius @control-border-radius 0; + border-start-end-radius: @control-border-radius; + border-end-end-radius: @control-border-radius; opacity: 0; transition: opacity 0.24s linear 0.1s; @@ -157,13 +158,13 @@ align-items: center; justify-content: center; min-width: auto; - margin-right: 0; + margin-inline-end: 0; font-size: 7px; } } .@{input-number-prefix-cls}-borderless & { - border-left-width: 0; + border-inline-start-width: 0; } } @@ -177,7 +178,7 @@ } &-handler-up { - border-top-right-radius: @control-border-radius; + border-start-end-radius: @control-border-radius; cursor: pointer; &-inner { @@ -194,7 +195,7 @@ &-handler-down { top: 0; border-top: @border-width-base @border-style-base @input-number-handler-border-color; - border-bottom-right-radius: @control-border-radius; + border-end-end-radius: @control-border-radius; cursor: pointer; &-inner { @@ -239,5 +240,3 @@ .compact-item(~'@{input-number-prefix-cls}-affix-wrapper', null, ~'@{input-number-prefix-cls}-focused'); .compact-item(~'@{input-number-prefix-cls}-group-wrapper', ~'@{input-number-prefix-cls}-group-addon', ~'@{input-number-prefix-cls}-focused'); } - -@import './rtl'; diff --git a/components/input-number/style/rtl.less b/components/input-number/style/rtl.less deleted file mode 100644 index 282b2dfbf0f..00000000000 --- a/components/input-number/style/rtl.less +++ /dev/null @@ -1,73 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; - -@input-number-prefix-cls: ~'@{ant-prefix}-input-number'; - -.@{input-number-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-handler { - .@{input-number-prefix-cls}-rtl & { - border-right: @border-width-base @border-style-base @input-number-handler-border-color; - border-left: 0; - } - - &-wrap { - .@{input-number-prefix-cls}-rtl & { - right: auto; - left: 0; - } - - .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless &, - .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-filled &, - .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-underlined & { - border-right-width: 0; - } - } - - &-up { - .@{input-number-prefix-cls}-rtl & { - border-top-right-radius: 0; - } - } - - &-down { - .@{input-number-prefix-cls}-rtl & { - border-bottom-right-radius: 0; - } - } - } - - &-input { - .@{input-number-prefix-cls}-rtl & { - direction: ltr; - text-align: right; - } - } -} - -// https://github.com/ant-design/ant-design/issues/35870 -.input-group(@input-number-prefix-cls) { - > .@{input-number-prefix-cls}-rtl:first-child { - border-radius: 0 @border-radius-base @border-radius-base 0; - } - > .@{input-number-prefix-cls}-rtl:last-child { - border-radius: @border-radius-base 0 0 @border-radius-base; - } - - &-addon { - .@{input-number-prefix-cls}-group-rtl &:first-child { - border-right: @border-width-base @border-style-base @input-border-color; - border-left: 0; - border-radius: 0 @border-radius-base @border-radius-base 0; - } - .@{input-number-prefix-cls}-group-rtl &:last-child { - border-right: 0; - border-left: @border-width-base @border-style-base @input-border-color; - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } -} diff --git a/components/input/style/affix.less b/components/input/style/affix.less index be45dbdb5ff..bce68b18004 100644 --- a/components/input/style/affix.less +++ b/components/input/style/affix.less @@ -57,7 +57,7 @@ align-items: center; > *:not(:last-child) { - margin-right: 8px; + margin-inline-end: 8px; } } @@ -66,14 +66,14 @@ } &-show-count-has-suffix { - margin-right: 2px; + margin-inline-end: 2px; } &-prefix { - margin-right: @input-affix-margin; + margin-inline-end: @input-affix-margin; } &-suffix { - margin-left: @input-affix-margin; + margin-inline-start: @input-affix-margin; } } diff --git a/components/input/style/allow-clear.less b/components/input/style/allow-clear.less index c4c3c7631e9..787cd99815f 100644 --- a/components/input/style/allow-clear.less +++ b/components/input/style/allow-clear.less @@ -26,7 +26,7 @@ } &-has-suffix { - margin: 0 @input-affix-margin; + margin-inline: @input-affix-margin; } } @@ -37,7 +37,7 @@ .@{input-prefix-cls}-clear-icon { position: absolute; top: 8px; - right: 8px; + inset-inline-end: 8px; z-index: 1; } } diff --git a/components/input/style/index.less b/components/input/style/index.less index 75ef8dc6f0d..94529ee669c 100644 --- a/components/input/style/index.less +++ b/components/input/style/index.less @@ -65,7 +65,7 @@ } &::after { - float: right; + float: inline-end; color: @text-color-secondary; white-space: nowrap; content: attr(data-count); @@ -82,7 +82,7 @@ &-textarea-suffix { position: absolute; top: 0; - right: @input-padding-horizontal-base; + inset-inline-end: @input-padding-horizontal-base; bottom: 0; z-index: 1; display: inline-flex; @@ -104,5 +104,4 @@ } @import './search-input'; -@import './rtl'; @import './IE11'; diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index a991f2897da..a4a6afc523b 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -30,14 +30,14 @@ border-color: @hoverBorderColor; box-shadow: @input-outline-offset @outline-blur-size @outline-width @outlineColor; } - border-right-width: @border-width-base; + border-inline-end-width: @border-width-base; outline: 0; } // == when hover .hover(@color: @input-hover-border-color) { border-color: @color; - border-right-width: @border-width-base; + border-inline-end-width: @border-width-base; } .disabled() { @@ -167,15 +167,14 @@ // Undo padding and float of grid classes &[class*='col-'] { float: none; - padding-right: 0; - padding-left: 0; + padding-inline: 0; } > [class*='col-'] { - padding-right: 8px; + padding-inline-end: 8px; &:last-child { - padding-right: 0; + padding-inline-end: 0; } } @@ -201,19 +200,19 @@ } .@{inputClass} { - float: left; + float: inline-start; width: 100%; margin-bottom: 0; text-align: inherit; &:focus { z-index: 1; // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png - border-right-width: 1px; + border-inline-end-width: 1px; } &:hover { z-index: 1; - border-right-width: 1px; + border-inline-end-width: 1px; .@{ant-prefix}-input-search-with-button & { z-index: 0; } @@ -256,7 +255,7 @@ margin: -9px (-@control-padding-horizontal); background-color: transparent; .@{ant-prefix}-cascader-input { - text-align: left; + text-align: start; border: 0; box-shadow: none; } @@ -266,45 +265,45 @@ // Reset rounded corners > .@{inputClass}:first-child, &-addon:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; // Reset Select's style in addon .@{ant-prefix}-select .@{ant-prefix}-select-selector { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } } > .@{inputClass}-affix-wrapper { &:not(:first-child) .@{inputClass} { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } &:not(:last-child) .@{inputClass} { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } } &-addon:first-child { - border-right: 0; + border-inline-end: 0; } &-addon:last-child { - border-left: 0; + border-inline-start: 0; } > .@{inputClass}:last-child, &-addon:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; // Reset Select's style in addon .@{ant-prefix}-select .@{ant-prefix}-select-selector { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } } @@ -330,18 +329,18 @@ .@{inputClass}-affix-wrapper { &:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; .@{ant-prefix}-input-search & { - border-top-left-radius: @control-border-radius; - border-bottom-left-radius: @control-border-radius; + border-start-start-radius: @control-border-radius; + border-end-start-radius: @control-border-radius; } } &:not(:first-child), .@{ant-prefix}-input-search &:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } } @@ -353,7 +352,7 @@ &-wrap, > .@{inputClass} { &:not(:first-child):not(:last-child) { - border-right-width: @border-width-base; + border-inline-end-width: @border-width-base; &:hover { z-index: 1; @@ -379,8 +378,8 @@ } & > *:not(:last-child) { - margin-right: -@border-width-base; - border-right-width: @border-width-base; + margin-inline-end: -@border-width-base; + border-inline-end-width: @border-width-base; } // Undo float for .ant-input-group .ant-input @@ -393,7 +392,7 @@ & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input, & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input, & > .@{ant-prefix}-input-group-wrapper .@{ant-prefix}-input { - border-right-width: @border-width-base; + border-inline-end-width: @border-width-base; border-radius: 0; &:hover { @@ -418,17 +417,17 @@ & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector, & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input, & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input { - border-top-left-radius: @control-border-radius; - border-bottom-left-radius: @control-border-radius; + border-start-start-radius: @control-border-radius; + border-end-start-radius: @control-border-radius; } & > *:last-child, & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector, & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input, & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input { - border-right-width: @border-width-base; - border-top-right-radius: @control-border-radius; - border-bottom-right-radius: @control-border-radius; + border-inline-end-width: @border-width-base; + border-start-end-radius: @control-border-radius; + border-end-end-radius: @control-border-radius; } // https://github.com/ant-design/ant-design/issues/12493 diff --git a/components/input/style/patch.less b/components/input/style/patch.less index fae22167b2a..e62ea371737 100644 --- a/components/input/style/patch.less +++ b/components/input/style/patch.less @@ -8,25 +8,6 @@ textarea.nz-textarea-autosize-measuring { overflow: hidden !important; } -.@{search-prefix} { - &-enter-button { - & + .@{ant-prefix}-input-group-addon, - input + .@{ant-prefix}-input-group-addon { - .@{search-rtl-cls}& { - .@{search-prefix}-button.@{ant-prefix}-btn-icon-only { - .square(@btn-height-base); - &.@{ant-prefix}-btn-sm { - .square(@btn-height-sm); - } - &.@{ant-prefix}-btn-lg { - .square(@btn-height-lg); - } - } - } - } - } -} - .ant-input-affix-wrapper-textarea-with-clear-btn .ant-input-suffix { margin-left: 0; } diff --git a/components/input/style/rtl.less b/components/input/style/rtl.less deleted file mode 100644 index 6cbd23adc3c..00000000000 --- a/components/input/style/rtl.less +++ /dev/null @@ -1,210 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -//== Style for input-group: input with label, with button or dropdown... -.@{ant-prefix}-input-group { - &-wrapper { - &-rtl { - direction: rtl; - } - } - - &-rtl { - direction: rtl; - } -} - -// affix -@input-affix-margin: 4px; - -.@{ant-prefix}-input { - &-affix-wrapper&-affix-wrapper-rtl { - > input.@{ant-prefix}-input { - border: none; - outline: none; - } - } - - &-affix-wrapper-rtl { - .@{ant-prefix}-input-prefix { - margin: 0 0 0 @input-affix-margin; - } - - .@{ant-prefix}-input-suffix { - margin: 0 @input-affix-margin 0 0; - } - } - - &-textarea { - &-rtl { - direction: rtl; - } - - &-rtl&-show-count::after { - text-align: left; - } - } -} - -// allow-clear -.@{ant-prefix}-input-clear-icon { - &-has-suffix { - .@{ant-prefix}-input-affix-wrapper-rtl & { - margin-right: 0; - margin-left: @input-affix-margin; - } - } - - .@{ant-prefix}-input-affix-wrapper-rtl & { - right: auto; - left: 8px; - } -} - -// mixin -@input-rtl-cls: ~'@{ant-prefix}-input-rtl'; - -.active() { - .@{input-rtl-cls} & { - border-right-width: 0; - border-left-width: @border-width-base !important; - } -} - -.hover() { - .@{input-rtl-cls} & { - border-right-width: 0; - border-left-width: @border-width-base !important; - } -} - -.input() { - &-rtl { - direction: rtl; - } -} - -// label input -.input-group(@inputClass) { - > .@{inputClass}-rtl:first-child, - &-rtl &-addon:first-child { - border-radius: 0 @border-radius-base @border-radius-base 0; - } - - &-addon:first-child { - .@{inputClass}-group-rtl & { - border-right: @border-width-base @border-style-base @input-border-color; - border-left: 0; - } - } - - &-addon:last-child { - .@{inputClass}-group-rtl & { - border-right: 0; - border-left: @border-width-base @border-style-base @input-border-color; - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - - > .@{inputClass}:last-child, - &-addon:last-child { - .@{inputClass}-group-rtl& { - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - - .@{inputClass}-affix-wrapper { - &:not(:first-child) { - .@{inputClass}-group-rtl& { - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - - &:not(:last-child) { - .@{inputClass}-group-rtl& { - border-radius: 0 @border-radius-base @border-radius-base 0; - } - } - } - - &&-compact { - & > *:not(:last-child) { - .@{inputClass}-group-rtl& { - margin-right: 0; - margin-left: -@border-width-base; - border-left-width: @border-width-base; - } - } - - & > *:first-child, - & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector, - & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input, - & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input { - .@{inputClass}-group-rtl& { - border-radius: 0 @border-radius-base @border-radius-base 0; - } - } - - & > *:last-child, - & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector, - & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input, - & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input, - & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input { - .@{inputClass}-group-rtl& { - border-left-width: @border-width-base; - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - - .@{ant-prefix}-input-group-wrapper-rtl + .@{ant-prefix}-input-group-wrapper-rtl { - margin-right: -1px; - margin-left: 0; - } - - .@{ant-prefix}-input-group-wrapper-rtl:not(:last-child) { - &.@{ant-prefix}-input-search > .@{ant-prefix}-input-group { - & > .@{ant-prefix}-input { - border-radius: 0 @border-radius-base @border-radius-base 0; - } - } - } - } -} - -// search-input -@search-prefix: ~'@{ant-prefix}-input-search'; -@search-rtl-cls: ~'@{search-prefix}-rtl'; - -.@{search-prefix}-rtl { - direction: rtl; - - .@{ant-prefix}-input { - &:hover, - &:focus { - + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) { - border-left-color: @border-color-base; - - &:hover { - border-left-color: @input-hover-border-color; - } - } - } - } - - > .@{ant-prefix}-input-group { - > .@{ant-prefix}-input-affix-wrapper { - &:hover, - &-focused { - border-right-color: @input-hover-border-color; - } - } - - > .@{ant-prefix}-input-group-addon:last-child { - right: -1px; - left: auto; - .@{search-prefix}-button { - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - } -} diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less index 3fd9d6c522f..82557da3baa 100644 --- a/components/input/style/search-input.less +++ b/components/input/style/search-input.less @@ -12,7 +12,7 @@ border-color: @input-hover-border-color; + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) { - border-left-color: @input-hover-border-color; + border-inline-start-color: @input-hover-border-color; } } } @@ -29,14 +29,15 @@ > .@{ant-prefix}-input-group { > .@{ant-prefix}-input-group-addon:last-child { - left: -1px; + inset-inline-start: -1px; padding: 0; border: 0; .@{search-prefix}-button { padding-top: 0; padding-bottom: 0; - border-radius: 0 @border-radius-base @border-radius-base 0; + border-start-end-radius: @border-radius-base; + border-end-end-radius: @border-radius-base; } .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) { @@ -44,9 +45,9 @@ &.@{ant-prefix}-btn-loading::before { top: 0; - right: 0; + inset-inline-end: 0; bottom: 0; - left: 0; + inset-inline-start: 0; } } } @@ -71,13 +72,11 @@ // ===================== Compact Item Customized Styles ===================== &.@{input-prefix-cls}-compact-item { - &:not(.@{input-prefix-cls}-compact-item-rtl) { - &:not(.@{input-prefix-cls}-compact-last-item) { - .@{input-prefix-cls}-group-addon { - .@{input-prefix-cls}-search-button { - margin-right: -@border-width-base; - border-radius: 0; - } + &:not(.@{input-prefix-cls}-compact-last-item) { + .@{input-prefix-cls}-group-addon { + .@{input-prefix-cls}-search-button { + margin-inline-end: -@border-width-base; + border-radius: 0; } } } @@ -103,15 +102,4 @@ z-index: 2; } } - // ===================== For RTL Compact Item Customized Styles ===================== - &.@{input-prefix-cls}-compact-item-rtl { - &:not(.@{input-prefix-cls}-compact-last-item) { - .@{input-prefix-cls}-group-addon:last-child { - .@{input-prefix-cls}-search-button { - margin-left: -@border-width-base; - border-radius: 0; - } - } - } - } } diff --git a/components/layout/style/index.less b/components/layout/style/index.less index f699c0b451d..57b33731d74 100644 --- a/components/layout/style/index.less +++ b/components/layout/style/index.less @@ -142,4 +142,3 @@ } @import './light'; -@import './rtl'; diff --git a/components/layout/style/rtl.less b/components/layout/style/rtl.less deleted file mode 100644 index da7aca0dd55..00000000000 --- a/components/layout/style/rtl.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@layout-prefix-cls: ~'@{ant-prefix}-layout'; - -.@{layout-prefix-cls} { - &-rtl { - direction: rtl; - } -} diff --git a/components/list/style/index.less b/components/list/style/index.less index 6804e241295..2b1e8e4bd8f 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -15,11 +15,11 @@ &-pagination { margin-top: @margin-lg; - text-align: right; + text-align: end; // https://github.com/ant-design/ant-design/issues/20037 .@{ant-prefix}-pagination-options { - text-align: left; + text-align: start; } } @@ -28,8 +28,7 @@ text-align: center; button { - padding-right: 32px; - padding-left: 32px; + padding-inline: 32px; } } @@ -65,7 +64,7 @@ max-width: 100%; &-avatar { - margin-right: @list-item-meta-avatar-margin-right; + margin-inline-end: @list-item-meta-avatar-margin-right; } &-content { @@ -99,7 +98,7 @@ &-action { flex: 0 0 auto; - margin-left: 48px; + margin-inline-start: 48px; padding: 0; font-size: 0; list-style: none; @@ -114,14 +113,14 @@ text-align: center; &:first-child { - padding-left: 0; + padding-inline-start: 0; } } &-split { position: absolute; top: 50%; - right: 0; + inset-inline-end: 0; width: 1px; height: 14px; margin-top: -7px; @@ -192,7 +191,7 @@ } &-extra { - margin-left: 40px; + margin-inline-start: 40px; } &-meta { @@ -208,13 +207,13 @@ &-action { margin-top: @padding-md; - margin-left: auto; + margin-inline-start: auto; > li { padding: 0 @padding-md; &:first-child { - padding-left: 0; + padding-inline-start: 0; } } } @@ -238,7 +237,7 @@ &:not(.@{list-prefix-cls}-vertical) { .@{list-prefix-cls}-item-no-flex { .@{list-prefix-cls}-item-action { - float: right; + float: inline-end; } } } @@ -246,4 +245,3 @@ @import './bordered'; @import './responsive'; -@import './rtl'; diff --git a/components/list/style/responsive.less b/components/list/style/responsive.less index db7a108a343..ab93fde3fa6 100644 --- a/components/list/style/responsive.less +++ b/components/list/style/responsive.less @@ -2,7 +2,7 @@ .@{list-prefix-cls} { &-item { &-action { - margin-left: 24px; + margin-inline-start: 24px; } } } @@ -10,7 +10,7 @@ .@{list-prefix-cls}-vertical { .@{list-prefix-cls}-item { &-extra { - margin-left: 24px; + margin-inline-start: 24px; } } } @@ -22,7 +22,7 @@ flex-wrap: wrap; &-action { - margin-left: 12px; + margin-inline-start: 12px; } } } diff --git a/components/list/style/rtl.less b/components/list/style/rtl.less deleted file mode 100644 index 429969c68ca..00000000000 --- a/components/list/style/rtl.less +++ /dev/null @@ -1,139 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import './customize.less'; - -@list-prefix-cls: ~'@{ant-prefix}-list'; - -.@{list-prefix-cls} { - &-rtl { - direction: rtl; - text-align: right; - - // fix for virtual scroll style attribute > (direction:ltr) - .ReactVirtualized__List .@{list-prefix-cls}-item { - direction: rtl; - } - } - - &-pagination { - .@{list-prefix-cls}-rtl & { - text-align: left; - } - } - - &-item { - &-meta { - &-avatar { - .@{list-prefix-cls}-rtl & { - margin-right: 0; - margin-left: @list-item-meta-avatar-margin-right; - } - } - } - - &-action { - .@{list-prefix-cls}-rtl & { - margin-right: 48px; - margin-left: 0; - } - - & > li:first-child { - .@{list-prefix-cls}.@{list-prefix-cls}-rtl & { - padding-right: 0; - padding-left: @padding-md; - } - } - - &-split { - .@{list-prefix-cls}-rtl & { - right: auto; - left: 0; - } - } - } - } - - &-vertical &-item { - &-extra { - .@{list-prefix-cls}-rtl& { - margin-right: 40px; - margin-left: 0; - } - } - - &-action { - .@{list-prefix-cls}-rtl& { - margin-right: auto; - } - - > li { - &:first-child { - .@{list-prefix-cls}-rtl & { - padding-right: 0; - padding-left: @padding-md; - } - } - } - } - } - - // Horizontal - &:not(.@{list-prefix-cls}-vertical) { - .@{list-prefix-cls}-item-no-flex { - .@{list-prefix-cls}-item-action { - .@{list-prefix-cls}-rtl & { - float: left; - } - } - } - } -} - -// responsive -@media screen and (max-width: @screen-md) { - .@{list-prefix-cls} { - &-item { - &-action { - .@{list-prefix-cls}-rtl & { - margin-right: 24px; - margin-left: 0; - } - } - } - } - - .@{list-prefix-cls}-vertical { - .@{list-prefix-cls}-item { - &-extra { - .@{list-prefix-cls}-rtl & { - margin-right: 24px; - margin-left: 0; - } - } - } - } -} - -@media screen and (max-width: @screen-sm) { - .@{list-prefix-cls} { - &-item { - &-action { - .@{list-prefix-cls}-rtl & { - margin-right: 22px; - margin-left: 0; - } - } - } - } - - .@{list-prefix-cls}-vertical { - .@{list-prefix-cls}-item { - &-extra { - // to override margins on rtl view - .@{list-prefix-cls}-rtl& { - margin: auto auto 16px; - } - } - } - } -} diff --git a/components/mention/style/index.less b/components/mention/style/index.less index 508cb55ba43..d1380056571 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -195,5 +195,3 @@ } } } - -@import './rtl'; diff --git a/components/mention/style/rtl.less b/components/mention/style/rtl.less deleted file mode 100644 index 7cd95832dc6..00000000000 --- a/components/mention/style/rtl.less +++ /dev/null @@ -1,10 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@mention-prefix-cls: ~'@{ant-prefix}-mentions'; - -.@{mention-prefix-cls} { - &-rtl { - direction: rtl; - } -} diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 07bf0eaa20c..6b3f084af12 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -698,4 +698,165 @@ @import './light'; @import './dark'; -@import './rtl'; + + +.@{menu-prefix-cls} { + &&:dir(rtl) { + direction: rtl; + text-align: right; + } + + &-item-group-title { + &:dir(rtl) { + text-align: right; + } + } + + &-inline, + &-vertical { + &:dir(rtl) { + border-right: none; + border-left: @border-width-base @border-style-base @border-color-split; + } + } + + &-dark&-inline, + &-dark&-vertical { + &:dir(rtl) { + border-left: none; + } + } + + &-vertical&-sub, + &-vertical-left&-sub, + &-vertical-right&-sub { + > .@{menu-prefix-cls}-item, + > .@{menu-prefix-cls}-submenu { + &:dir(rtl) { + transform-origin: top right; + } + } + } + + &-item, + &-submenu-title { + .@{menu-prefix-cls}-item-icon, + .@{iconfont-css-prefix} { + &:dir(rtl) { + margin-right: auto; + margin-left: @menu-icon-margin-right; + } + } + + &.@{menu-prefix-cls}-item-only-child { + > .@{menu-prefix-cls}-item-icon, + > .@{iconfont-css-prefix} { + &:dir(rtl) { + margin-left: 0; + } + } + } + } + + &-submenu { + &:dir(rtl).@{menu-prefix-cls}-submenu-popup { + transform-origin: 100% 0; + } + + &-vertical, + &-vertical-left, + &-vertical-right, + &-inline { + > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { + &:dir(rtl) { + right: auto; + left: 16px; + } + } + } + + &-vertical, + &-vertical-left, + &-vertical-right { + > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { + &::before { + &:dir(rtl) { + transform: rotate(-45deg) translateY(-2px); + } + } + + &::after { + &:dir(rtl) { + transform: rotate(45deg) translateY(2px); + } + } + } + } + } + + &-vertical, + &-vertical-left, + &-vertical-right, + &-inline { + .@{menu-prefix-cls}-item { + &::after { + &:dir(rtl) { + right: auto; + left: 0; + } + } + } + + .@{menu-prefix-cls}-item, + .@{menu-prefix-cls}-submenu-title { + &:dir(rtl) { + text-align: right; + } + } + } + + &-inline { + .@{menu-prefix-cls}-submenu-title { + &:dir(rtl) { + padding-right: 0; + padding-left: 34px; + } + } + } + + &-vertical { + .@{menu-prefix-cls}-submenu-title { + &:dir(rtl) { + padding-right: 16px; + padding-left: 34px; + } + } + } + + &-inline-collapsed&-vertical { + .@{menu-prefix-cls}-submenu-title { + &:dir(rtl) { + padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)'; + } + } + } + + &-item-group-list { + .@{menu-prefix-cls}-item, + .@{menu-prefix-cls}-submenu-title { + &:dir(rtl) { + padding: 0 28px 0 16px; + } + } + } + + &-sub&-inline { + border: 0; + & .@{menu-prefix-cls}-item-group-title { + &:dir(rtl) { + padding-right: 32px; + padding-left: 0; + } + } + } +} diff --git a/components/menu/style/patch.less b/components/menu/style/patch.less index abdbd77957a..c3cefeed7b6 100644 --- a/components/menu/style/patch.less +++ b/components/menu/style/patch.less @@ -5,20 +5,10 @@ .ant-menu-submenu.ant-menu-submenu-placement-right { position: relative; - left: 4px; - - &.ant-menu-submenu-rtl { - right: 4px; - left: auto; - } + inset-inline-start: 4px; } .ant-menu-submenu.ant-menu-submenu-placement-left { position: relative; - right: 4px; - - &.ant-menu-submenu-rtl { - right: auto; - left: 4px; - } + inset-inline-end: 4px; } diff --git a/components/menu/style/rtl.less b/components/menu/style/rtl.less deleted file mode 100644 index cc7a152af7d..00000000000 --- a/components/menu/style/rtl.less +++ /dev/null @@ -1,165 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@menu-prefix-cls: ~'@{ant-prefix}-menu'; - -.@{menu-prefix-cls} { - &&-rtl { - direction: rtl; - text-align: right; - } - - &-item-group-title { - .@{menu-prefix-cls}-rtl & { - text-align: right; - } - } - - &-inline, - &-vertical { - .@{menu-prefix-cls}-rtl& { - border-right: none; - border-left: @border-width-base @border-style-base @border-color-split; - } - } - - &-dark&-inline, - &-dark&-vertical { - .@{menu-prefix-cls}-rtl& { - border-left: none; - } - } - - &-vertical&-sub, - &-vertical-left&-sub, - &-vertical-right&-sub { - > .@{menu-prefix-cls}-item, - > .@{menu-prefix-cls}-submenu { - .@{menu-prefix-cls}-rtl& { - transform-origin: top right; - } - } - } - - &-item, - &-submenu-title { - .@{menu-prefix-cls}-item-icon, - .@{iconfont-css-prefix} { - .@{menu-prefix-cls}-rtl & { - margin-right: auto; - margin-left: @menu-icon-margin-right; - } - } - - &.@{menu-prefix-cls}-item-only-child { - > .@{menu-prefix-cls}-item-icon, - > .@{iconfont-css-prefix} { - .@{menu-prefix-cls}-rtl & { - margin-left: 0; - } - } - } - } - - &-submenu { - &-rtl.@{menu-prefix-cls}-submenu-popup { - transform-origin: 100% 0; - } - - &-vertical, - &-vertical-left, - &-vertical-right, - &-inline { - > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { - .@{menu-prefix-cls}-rtl & { - right: auto; - left: 16px; - } - } - } - - &-vertical, - &-vertical-left, - &-vertical-right { - > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { - &::before { - .@{menu-prefix-cls}-rtl & { - transform: rotate(-45deg) translateY(-2px); - } - } - - &::after { - .@{menu-prefix-cls}-rtl & { - transform: rotate(45deg) translateY(2px); - } - } - } - } - } - - &-vertical, - &-vertical-left, - &-vertical-right, - &-inline { - .@{menu-prefix-cls}-item { - &::after { - .@{menu-prefix-cls}-rtl& { - right: auto; - left: 0; - } - } - } - - .@{menu-prefix-cls}-item, - .@{menu-prefix-cls}-submenu-title { - .@{menu-prefix-cls}-rtl& { - text-align: right; - } - } - } - - &-inline { - .@{menu-prefix-cls}-submenu-title { - .@{menu-prefix-cls}-rtl& { - padding-right: 0; - padding-left: 34px; - } - } - } - - &-vertical { - .@{menu-prefix-cls}-submenu-title { - .@{menu-prefix-cls}-rtl& { - padding-right: 16px; - padding-left: 34px; - } - } - } - - &-inline-collapsed&-vertical { - .@{menu-prefix-cls}-submenu-title { - .@{menu-prefix-cls}-rtl& { - padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)'; - } - } - } - - &-item-group-list { - .@{menu-prefix-cls}-item, - .@{menu-prefix-cls}-submenu-title { - .@{menu-prefix-cls}-rtl & { - padding: 0 28px 0 16px; - } - } - } - - &-sub&-inline { - border: 0; - & .@{menu-prefix-cls}-item-group-title { - .@{menu-prefix-cls}-rtl& { - padding-right: 32px; - padding-left: 0; - } - } - } -} diff --git a/components/message/style/index.less b/components/message/style/index.less index 070bbcb08c4..e476401eb49 100644 --- a/components/message/style/index.less +++ b/components/message/style/index.less @@ -47,10 +47,9 @@ .@{iconfont-css-prefix} { position: relative; top: 1px; - margin-right: 8px; + margin-inline-end: 8px; font-size: @font-size-lg; } } -@import './rtl'; @import './animation'; diff --git a/components/message/style/rtl.less b/components/message/style/rtl.less deleted file mode 100644 index 944803bd3ea..00000000000 --- a/components/message/style/rtl.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@message-prefix-cls: ~'@{ant-prefix}-message'; - -.@{message-prefix-cls}-rtl { - direction: rtl; - - span { - direction: rtl; - } - - .@{iconfont-css-prefix} { - margin-right: 0; - margin-left: 8px; - } -} diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less index ef66859950b..8b0e607dcb7 100644 --- a/components/modal/style/confirm.less +++ b/components/modal/style/confirm.less @@ -34,24 +34,24 @@ } > .@{iconfont-css-prefix} { - float: left; - margin-right: 16px; + float: inline-start; + margin-inline-end: 16px; font-size: 22px; // `content` after `icon` should set marginLeft + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content { - margin-left: 38px; + margin-inline-start: 38px; } } } .@{confirm-prefix-cls}-btns { margin-top: 24px; - text-align: right; + text-align: end; .@{ant-prefix}-btn + .@{ant-prefix}-btn { margin-bottom: 0; - margin-left: 8px; + margin-inline-start: 8px; } } diff --git a/components/modal/style/index.less b/components/modal/style/index.less index 7cdab2ade3e..926a06dd89a 100644 --- a/components/modal/style/index.less +++ b/components/modal/style/index.less @@ -3,8 +3,9 @@ @import '../../style/core/motion/zoom'; @import './modal'; @import './confirm'; -@import './rtl'; +@dialog-prefix-cls: ~'@{ant-prefix}-modal'; +@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm'; .popover-customize-bg(@dialog-prefix-cls, @popover-background); // Animations diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index a91b9ebe92e..8f26a460ce0 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -37,7 +37,7 @@ &-close { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; z-index: @zindex-popup-close; padding: 0; color: @modal-close-color; @@ -87,7 +87,7 @@ &-footer { padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal; - text-align: right; + text-align: end; background: @modal-footer-bg; border-top: @modal-footer-border-width @modal-footer-border-style @modal-footer-border-color-split; @@ -95,7 +95,7 @@ .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) { margin-bottom: 0; - margin-left: 8px; + margin-inline-start: 8px; } } diff --git a/components/modal/style/rtl.less b/components/modal/style/rtl.less deleted file mode 100644 index 6cf9ad5b324..00000000000 --- a/components/modal/style/rtl.less +++ /dev/null @@ -1,74 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@dialog-prefix-cls: ~'@{ant-prefix}-modal'; -@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm'; -@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl'; - -.@{dialog-prefix-cls} { - &-wrap { - &-rtl { - direction: rtl; - } - } - - &-close { - .@{dialog-wrap-rtl-cls} & { - right: initial; - left: 0; - } - } - - &-footer { - .@{dialog-wrap-rtl-cls} & { - text-align: left; - } - .@{ant-prefix}-btn + .@{ant-prefix}-btn { - .@{dialog-wrap-rtl-cls} & { - margin-right: 8px; - margin-left: 0; - } - } - } - - &-confirm { - &-body { - .@{dialog-wrap-rtl-cls} & { - direction: rtl; - } - > .@{iconfont-css-prefix} { - .@{dialog-wrap-rtl-cls} & { - float: right; - margin-right: 0; - margin-left: 16px; - } - + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content { - .@{dialog-wrap-rtl-cls} & { - margin-right: 38px; - margin-left: 0; - } - } - } - } - - &-btns { - .@{dialog-wrap-rtl-cls} & { - text-align: left; - } - .@{ant-prefix}-btn + .@{ant-prefix}-btn { - .@{dialog-wrap-rtl-cls} & { - margin-right: 8px; - margin-left: 0; - } - } - } - } -} - -.@{dialog-prefix-cls}-centered { - .@{dialog-prefix-cls} { - .@{dialog-wrap-rtl-cls}& { - text-align: right; - } - } -} diff --git a/components/notification/style/index.less b/components/notification/style/index.less index 87068e5c014..33ac204347e 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -77,17 +77,17 @@ } &-closable &-message { - padding-right: 24px; + padding-inline-end: 24px; } &-with-icon &-message { margin-bottom: 4px; - margin-left: 48px; + margin-inline-start: 48px; font-size: @font-size-lg; } &-with-icon &-description { - margin-left: 48px; + margin-inline-start: 48px; font-size: @font-size-base; } @@ -96,7 +96,7 @@ // https://github.com/ant-design/ant-design/issues/15512 &-icon { position: absolute; - margin-left: 4px; + margin-inline-start: 4px; font-size: 24px; line-height: 24px; } @@ -122,7 +122,7 @@ &-close { position: absolute; top: 16px; - right: 22px; + inset-inline-end: 22px; color: @text-color-secondary; outline: none; @@ -137,11 +137,10 @@ } &-btn { - float: right; + float: inline-end; margin-top: 16px; } } } -@import './rtl'; @import './placement'; diff --git a/components/notification/style/rtl.less b/components/notification/style/rtl.less deleted file mode 100644 index 9285a25cc53..00000000000 --- a/components/notification/style/rtl.less +++ /dev/null @@ -1,53 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@notification-prefix-cls: ~'@{ant-prefix}-notification'; - -.@{notification-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-notice { - &-closable &-message { - .@{notification-prefix-cls}-rtl & { - padding-right: 0; - padding-left: 24px; - } - } - - &-with-icon &-message { - .@{notification-prefix-cls}-rtl & { - margin-right: 48px; - margin-left: 0; - } - } - - &-with-icon &-description { - .@{notification-prefix-cls}-rtl & { - margin-right: 48px; - margin-left: 0; - } - } - - &-icon { - .@{notification-prefix-cls}-rtl & { - margin-right: 4px; - margin-left: 0; - } - } - - &-close { - .@{notification-prefix-cls}-rtl & { - right: auto; - left: 22px; - } - } - - &-btn { - .@{notification-prefix-cls}-rtl & { - float: left; - } - } - } -} diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 46d413f126a..a43c9148789 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -22,7 +22,7 @@ } &-back { - margin-right: @margin-md; + margin-inline-end: @margin-md; font-size: 16px; line-height: 1; @@ -60,7 +60,7 @@ } &-title { - margin-right: @margin-sm; + margin-inline-end: @margin-sm; margin-bottom: 0; color: @heading-color; font-weight: 600; @@ -70,11 +70,11 @@ } .@{ant-prefix}-avatar { - margin-right: @margin-sm; + margin-inline-end: @margin-sm; } &-sub-title { - margin-right: @margin-sm; + margin-inline-end: @margin-sm; color: @text-color-secondary; font-size: @page-header-heading-sub-title; line-height: @line-height-base; @@ -118,5 +118,3 @@ flex-wrap: wrap; } } - -@import './rtl'; diff --git a/components/page-header/style/rtl.less b/components/page-header/style/rtl.less deleted file mode 100644 index 33e5c0d86b9..00000000000 --- a/components/page-header/style/rtl.less +++ /dev/null @@ -1,77 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@pageheader-prefix-cls: ~'@{ant-prefix}-page-header'; - -.@{pageheader-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-back { - .@{pageheader-prefix-cls}-rtl & { - float: right; - margin-right: 0; - margin-left: 16px; - } - } - - &-heading { - &-title { - .@{pageheader-prefix-cls}-rtl & { - margin-right: 0; - margin-left: @margin-sm; - } - } - - .@{ant-prefix}-avatar { - .@{pageheader-prefix-cls}-rtl & { - margin-right: 0; - margin-left: @margin-sm; - } - } - - &-sub-title { - .@{pageheader-prefix-cls}-rtl & { - float: right; - margin-right: 0; - margin-left: 12px; - } - } - - &-tags { - .@{pageheader-prefix-cls}-rtl & { - float: right; - } - } - - &-extra { - .@{pageheader-prefix-cls}-rtl & { - float: left; - } - - > * { - .@{pageheader-prefix-cls}-rtl & { - margin-right: @margin-sm; - margin-left: 0; - } - } - - > *:first-child { - .@{pageheader-prefix-cls}-rtl & { - margin-right: 0; - } - } - } - } - - &-footer { - .@{ant-prefix}-tabs-bar { - .@{ant-prefix}-tabs-nav { - .@{pageheader-prefix-cls}-rtl & { - float: right; - } - } - } - } -} diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index 427bcf8437d..ef078d0274e 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -39,7 +39,7 @@ &-total-text { display: inline-block; height: @pagination-item-size; - margin-right: 8px; + margin-inline-end: 8px; line-height: @pagination-item-size - 2px; vertical-align: middle; } @@ -48,7 +48,7 @@ display: inline-block; min-width: @pagination-item-size; height: @pagination-item-size; - margin-right: 8px; + margin-inline-end: 8px; font-family: @pagination-font-family; line-height: @pagination-item-size - 2px; text-align: center; @@ -264,12 +264,13 @@ } &-slash { - margin: 0 10px 0 5px; + margin-block: 0; + margin-inline: 5px 10px; } &-options { display: inline-block; - margin-left: 16px; + margin-inline-start: 16px; vertical-align: middle; // IE11 css hack. `*::-ms-backdrop,` is a must have @@ -288,7 +289,7 @@ &-quick-jumper { display: inline-block; height: @input-height-base; - margin-left: @margin-xs; + margin-inline-start: @margin-xs; line-height: @input-height-base; vertical-align: top; @@ -322,12 +323,12 @@ &-simple &-simple-pager { display: inline-block; height: @pagination-item-size-sm; - margin-right: 8px; + margin-inline-end: 8px; input { box-sizing: border-box; height: 100%; - margin-right: 8px; + margin-inline-end: 8px; padding: 0 6px; text-align: center; background-color: @pagination-item-input-bg; @@ -399,7 +400,7 @@ } &&-mini &-options { - margin-left: 2px; + margin-inline-start: 2px; &-size-changer { top: @pagination-mini-options-size-changer-top; @@ -481,5 +482,3 @@ display: none; } } - -@import './rtl'; diff --git a/components/pagination/style/rtl.less b/components/pagination/style/rtl.less deleted file mode 100644 index 49e74ecfd9d..00000000000 --- a/components/pagination/style/rtl.less +++ /dev/null @@ -1,55 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; - -@pagination-prefix-cls: ~'@{ant-prefix}-pagination'; - -.@{pagination-prefix-cls}-rtl { - .@{pagination-prefix-cls}-total-text { - margin-right: 0; - margin-left: 8px; - } - - .@{pagination-prefix-cls}-item, - .@{pagination-prefix-cls}-prev, - .@{pagination-prefix-cls}-jump-prev, - .@{pagination-prefix-cls}-jump-next { - margin-right: 0; - margin-left: 8px; - } - - .@{pagination-prefix-cls}-slash { - margin: 0 5px 0 10px; - } - - .@{pagination-prefix-cls}-options { - margin-right: 16px; - margin-left: 0; - - .@{pagination-prefix-cls}-options-size-changer.@{ant-prefix}-select { - margin-right: 0; - margin-left: 8px; - } - - .@{pagination-prefix-cls}-options-quick-jumper { - margin-left: 0; - } - } - - &.@{pagination-prefix-cls}-simple { - .@{pagination-prefix-cls}-simple-pager { - margin-right: 0; - margin-left: 8px; - - input { - margin-right: 0; - margin-left: 8px; - } - } - } - - &.@{pagination-prefix-cls}.mini .@{pagination-prefix-cls}-options { - margin-right: 2px; - margin-left: 0; - } -} diff --git a/components/popover/style/index.less b/components/popover/style/index.less index d4c9d51dd3a..ec50f2e5590 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -73,7 +73,7 @@ &-icon { display: inline-block; - margin-right: 8px; + margin-inline-end: 8px; color: @warning-color; font-size: @font-size-base; } @@ -81,10 +81,10 @@ &-buttons { margin-bottom: 4px; - text-align: right; + text-align: end; button:not(:first-child) { - margin-left: 8px; + margin-inline-start: 8px; } } @@ -112,5 +112,3 @@ // Animations .zoom-motion('zoom-big', antZoomBig); - -@import './rtl'; diff --git a/components/popover/style/rtl.less b/components/popover/style/rtl.less deleted file mode 100644 index 923309b413c..00000000000 --- a/components/popover/style/rtl.less +++ /dev/null @@ -1,39 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@popover-prefix-cls: ~'@{ant-prefix}-popover'; - -.@{popover-prefix-cls} { - &-rtl { - direction: rtl; - text-align: right; - } - - &-message { - &-icon { - .@{popover-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 8px; - } - } - - &-title { - .@{popover-prefix-cls}-rtl & { - padding-left: @padding-md; - } - } - } - - &-buttons { - .@{popover-prefix-cls}-rtl & { - text-align: left; - } - - button { - .@{popover-prefix-cls}-rtl & { - margin-right: 8px; - margin-left: 0; - } - } - } -} diff --git a/components/progress/style/index.less b/components/progress/style/index.less index 9ba9914378b..f955b3eeaf5 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -26,7 +26,7 @@ &-item { flex-shrink: 0; min-width: 2px; - margin-right: 2px; + margin-inline-end: 2px; background: @progress-steps-item-bg; transition: all 0.3s; @@ -44,11 +44,11 @@ &-outer { display: inline-block; width: 100%; - margin-right: 0; - padding-right: 0; + margin-inline-end: 0; + padding-inline-end: 0; .@{progress-prefix-cls}-show-info & { - margin-right: ~'calc(-2em - 8px)'; - padding-right: ~'calc(2em + 8px)'; + margin-inline-end: ~'calc(-2em - 8px)'; + padding-inline-end: ~'calc(2em + 8px)'; } } @@ -87,19 +87,19 @@ &-success-bg { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; background-color: @success-color; } &-text { display: inline-block; width: 2em; - margin-left: 8px; + margin-inline-start: 8px; color: @progress-info-text-color; font-size: @progress-text-font-size; line-height: 1; white-space: nowrap; - text-align: left; + text-align: start; vertical-align: middle; word-break: normal; .@{iconfont-css-prefix} { @@ -206,5 +206,3 @@ opacity: 0; } } - -@import './rtl'; diff --git a/components/progress/style/rtl.less b/components/progress/style/rtl.less deleted file mode 100644 index 0756b5f847e..00000000000 --- a/components/progress/style/rtl.less +++ /dev/null @@ -1,37 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@progress-prefix-cls: ~'@{ant-prefix}-progress'; - -.@{progress-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-outer { - .@{progress-prefix-cls}-show-info & { - .@{progress-prefix-cls}-rtl& { - margin-right: 0; - margin-left: ~'calc(-2em - 8px)'; - padding-right: 0; - padding-left: ~'calc(2em + 8px)'; - } - } - } - - &-success-bg { - .@{progress-prefix-cls}-rtl & { - right: 0; - left: auto; - } - } - - &-line &-text, - &-steps &-text { - .@{progress-prefix-cls}-rtl& { - margin-right: 8px; - margin-left: 0; - text-align: right; - } - } -} diff --git a/components/radio/style/index.less b/components/radio/style/index.less index 5b97f8d818a..07c7efab27a 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -19,7 +19,7 @@ } > .@{ant-prefix}-badge:not(:first-child) > .@{radio-prefix-cls}-button-wrapper { - border-left: none; + border-inline-start: none; } } @@ -29,7 +29,7 @@ position: relative; display: inline-flex; align-items: baseline; - margin-right: @radio-wrapper-margin-right; + margin-inline-end: @radio-wrapper-margin-right; cursor: pointer; &-disabled { @@ -195,7 +195,7 @@ span.@{radio-prefix-cls} + * { // strange align fix for chrome but works // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif border-top-width: @border-width-base + 0.02px; - border-left-width: 0; + border-inline-start-width: 0; cursor: pointer; transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s; @@ -206,7 +206,7 @@ span.@{radio-prefix-cls} + * { > .@{radio-prefix-cls}-button { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; z-index: -1; width: 100%; height: 100%; @@ -228,7 +228,7 @@ span.@{radio-prefix-cls} + * { &::before { position: absolute; top: @border-width-base * -1; - left: -1px; + inset-inline-start: -1px; display: block; box-sizing: content-box; width: 1px; @@ -241,12 +241,14 @@ span.@{radio-prefix-cls} + * { } &:first-child { - border-left: @border-width-base @border-style-base @border-color-base; - border-radius: @border-radius-base 0 0 @border-radius-base; + border-inline-start: @border-width-base @border-style-base @border-color-base; + border-start-start-radius: @border-radius-base; + border-end-start-radius: @border-radius-base; } &:last-child { - border-radius: 0 @border-radius-base @border-radius-base 0; + border-start-end-radius: @border-radius-base; + border-end-end-radius: @border-radius-base; } &:first-child:last-child { @@ -344,7 +346,7 @@ span.@{radio-prefix-cls} + * { } &:first-child { - border-left-color: @border-color-base; + border-inline-start-color: @border-color-base; } } @@ -367,5 +369,3 @@ span.@{radio-prefix-cls} + * { opacity: 0; } } - -@import './rtl'; diff --git a/components/radio/style/rtl.less b/components/radio/style/rtl.less deleted file mode 100644 index c3c367ac180..00000000000 --- a/components/radio/style/rtl.less +++ /dev/null @@ -1,61 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@radio-prefix-cls: ~'@{ant-prefix}-radio'; -@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group'; -@radio-prefix-cls-button-wrapper: ~'@{radio-prefix-cls}-button-wrapper'; - -.@{radio-group-prefix-cls} { - &&-rtl { - direction: rtl; - } -} - -// 一般状态 -.@{radio-prefix-cls}-wrapper { - &&-rtl { - margin-right: 0; - margin-left: @radio-wrapper-margin-right; - direction: rtl; - } -} - -.@{radio-prefix-cls-button-wrapper} { - &&-rtl { - border-right-width: 0; - border-left-width: @border-width-base; - } - - &:not(:first-child) { - &::before { - .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& { - right: -1px; - left: 0; - } - } - } - - &:first-child { - .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& { - border-right: @border-width-base @border-style-base @border-color-base; - border-radius: 0 @border-radius-base @border-radius-base 0; - } - .@{radio-prefix-cls-button-wrapper}-checked:not([class*=~"' @{radio-prefix-cls}-button-wrapper-disabled'"])& { - border-right-color: @radio-button-hover-color; - } - } - - &:last-child { - .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& { - border-radius: @border-radius-base 0 0 @border-radius-base; - } - } - - &-disabled { - &:first-child { - .@{radio-prefix-cls-button-wrapper}.@{radio-prefix-cls-button-wrapper}-rtl& { - border-right-color: @border-color-base; - } - } - } -} diff --git a/components/rate/style/index.less b/components/rate/style/index.less index 56a274b1bf4..0119b00be45 100644 --- a/components/rate/style/index.less +++ b/components/rate/style/index.less @@ -30,7 +30,7 @@ cursor: pointer; &:not(:last-child) { - margin-right: 8px; + margin-inline-end: 8px; } > div { @@ -63,7 +63,7 @@ &-first { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 50%; height: 100%; overflow: hidden; @@ -87,5 +87,3 @@ font-size: @font-size-base; } } - -@import './rtl'; diff --git a/components/rate/style/rtl.less b/components/rate/style/rtl.less deleted file mode 100644 index 6a997955e50..00000000000 --- a/components/rate/style/rtl.less +++ /dev/null @@ -1,21 +0,0 @@ -.@{rate-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-star { - &:not(:last-child) { - .@{rate-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 8px; - } - } - - &-first { - .@{rate-prefix-cls}-rtl & { - right: 0; - left: auto; - } - } - } -} diff --git a/components/result/style/index.less b/components/result/style/index.less index 78cb70b827a..1a6c6806c33 100644 --- a/components/result/style/index.less +++ b/components/result/style/index.less @@ -57,10 +57,10 @@ text-align: center; > * { - margin-right: 8px; + margin-inline-end: 8px; &:last-child { - margin-right: 0; + margin-inline-end: 0; } } } @@ -71,5 +71,3 @@ background-color: @background-color-light; } } - -@import './rtl'; diff --git a/components/result/style/rtl.less b/components/result/style/rtl.less deleted file mode 100644 index a2eea06d28d..00000000000 --- a/components/result/style/rtl.less +++ /dev/null @@ -1,25 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@result-prefix-cls: ~'@{ant-prefix}-result'; - -.@{result-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-extra { - > * { - .@{result-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 8px; - } - - &:last-child { - .@{result-prefix-cls}-rtl & { - margin-left: 0; - } - } - } - } -} diff --git a/components/segmented/style/index.less b/components/segmented/style/index.less index d4bdc5a24cc..b25747c08f0 100644 --- a/components/segmented/style/index.less +++ b/components/segmented/style/index.less @@ -97,13 +97,13 @@ // syntactic sugar to add `icon` for Segmented Item &-icon + * { - margin-left: (@margin-sm / 2); + margin-inline-start: (@margin-sm / 2); } &-input { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 0; height: 0; opacity: 0; @@ -150,5 +150,3 @@ will-change: transform, width; } } - -@import './rtl'; diff --git a/components/segmented/style/rtl.less b/components/segmented/style/rtl.less deleted file mode 100644 index c459bf035ea..00000000000 --- a/components/segmented/style/rtl.less +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@segmented-prefix-cls: ~'@{ant-prefix}-segmented'; - -.@{segmented-prefix-cls} { - &&-rtl { - direction: rtl; - } - - &&-rtl &-item-icon { - margin-right: 0; - margin-left: 6px; - } -} diff --git a/components/select/style/index.less b/components/select/style/index.less index 4ad4d9f3213..8089dd6202c 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -414,5 +414,3 @@ // ===================== Compact Item Styles ===================== .compact-item(@select-prefix-cls, ~'@{select-prefix-cls}-selector', ~'@{select-prefix-cls}-focused'); } - -@import './rtl'; diff --git a/components/select/style/rtl.less b/components/select/style/rtl.less deleted file mode 100644 index 5af1cce4a03..00000000000 --- a/components/select/style/rtl.less +++ /dev/null @@ -1,13 +0,0 @@ -@select-prefix-cls: ~'@{ant-prefix}-select'; - -.@{select-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-dropdown { - &-rtl { - direction: rtl; - } - } -} diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index 359d727824f..1c8eed7a0ee 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -16,7 +16,7 @@ &-header { display: table-cell; - padding-right: @padding-md; + padding-inline-end: @padding-md; vertical-align: top; // Avatar @@ -287,4 +287,35 @@ } } -@import './rtl'; + + +.@{skeleton-prefix-cls} { + + // With active animation + &.@{skeleton-prefix-cls}-active { + & .@{skeleton-prefix-cls}-content { + .@{skeleton-title-prefix-cls}, + .@{skeleton-paragraph-prefix-cls} > li { + &:dir(rtl) { + animation-name: ~'@{skeleton-prefix-cls}-loading-reverse'; + } + } + } + + .@{skeleton-avatar-prefix-cls} { + &:dir(rtl) { + animation-name: ~'@{skeleton-prefix-cls}-loading-reverse'; + } + } + } +} + +@keyframes ~"@{skeleton-prefix-cls}-loading-reverse" { + 0% { + background-position: 0% 50%; + } + + 100% { + background-position: 100% 50%; + } +} diff --git a/components/skeleton/style/rtl.less b/components/skeleton/style/rtl.less deleted file mode 100644 index 8ba4be3730a..00000000000 --- a/components/skeleton/style/rtl.less +++ /dev/null @@ -1,48 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton'; -@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar'; -@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title'; -@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph'; - -.@{skeleton-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-header { - .@{skeleton-prefix-cls}-rtl & { - padding-right: 0; - padding-left: 16px; - } - } - - // With active animation - &.@{skeleton-prefix-cls}-active { - & .@{skeleton-prefix-cls}-content { - .@{skeleton-title-prefix-cls}, - .@{skeleton-paragraph-prefix-cls} > li { - .@{skeleton-prefix-cls}-rtl& { - animation-name: ~'@{skeleton-prefix-cls}-loading-rtl'; - } - } - } - - .@{skeleton-avatar-prefix-cls} { - .@{skeleton-prefix-cls}-rtl& { - animation-name: ~'@{skeleton-prefix-cls}-loading-rtl'; - } - } - } -} - -@keyframes ~"@{skeleton-prefix-cls}-loading-rtl" { - 0% { - background-position: 0% 50%; - } - - 100% { - background-position: 100% 50%; - } -} diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 87a57aa5548..8f41b062271 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -70,9 +70,9 @@ &::after { position: absolute; top: -6px; - right: -6px; + inset-inline-end: -6px; bottom: -6px; - left: -6px; + inset-inline-start: -6px; content: ''; } } @@ -92,7 +92,7 @@ &-mark { position: absolute; top: 14px; - left: 0; + inset-inline-start: 0; width: 100%; font-size: @font-size-base; } @@ -178,18 +178,18 @@ .@{slider-prefix-cls}-handle { margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2 - margin-left: @slider-handle-margin-left; + margin-inline-start: @slider-handle-margin-left; } .@{slider-prefix-cls}-mark { top: 0; - left: 12px; + inset-inline-start: 12px; width: 18px; height: 100%; } .@{slider-prefix-cls}-mark-text { - left: 4px; + inset-inline-start: 4px; white-space: nowrap; } @@ -200,7 +200,7 @@ .@{slider-prefix-cls}-dot { top: auto; - margin-left: -2px; + margin-inline-start: -2px; } } @@ -211,5 +211,3 @@ } } } - -@import './rtl'; diff --git a/components/slider/style/rtl.less b/components/slider/style/rtl.less deleted file mode 100644 index d78a54a8e0f..00000000000 --- a/components/slider/style/rtl.less +++ /dev/null @@ -1,49 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@slider-prefix-cls: ~'@{ant-prefix}-slider'; - -.@{slider-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-mark { - .@{slider-prefix-cls}-rtl & { - right: 0; - left: auto; - } - } -} - -.vertical() { - &-vertical { - .@{slider-prefix-cls}-handle { - .@{slider-prefix-cls}-rtl& { - margin-right: -5px; - margin-left: 0; - } - } - - .@{slider-prefix-cls}-mark { - .@{slider-prefix-cls}-rtl& { - right: 12px; - left: auto; - } - } - - .@{slider-prefix-cls}-mark-text { - .@{slider-prefix-cls}-rtl& { - right: 4px; - left: auto; - } - } - - .@{slider-prefix-cls}-dot { - .@{slider-prefix-cls}-rtl& { - right: 2px; - left: auto; - } - } - } -} diff --git a/components/space/style/index.less b/components/space/style/index.less index fa952a809f7..3f2f9d3d7d0 100644 --- a/components/space/style/index.less +++ b/components/space/style/index.less @@ -37,4 +37,3 @@ } @import './compact'; -@import './rtl'; diff --git a/components/space/style/rtl.less b/components/space/style/rtl.less deleted file mode 100644 index 5a2a9fe2215..00000000000 --- a/components/space/style/rtl.less +++ /dev/null @@ -1,14 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@space-prefix-cls: ~'@{ant-prefix}-space'; - -.@{space-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-compact-rtl { - direction: rtl; - } -} diff --git a/components/spin/style/index.less b/components/spin/style/index.less index 03db824380e..d1e91639210 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -216,5 +216,3 @@ transform: rotate(360deg); } } - -@import './rtl'; diff --git a/components/spin/style/rtl.less b/components/spin/style/rtl.less deleted file mode 100644 index 03fb9b257c7..00000000000 --- a/components/spin/style/rtl.less +++ /dev/null @@ -1,20 +0,0 @@ -.@{spin-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-dot { - &-spin { - .@{spin-prefix-cls}-rtl & { - transform: rotate(-45deg); - animation-name: antRotateRtl; - } - } - } -} - -@keyframes antRotateRtl { - to { - transform: rotate(-405deg); - } -} diff --git a/components/splitter/style/index.less b/components/splitter/style/index.less index 10887218405..8b76873cea8 100644 --- a/components/splitter/style/index.less +++ b/components/splitter/style/index.less @@ -261,5 +261,3 @@ } } } - -@import './rtl'; diff --git a/components/splitter/style/rtl.less b/components/splitter/style/rtl.less deleted file mode 100644 index f0a4ea9d15b..00000000000 --- a/components/splitter/style/rtl.less +++ /dev/null @@ -1,20 +0,0 @@ -.@{splitter-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-dot { - &-spin { - .@{splitter-prefix-cls}-rtl & { - transform: rotate(-45deg); - animation-name: antRotateRtl; - } - } - } -} - -@keyframes antRotateRtl { - to { - transform: rotate(-405deg); - } -} diff --git a/components/statistic/style/index.less b/components/statistic/style/index.less index e3c2536e138..28ea119caec 100644 --- a/components/statistic/style/index.less +++ b/components/statistic/style/index.less @@ -32,13 +32,11 @@ } &-prefix { - margin-right: 4px; + margin-inline-end: 4px; } &-suffix { - margin-left: 4px; + margin-inline-start: 4px; } } } - -@import './rtl'; diff --git a/components/statistic/style/rtl.less b/components/statistic/style/rtl.less deleted file mode 100644 index 93e264a359d..00000000000 --- a/components/statistic/style/rtl.less +++ /dev/null @@ -1,21 +0,0 @@ -.@{statistic-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-content { - &-prefix { - .@{statistic-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 4px; - } - } - - &-suffix { - .@{statistic-prefix-cls}-rtl & { - margin-right: 4px; - margin-left: 0; - } - } - } -} diff --git a/components/steps/style/index.less b/components/steps/style/index.less index a57ecd1117e..2e00f197c02 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -27,6 +27,7 @@ width: 100%; font-size: 0; text-align: initial; + } .@{steps-prefix-cls}-item { @@ -251,5 +252,287 @@ @import './label-placement'; @import './progress-dot'; @import './nav'; -@import './rtl'; + +.@{steps-prefix-cls}-item { + &-icon { + &:dir(rtl) { + margin-right: 0; + margin-left: 8px; + } + } + + &-tail { + &:dir(rtl) { + right: 0; + left: auto; + } + } + + &-title { + &:dir(rtl) { + padding-right: 0; + padding-left: 16px; + } + + .@{steps-prefix-cls}-item-subtitle { + &:dir(rtl) { + float: left; + margin-right: 8px; + margin-left: 0; + } + } + + &::after { + &:dir(rtl) { + right: 100%; + left: auto; + } + } + } +} + +.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) { + .@{steps-prefix-cls}-item { + &:dir(rtl) { + padding-right: 16px; + padding-left: 0; + } + + &:first-child { + &:dir(rtl) { + padding-right: 0; + } + } + + &:last-child .@{steps-prefix-cls}-item-title { + &:dir(rtl) { + padding-left: 0; + } + } + } +} + +// custom-icon +.@{steps-prefix-cls}-item-custom { + .@{steps-prefix-cls}-item-icon { + > .@{steps-prefix-cls}-icon { + &:dir(rtl) { + right: 0.5px; + left: auto; + } + } + } +} + +// nav +.@{steps-prefix-cls}-navigation { + &.@{steps-prefix-cls}-small { + .@{steps-prefix-cls}-item { + &-container { + &:dir(rtl) { + margin-right: -12px; + margin-left: 0; + } + } + } + } + + .@{steps-prefix-cls}-item { + &-container { + &:dir(rtl) { + margin-right: -16px; + margin-left: 0; + text-align: right; + } + + .@{steps-prefix-cls}-item-title { + &:dir(rtl) { + padding-left: 0; + } + } + } + + &::after { + &:dir(rtl) { + right: 100%; + left: auto; + margin-right: -2px; + margin-left: 0; + transform: rotate(225deg); + } + } + } +} + +// small +.@{steps-prefix-cls}-small { + &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) + .@{steps-prefix-cls}-item { + &:dir(rtl) { + padding-right: 12px; + padding-left: 0; + } + + &:first-child { + &:dir(rtl) { + padding-right: 0; + } + } + } + + .@{steps-prefix-cls}-item-title { + &:dir(rtl) { + padding-right: 0; + padding-left: 12px; + } + } +} + +// vertical +.@{steps-prefix-cls}-vertical { + > .@{steps-prefix-cls}-item { + .@{steps-prefix-cls}-item-icon { + &:dir(rtl) { + float: right; + margin-right: 0; + margin-left: @steps-vertical-icon-width; + } + } + } + + > .@{steps-prefix-cls}-item + > .@{steps-prefix-cls}-item-container + > .@{steps-prefix-cls}-item-tail { + &:dir(rtl) { + right: @steps-vertical-tail-width; + left: auto; + } + } + + &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container { + .@{steps-prefix-cls}-item-tail { + &:dir(rtl) { + right: @steps-vertical-tail-width-sm; + left: auto; + } + } + } +} + +// label +.@{steps-prefix-cls}-label-vertical { + .@{steps-prefix-cls}-item { + &-title { + &:dir(rtl) { + padding-left: 0; + } + } + } +} + +// progress-dot +.@{steps-prefix-cls}-dot, +.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small { + .@{steps-prefix-cls}-item { + &-tail { + &:dir(rtl) { + margin: 0 (@steps-description-max-width / 2) 0 0; + } + + &::after { + &:dir(rtl) { + margin-right: 12px; + margin-left: 0; + } + } + } + + &:first-child .@{steps-prefix-cls}-icon-dot { + &:dir(rtl) { + right: 2px; + left: auto; + } + } + + &-icon { + &:dir(rtl) { + margin-right: 67px; + margin-left: 0; + } + + .@{steps-prefix-cls}-icon-dot { + &:dir(rtl) { + float: right; + } + + /* expand hover area */ + &::after { + &:dir(rtl) { + right: -26px; + left: auto; + } + } + } + } + } +} + +.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot { + .@{steps-prefix-cls}-item-icon { + &:dir(rtl) { + margin-right: 0; + margin-left: 16px; + } + } + + // https://github.com/ant-design/ant-design/issues/18354 + .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { + &:dir(rtl) { + right: -9px; + left: auto; + } + } + + .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot { + &:dir(rtl) { + right: 0; + left: auto; + } + } + + .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot { + &:dir(rtl) { + right: -2px; + left: auto; + } + } +} + +// RTL Steps with progress +.@{steps-prefix-cls}-with-progress:dir(rtl) { + &.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item { + padding-right: 4px; + > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { + right: @steps-vertical-tail-width + 3; + } + } + + &.@{steps-prefix-cls}-small.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item { + > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { + right: @steps-vertical-tail-width-sm + 3; + } + } + + &.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal { + .@{steps-prefix-cls}-item:first-child { + padding-right: 4px; + padding-left: 0; + + &.@{steps-prefix-cls}-item-active { + padding-right: 4px; + } + } + } +} + @import './progress.less'; diff --git a/components/steps/style/rtl.less b/components/steps/style/rtl.less deleted file mode 100644 index 7d92d83cce7..00000000000 --- a/components/steps/style/rtl.less +++ /dev/null @@ -1,287 +0,0 @@ -.@{steps-prefix-cls} { - &-rtl { - direction: rtl; - } -} - -.@{steps-prefix-cls}-item { - &-icon { - .@{steps-prefix-cls}.@{steps-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 8px; - } - } - - &-tail { - .@{steps-prefix-cls}-rtl & { - right: 0; - left: auto; - } - } - - &-title { - .@{steps-prefix-cls}-rtl & { - padding-right: 0; - padding-left: 16px; - } - - .@{steps-prefix-cls}-item-subtitle { - .@{steps-prefix-cls}-rtl & { - float: left; - margin-right: 8px; - margin-left: 0; - } - } - - &::after { - .@{steps-prefix-cls}-rtl & { - right: 100%; - left: auto; - } - } - } -} - -.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) { - .@{steps-prefix-cls}-item { - .@{steps-prefix-cls}-rtl& { - padding-right: 16px; - padding-left: 0; - } - - &:first-child { - .@{steps-prefix-cls}-rtl& { - padding-right: 0; - } - } - - &:last-child .@{steps-prefix-cls}-item-title { - .@{steps-prefix-cls}-rtl& { - padding-left: 0; - } - } - } -} - -// custom-icon -.@{steps-prefix-cls}-item-custom { - .@{steps-prefix-cls}-item-icon { - > .@{steps-prefix-cls}-icon { - .@{steps-prefix-cls}-rtl & { - right: 0.5px; - left: auto; - } - } - } -} - -// nav -.@{steps-prefix-cls}-navigation { - &.@{steps-prefix-cls}-small { - .@{steps-prefix-cls}-item { - &-container { - .@{steps-prefix-cls}-rtl& { - margin-right: -12px; - margin-left: 0; - } - } - } - } - - .@{steps-prefix-cls}-item { - &-container { - .@{steps-prefix-cls}-rtl& { - margin-right: -16px; - margin-left: 0; - text-align: right; - } - - .@{steps-prefix-cls}-item-title { - .@{steps-prefix-cls}-rtl& { - padding-left: 0; - } - } - } - - &::after { - .@{steps-prefix-cls}-rtl& { - right: 100%; - left: auto; - margin-right: -2px; - margin-left: 0; - transform: rotate(225deg); - } - } - } -} - -// small -.@{steps-prefix-cls}-small { - &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) - .@{steps-prefix-cls}-item { - .@{steps-prefix-cls}-rtl& { - padding-right: 12px; - padding-left: 0; - } - - &:first-child { - .@{steps-prefix-cls}-rtl& { - padding-right: 0; - } - } - } - - .@{steps-prefix-cls}-item-title { - .@{steps-prefix-cls}-rtl& { - padding-right: 0; - padding-left: 12px; - } - } -} - -// vertical -.@{steps-prefix-cls}-vertical { - > .@{steps-prefix-cls}-item { - .@{steps-prefix-cls}-item-icon { - .@{steps-prefix-cls}-rtl& { - float: right; - margin-right: 0; - margin-left: @steps-vertical-icon-width; - } - } - } - - > .@{steps-prefix-cls}-item - > .@{steps-prefix-cls}-item-container - > .@{steps-prefix-cls}-item-tail { - .@{steps-prefix-cls}-rtl& { - right: @steps-vertical-tail-width; - left: auto; - } - } - - &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container { - .@{steps-prefix-cls}-item-tail { - .@{steps-prefix-cls}-rtl& { - right: @steps-vertical-tail-width-sm; - left: auto; - } - } - } -} - -// label -.@{steps-prefix-cls}-label-vertical { - .@{steps-prefix-cls}-item { - &-title { - .@{steps-prefix-cls}-rtl& { - padding-left: 0; - } - } - } -} - -// progress-dot -.@{steps-prefix-cls}-dot, -.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small { - .@{steps-prefix-cls}-item { - &-tail { - .@{steps-prefix-cls}-rtl& { - margin: 0 (@steps-description-max-width / 2) 0 0; - } - - &::after { - .@{steps-prefix-cls}-rtl& { - margin-right: 12px; - margin-left: 0; - } - } - } - - &:first-child .@{steps-prefix-cls}-icon-dot { - .@{steps-prefix-cls}-rtl& { - right: 2px; - left: auto; - } - } - - &-icon { - .@{steps-prefix-cls}-rtl& { - margin-right: 67px; - margin-left: 0; - } - - .@{steps-prefix-cls}-icon-dot { - .@{steps-prefix-cls}-rtl& { - float: right; - } - - /* expand hover area */ - &::after { - .@{steps-prefix-cls}-rtl& { - right: -26px; - left: auto; - } - } - } - } - } -} - -.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot { - .@{steps-prefix-cls}-item-icon { - .@{steps-prefix-cls}-rtl& { - margin-right: 0; - margin-left: 16px; - } - } - - // https://github.com/ant-design/ant-design/issues/18354 - .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { - .@{steps-prefix-cls}-rtl& { - right: -9px; - left: auto; - } - } - - .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot { - .@{steps-prefix-cls}-rtl& { - right: 0; - left: auto; - } - } - - .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot { - .@{steps-prefix-cls}-rtl& { - right: -2px; - left: auto; - } - } -} - -// RTL Steps with progress -.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress { - &.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item { - padding-right: 4px; - > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { - right: @steps-vertical-tail-width + 3; - } - } - - &.@{steps-prefix-cls}-small.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item { - > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { - right: @steps-vertical-tail-width-sm + 3; - } - } - - &.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal { - .@{steps-prefix-cls}-item:first-child { - padding-right: 4px; - padding-left: 0; - - &.@{steps-prefix-cls}-item-active { - padding-right: 4px; - } - } - } -} diff --git a/components/style/mixins/compact-item.less b/components/style/mixins/compact-item.less index 7ae12f5f4d6..48dffbd8be2 100644 --- a/components/style/mixins/compact-item.less +++ b/components/style/mixins/compact-item.less @@ -5,26 +5,14 @@ border-radius: 0; } - &-item.@{prefix-cls}&-first-item:not(&-last-item):not(&-item-rtl) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + &-item.@{prefix-cls}&-first-item:not(&-last-item) { + border-start-end-radius: 0; + border-end-end-radius: 0; } - &-item.@{prefix-cls}&-last-item:not(&-first-item):not(&-item-rtl) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - // ----------rtl for first item---------- - &-item.@{prefix-cls}&-item-rtl&-first-item:not(&-last-item) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - // ----------rtl for last item---------- - &-item.@{prefix-cls}&-item-rtl&-last-item:not(&-first-item) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + &-item.@{prefix-cls}&-last-item:not(&-first-item) { + border-start-start-radius: 0; + border-end-start-radius: 0; } } @@ -34,26 +22,14 @@ border-radius: 0; } - &-item&-first-item.@{prefix-cls}:not(&-last-item):not(&-item-rtl) .@{bordered-item-cls} { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + &-item&-first-item.@{prefix-cls}:not(&-last-item) .@{bordered-item-cls} { + border-start-end-radius: 0; + border-end-end-radius: 0; } - &-item&-last-item.@{prefix-cls}:not(&-first-item):not(&-item-rtl) .@{bordered-item-cls} { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - // ----------rtl for first item---------- - &-item.@{prefix-cls}&-first-item&-item-rtl:not(&-last-item) .@{bordered-item-cls} { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - // ----------rtl for last item---------- - &-item.@{prefix-cls}&-last-item&-item-rtl:not(&-first-item) .@{bordered-item-cls} { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + &-item&-last-item.@{prefix-cls}:not(&-first-item) .@{bordered-item-cls} { + border-start-start-radius: 0; + border-end-start-radius: 0; } } } @@ -61,13 +37,8 @@ .compact-item-border(@prefix-cls, @bordered-item-cls: null, @special-open-cls) { & when (@bordered-item-cls = null) { // border collapse - &-item:not(&-last-item):not(&-item-rtl) { - margin-right: -@border-width-base; - } - - // rtl border collapse - &-item:not(&-last-item)&-item-rtl { - margin-left: -@border-width-base; + &-item:not(&-last-item) { + margin-inline-end: -@border-width-base; } &-item { @@ -93,12 +64,7 @@ & when (not (@bordered-item-cls = null)) { // border collapse &-item:not(&-last-item) { - margin-right: -@border-width-base; - - &.@{prefix-cls}-compact-item-rtl { - margin-right: 0; - margin-left: -@border-width-base; - } + margin-inline-end: -@border-width-base; } &-item { diff --git a/components/style/themes/default.less b/components/style/themes/default.less index dfe675a016a..285ccfd8598 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -820,7 +820,6 @@ @tabs-bar-margin: 0 0 @margin-md 0; @tabs-horizontal-gutter: 32px; @tabs-horizontal-margin: 0 0 0 @tabs-horizontal-gutter; -@tabs-horizontal-margin-rtl: 0 0 0 32px; @tabs-horizontal-padding: @padding-sm 0; @tabs-horizontal-padding-lg: @padding-md 0; @tabs-horizontal-padding-sm: @padding-xs 0; diff --git a/components/style/themes/variable.less b/components/style/themes/variable.less index 47a18d5eb03..8d342915d36 100644 --- a/components/style/themes/variable.less +++ b/components/style/themes/variable.less @@ -874,7 +874,6 @@ @tabs-bar-margin: 0 0 @margin-md 0; @tabs-horizontal-gutter: 32px; @tabs-horizontal-margin: 0 0 0 @tabs-horizontal-gutter; -@tabs-horizontal-margin-rtl: 0 0 0 32px; @tabs-horizontal-padding: @padding-sm 0; @tabs-horizontal-padding-lg: @padding-md 0; @tabs-horizontal-padding-sm: @padding-xs 0; diff --git a/components/switch/style/index.less b/components/switch/style/index.less index 5ead4105dc3..28d9c879f25 100644 --- a/components/switch/style/index.less +++ b/components/switch/style/index.less @@ -55,21 +55,23 @@ // ========================= Inner ========================== &-inner { display: block; - margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max; + margin-block: 0; + margin-inline: @switch-inner-margin-max @switch-inner-margin-min; color: @text-color-inverse; font-size: @font-size-sm; transition: margin @switch-duration; } &-checked &-inner { - margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min; + margin-block: 0; + margin-inline: @switch-inner-margin-min @switch-inner-margin-max; } // ========================= Handle ========================= &-handle { position: absolute; top: @switch-padding; - left: @switch-padding; + inset-inline-start: @switch-padding; width: @switch-pin-size; height: @switch-pin-size; transition: all @switch-duration ease-in-out; @@ -77,9 +79,9 @@ &::before { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 0; - left: 0; + inset-inline-start: 0; background-color: @switch-bg; border-radius: (@switch-pin-size / 2); box-shadow: 0 2px 4px 0 @switch-shadow-color; @@ -89,19 +91,19 @@ } &-checked &-handle { - left: calc(100% - @switch-pin-size - @switch-padding); + inset-inline-start: calc(100% - @switch-pin-size - @switch-padding); } &:not(&-disabled):active { .@{switch-prefix-cls}-handle::before { - right: -30%; - left: 0; + inset-inline-end: -30%; + inset-inline-start: 0; } &.@{switch-prefix-cls}-checked { .@{switch-prefix-cls}-handle::before { - right: 0; - left: -30%; + inset-inline-end: 0; + inset-inline-start: -30%; } } } @@ -125,7 +127,8 @@ line-height: @switch-sm-height; .@{switch-prefix-cls}-inner { - margin: 0 @switch-sm-inner-margin-min 0 @switch-sm-inner-margin-max; + margin-block: 0; + margin-inline: @switch-sm-inner-margin-max @switch-sm-inner-margin-min; font-size: @font-size-sm; } @@ -141,14 +144,13 @@ &.@{switch-prefix-cls}-checked { .@{switch-prefix-cls}-inner { - margin: 0 @switch-sm-inner-margin-max 0 @switch-sm-inner-margin-min; + margin-block: 0; + margin-inline: @switch-sm-inner-margin-min @switch-sm-inner-margin-max; } .@{switch-prefix-cls}-handle { - left: calc(100% - @switch-sm-pin-size - @switch-padding); + inset-inline-start: calc(100% - @switch-sm-pin-size - @switch-padding); } } } } - -@import './rtl'; diff --git a/components/switch/style/rtl.less b/components/switch/style/rtl.less deleted file mode 100644 index 7a7de94bba4..00000000000 --- a/components/switch/style/rtl.less +++ /dev/null @@ -1,52 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@switch-prefix-cls: ~'@{ant-prefix}-switch'; - -@switch-pin-size: @switch-height - 4px; -@switch-sm-pin-size: @switch-sm-height - 4px; - -.@{switch-prefix-cls}-rtl { - direction: rtl; - - .@{switch-prefix-cls}-inner { - margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min; - } - - .@{switch-prefix-cls}-handle { - right: @switch-padding; - left: auto; - } - - &:not(&-disabled):active { - .@{switch-prefix-cls}-handle::before { - right: 0; - left: -30%; - } - - &.@{switch-prefix-cls}-checked { - .@{switch-prefix-cls}-handle::before { - right: -30%; - left: 0; - } - } - } - - &.@{switch-prefix-cls}-checked { - .@{switch-prefix-cls}-inner { - margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max; - } - - .@{switch-prefix-cls}-handle { - right: calc(100% - @switch-pin-size - @switch-padding); - } - } - - &.@{switch-prefix-cls}-small { - &.@{switch-prefix-cls}-checked { - .@{switch-prefix-cls}-handle { - right: calc(100% - @switch-sm-pin-size - @switch-padding); - } - } - } -} diff --git a/components/table/style/index.less b/components/table/style/index.less index c4ec3103368..d5d3885837b 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -18,6 +18,7 @@ clear: both; max-width: 100%; .clearfix(); + } .@{table-prefix-cls} { @@ -30,7 +31,7 @@ // https://github.com/ant-design/ant-design/issues/17611 table { width: 100%; - text-align: left; + text-align: start; border-radius: @table-border-radius-base @table-border-radius-base 0 0; border-collapse: separate; border-spacing: 0; @@ -90,7 +91,7 @@ position: relative; color: @table-header-color; font-weight: 500; - text-align: left; + text-align: start; background: @table-header-bg; border-bottom: @border-width-base @border-style-base @table-border-color; transition: background 0.3s ease; @@ -102,7 +103,7 @@ &:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before { position: absolute; top: 50%; - right: 0; + inset-inline-end: 0; width: 1px; height: 1.6em; background-color: @table-header-cell-split-color; @@ -267,9 +268,9 @@ &::after { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; content: ''; @@ -277,7 +278,7 @@ } &-column-sorter { - margin-left: 4px; + margin-inline-start: 4px; color: @table-header-icon-color; font-size: 0; transition: color 0.3s; @@ -316,7 +317,8 @@ position: relative; display: flex; align-items: center; - margin: -4px (-@table-padding-horizontal / 2) -4px 4px; + margin-block: -4px; + margin-inline: (-@table-padding-horizontal / 2) 4px; padding: 0 4px; color: @table-header-icon-color; font-size: @font-size-sm; @@ -491,14 +493,14 @@ } &-row-indent { - float: left; + float: inline-start; height: 1px; } &-row-expand-icon { .operation-unit(); position: relative; - float: left; + float: inline-start; box-sizing: border-box; width: @expand-icon-size; height: @expand-icon-size; @@ -531,15 +533,14 @@ &::before { top: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)); - right: 3px; - left: 3px; + inset-inline: 3px; height: @border-width-base; } &::after { top: 3px; bottom: 3px; - left: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)); + inset-inline-start: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)); width: @border-width-base; transform: rotate(90deg); } @@ -567,7 +568,7 @@ .@{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; + margin-inline-end: @padding-xs; } } @@ -760,4 +761,27 @@ } @import './radius'; -@import './rtl'; + +.@{table-prefix-cls} { + &-pagination-left:dir(rtl) { + justify-content: flex-end; + } + + &-pagination-right:dir(rtl) { + justify-content: flex-start; + } + + &-row-expand-icon:dir(rtl) { + &::after { + transform: rotate(-90deg); + } + + &-collapsed::before { + transform: rotate(180deg); + } + + &-collapsed::after { + transform: rotate(0deg); + } + } +} diff --git a/components/table/style/patch.less b/components/table/style/patch.less index 75b9df80cea..2a915bc4872 100644 --- a/components/table/style/patch.less +++ b/components/table/style/patch.less @@ -47,10 +47,6 @@ cdk-virtual-scroll-viewport.ant-table-body { } } -.ant-table-wrapper-rtl .ant-table thead > tr > th.ant-table-selection-column { - text-align: center; -} - // virtual scroll border .@{table-prefix-cls}.@{table-prefix-cls}-bordered { @@ -184,4 +180,4 @@ cdk-virtual-scroll-viewport.ant-table-body { width: 100%; } } -} \ No newline at end of file +} diff --git a/components/table/style/rtl.less b/components/table/style/rtl.less deleted file mode 100644 index 2aba565e3cd..00000000000 --- a/components/table/style/rtl.less +++ /dev/null @@ -1,168 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@table-prefix-cls: ~'@{ant-prefix}-table'; -@table-wrapepr-cls: ~'@{table-prefix-cls}-wrapper'; -@table-wrapepr-rtl-cls: ~'@{table-prefix-cls}-wrapper-rtl'; - -.@{table-prefix-cls}-wrapper { - &-rtl { - direction: rtl; - } -} - -.@{table-prefix-cls} { - &-rtl { - direction: rtl; - } - - table { - .@{table-wrapepr-rtl-cls} & { - text-align: right; - } - } - - // ============================ Header ============================ - &-thead { - > tr { - > th { - &[colspan]:not([colspan='1']) { - .@{table-wrapepr-rtl-cls} & { - text-align: center; - } - } - - &:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before { - .@{table-wrapepr-rtl-cls} & { - right: auto; - left: 0; - } - } - - .@{table-wrapepr-rtl-cls} & { - text-align: right; - } - } - } - } - - // ============================= Body ============================= - &-tbody { - > tr { - // ========================= Nest Table =========================== - .@{table-prefix-cls}-wrapper:only-child { - .@{table-prefix-cls}.@{table-prefix-cls}-rtl { - margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal; - } - } - } - } - - // ========================== Pagination ========================== - &-pagination { - &-left { - .@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & { - justify-content: flex-end; - } - } - - &-right { - .@{table-wrapepr-cls}.@{table-wrapepr-rtl-cls} & { - justify-content: flex-start; - } - } - } - - // ================================================================ - // = Function = - // ================================================================ - - // ============================ Sorter ============================ - &-column-sorter { - .@{table-wrapepr-rtl-cls} & { - margin-right: 4px; - margin-left: 0; - } - } - - // ============================ Filter ============================ - &-filter-column-title { - .@{table-wrapepr-rtl-cls} & { - padding: @table-padding-vertical @table-padding-horizontal @table-padding-vertical 2.3em; - } - } - - &-thead tr th.@{table-prefix-cls}-column-has-sorters { - .@{table-prefix-cls}-filter-column-title { - .@{table-prefix-cls}-rtl & { - padding: 0 0 0 2.3em; - } - } - } - - &-filter-trigger { - .@{table-wrapepr-rtl-cls} & { - margin: -4px 4px -4px (-@table-padding-horizontal / 2); - } - } - - // Dropdown - &-filter-dropdown { - // Checkbox - &, - &-submenu { - .@{ant-prefix}-checkbox-wrapper + span { - .@{ant-prefix}-dropdown-rtl &, - .@{ant-prefix}-dropdown-menu-submenu-rtl& { - padding-right: 8px; - padding-left: 0; - } - } - } - } - - // ========================== Selections ========================== - &-selection { - .@{table-wrapepr-rtl-cls} & { - text-align: center; - } - } - - // ========================== Expandable ========================== - &-row-indent { - .@{table-wrapepr-rtl-cls} & { - float: right; - } - } - - &-row-expand-icon { - .@{table-wrapepr-rtl-cls} & { - float: right; - } - - .@{table-prefix-cls}-row-indent + & { - .@{table-wrapepr-rtl-cls} & { - margin-right: 0; - margin-left: @padding-xs; - } - } - - &::after { - .@{table-wrapepr-rtl-cls} & { - transform: rotate(-90deg); - } - } - - &-collapsed::before { - .@{table-wrapepr-rtl-cls} & { - transform: rotate(180deg); - } - } - - &-collapsed::after { - .@{table-wrapepr-rtl-cls} & { - transform: rotate(0deg); - } - } - } -} diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index 4466b3946ab..8fa27ab0892 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -50,8 +50,8 @@ &&-card &-card-bar &-tab &-close-x { width: 16px; height: @font-size-base; - margin-right: -5px; - margin-left: 3px; + margin-inline-start: 3px; + margin-inline-end: -5px; overflow: hidden; color: @text-color-secondary; font-size: @font-size-sm; @@ -194,5 +194,3 @@ border-top-color: @component-background; } } - -@import './card-style.rtl.less'; diff --git a/components/tabs/style/card-style.rtl.less b/components/tabs/style/card-style.rtl.less deleted file mode 100644 index 1eebb562678..00000000000 --- a/components/tabs/style/card-style.rtl.less +++ /dev/null @@ -1,20 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@tab-prefix-cls: ~'@{ant-prefix}-tabs'; - -// card style -.@{tab-prefix-cls} { - &&-card &-card-bar &-tab &-close-x { - .@{tab-prefix-cls}-rtl& { - margin-right: 3px; - margin-left: -5px; - } - } - - &-extra-content { - .@{tab-prefix-cls}-rtl & { - float: left !important; - } - } -} diff --git a/components/tabs/style/card.less b/components/tabs/style/card.less index ccf23c4f3c1..20033d1d107 100644 --- a/components/tabs/style/card.less +++ b/components/tabs/style/card.less @@ -30,7 +30,7 @@ > .@{tab-prefix-cls}-nav, > div > .@{tab-prefix-cls}-nav { .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab { - margin-left: @tabs-card-gutter; + margin-inline-start: @tabs-card-gutter; } } } diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index f464ce112dd..078184c18f8 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -1,12 +1,13 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import './size'; -@import './rtl'; + +@tab-prefix-cls: ~'@{ant-prefix}-tabs'; + @import './position'; @import './dropdown'; @import './card'; -@tab-prefix-cls: ~'@{ant-prefix}-tabs'; .@{tab-prefix-cls} { .reset-component(); @@ -79,7 +80,7 @@ .@{tab-prefix-cls}-nav-add { min-width: @tabs-card-height; - margin-left: @tabs-card-gutter; + margin-inline-start: @tabs-card-gutter; padding: 0 @padding-xs; background: @tabs-card-head-background; border: @border-width-base @border-style-base @border-color-split; @@ -190,12 +191,12 @@ } .@{iconfont-css-prefix} { - margin-right: @margin-sm; + margin-inline-end: @margin-sm; } } &-tab + &-tab { - margin: @tabs-horizontal-margin; + margin-inline-start: @tabs-horizontal-gutter; } // =========================== TabPanes =========================== diff --git a/components/tabs/style/patch.less b/components/tabs/style/patch.less index d79ea5da2c1..3e7adaf06cc 100644 --- a/components/tabs/style/patch.less +++ b/components/tabs/style/patch.less @@ -71,15 +71,6 @@ } .@{tab-prefix-cls} { - &-rtl { - &-tab-next { - .@{tab-prefix-cls}-rtl & { - right: auto; - left: 2px; - } - } - } - &-tab-disabled a { color: @disabled-color; pointer-events: none; diff --git a/components/tabs/style/rtl.less b/components/tabs/style/rtl.less deleted file mode 100644 index bfe4d84ffe5..00000000000 --- a/components/tabs/style/rtl.less +++ /dev/null @@ -1,86 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@tab-prefix-cls: ~'@{ant-prefix}-tabs'; - -.@{tab-prefix-cls} { - &-rtl { - direction: rtl; - - .@{tab-prefix-cls}-nav { - .@{tab-prefix-cls}-tab { - margin: @tabs-horizontal-margin-rtl; - - &:last-of-type { - margin-left: 0; - } - - .@{iconfont-css-prefix} { - margin-right: 0; - margin-left: @margin-sm; - } - - .@{tab-prefix-cls}-tab-remove { - margin-right: @margin-xs; - margin-left: -@margin-xss; - - .@{iconfont-css-prefix} { - margin: 0; - } - } - } - } - - &.@{tab-prefix-cls}-left { - > .@{tab-prefix-cls}-nav { - order: 1; - } - > .@{tab-prefix-cls}-content-holder { - order: 0; - } - } - - &.@{tab-prefix-cls}-right { - > .@{tab-prefix-cls}-nav { - order: 0; - } - > .@{tab-prefix-cls}-content-holder { - order: 1; - } - } - } - - // ====================== Card ====================== - &-card { - &.@{tab-prefix-cls}-top, - &.@{tab-prefix-cls}-bottom { - > .@{tab-prefix-cls}-nav, - > div > .@{tab-prefix-cls}-nav { - .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab { - .@{tab-prefix-cls}-rtl& { - margin-right: @tabs-card-gutter; - margin-left: 0; - } - } - .@{tab-prefix-cls}-nav-add { - .@{tab-prefix-cls}-rtl& { - margin-right: @tabs-card-gutter; - margin-left: 0; - } - } - } - } - } -} - -.@{tab-prefix-cls}-dropdown { - &-rtl { - direction: rtl; - } - - &-menu-item { - .@{tab-prefix-cls}-dropdown-rtl & { - text-align: right; - } - } -} diff --git a/components/tag/style/index.less b/components/tag/style/index.less index f65fd369d43..b88c04a3c55 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -8,7 +8,7 @@ display: inline-block; height: auto; - margin-right: 8px; + margin-inline-end: 8px; padding: 0 7px; font-size: @tag-font-size; line-height: @tag-line-height; @@ -32,7 +32,7 @@ } &-close-icon { - margin-left: 3px; + margin-inline-start: 3px; color: @text-color-secondary; font-size: 10px; cursor: pointer; @@ -122,8 +122,6 @@ // To ensure that a space will be placed between character and `Icon`. > .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} { - margin-left: 7px; + margin-inline-start: 7px; } } - -@import './rtl'; diff --git a/components/tag/style/rtl.less b/components/tag/style/rtl.less deleted file mode 100644 index af7d0dfc500..00000000000 --- a/components/tag/style/rtl.less +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@tag-prefix-cls: ~'@{ant-prefix}-tag'; - -.@{tag-prefix-cls} { - &&-rtl { - margin-right: 0; - margin-left: 8px; - direction: rtl; - text-align: right; - } - - &-close-icon { - .@{tag-prefix-cls}-rtl & { - margin-right: 3px; - margin-left: 0; - } - } - - > .@{iconfont-css-prefix} + span, - > span + .@{iconfont-css-prefix} { - .@{tag-prefix-cls}-rtl& { - margin-right: 7px; - margin-left: 0; - } - } -} diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index bad5605116e..4456ba87716 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -20,9 +20,9 @@ &-tail { position: absolute; top: 10px; - left: 4px; + inset-inline-start: 4px; height: calc(100% - 10px); - border-left: @timeline-width solid @timeline-color; + border-inline-start: @timeline-width solid @timeline-color; } &-pending &-head { @@ -66,7 +66,7 @@ &-head-custom { position: absolute; top: 5.5px; - left: 5px; + inset-inline-start: 5px; width: auto; height: auto; margin-top: 0; @@ -75,13 +75,13 @@ text-align: center; border: 0; border-radius: 0; - transform: translate(-50%, -50%); + transform: translateX(-50%) translateY(-50%); } &-content { position: relative; top: -(@font-size-base * @line-height-base - @font-size-base) + 1px; - margin: 0 0 0 @margin-lg + 2px; + margin-inline-start: @margin-lg + 2px; overflow-wrap: break-word; } @@ -102,22 +102,22 @@ &-tail, &-head, &-head-custom { - left: 50%; + inset-inline-start: 50%; } &-head { - margin-left: -4px; + margin-inline-start: -4px; &-custom { - margin-left: 1px; + margin-inline-start: 1px; } } &-left { .@{timeline-prefix-cls}-item-content { - left: calc(50% - 4px); + inset-inline-start: calc(50% - 4px); width: calc(50% - 14px); - text-align: left; + text-align: start; } } @@ -125,7 +125,7 @@ .@{timeline-prefix-cls}-item-content { width: calc(50% - 12px); margin: 0; - text-align: right; + text-align: end; } } } @@ -136,7 +136,7 @@ .@{timeline-prefix-cls}-item-tail, .@{timeline-prefix-cls}-item-head, .@{timeline-prefix-cls}-item-head-custom { - left: calc(100% - 4px - @timeline-width); + inset-inline-start: calc(100% - 4px - @timeline-width); } .@{timeline-prefix-cls}-item-content { width: calc(100% - 18px); @@ -147,7 +147,7 @@ &&-pending &-item-last &-item-tail { display: block; height: calc(100% - 14px); - border-left: 2px dotted @timeline-color; + border-inline-start: 2px dotted @timeline-color; } &&-reverse &-item-last &-item-tail { @@ -159,7 +159,7 @@ top: 15px; display: block; height: calc(100% - 15px); - border-left: 2px dotted @timeline-color; + border-inline-start: 2px dotted @timeline-color; } .@{timeline-prefix-cls}-item-content { min-height: 48px; @@ -170,16 +170,14 @@ position: absolute; top: -(@font-size-base * @line-height-base - @font-size-base) + 1px; width: calc(50% - 12px); - text-align: right; + text-align: end; } .@{timeline-prefix-cls}-item-right { .@{timeline-prefix-cls}-item-label { - left: calc(50% + 14px); + inset-inline-start: calc(50% + 14px); width: calc(50% - 14px); - text-align: left; + text-align: start; } } } } - -@import './rtl'; diff --git a/components/timeline/style/rtl.less b/components/timeline/style/rtl.less deleted file mode 100644 index 011f5aa3b67..00000000000 --- a/components/timeline/style/rtl.less +++ /dev/null @@ -1,135 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@timeline-prefix-cls: ~'@{ant-prefix}-timeline'; - -.@{timeline-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-item { - &-tail { - .@{timeline-prefix-cls}-rtl & { - right: 4px; - left: auto; - border-right: @timeline-width solid @timeline-color; - border-left: none; - } - } - - &-head-custom { - .@{timeline-prefix-cls}-rtl & { - right: 5px; - left: auto; - transform: translate(50%, -50%); - } - } - - &-content { - .@{timeline-prefix-cls}-rtl & { - margin: 0 18px 0 0; - } - } - } - - &.@{timeline-prefix-cls}-alternate, - &.@{timeline-prefix-cls}-right, - &.@{timeline-prefix-cls}-label { - .@{timeline-prefix-cls}-item { - &-tail, - &-head, - &-head-custom { - .@{timeline-prefix-cls}-rtl& { - right: 50%; - left: auto; - } - } - - &-head { - .@{timeline-prefix-cls}-rtl& { - margin-right: -4px; - margin-left: 0; - } - - &-custom { - .@{timeline-prefix-cls}-rtl& { - margin-right: 1px; - margin-left: 0; - } - } - } - - &-left { - .@{timeline-prefix-cls}-item-content { - .@{timeline-prefix-cls}-rtl& { - right: calc(50% - 4px); - left: auto; - text-align: right; - } - } - } - - &-right { - .@{timeline-prefix-cls}-item-content { - .@{timeline-prefix-cls}-rtl& { - text-align: left; - } - } - } - } - } - - &.@{timeline-prefix-cls}-right { - .@{timeline-prefix-cls}-item-right { - .@{timeline-prefix-cls}-item-tail, - .@{timeline-prefix-cls}-item-head, - .@{timeline-prefix-cls}-item-head-custom { - .@{timeline-prefix-cls}-rtl& { - right: 0; - left: auto; - } - } - - .@{timeline-prefix-cls}-item-content { - .@{timeline-prefix-cls}-rtl& { - width: 100%; - margin-right: 18px; - text-align: right; - } - } - } - } - - &&-pending &-item-last &-item-tail { - .@{timeline-prefix-cls}-rtl& { - border-right: 2px dotted @timeline-color; - border-left: none; - } - } - - &&-reverse &-item-pending { - .@{timeline-prefix-cls}-item-tail { - .@{timeline-prefix-cls}-rtl& { - border-right: 2px dotted @timeline-color; - border-left: none; - } - } - } - - &.@{timeline-prefix-cls}-label { - .@{timeline-prefix-cls}-item-label { - .@{timeline-prefix-cls}-rtl& { - text-align: left; - } - } - .@{timeline-prefix-cls}-item-right { - .@{timeline-prefix-cls}-item-label { - .@{timeline-prefix-cls}-rtl& { - right: calc(50% + 14px); - text-align: right; - } - } - } - } -} diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index e21a6520b0c..8b1749d0bd8 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -64,4 +64,5 @@ // Animations .zoom-motion('zoom-big-fast', antZoomBig, @animation-duration-fast); -@import './rtl'; + +// Base class diff --git a/components/tooltip/style/rtl.less b/components/tooltip/style/rtl.less deleted file mode 100644 index 42326236eb1..00000000000 --- a/components/tooltip/style/rtl.less +++ /dev/null @@ -1,8 +0,0 @@ -@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip'; - -// Base class -.@{tooltip-prefix-cls} { - &-rtl { - direction: rtl; - } -} diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 99a2760037d..c0495227368 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -37,9 +37,16 @@ } &-search { + padding-inline-start: @control-padding-horizontal-sm; + padding-inline-end: 24px; + .anticon-search { color: @disabled-color; } + + &-action { + inset-inline-end: 12px; + } } &-header { @@ -56,7 +63,7 @@ border-radius: @border-radius-base @border-radius-base 0 0; > *:not(:last-child) { - margin-right: 4px; + margin-inline-end: 4px; } > * { @@ -67,7 +74,7 @@ flex: auto; overflow: hidden; white-space: nowrap; - text-align: right; + text-align: end; text-overflow: ellipsis; } @@ -112,7 +119,7 @@ transition: all 0.3s; > *:not(:last-child) { - margin-right: 8px; + margin-inline-end: 8px; } > * { @@ -176,7 +183,7 @@ &-pagination { padding: @padding-xs 0; - text-align: right; + text-align: end; border-top: @border-width-base @border-style-base @border-color-split; } @@ -218,5 +225,3 @@ max-height: (@transfer-header-height / 2) - 22; } } - -@import './rtl'; diff --git a/components/transfer/style/rtl.less b/components/transfer/style/rtl.less deleted file mode 100644 index ee9077e65db..00000000000 --- a/components/transfer/style/rtl.less +++ /dev/null @@ -1,71 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../checkbox/style/mixin'; - -@transfer-prefix-cls: ~'@{ant-prefix}-transfer'; - -.@{transfer-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-list { - &-search { - .@{transfer-prefix-cls}-rtl & { - padding-right: @control-padding-horizontal-sm; - padding-left: 24px; - } - - &-action { - .@{transfer-prefix-cls}-rtl & { - right: auto; - left: 12px; - } - } - } - - &-header { - > *:not(:last-child) { - .@{transfer-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 4px; - } - } - - .@{transfer-prefix-cls}-rtl & { - right: 0; - left: auto; - } - - &-title { - .@{transfer-prefix-cls}-rtl & { - text-align: left; - } - } - } - - &-content { - &-item { - > *:not(:last-child) { - .@{transfer-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 8px; - } - } - } - } - - &-pagination { - .@{transfer-prefix-cls}-rtl & { - text-align: left; - } - } - - &-footer { - .@{transfer-prefix-cls}-rtl & { - right: 0; - left: auto; - } - } - } -} diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index b2cf719f365..f2c72beac04 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -13,9 +13,6 @@ &-dropdown { padding: @padding-xs (@padding-xs / 2); - &-rtl { - direction: rtl; - } // ======================== Tree ======================== .@{select-tree-prefix-cls} { border-radius: 0; @@ -41,7 +38,7 @@ &_close { .@{select-tree-prefix-cls}-switcher-icon { svg { - .@{tree-select-prefix-cls}-dropdown-rtl & { + &:dir(rtl) { transform: rotate(90deg); } } @@ -49,7 +46,7 @@ } &-loading-icon { - .@{tree-select-prefix-cls}-dropdown-rtl & { + &:dir(rtl) { transform: scaleY(-1); } } diff --git a/components/tree/style/index.less b/components/tree/style/index.less index a2c0067f2bd..ff641989586 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -12,5 +12,3 @@ .@{tree-prefix-cls} { .antTreeFn(@tree-prefix-cls); } - -@import './rtl'; diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less index 1aa17bc2907..286bab6c366 100644 --- a/components/tree/style/mixin.less +++ b/components/tree/style/mixin.less @@ -34,7 +34,7 @@ &::after { position: absolute; top: -3px; - left: -6px; + inset-inline-start: -6px; width: 8px; height: 8px; background-color: transparent; @@ -219,7 +219,8 @@ // >>> Checkbox &-checkbox { top: initial; - margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0; + margin-block-start: ((@tree-title-height - @checkbox-size) / 2); + margin-inline-end: 8px; } // >>> Title diff --git a/components/tree/style/rtl.less b/components/tree/style/rtl.less deleted file mode 100644 index 7604ef60ebd..00000000000 --- a/components/tree/style/rtl.less +++ /dev/null @@ -1,72 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../checkbox/style/mixin'; - -@tree-prefix-cls: ~'@{ant-prefix}-tree'; -@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree'; -@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode'; - -.@{tree-prefix-cls} { - &-rtl { - direction: rtl; - .@{tree-prefix-cls}-node-content-wrapper[draggable='true'] { - .@{tree-prefix-cls}-drop-indicator { - &::after { - right: -6px; - left: unset; - } - } - } - } - - // ===================== TreeNode ===================== - .@{tree-node-prefix-cls} { - &-rtl { - direction: rtl; - } - } - - // >>> Switcher - &-switcher { - &_close { - .@{tree-prefix-cls}-switcher-icon { - svg { - .@{tree-prefix-cls}-rtl & { - transform: rotate(90deg); - } - } - } - } - } - // ==================== Show Line ===================== - &-show-line { - // ================ Indent lines ================ - .@{tree-prefix-cls}-indent { - &-unit { - &::before { - .@{tree-prefix-cls}-rtl& { - right: auto; - left: -(@tree-title-height / 2) - 1px; - border-right: none; - border-left: 1px solid @border-color-base; - } - } - } - } - } - // >>> Checkbox - &-checkbox { - .@{tree-prefix-cls}-rtl & { - margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px; - } - } -} - -.@{select-tree-prefix-cls} { - // >>> Checkbox - &-checkbox { - .@{tree-prefix-cls}-select-dropdown-rtl & { - margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px; - } - } -} diff --git a/components/typography/style/index.less b/components/typography/style/index.less index 4e138cb54fe..cf80b47fb0c 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -185,7 +185,7 @@ &-copy { .operation-unit(); - margin-left: 4px; + margin-inline-start: 4px; } &-copy-success { @@ -201,14 +201,14 @@ position: relative; div& { - left: -@input-padding-horizontal - 1px; + inset-inline-start: -@input-padding-horizontal - 1px; margin-top: -@input-padding-vertical-base - 1px; margin-bottom: calc(1em - @input-padding-vertical-base - 1px); } &-confirm { position: absolute; - right: 10px; + inset-inline-end: 10px; bottom: 8px; color: @text-color-secondary; // default style @@ -235,8 +235,8 @@ padding: 0; li { - margin: 0 0 0 20px; - padding: 0 0 0 4px; + margin-inline-start: 20px; + padding-inline-start: 4px; } } @@ -279,8 +279,8 @@ } blockquote { - padding: 0 0 0 0.6em; - border-left: 4px solid rgba(100, 100, 100, 0.2); + padding-inline-start: 0.6em; + border-inline-start: 4px solid rgba(100, 100, 100, 0.2); opacity: 0.85; } @@ -310,5 +310,3 @@ -webkit-box-orient: vertical; } } - -@import './rtl'; diff --git a/components/typography/style/rtl.less b/components/typography/style/rtl.less deleted file mode 100644 index f2866ad08a0..00000000000 --- a/components/typography/style/rtl.less +++ /dev/null @@ -1,54 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@typography-prefix-cls: ~'@{ant-prefix}-typography'; - -.@{typography-prefix-cls} { - &-rtl { - direction: rtl; - } - - // Operation - &-expand, - &-edit, - &-copy { - .@{typography-prefix-cls}-rtl & { - margin-right: 4px; - margin-left: 0; - } - } - - &-expand { - .@{typography-prefix-cls}-rtl & { - float: left; - } - } - - // Text input area - &-edit-content { - div& { - &.@{typography-prefix-cls}-rtl { - right: -@input-padding-horizontal - 1px; - left: auto; - } - } - - &-confirm { - .@{typography-prefix-cls}-rtl & { - right: auto; - left: 10px; - } - } - } - - // list - ul, - ol { - li { - .@{typography-prefix-cls}-rtl& { - margin: 0 20px 0 0; - padding: 0 4px 0 0; - } - } - } -} diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 52182ece5ee..519816b6fee 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -37,7 +37,7 @@ &&-select-picture-card { width: @upload-picture-card-size; height: @upload-picture-card-size; - margin-right: 8px; + margin-inline-end: 8px; margin-bottom: 8px; text-align: center; vertical-align: top; @@ -155,7 +155,7 @@ &-name { display: inline-block; width: 100%; - padding-left: @font-size-base + 8px; + padding-inline-start: @font-size-base + 8px; overflow: hidden; line-height: @line-height-base; white-space: nowrap; @@ -164,7 +164,7 @@ &-card-actions { position: absolute; - right: 0; + inset-inline-end: 0; &-btn { opacity: 0; @@ -245,7 +245,7 @@ position: absolute; bottom: -12px; width: 100%; - padding-left: @font-size-base + 12px; + padding-inline-start: @font-size-base + 12px; font-size: @font-size-base; line-height: 0; } @@ -312,9 +312,9 @@ .@{upload-item}-icon { position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; font-size: 26px; - transform: translate(-50%, -50%); + transform: translateX(-50%) translateY(-50%); .@{iconfont-css-prefix} { font-size: 26px; @@ -336,9 +336,9 @@ display: inline-block; box-sizing: border-box; max-width: 100%; - margin: 0 0 0 8px; - padding-right: 8px; - padding-left: 48px; + margin-inline-start: 8px; + padding-inline-end: 8px; + padding-inline-start: 48px; overflow: hidden; line-height: 44px; white-space: nowrap; @@ -354,7 +354,7 @@ bottom: 14px; width: ~'calc(100% - 24px)'; margin-top: 0; - padding-left: 56px; + padding-inline-start: 56px; } } @@ -364,7 +364,8 @@ display: inline-block; width: @upload-picture-card-size; height: @upload-picture-card-size; - margin: 0 @margin-xs @margin-xs 0; + margin-block-end: @margin-xs; + margin-inline-end: @margin-xs; vertical-align: top; } @@ -397,10 +398,10 @@ .@{upload-item}-actions { position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; z-index: 10; white-space: nowrap; - transform: translate(-50%, -50%); + transform: translateX(-50%) translateY(-50%); opacity: 0; transition: all 0.3s; @@ -561,5 +562,3 @@ opacity: 0; } } - -@import './rtl'; diff --git a/components/upload/style/patch.less b/components/upload/style/patch.less deleted file mode 100644 index 323113edc08..00000000000 --- a/components/upload/style/patch.less +++ /dev/null @@ -1,3 +0,0 @@ -.ant-upload-list-rtl.ant-upload-list-picture-card .ant-upload-list-item { - float: unset; -} diff --git a/components/upload/style/rtl.less b/components/upload/style/rtl.less deleted file mode 100644 index a7054731f0c..00000000000 --- a/components/upload/style/rtl.less +++ /dev/null @@ -1,165 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@upload-prefix-cls: ~'@{ant-prefix}-upload'; -@upload-item: ~'@{ant-prefix}-upload-list-item'; - -.@{upload-prefix-cls} { - &-rtl { - direction: rtl; - } - - &&-select-picture-card { - .@{upload-prefix-cls}-rtl& { - margin-right: auto; - margin-left: 8px; - } - } -} - -.@{upload-prefix-cls}-list { - &-rtl { - direction: rtl; - } - - &-item-list-type-text { - &:hover { - .@{upload-prefix-cls}-list-item-name-icon-count-1 { - .@{upload-prefix-cls}-list-rtl & { - padding-right: 22px; - padding-left: 14px; - } - } - .@{upload-prefix-cls}-list-item-name-icon-count-2 { - .@{upload-prefix-cls}-list-rtl & { - padding-right: 22px; - padding-left: 28px; - } - } - } - } - - &-item { - &-name { - .@{upload-prefix-cls}-list-rtl & { - padding-right: @font-size-base + 8px; - padding-left: 0; - } - } - - &-name-icon-count-1 { - .@{upload-prefix-cls}-list-rtl & { - padding-left: 14px; - } - } - - &-card-actions { - .@{upload-prefix-cls}-list-rtl & { - right: auto; - left: 0; - } - .@{iconfont-css-prefix} { - .@{upload-prefix-cls}-list-rtl & { - padding-right: 0; - padding-left: 5px; - } - } - } - - &-info { - .@{upload-prefix-cls}-list-rtl & { - padding: 0 4px 0 12px; - } - } - - &-error &-card-actions { - .@{iconfont-css-prefix} { - .@{upload-prefix-cls}-list-rtl & { - padding-right: 0; - padding-left: 5px; - } - } - } - - &-progress { - .@{upload-prefix-cls}-list-rtl & { - padding-right: @font-size-base + 12px; - padding-left: 0; - } - } - } - - &-picture, - &-picture-card { - .@{upload-item}-info { - padding: 0; - } - - .@{upload-item}-thumbnail { - .@{upload-prefix-cls}-list-rtl& { - right: 8px; - left: auto; - } - } - - .@{upload-item}-icon { - .@{upload-prefix-cls}-list-rtl& { - right: 50%; - left: auto; - transform: translate(50%, -50%); - } - } - - .@{upload-item}-name { - .@{upload-prefix-cls}-list-rtl& { - margin: 0 8px 0 0; - padding-right: 48px; - padding-left: 8px; - } - } - - .@{upload-item}-name-icon-count-1 { - .@{upload-prefix-cls}-list-rtl& { - padding-right: 48px; - padding-left: 18px; - } - } - - .@{upload-item}-name-icon-count-2 { - .@{upload-prefix-cls}-list-rtl& { - padding-right: 48px; - padding-left: 36px; - } - } - - .@{upload-item}-progress { - .@{upload-prefix-cls}-list-rtl& { - padding-right: 0; - padding-left: 0; - } - } - } - - &-picture-card { - &-container { - .@{upload-prefix-cls}-list-rtl & { - margin: 0 0 @margin-xs @margin-xs; - } - } - - .@{upload-item}-actions { - .@{upload-prefix-cls}-list-rtl& { - right: 50%; - left: auto; - transform: translate(50%, -50%); - } - } - - .@{upload-item}-file + .@{upload-item}-name { - .@{upload-prefix-cls}-list-rtl& { - margin: 8px 0 0; - padding: 0; - } - } - } -} From 3ae9ecd16ce5cabf714472b6bc9ddd5f57aad07e Mon Sep 17 00:00:00 2001 From: laffery86 Date: Sat, 1 Aug 2026 08:39:23 +0800 Subject: [PATCH 2/7] refactor(module:*): fix anchor link padding size remove LESS vars `anchor-link-top` `anchor-link-left` and `anchor-link-padding`, please use `anchor-link-padding-block` and `anchor-link-padding-inline-start` instead --- components/affix/style/entry.less | 2 +- components/alert/style/index.less | 4 ++++ components/anchor/style/entry.less | 2 +- components/anchor/style/index.less | 11 ++++++----- components/auto-complete/style/entry.less | 2 +- components/comment/style/entry.less | 2 +- components/descriptions/style/entry.less | 4 ++-- components/empty/style/entry.less | 2 +- components/list/style/entry.less | 2 +- components/mention/style/entry.less | 2 +- components/ng-zorro-antd.aliyun.less | 6 +++--- components/ng-zorro-antd.compact.less | 6 +++--- components/ng-zorro-antd.dark.less | 6 +++--- components/page-header/style/entry.less | 2 +- components/result/style/entry.less | 4 ++-- components/style/themes/compact.less | 5 ++--- components/style/themes/default.less | 5 ++--- components/style/themes/variable.less | 5 ++--- components/tree-select/style/entry.less | 2 +- components/typography/style/index.less | 4 ++++ components/upload/style/entry.less | 1 - components/upload/style/index.less | 8 ++++++++ 22 files changed, 50 insertions(+), 37 deletions(-) diff --git a/components/affix/style/entry.less b/components/affix/style/entry.less index 911f7808683..3e686bd526f 100644 --- a/components/affix/style/entry.less +++ b/components/affix/style/entry.less @@ -1,2 +1,2 @@ @import './index.less'; -@import "./patch"; +@import './patch'; diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 6ca0ebd0851..7813ef10e22 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -13,6 +13,10 @@ overflow-wrap: break-word; border-radius: @border-radius-base; + &&-rtl { + direction: rtl; + } + &-content { flex: 1; min-width: 0; diff --git a/components/anchor/style/entry.less b/components/anchor/style/entry.less index a8516724132..1a5e9e4e68f 100644 --- a/components/anchor/style/entry.less +++ b/components/anchor/style/entry.less @@ -1,3 +1,3 @@ @import './index.less'; @import '../../affix/style/entry.less'; -@import "./patch"; +@import './patch'; diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index 16a9868ac37..76b36813018 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -47,6 +47,10 @@ &.@{ant-prefix}-anchor-ink-ball-visible { display: inline-block; } + + &:dir(rtl) { + transform: translateX(50%); + } } } @@ -55,7 +59,8 @@ } &-link { - padding: @anchor-link-padding; + padding-block: @anchor-link-padding-block; + padding-inline-start: @anchor-link-padding-inline-start; &-title { position: relative; @@ -82,7 +87,3 @@ padding-bottom: 2px; } } - -.@{ant-prefix}-anchor-ink-ball:dir(rtl) { - transform: translateX(50%); -} diff --git a/components/auto-complete/style/entry.less b/components/auto-complete/style/entry.less index 446b5334011..5eeed4d4b50 100644 --- a/components/auto-complete/style/entry.less +++ b/components/auto-complete/style/entry.less @@ -2,4 +2,4 @@ // style dependencies @import '../../select/style/entry.less'; @import '../../input/style/entry.less'; -@import "./patch"; +@import './patch'; diff --git a/components/comment/style/entry.less b/components/comment/style/entry.less index b05658da9a0..176a3ac485d 100644 --- a/components/comment/style/entry.less +++ b/components/comment/style/entry.less @@ -1,2 +1,2 @@ @import './index.less'; -@import "./patch"; \ No newline at end of file +@import './patch'; \ No newline at end of file diff --git a/components/descriptions/style/entry.less b/components/descriptions/style/entry.less index 8d77e4664b1..176a3ac485d 100644 --- a/components/descriptions/style/entry.less +++ b/components/descriptions/style/entry.less @@ -1,2 +1,2 @@ -@import "./index.less"; -@import "./patch"; \ No newline at end of file +@import './index.less'; +@import './patch'; \ No newline at end of file diff --git a/components/empty/style/entry.less b/components/empty/style/entry.less index 911f7808683..3e686bd526f 100644 --- a/components/empty/style/entry.less +++ b/components/empty/style/entry.less @@ -1,2 +1,2 @@ @import './index.less'; -@import "./patch"; +@import './patch'; diff --git a/components/list/style/entry.less b/components/list/style/entry.less index 75de5f5df5d..7153b8c6d87 100644 --- a/components/list/style/entry.less +++ b/components/list/style/entry.less @@ -3,4 +3,4 @@ @import '../../spin/style/entry.less'; @import '../../pagination/style/entry.less'; @import '../../grid/style/entry.less'; -@import "./patch"; +@import './patch'; diff --git a/components/mention/style/entry.less b/components/mention/style/entry.less index 911f7808683..3e686bd526f 100644 --- a/components/mention/style/entry.less +++ b/components/mention/style/entry.less @@ -1,2 +1,2 @@ @import './index.less'; -@import "./patch"; +@import './patch'; diff --git a/components/ng-zorro-antd.aliyun.less b/components/ng-zorro-antd.aliyun.less index 2c74e91d8f7..76dc5f8c5cc 100644 --- a/components/ng-zorro-antd.aliyun.less +++ b/components/ng-zorro-antd.aliyun.less @@ -1,3 +1,3 @@ -@import "./style/aliyun.less"; -@import "./style/entry.less"; -@import "./components.less"; +@import './style/aliyun.less'; +@import './style/entry.less'; +@import './components.less'; diff --git a/components/ng-zorro-antd.compact.less b/components/ng-zorro-antd.compact.less index cbca1626356..05bf9cdcf01 100644 --- a/components/ng-zorro-antd.compact.less +++ b/components/ng-zorro-antd.compact.less @@ -1,3 +1,3 @@ -@import "./style/compact.less"; -@import "./style/entry.less"; -@import "./components.less"; +@import './style/compact.less'; +@import './style/entry.less'; +@import './components.less'; diff --git a/components/ng-zorro-antd.dark.less b/components/ng-zorro-antd.dark.less index 9e5bcd9f8e5..8a9c39ddc02 100644 --- a/components/ng-zorro-antd.dark.less +++ b/components/ng-zorro-antd.dark.less @@ -1,3 +1,3 @@ -@import "./style/dark.less"; -@import "./style/entry.less"; -@import "./components.less"; +@import './style/dark.less'; +@import './style/entry.less'; +@import './components.less'; diff --git a/components/page-header/style/entry.less b/components/page-header/style/entry.less index b93a7916b43..1ebae518e20 100644 --- a/components/page-header/style/entry.less +++ b/components/page-header/style/entry.less @@ -2,4 +2,4 @@ // style dependencies @import '../../divider/style/entry.less'; @import '../../breadcrumb/style/entry.less'; -@import "./patch"; +@import './patch'; diff --git a/components/result/style/entry.less b/components/result/style/entry.less index 791d9712618..96cebe33bff 100644 --- a/components/result/style/entry.less +++ b/components/result/style/entry.less @@ -1,2 +1,2 @@ -@import "./index.less"; -@import "./patch.less"; +@import './index.less'; +@import './patch.less'; diff --git a/components/style/themes/compact.less b/components/style/themes/compact.less index 3282f4d3fa5..ea797cf9a32 100644 --- a/components/style/themes/compact.less +++ b/components/style/themes/compact.less @@ -278,9 +278,8 @@ // Anchor // --- -@anchor-link-top: 4px; -@anchor-link-left: 16px; -@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left; +@anchor-link-padding-block: 4px; +@anchor-link-padding-inline-start: 16px; // Tabs // --- diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 285ccfd8598..05b371c1698 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -527,9 +527,8 @@ // --- @anchor-bg: transparent; @anchor-border-color: @border-color-split; -@anchor-link-top: 4px; -@anchor-link-left: 16px; -@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left; +@anchor-link-padding-block: 4px; +@anchor-link-padding-inline-start: 16px; // Tooltip // --- diff --git a/components/style/themes/variable.less b/components/style/themes/variable.less index 8d342915d36..cc511ebd5ec 100644 --- a/components/style/themes/variable.less +++ b/components/style/themes/variable.less @@ -581,9 +581,8 @@ // --- @anchor-bg: transparent; @anchor-border-color: @border-color-split; -@anchor-link-top: 4px; -@anchor-link-left: 16px; -@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left; +@anchor-link-padding-block: 4px; +@anchor-link-padding-inline-start: 16px; // Tooltip // --- diff --git a/components/tree-select/style/entry.less b/components/tree-select/style/entry.less index 89b9b47d30f..851844b3500 100644 --- a/components/tree-select/style/entry.less +++ b/components/tree-select/style/entry.less @@ -4,4 +4,4 @@ @import '../../tree/style/entry.less'; @import '../../select/style/entry.less'; @import '../../empty/style/entry.less'; -@import "./patch.less"; +@import './patch.less'; diff --git a/components/typography/style/index.less b/components/typography/style/index.less index cf80b47fb0c..0e6cf755bc3 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -8,6 +8,10 @@ color: @text-color; overflow-wrap: break-word; + &&-rtl { + direction: rtl; + } + &&-secondary { color: @text-color-secondary; } diff --git a/components/upload/style/entry.less b/components/upload/style/entry.less index a8afbc67d6f..475b8346a96 100644 --- a/components/upload/style/entry.less +++ b/components/upload/style/entry.less @@ -2,4 +2,3 @@ // style dependencies @import '../../progress/style/entry.less'; @import '../../tooltip/style/entry.less'; -@import './patch.less'; diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 519816b6fee..db5e3c453e6 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -11,6 +11,10 @@ outline: 0; + &&-rtl { + direction: rtl; + } + p { margin: 0; } @@ -145,6 +149,10 @@ .clearfix(); line-height: @line-height-base; + &&-rtl { + direction: rtl; + } + // ============================ Item ============================ &-item { position: relative; From ae4ab5a5b5a7f3e9231584c15c520f584132e5f0 Mon Sep 17 00:00:00 2001 From: laffery86 Date: Sat, 1 Aug 2026 10:45:48 +0800 Subject: [PATCH 3/7] refactor(module:*): fix ribbon position --- components/avatar/demo/badge.ts | 10 +++- components/avatar/demo/basic.ts | 2 +- components/avatar/demo/dynamic.ts | 24 +++----- components/avatar/demo/type.ts | 2 +- components/avatar/doc/index.en-US.md | 2 +- components/avatar/doc/index.zh-CN.md | 2 +- components/badge/demo/basic.ts | 2 +- components/badge/demo/dot.ts | 2 +- components/badge/demo/overflow.ts | 2 +- components/badge/demo/size.ts | 2 +- components/badge/style/index.less | 89 ++++++++++++++-------------- components/badge/style/patch.less | 4 +- components/badge/style/ribbon.less | 14 +++-- 13 files changed, 79 insertions(+), 78 deletions(-) diff --git a/components/avatar/demo/badge.ts b/components/avatar/demo/badge.ts index 0b284251218..52cc3898df0 100644 --- a/components/avatar/demo/badge.ts +++ b/components/avatar/demo/badge.ts @@ -5,14 +5,20 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge'; @Component({ selector: 'nz-demo-avatar-badge', - imports: [NzBadgeModule, NzAvatarModule], + imports: [NzAvatarModule, NzBadgeModule], template: ` - + + `, + styles: ` + :host { + display: inline-flex; + gap: 24px; + } ` }) export class NzDemoAvatarBadgeComponent {} diff --git a/components/avatar/demo/basic.ts b/components/avatar/demo/basic.ts index 6f4be70d085..e1e5fbb5427 100644 --- a/components/avatar/demo/basic.ts +++ b/components/avatar/demo/basic.ts @@ -22,7 +22,7 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar'; styles: ` nz-avatar { margin-top: 16px; - margin-right: 16px; + margin-inline-end: 16px; } ` }) diff --git a/components/avatar/demo/dynamic.ts b/components/avatar/demo/dynamic.ts index 3a82fd3180e..2021f08da0b 100644 --- a/components/avatar/demo/dynamic.ts +++ b/components/avatar/demo/dynamic.ts @@ -1,32 +1,18 @@ import { Component, computed, signal } from '@angular/core'; -import { FormsModule } from '@angular/forms'; import { NzAvatarModule } from 'ng-zorro-antd/avatar'; import { NzButtonModule } from 'ng-zorro-antd/button'; -import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; const userList = ['Lucy', 'U', 'Tom', 'Edward']; const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']; @Component({ selector: 'nz-demo-avatar-dynamic', - imports: [FormsModule, NzAvatarModule, NzButtonModule, NzInputNumberModule], + imports: [NzAvatarModule, NzButtonModule], template: ` -
- - - -
- - `, - styles: ` - div { - margin-bottom: 16px; - } - button { - margin-left: 8px; - } + + ` }) export class NzDemoAvatarDynamicComponent { @@ -38,4 +24,8 @@ export class NzDemoAvatarDynamicComponent { change(): void { this.index.update(idx => (idx + 1) % userList.length); } + + changeGap(): void { + this.gap.update(g => (g + 1) % 5); + } } diff --git a/components/avatar/demo/type.ts b/components/avatar/demo/type.ts index 203f82c32e3..32d226287cd 100644 --- a/components/avatar/demo/type.ts +++ b/components/avatar/demo/type.ts @@ -16,7 +16,7 @@ import { NzAvatarModule } from 'ng-zorro-antd/avatar'; styles: ` nz-avatar { margin-top: 16px; - margin-right: 16px; + margin-inline-end: 16px; } ` }) diff --git a/components/avatar/doc/index.en-US.md b/components/avatar/doc/index.en-US.md index 0492fab905c..4297e458cb0 100644 --- a/components/avatar/doc/index.en-US.md +++ b/components/avatar/doc/index.en-US.md @@ -28,7 +28,7 @@ description: Used to represent users or things, supporting the display of images ```html - + ``` diff --git a/components/avatar/doc/index.zh-CN.md b/components/avatar/doc/index.zh-CN.md index 3e1eed15760..87dd258d781 100644 --- a/components/avatar/doc/index.zh-CN.md +++ b/components/avatar/doc/index.zh-CN.md @@ -29,7 +29,7 @@ description: 用来代表用户或事物，支持图片、图标或字符展示 ```html - + ``` diff --git a/components/badge/demo/basic.ts b/components/badge/demo/basic.ts index 31f36152536..eb488b5768e 100644 --- a/components/badge/demo/basic.ts +++ b/components/badge/demo/basic.ts @@ -22,7 +22,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; `, styles: ` nz-badge { - margin-right: 20px; + margin-inline-end: 20px; } .head-example { diff --git a/components/badge/demo/dot.ts b/components/badge/demo/dot.ts index 90b46043bc3..99cdee77637 100644 --- a/components/badge/demo/dot.ts +++ b/components/badge/demo/dot.ts @@ -16,7 +16,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; `, styles: ` nz-badge { - margin-right: 20px; + margin-inline-end: 20px; } nz-icon { diff --git a/components/badge/demo/overflow.ts b/components/badge/demo/overflow.ts index 2485f23aead..29125ddd7b4 100644 --- a/components/badge/demo/overflow.ts +++ b/components/badge/demo/overflow.ts @@ -21,7 +21,7 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge'; `, styles: ` nz-badge { - margin-right: 20px; + margin-inline-end: 20px; } .head-example { diff --git a/components/badge/demo/size.ts b/components/badge/demo/size.ts index 3794ca6e1fc..30512131cfc 100644 --- a/components/badge/demo/size.ts +++ b/components/badge/demo/size.ts @@ -15,7 +15,7 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge'; `, styles: ` nz-badge { - margin-right: 20px; + margin-inline-end: 20px; } .head-example { diff --git a/components/badge/style/index.less b/components/badge/style/index.less index e2ccc0f0b9a..57b26ce3747 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -135,7 +135,7 @@ .make-color-classes(); &-text { - margin-left: @margin-xs; + margin-inline-start: @margin-xs; color: @text-color; font-size: @font-size-base; } @@ -181,6 +181,29 @@ } } +// ====================== RTL ======================= +.@{badge-prefix-cls}-rtl { + direction: rtl; +} + +.@{badge-prefix-cls}:not(.@{badge-prefix-cls}-not-a-wrapper).@{badge-prefix-cls}-rtl { + .@{badge-prefix-cls}-count, + .@{badge-prefix-cls}-dot, + .@{number-prefix-cls}-custom-component { + transform: translate(-50%, -50%); + } + + .@{badge-prefix-cls}-zoom-appear, + .@{badge-prefix-cls}-zoom-enter { + animation-name: antZoomBadgeInRtl; + } + + .@{badge-prefix-cls}-zoom-leave { + animation-name: antZoomBadgeOutRtl; + } +} + +// ====================== Animations ======================= @keyframes antStatusProcessing { 0% { transform: scale(0.8); @@ -203,7 +226,6 @@ .@{number-prefix-cls} { overflow: hidden; - direction: ltr; &-only { position: relative; @@ -246,82 +268,59 @@ } } -@keyframes antNoWrapperZoomBadgeIn { +@keyframes antZoomBadgeInRtl { 0% { - transform: scale(0); + transform: scale(0) translate(-50%, -50%); opacity: 0; } 100% { - transform: scale(1); + transform: scale(1) translate(-50%, -50%); } } -@keyframes antNoWrapperZoomBadgeOut { +@keyframes antZoomBadgeOutRtl { 0% { - transform: scale(1); + transform: scale(1) translate(-50%, -50%); } 100% { - transform: scale(0); + transform: scale(0) translate(-50%, -50%); opacity: 0; } } -@keyframes antBadgeLoadingCircle { +@keyframes antNoWrapperZoomBadgeIn { 0% { - transform-origin: 50%; + transform: scale(0); + opacity: 0; } 100% { - transform: translate(50%, -50%) rotate(360deg); - transform-origin: 50%; - } -} - -@import './ribbon'; -.@{badge-prefix-cls} { - - &:not(&-not-a-wrapper) &-count, - &:not(&-not-a-wrapper) &-dot, - &:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component { - &:dir(rtl) { - direction: ltr; - transform: translate(-50%, -50%); - transform-origin: 0% 0%; - } - } - - &:not(&-not-a-wrapper):dir(rtl) { - .@{badge-prefix-cls}-zoom-appear, - .@{badge-prefix-cls}-zoom-enter { - animation-name: antZoomBadgeInReverse; - } - - .@{badge-prefix-cls}-zoom-leave { - animation-name: antZoomBadgeOutReverse; - } + transform: scale(1); } } -@keyframes antZoomBadgeInReverse { +@keyframes antNoWrapperZoomBadgeOut { 0% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; + transform: scale(1); } 100% { - transform: scale(1) translate(-50%, -50%); + transform: scale(0); + opacity: 0; } } -@keyframes antZoomBadgeOutReverse { +@keyframes antBadgeLoadingCircle { 0% { - transform: scale(1) translate(-50%, -50%); + transform-origin: 50%; } 100% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; + transform: translate(50%, -50%) rotate(360deg); + transform-origin: 50%; } } + +@import './ribbon'; diff --git a/components/badge/style/patch.less b/components/badge/style/patch.less index 2e9935bb26e..ea96b32bbb6 100644 --- a/components/badge/style/patch.less +++ b/components/badge/style/patch.less @@ -10,6 +10,6 @@ } } -nz-ribbon { +.ant-ribbon-wrapper { display: block; -} \ No newline at end of file +} diff --git a/components/badge/style/ribbon.less b/components/badge/style/ribbon.less index cdadf554cff..20e3435d3e7 100644 --- a/components/badge/style/ribbon.less +++ b/components/badge/style/ribbon.less @@ -2,9 +2,8 @@ @import '../../style/mixins/index'; @ribbon-prefix-cls: ~'@{ant-prefix}-ribbon'; -@ribbon-wrapper-prefix-cls: ~'@{ant-prefix}-ribbon-wrapper'; -.@{ribbon-wrapper-prefix-cls} { +.@{ribbon-prefix-cls}-wrapper { position: relative; } @@ -56,7 +55,8 @@ border-end-end-radius: 0; .@{ribbon-prefix-cls}-corner { inset-inline-end: 0; - border-color: currentcolor transparent transparent currentcolor; + border-inline-end-color: transparent; + border-block-end-color: transparent; } } @@ -65,7 +65,13 @@ border-end-start-radius: 0; .@{ribbon-prefix-cls}-corner { inset-inline-start: 0; - border-color: currentcolor currentcolor transparent transparent; + border-inline-start-color: transparent; + border-block-end-color: transparent; } } + + // ====================== RTL ======================= + &-rtl { + direction: rtl; + } } From bbe351b2b4885ea184aed01f59f057654a57b015 Mon Sep 17 00:00:00 2001 From: laffery86 Date: Sat, 1 Aug 2026 11:30:31 +0800 Subject: [PATCH 4/7] refactor(module:*): remove deprecated button group styles --- components/badge/style/index.less | 46 +----------- components/badge/style/rtl.less | 42 +++++++++++ components/breadcrumb/style/index.less | 4 + components/breadcrumb/style/patch.less | 8 +- components/button/style/index.less | 32 -------- components/button/style/mixin.less | 100 ------------------------- 6 files changed, 54 insertions(+), 178 deletions(-) create mode 100644 components/badge/style/rtl.less diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 57b26ce3747..bba242242be 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -181,29 +181,6 @@ } } -// ====================== RTL ======================= -.@{badge-prefix-cls}-rtl { - direction: rtl; -} - -.@{badge-prefix-cls}:not(.@{badge-prefix-cls}-not-a-wrapper).@{badge-prefix-cls}-rtl { - .@{badge-prefix-cls}-count, - .@{badge-prefix-cls}-dot, - .@{number-prefix-cls}-custom-component { - transform: translate(-50%, -50%); - } - - .@{badge-prefix-cls}-zoom-appear, - .@{badge-prefix-cls}-zoom-enter { - animation-name: antZoomBadgeInRtl; - } - - .@{badge-prefix-cls}-zoom-leave { - animation-name: antZoomBadgeOutRtl; - } -} - -// ====================== Animations ======================= @keyframes antStatusProcessing { 0% { transform: scale(0.8); @@ -268,28 +245,6 @@ } } -@keyframes antZoomBadgeInRtl { - 0% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; - } - - 100% { - transform: scale(1) translate(-50%, -50%); - } -} - -@keyframes antZoomBadgeOutRtl { - 0% { - transform: scale(1) translate(-50%, -50%); - } - - 100% { - transform: scale(0) translate(-50%, -50%); - opacity: 0; - } -} - @keyframes antNoWrapperZoomBadgeIn { 0% { transform: scale(0); @@ -324,3 +279,4 @@ } @import './ribbon'; +@import './rtl'; diff --git a/components/badge/style/rtl.less b/components/badge/style/rtl.less new file mode 100644 index 00000000000..39d1f68f505 --- /dev/null +++ b/components/badge/style/rtl.less @@ -0,0 +1,42 @@ +.@{badge-prefix-cls}-rtl { + direction: rtl; +} + +.@{badge-prefix-cls}:not(.@{badge-prefix-cls}-not-a-wrapper).@{badge-prefix-cls}-rtl { + .@{badge-prefix-cls}-count, + .@{badge-prefix-cls}-dot, + .@{number-prefix-cls}-custom-component { + transform: translate(-50%, -50%); + } + + .@{badge-prefix-cls}-zoom-appear, + .@{badge-prefix-cls}-zoom-enter { + animation-name: antZoomBadgeInRtl; + } + + .@{badge-prefix-cls}-zoom-leave { + animation-name: antZoomBadgeOutRtl; + } +} + +@keyframes antZoomBadgeInRtl { + 0% { + transform: scale(0) translate(-50%, -50%); + opacity: 0; + } + + 100% { + transform: scale(1) translate(-50%, -50%); + } +} + +@keyframes antZoomBadgeOutRtl { + 0% { + transform: scale(1) translate(-50%, -50%); + } + + 100% { + transform: scale(0) translate(-50%, -50%); + opacity: 0; + } +} diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index 656d7afd926..a4a6849c20a 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -9,6 +9,10 @@ color: @breadcrumb-base-color; font-size: @breadcrumb-font-size; + &&-rtl { + direction: rtl; + } + .@{iconfont-css-prefix} { font-size: @breadcrumb-icon-font-size; } diff --git a/components/breadcrumb/style/patch.less b/components/breadcrumb/style/patch.less index 04b42fcb3b1..4065fa43026 100644 --- a/components/breadcrumb/style/patch.less +++ b/components/breadcrumb/style/patch.less @@ -1,7 +1,7 @@ .@{breadcrumb-prefix-cls} { &-link { .@{iconfont-css-prefix} + span { - margin-left: 4px; + margin-inline-start: 4px; } } @@ -13,6 +13,12 @@ color: @breadcrumb-last-item-color; } } + + &-rtl { + nz-breadcrumb-item { + unicode-bidi: isolate; + } + } } nz-breadcrumb { diff --git a/components/button/style/index.less b/components/button/style/index.less index fa954d9258c..181a706f04b 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -31,34 +31,6 @@ &-primary { .btn-primary(); - - .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) { - border-inline-end-color: @btn-group-border; - border-inline-start-color: @btn-group-border; - - &:disabled { - border-color: @btn-default-border; - } - } - - .@{btn-prefix-cls}-group &:first-child { - &:not(:last-child) { - border-inline-end-color: @btn-group-border; - - &[disabled] { - border-inline-end-color: @btn-default-border; - } - } - } - - .@{btn-prefix-cls}-group &:last-child:not(:first-child), - .@{btn-prefix-cls}-group & + & { - border-inline-start-color: @btn-group-border; - - &[disabled] { - border-inline-start-color: @btn-default-border; - } - } } &-ghost { @@ -184,10 +156,6 @@ } } - &-group { - .btn-group(@btn-prefix-cls); - } - // http://stackoverflow.com/a/21281554/3040605 &:focus > span, &:active > span { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 8d09295cdc5..e66517cd79c 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -190,27 +190,6 @@ .button-disabled(); } -.button-group-base(@btnClassName) { - position: relative; - display: inline-flex; - > .@{btnClassName}, - > span > .@{btnClassName} { - position: relative; - - &:hover, - &:focus, - &:active { - z-index: 2; - } - - &[disabled] { - z-index: 0; - } - } - .@{btnClassName}-icon-only { - font-size: @font-size-base; - } -} // Base styles of buttons // -------------------------------------------------- .btn() { @@ -504,82 +483,3 @@ border-radius: 50%; } } -// Horizontal button groups style -// -------------------------------------------------- -.btn-group(@btnClassName: btn) { - .button-group-base(@btnClassName); - .@{btnClassName} + .@{btnClassName}, - .@{btnClassName} + &, - span + .@{btnClassName}, - .@{btnClassName} + span, - > span + span, - & + .@{btnClassName}, - & + & { - margin-inline-start: -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-inline-start: 0; - } - > .@{btnClassName}:only-child { - border-radius: @btn-border-radius-base; - } - > span:only-child > .@{btnClassName} { - border-radius: @btn-border-radius-base; - } - > .@{btnClassName}:first-child:not(:last-child), - > span:first-child:not(:last-child) > .@{btnClassName} { - border-start-start-radius: @btn-border-radius-base; - border-end-start-radius: @btn-border-radius-base; - } - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - border-start-end-radius: @btn-border-radius-base; - border-end-end-radius: @btn-border-radius-base; - } - - &-sm { - > .@{btnClassName}:only-child { - border-radius: @btn-border-radius-sm; - } - > span:only-child > .@{btnClassName} { - border-radius: @btn-border-radius-sm; - } - > .@{btnClassName}:first-child:not(:last-child), - > span:first-child:not(:last-child) > .@{btnClassName} { - border-start-start-radius: @btn-border-radius-sm; - border-end-start-radius: @btn-border-radius-sm; - } - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - border-start-end-radius: @btn-border-radius-sm; - border-end-end-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 { - padding-right: 8px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - & > &:last-child:not(:first-child) > .@{btnClassName}:first-child { - padding-left: 8px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } -} From 548828a8a4334fa22154012f6dfb4d4da3ff030a Mon Sep 17 00:00:00 2001 From: laffery86 Date: Sat, 1 Aug 2026 14:43:23 +0800 Subject: [PATCH 5/7] refactor(module:*): fix breadcrumb unicode-bidi --- components/breadcrumb/style/patch.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/breadcrumb/style/patch.less b/components/breadcrumb/style/patch.less index 4065fa43026..402248838d3 100644 --- a/components/breadcrumb/style/patch.less +++ b/components/breadcrumb/style/patch.less @@ -15,7 +15,7 @@ } &-rtl { - nz-breadcrumb-item { + > nz-breadcrumb-item { unicode-bidi: isolate; } } From 2e5d84e975ee1e07dbe2b286e3ee0b5ff8896f65 Mon Sep 17 00:00:00 2001 From: laffery86 Date: Tue, 4 Aug 2026 10:15:01 +0800 Subject: [PATCH 6/7] refactor(module:*): consolidate rtl styles --- components/alert/style/index.less | 2 +- components/breadcrumb/style/index.less | 2 +- components/button/demo/basic.ts | 2 +- components/button/demo/danger.ts | 2 +- components/button/demo/disabled.ts | 4 +- components/button/demo/ghost.ts | 2 +- components/button/demo/icon.ts | 2 +- components/button/demo/loading.ts | 2 +- components/button/demo/multiple.ts | 2 +- components/button/demo/size.ts | 4 +- components/button/style/space-compact.less | 4 +- components/calendar/style/index.less | 4 + components/card/style/index.less | 7 +- components/carousel/style/index.less | 12 +- components/check-list/style/index.less | 7 +- components/checkbox/demo/controller.ts | 2 +- components/collapse/style/index.less | 4 + components/comment/style/index.less | 4 + components/cron-expression/style/index.less | 4 +- components/date-picker/style/index.less | 4 + components/date-picker/style/panel.less | 14 + components/descriptions/style/index.less | 6 +- components/divider/style/index.less | 30 +- components/drawer/style/drawer.less | 4 + components/drawer/style/index.less | 3 - components/dropdown/style/index.less | 4 + components/dropdown/style/status.less | 4 - components/empty/style/index.less | 4 + components/float-button/demo/description.ts | 4 +- components/float-button/demo/group-menu.ts | 4 +- .../float-button/demo/group-placement.ts | 75 ++--- components/float-button/demo/group.ts | 4 +- components/float-button/demo/open.ts | 6 +- components/float-button/demo/shape.ts | 4 +- components/float-button/demo/type.ts | 4 +- components/float-button/style/index.less | 8 + components/form/demo/advanced-search.ts | 12 +- components/form/demo/dynamic-form-item.ts | 8 +- components/form/demo/normal-login.ts | 4 +- components/form/demo/validate-reactive.ts | 42 ++- components/form/style/components.less | 16 - components/form/style/index.less | 161 +--------- components/form/style/inline.less | 2 +- components/grid/style/index.less | 4 + components/hash-code/hash-code.component.ts | 4 +- components/hash-code/style/index.less | 6 +- components/input-number/demo/formatter.ts | 2 +- components/input-number/demo/keyboard.ts | 2 +- components/input-number/demo/size.ts | 2 +- components/input-number/style/index.less | 8 + components/input/style/IE11.less | 20 -- components/input/style/index.less | 13 +- components/input/style/input-otp.less | 4 + components/input/style/mixin.less | 2 +- components/input/style/patch.less | 10 +- components/input/style/status.less | 2 +- components/layout/demo/fixed-sider.ts | 4 +- components/layout/demo/fixed.ts | 5 +- components/layout/demo/top-side-2.ts | 5 +- components/layout/demo/top-side.ts | 5 +- components/layout/demo/top.ts | 5 +- components/layout/style/index.less | 4 + components/layout/style/patch.less | 10 +- components/list/style/bordered.less | 10 +- components/list/style/index.less | 4 + components/mention/style/index.less | 4 + components/menu/style/dark.less | 14 +- components/menu/style/index.less | 217 ++----------- components/message/style/index.less | 4 + components/modal/style/index.less | 2 - components/modal/style/modal.less | 4 + components/notification/demo/placement.ts | 2 +- components/notification/demo/with-icon.ts | 2 +- components/notification/style/index.less | 17 +- components/notification/style/placement.less | 5 +- components/page-header/demo/responsive.ts | 2 - components/page-header/style/index.less | 4 + components/pagination/style/index.less | 14 +- components/popover/demo/overlay.ts | 5 +- components/popover/style/index.less | 2 +- components/progress/demo/circle-mini.ts | 4 +- components/progress/demo/circle.ts | 4 +- components/progress/demo/format.ts | 4 +- components/progress/demo/gradient.ts | 4 +- components/progress/style/index.less | 4 + components/qr-code/style/index.less | 44 +-- components/radio/style/index.less | 8 + components/rate/style/index.less | 4 + components/rate/style/index.tsx | 2 - components/result/style/index.less | 5 + components/segmented/style/index.less | 4 + components/select/doc/index.en-US.md | 2 +- components/select/doc/index.zh-CN.md | 2 +- components/select/style/index.less | 8 + components/skeleton/style/index.less | 43 +-- components/slider/demo/basic.ts | 4 +- components/slider/demo/reverse.ts | 6 +- components/slider/style/index.less | 4 + .../space/space-compact-item.directive.ts | 14 +- .../space/space-compact.component.spec.ts | 28 ++ components/space/space-compact.component.ts | 6 +- components/space/space.component.ts | 10 +- components/space/style/compact.less | 4 + components/space/style/index.less | 4 + components/spin/style/index.less | 4 + components/splitter/splitter.component.ts | 6 +- components/splitter/splitter.spec.ts | 17 + components/splitter/style/index.less | 4 + components/statistic/style/index.less | 4 + components/steps/doc/index.en-US.md | 6 +- components/steps/doc/index.zh-CN.md | 6 +- components/steps/style/custom-icon.less | 2 +- components/steps/style/index.less | 303 +----------------- components/steps/style/label-placement.less | 11 +- components/steps/style/nav.less | 27 +- components/steps/style/progress-dot.less | 24 +- components/steps/style/progress.less | 24 +- components/steps/style/small.less | 7 +- components/steps/style/vertical.less | 10 +- components/style/mixins/placement-arrow.less | 10 +- components/switch/style/index.less | 4 + components/table/demo/ajax.ts | 2 +- components/table/demo/basic.ts | 2 +- components/table/demo/colspan-rowspan.ts | 2 +- components/table/demo/custom-column.ts | 10 +- components/table/demo/custom-filter-panel.ts | 2 +- components/table/demo/drag-sorting.ts | 2 +- components/table/demo/dynamic-settings.ts | 6 +- components/table/demo/edit-cell.ts | 2 +- components/table/demo/edit-row.ts | 4 +- components/table/demo/expand-children.ts | 4 +- components/table/demo/expand-icon.ts | 2 +- components/table/demo/expand.ts | 2 +- components/table/demo/fixed-columns.ts | 2 +- components/table/demo/nested-table.ts | 4 +- components/table/demo/reset-filter.ts | 2 +- .../table/demo/row-selection-and-operation.ts | 4 +- components/table/demo/row-selection-custom.ts | 2 +- components/table/doc/index.en-US.md | 6 +- components/table/doc/index.zh-CN.md | 6 +- components/table/style/bordered.less | 8 +- components/table/style/index.less | 33 +- components/table/style/patch.less | 2 +- components/table/style/size.less | 6 +- components/tabs/demo/card-top.ts | 2 +- components/tabs/demo/custom-add-trigger.ts | 2 +- components/tabs/demo/extra.ts | 4 +- components/tabs/demo/link-router.ts | 2 +- components/tabs/demo/slide.ts | 48 +-- components/tabs/style/card-style.less | 5 +- components/tabs/style/card.less | 5 - components/tabs/style/dropdown.less | 8 +- components/tabs/style/index.less | 7 +- components/tabs/style/patch.less | 9 +- components/tabs/style/position.less | 13 +- components/tabs/style/size.less | 5 - components/tabs/tabs.component.spec.ts | 4 +- components/tabs/tabs.component.ts | 2 +- components/tag/style/index.less | 4 + components/timeline/style/index.less | 8 + components/timeline/style/index.tsx | 2 - components/tooltip/style/index.less | 3 - components/transfer/demo/table-transfer.ts | 7 +- components/transfer/style/customize.less | 4 - components/transfer/style/index.less | 18 +- components/transfer/style/status.less | 4 - components/tree-select/style/entry.less | 1 - components/tree-select/style/index.less | 8 +- components/tree-view/style/entry.less | 5 - components/tree-view/style/index.less | 5 - components/tree/demo/directory.ts | 6 +- components/tree/style/mixin.less | 8 + components/typography/style/index.less | 2 +- components/upload/style/index.less | 8 +- 174 files changed, 670 insertions(+), 1273 deletions(-) delete mode 100644 components/form/style/components.less delete mode 100644 components/input/style/IE11.less delete mode 100644 components/rate/style/index.tsx delete mode 100644 components/timeline/style/index.tsx diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 7813ef10e22..d0cfbff5e05 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -13,7 +13,7 @@ overflow-wrap: break-word; border-radius: @border-radius-base; - &&-rtl { + &-rtl { direction: rtl; } diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index a4a6849c20a..67a534370d8 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -9,7 +9,7 @@ color: @breadcrumb-base-color; font-size: @breadcrumb-font-size; - &&-rtl { + &-rtl { direction: rtl; } diff --git a/components/button/demo/basic.ts b/components/button/demo/basic.ts index 4766dc62ee2..7c4efb637f1 100644 --- a/components/button/demo/basic.ts +++ b/components/button/demo/basic.ts @@ -14,7 +14,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; `, styles: ` [nz-button] { - margin-right: 8px; + margin-inline-end: 8px; margin-bottom: 12px; } ` diff --git a/components/button/demo/danger.ts b/components/button/demo/danger.ts index 0a1ea032278..bb073548fea 100644 --- a/components/button/demo/danger.ts +++ b/components/button/demo/danger.ts @@ -14,7 +14,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; `, styles: ` [nz-button] { - margin-right: 8px; + margin-inline-end: 8px; margin-bottom: 12px; } ` diff --git a/components/button/demo/disabled.ts b/components/button/demo/disabled.ts index b32034555fd..88a54e7c46e 100644 --- a/components/button/demo/disabled.ts +++ b/components/button/demo/disabled.ts @@ -36,7 +36,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; `, styles: ` [nz-button] { - margin-right: 8px; + margin-inline-end: 8px; margin-bottom: 12px; } @@ -46,7 +46,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; } .ghost-background [nz-button] { - margin-right: 8px; + margin-inline-end: 8px; margin-bottom: 0; } ` diff --git a/components/button/demo/ghost.ts b/components/button/demo/ghost.ts index e8ea93c49cf..ef67daf9730 100644 --- a/components/button/demo/ghost.ts +++ b/components/button/demo/ghost.ts @@ -20,7 +20,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; } [nz-button] { - margin-right: 8px; + margin-inline-end: 8px; } ` }) diff --git a/components/button/demo/icon.ts b/components/button/demo/icon.ts index c7d4bbf34c9..8441d83ad44 100644 --- a/components/button/demo/icon.ts +++ b/components/button/demo/icon.ts @@ -36,7 +36,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; `, styles: ` [nz-button] { - margin-right: 8px; + margin-inline-end: 8px; margin-bottom: 12px; } ` diff --git a/components/button/demo/loading.ts b/components/button/demo/loading.ts index 445b789e096..da9cfa94909 100644 --- a/components/button/demo/loading.ts +++ b/components/button/demo/loading.ts @@ -24,7 +24,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; `, styles: ` [nz-button] { - margin-right: 8px; + margin-inline-end: 8px; margin-bottom: 12px; } ` diff --git a/components/button/demo/multiple.ts b/components/button/demo/multiple.ts index 87f0719f4a9..76d96b0d91b 100644 --- a/components/button/demo/multiple.ts +++ b/components/button/demo/multiple.ts @@ -30,7 +30,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; `, styles: ` [nz-button] { - margin-right: 8px; + margin-inline-end: 8px; margin-bottom: 12px; } ` diff --git a/components/button/demo/size.ts b/components/button/demo/size.ts index 2206e295ead..e1b2c36882c 100644 --- a/components/button/demo/size.ts +++ b/components/button/demo/size.ts @@ -52,8 +52,8 @@ import { NzSpaceModule } from 'ng-zorro-antd/space'; `, styles: ` - [nz-button] { - margin-right: 8px; + :host > [nz-button] { + margin-inline-end: 8px; margin-bottom: 12px; } ` diff --git a/components/button/style/space-compact.less b/components/button/style/space-compact.less index c2fff11aaca..c78ad2fb12a 100644 --- a/components/button/style/space-compact.less +++ b/components/button/style/space-compact.less @@ -19,7 +19,7 @@ &::after { position: absolute; top: -@border-width-base; - left: -@border-width-base; + inset-inline-start: -@border-width-base; display: inline-block; width: @border-width-base; height: calc(100% + @border-width-base * 2); @@ -41,7 +41,7 @@ &::after { position: absolute; top: -@border-width-base; - left: -@border-width-base; + inset-inline-start: -@border-width-base; display: inline-block; width: calc(100% + @border-width-base * 2); height: @border-width-base; diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index e9793b46e5a..d385eb0e68a 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -8,6 +8,10 @@ .reset-component(); background: @calendar-full-bg; + &-rtl { + direction: rtl; + } + // ========================= Header ========================= &-header { display: flex; diff --git a/components/card/style/index.less b/components/card/style/index.less index 4f9d905ff2e..900d8a0c989 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -15,6 +15,10 @@ background: @card-background; border-radius: @card-radius; + &-rtl { + direction: rtl; + } + &-hoverable { cursor: pointer; transition: box-shadow 0.3s, border-color 0.3s; @@ -129,8 +133,7 @@ &-bordered &-cover { margin-top: -1px; - margin-right: -1px; - margin-left: -1px; + margin-inline: -1px; } &-cover { diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index a2307263ac0..f251f3ae509 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -12,6 +12,10 @@ .@{carousel-prefix-cls} { .reset-component(); + &-rtl { + direction: rtl; + } + .slick-slider { position: relative; display: block; @@ -185,10 +189,6 @@ &::after { transform: rotate(-45deg); } - - &:dir(rtl)::after { - transform: rotate(135deg); - } } .slick-next { @@ -197,10 +197,6 @@ &::after { transform: rotate(135deg); } - - &:dir(rtl)::after { - transform: rotate(-45deg); - } } // Vertical mode (dots on left or right) diff --git a/components/check-list/style/index.less b/components/check-list/style/index.less index 1d755120ebf..437245a4df4 100644 --- a/components/check-list/style/index.less +++ b/components/check-list/style/index.less @@ -5,7 +5,7 @@ .@{check-list-prefix-cls} { position: fixed; - right: 32px; + inset-inline-end: 32px; bottom: 32px; z-index: 999; font-size: @font-size-base; @@ -34,7 +34,7 @@ .@{check-list-prefix-cls}-trigger-dot { position: absolute; top: -12px; - right: -12px; + inset-inline-end: -12px; display: flex; flex-direction: column; align-items: center; @@ -114,8 +114,7 @@ align-items: center; justify-content: space-between; height: 52px; - padding-right: @padding-sm; - padding-left: @padding-sm; + padding-inline: @padding-sm; border-radius: 6px; cursor: pointer; diff --git a/components/checkbox/demo/controller.ts b/components/checkbox/demo/controller.ts index d7fdc3d7bb1..295d22ede8a 100644 --- a/components/checkbox/demo/controller.ts +++ b/components/checkbox/demo/controller.ts @@ -22,7 +22,7 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; `, styles: ` button { - margin-right: 8px; + margin-inline-end: 8px; } ` }) diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index fb4dd9ce9de..f2839911c35 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -12,6 +12,10 @@ border: @border-width-base @border-style-base @border-color-base; border-radius: @collapse-panel-border-radius; + &-rtl { + direction: rtl; + } + & > &-item { border-bottom: @border-width-base @border-style-base @border-color-base; diff --git a/components/comment/style/index.less b/components/comment/style/index.less index 743a3a7f89e..b51c9540e00 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -7,6 +7,10 @@ position: relative; background-color: @comment-bg; + &-rtl { + direction: rtl; + } + &-inner { display: flex; padding: @comment-padding-base; diff --git a/components/cron-expression/style/index.less b/components/cron-expression/style/index.less index 907ce15df9f..2d2503a697a 100644 --- a/components/cron-expression/style/index.less +++ b/components/cron-expression/style/index.less @@ -52,7 +52,7 @@ } &-map { - margin-left: @margin-sm; + margin-inline-start: @margin-sm; } &-preview { @@ -73,7 +73,7 @@ display: flex; flex: 0 0 220px; align-items: center; - padding-left: @padding-md; + padding-inline-start: @padding-md; } &-list, diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index f1995d6d198..97572ea046d 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -28,6 +28,10 @@ border @animation-duration-slow, box-shadow @animation-duration-slow; + &-rtl { + direction: rtl; + } + &:hover, &-focused { .hover(); diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less index 1324ece36f1..3fe62b25b13 100644 --- a/components/date-picker/style/panel.less +++ b/components/date-picker/style/panel.less @@ -19,6 +19,20 @@ } } + &-panel-rtl { + direction: rtl; + + .@{picker-prefix-cls}-prev-icon, + .@{picker-prefix-cls}-super-prev-icon { + transform: rotate(135deg); + } + + .@{picker-prefix-cls}-next-icon, + .@{picker-prefix-cls}-super-next-icon { + transform: rotate(-45deg); + } + } + // ======================================================== // = Shared Panel = // ======================================================== diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index 0540bb9325b..887f6fdd936 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -4,6 +4,10 @@ @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; .@{descriptions-prefix-cls} { + &-rtl { + direction: rtl; + } + &-header { display: flex; align-items: center; @@ -22,7 +26,7 @@ } &-extra { - margin-left: auto; + margin-inline-start: auto; color: @descriptions-extra-color; font-size: @font-size-base; } diff --git a/components/divider/style/index.less b/components/divider/style/index.less index c265bf8c1e0..381568e3275 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -16,7 +16,7 @@ margin: 0 @divider-vertical-gutter; vertical-align: middle; border-top: 0; - border-left: @border-width-base solid @divider-color; + border-inline-start: @border-width-base solid @divider-color; } &-horizontal { @@ -111,7 +111,7 @@ } .@{divider-prefix-cls}-inner-text { - padding-left: 0; + padding-inline-start: 0; } } @@ -125,31 +125,7 @@ } .@{divider-prefix-cls}-inner-text { - padding-right: 0; - } - } -} - - - -.@{divider-prefix-cls} { - &-horizontal&-with-text-left:dir(rtl) { - &::before { - width: 100% - @divider-orientation-margin; - } - - &::after { - width: @divider-orientation-margin; - } - } - - &-horizontal&-with-text-right:dir(rtl) { - &::before { - width: @divider-orientation-margin; - } - - &::after { - width: 100% - @divider-orientation-margin; + padding-inline-end: 0; } } } diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less index 640313cb639..05e47a860f4 100644 --- a/components/drawer/style/drawer.less +++ b/components/drawer/style/drawer.less @@ -8,6 +8,10 @@ z-index: @zindex-modal; pointer-events: none; + &-rtl { + direction: rtl; + } + &-inline { position: absolute; } diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less index 26882c7c3d7..58c39fef384 100644 --- a/components/drawer/style/index.less +++ b/components/drawer/style/index.less @@ -4,7 +4,4 @@ @import './motion'; @import './animation'; -@drawer-prefix-cls: ~'@{ant-prefix}-drawer'; - - .popover-customize-bg(@drawer-prefix-cls, @popover-background); diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 3f28d499005..94a207622b0 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -15,6 +15,10 @@ z-index: @zindex-dropdown; display: block; + &-rtl { + direction: rtl; + } + &::before { position: absolute; inset-block: calc(@popover-arrow-width / 2 - @popover-distance); diff --git a/components/dropdown/style/status.less b/components/dropdown/style/status.less index e370a8722b7..701e0269f87 100644 --- a/components/dropdown/style/status.less +++ b/components/dropdown/style/status.less @@ -1,7 +1,3 @@ -@import (reference) '../../style/themes/index'; - -@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown'; - .@{dropdown-prefix-cls}-menu-item { &&-danger { color: @error-color; diff --git a/components/empty/style/index.less b/components/empty/style/index.less index 256c4c40e88..04317231cf2 100644 --- a/components/empty/style/index.less +++ b/components/empty/style/index.less @@ -10,6 +10,10 @@ line-height: @line-height-base; text-align: center; + &-rtl { + direction: rtl; + } + &-image { height: 100px; margin-bottom: 8px; diff --git a/components/float-button/demo/description.ts b/components/float-button/demo/description.ts index b7410019aa2..be59cee8d7a 100644 --- a/components/float-button/demo/description.ts +++ b/components/float-button/demo/description.ts @@ -7,8 +7,8 @@ import { NzFloatButtonModule } from 'ng-zorro-antd/float-button'; imports: [NzFloatButtonModule], template: `
- - + +
`, styles: ` diff --git a/components/float-button/demo/group-menu.ts b/components/float-button/demo/group-menu.ts index eb967860898..36b5f7a03a6 100644 --- a/components/float-button/demo/group-menu.ts +++ b/components/float-button/demo/group-menu.ts @@ -12,7 +12,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; nzIcon="customer-service" nzType="primary" nzTrigger="click" - style="right: 24px" + style="inset-inline-end: 24px" (nzOnOpenChange)="openChange($event)" > @@ -22,7 +22,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; nzIcon="customer-service" nzType="primary" nzTrigger="hover" - style="right: 94px" + style="inset-inline-end: 94px" (nzOnOpenChange)="openChange($event)" > diff --git a/components/float-button/demo/group-placement.ts b/components/float-button/demo/group-placement.ts index 625b491b2b8..68c2bdd2202 100644 --- a/components/float-button/demo/group-placement.ts +++ b/components/float-button/demo/group-placement.ts @@ -7,51 +7,19 @@ import { NzFloatButtonModule } from 'ng-zorro-antd/float-button'; imports: [NzFloatButtonModule], template: `
-
- - - - - - - - - - - - - - - - +
+ @for (placement of placements; track placement) { + + + + + }
`, @@ -59,28 +27,28 @@ import { NzFloatButtonModule } from 'ng-zorro-antd/float-button'; .container { display: flex; height: 300px; - justify-content: center; + justify-content: space-evenly; align-items: center; - .anchor { + .box { height: 100px; width: 100px; position: relative; - .up { + .top { inset-inline-end: 30px; bottom: 80px; } - .down { + .bottom { inset-inline-end: 30px; bottom: -20px; } .left { - inset-inline-end: 80px; + right: 80px; bottom: 30px; } .right { - inset-inline-end: -20px; + left: 80px; bottom: 30px; } } @@ -91,7 +59,6 @@ import { NzFloatButtonModule } from 'ng-zorro-antd/float-button'; ` }) export class NzDemoFloatButtonGroupPlacementComponent { - openChange(status: boolean): void { - console.log(status); - } + readonly placements = ['top', 'bottom', 'left', 'right'] as const; + readonly icons = ['up', 'down', 'left', 'right']; } diff --git a/components/float-button/demo/group.ts b/components/float-button/demo/group.ts index cfa36ba77ac..746aea90fca 100644 --- a/components/float-button/demo/group.ts +++ b/components/float-button/demo/group.ts @@ -7,13 +7,13 @@ import { NzFloatButtonModule } from 'ng-zorro-antd/float-button'; imports: [NzFloatButtonModule], template: `
- + - + diff --git a/components/float-button/demo/open.ts b/components/float-button/demo/open.ts index 80a8b090e46..ba46885aca8 100644 --- a/components/float-button/demo/open.ts +++ b/components/float-button/demo/open.ts @@ -8,13 +8,13 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch'; selector: 'nz-demo-float-button-open', imports: [FormsModule, NzFloatButtonModule, NzSwitchModule], template: ` -
+
@@ -24,7 +24,7 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
`, styles: ` - .open { + .container { height: 300px; position: relative; } diff --git a/components/float-button/demo/shape.ts b/components/float-button/demo/shape.ts index 184af8f17cb..ab16afd0378 100644 --- a/components/float-button/demo/shape.ts +++ b/components/float-button/demo/shape.ts @@ -7,8 +7,8 @@ import { NzFloatButtonModule } from 'ng-zorro-antd/float-button'; imports: [NzFloatButtonModule], template: `
- - + +
`, styles: ` diff --git a/components/float-button/demo/type.ts b/components/float-button/demo/type.ts index fe1e93922cc..2bf297650f6 100644 --- a/components/float-button/demo/type.ts +++ b/components/float-button/demo/type.ts @@ -7,8 +7,8 @@ import { NzFloatButtonModule } from 'ng-zorro-antd/float-button'; imports: [NzFloatButtonModule], template: `
- - + +
`, styles: ` diff --git a/components/float-button/style/index.less b/components/float-button/style/index.less index 7fdf69dbea9..5ac1c5a6aae 100644 --- a/components/float-button/style/index.less +++ b/components/float-button/style/index.less @@ -89,6 +89,10 @@ border: none; } +.@{float-btn-prefix-cls}-rtl { + direction: rtl; +} + .@{float-btn-prefix-cls}-circle { height: @float-button-size; border-radius: 50%; @@ -192,6 +196,10 @@ justify-content: center; } + &-rtl { + direction: rtl; + } + .@{float-btn-prefix-cls} { position: static; } diff --git a/components/form/demo/advanced-search.ts b/components/form/demo/advanced-search.ts index 492f23eae32..15ffb3a248b 100644 --- a/components/form/demo/advanced-search.ts +++ b/components/form/demo/advanced-search.ts @@ -63,16 +63,10 @@ import { NzInputModule } from 'ng-zorro-antd/input'; overflow: visible; } - button { - margin-left: 8px; - } - - .collapse { - margin-left: 8px; - font-size: 12px; - } - .search-area { + display: inline-flex; + align-items: center; + gap: 8px; text-align: right; } ` diff --git a/components/form/demo/dynamic-form-item.ts b/components/form/demo/dynamic-form-item.ts index 6e550cc11b2..277ba505b1c 100644 --- a/components/form/demo/dynamic-form-item.ts +++ b/components/form/demo/dynamic-form-item.ts @@ -62,13 +62,16 @@ import { NzInputModule } from 'ng-zorro-antd/input'; `, styles: ` + ::ng-deep .ant-form-item-control-input-content { + display: flex; + } + .dynamic-delete-button { cursor: pointer; - position: relative; - top: 4px; font-size: 24px; color: #999; transition: all 0.3s; + margin-inline-start: 8px; } .dynamic-delete-button:hover { @@ -77,7 +80,6 @@ import { NzInputModule } from 'ng-zorro-antd/input'; .passenger-input { width: 60%; - margin-right: 8px; } [nz-form] { diff --git a/components/form/demo/normal-login.ts b/components/form/demo/normal-login.ts index a29e8caa305..b94d9f4f0b0 100644 --- a/components/form/demo/normal-login.ts +++ b/components/form/demo/normal-login.ts @@ -52,7 +52,9 @@ import { NzInputModule } from 'ng-zorro-antd/input'; } .login-form-forgot { - float: right; + display: inline-flex; + width: 100%; + justify-content: flex-end; } .login-form-button { diff --git a/components/form/demo/validate-reactive.ts b/components/form/demo/validate-reactive.ts index 2d720eb7082..3ce3f1c783b 100644 --- a/components/form/demo/validate-reactive.ts +++ b/components/form/demo/validate-reactive.ts @@ -1,4 +1,5 @@ -import { Component, inject, OnDestroy, OnInit } from '@angular/core'; +import { Component, inject } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { AbstractControl, NonNullableFormBuilder, @@ -6,8 +7,7 @@ import { ValidationErrors, Validators } from '@angular/forms'; -import { Observable, Observer, Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; +import { Observable, Observer } from 'rxjs'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzFormModule } from 'ng-zorro-antd/form'; @@ -17,7 +17,7 @@ import { NzInputModule } from 'ng-zorro-antd/input'; selector: 'nz-demo-form-validate-reactive', imports: [ReactiveFormsModule, NzButtonModule, NzFormModule, NzInputModule], template: ` -
+ Username @@ -76,8 +76,8 @@ import { NzInputModule } from 'ng-zorro-antd/input'; - - + +
@@ -88,14 +88,14 @@ import { NzInputModule } from 'ng-zorro-antd/input'; } button { - margin-left: 8px; + margin-inline-end: 8px; } ` }) -export class NzDemoFormValidateReactiveComponent implements OnInit, OnDestroy { - private fb = inject(NonNullableFormBuilder); - private destroy$ = new Subject(); - validateForm = this.fb.group({ +export class NzDemoFormValidateReactiveComponent { + private readonly fb = inject(NonNullableFormBuilder); + + form = this.fb.group({ userName: this.fb.control('', [Validators.required], [this.userNameAsyncValidator]), email: this.fb.control('', [Validators.email, Validators.required]), password: this.fb.control('', [Validators.required]), @@ -103,24 +103,18 @@ export class NzDemoFormValidateReactiveComponent implements OnInit, OnDestroy { comment: this.fb.control('', [Validators.required]) }); - ngOnInit(): void { - this.validateForm.controls.password.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => { - this.validateForm.controls.confirm.updateValueAndValidity(); + constructor() { + this.form.controls.password.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => { + this.form.controls.confirm.updateValueAndValidity(); }); } - ngOnDestroy(): void { - this.destroy$.next(); - this.destroy$.complete(); - } - - submitForm(): void { - console.log('submit', this.validateForm.value); + submit(): void { + console.log('submit', this.form.value); } - resetForm(e: MouseEvent): void { - e.preventDefault(); - this.validateForm.reset(); + reset(): void { + this.form.reset(); } userNameAsyncValidator(control: AbstractControl): Observable { diff --git a/components/form/style/components.less b/components/form/style/components.less deleted file mode 100644 index 10bf6cb964d..00000000000 --- a/components/form/style/components.less +++ /dev/null @@ -1,16 +0,0 @@ -@import (reference) '../../style/themes/index'; - -@form-prefix-cls: ~'@{ant-prefix}-form'; -@form-item-prefix-cls: ~'@{form-prefix-cls}-item'; - -// ================================================================ -// = Children Component = -// ================================================================ -// FIXME: useless, remove in v5 -.@{form-item-prefix-cls} { - .@{ant-prefix}-input-number { - + .@{form-prefix-cls}-text { - margin-left: 8px; - } - } -} diff --git a/components/form/style/index.less b/components/form/style/index.less index 2a9017247ce..da322964651 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -4,7 +4,6 @@ @import '../../button/style/mixin'; @import '../../grid/style/mixin'; @import './animation'; -@import './components'; @import './inline'; @import './horizontal'; @import './vertical'; @@ -19,6 +18,10 @@ .reset-component(); .reset-form(); + &-rtl { + direction: rtl; + } + .@{form-prefix-cls}-text { display: inline-block; padding-right: 8px; @@ -44,7 +47,6 @@ &-large { .formSize(@input-height-lg); } - } .explainAndExtraDistance(@num) when (@num >= 0) { @@ -337,161 +339,6 @@ } } - - - -// ================================================================ -// = Item = -// ================================================================ -.@{form-item-prefix-cls} { - // ============================================================== - // = Input = - // ============================================================== - &-control { - &:dir(rtl):first-child { - width: 100%; - } - } - - // status - &-has-feedback { - .@{ant-prefix}-input { - &:dir(rtl) { - padding-right: @input-padding-horizontal-base; - padding-left: 24px; - } - } - - .@{ant-prefix}-input-affix-wrapper { - .@{ant-prefix}-input-suffix { - &:dir(rtl) { - padding-right: @input-padding-horizontal-base; - padding-left: 18px; - } - } - .@{ant-prefix}-input { - &:dir(rtl) { - padding: 0; - } - } - } - - .@{ant-prefix}-input-number-affix-wrapper { - .@{ant-prefix}-input-number { - &:dir(rtl) { - padding: 0; - } - } - } - - .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) { - .@{ant-prefix}-input-suffix { - &:dir(rtl) { - right: auto; - left: 28px; - } - } - } - - .@{ant-prefix}-input-number { - &:dir(rtl) { - padding-left: 18px; - } - } - - > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, - > .@{ant-prefix}-select .@{ant-prefix}-select-clear, - :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow, - :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear, - :not(.@{ant-prefix}-input-number-group-addon) - > .@{ant-prefix}-select - .@{ant-prefix}-select-arrow, - :not(.@{ant-prefix}-input-number-group-addon) - > .@{ant-prefix}-select - .@{ant-prefix}-select-clear { - &:dir(rtl) { - right: auto; - left: 32px; - } - } - - > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value, - :not(.@{ant-prefix}-input-group-addon) - > .@{ant-prefix}-select - .@{ant-prefix}-select-selection-selected-value, - :not(.@{ant-prefix}-input-number-group-addon) - > .@{ant-prefix}-select - .@{ant-prefix}-select-selection-selected-value { - &:dir(rtl) { - padding-right: 0; - padding-left: 42px; - } - } - - .@{ant-prefix}-cascader-picker { - &-arrow { - &:dir(rtl) { - margin-right: 0; - margin-left: 19px; - } - } - - &-clear { - &:dir(rtl) { - right: auto; - left: 32px; - } - } - } - - .@{ant-prefix}-picker { - &:dir(rtl) { - padding-right: @input-padding-horizontal-base; - padding-left: @input-padding-horizontal-base + @font-size-base * 1.3; - } - - &-large { - &:dir(rtl) { - padding-right: @input-padding-horizontal-lg; - padding-left: @input-padding-horizontal-lg + @font-size-base * 1.3; - } - } - - &-small { - &:dir(rtl) { - padding-right: @input-padding-horizontal-sm; - padding-left: @input-padding-horizontal-sm + @font-size-base * 1.3; - } - } - } - - &.@{form-item-prefix-cls} { - &-has-success, - &-has-warning, - &-has-error, - &-is-validating { - // ====================== Icon ====================== - .@{form-item-prefix-cls}-children-icon { - &:dir(rtl) { - right: auto; - left: 0; - } - } - } - } - } -} - -// inline -.@{form-prefix-cls}-inline { - .@{form-prefix-cls}-item { - &:dir(rtl) { - margin-right: 0; - margin-left: 16px; - } - } -} - // vertical .make-vertical-layout-label() { &:dir(rtl) { diff --git a/components/form/style/inline.less b/components/form/style/inline.less index 63946752da8..03c068ebf21 100644 --- a/components/form/style/inline.less +++ b/components/form/style/inline.less @@ -10,7 +10,7 @@ .@{form-prefix-cls}-item { flex: none; flex-wrap: nowrap; - margin-right: 16px; + margin-inline-end: 16px; margin-bottom: 0; &-with-help { diff --git a/components/grid/style/index.less b/components/grid/style/index.less index 4999d9ed16b..9ae48270311 100644 --- a/components/grid/style/index.less +++ b/components/grid/style/index.less @@ -8,6 +8,10 @@ flex-flow: row wrap; min-width: 0; + &-rtl { + direction: rtl; + } + &::before, &::after { display: flex; diff --git a/components/hash-code/hash-code.component.ts b/components/hash-code/hash-code.component.ts index a5000d8ca74..85b4ad918f4 100644 --- a/components/hash-code/hash-code.component.ts +++ b/components/hash-code/hash-code.component.ts @@ -35,9 +35,7 @@ import { NzModeType } from './typings'; {{ nzLogo }}
- } - - @if (nzMode === 'single' || nzMode === 'rect') { + } @else {
diff --git a/components/hash-code/style/index.less b/components/hash-code/style/index.less index daead40f0a5..bcabf74982a 100644 --- a/components/hash-code/style/index.less +++ b/components/hash-code/style/index.less @@ -19,14 +19,14 @@ } .@{hash-code-prefix-cls}-header-copy { - margin-left: @margin-xs; + margin-inline-start: @margin-xs; cursor: pointer; opacity: 0.45; } .@{hash-code-prefix-cls}-header { display: flex; - justify-content: left; + justify-content: flex-start; width: 100%; height: 22px; padding-bottom: @padding-xs; @@ -41,7 +41,7 @@ .@{hash-code-prefix-cls}-header-logo { display: flex; flex: 1; - justify-content: right; + justify-content: flex-end; } } diff --git a/components/input-number/demo/formatter.ts b/components/input-number/demo/formatter.ts index 153a8c246ec..ad6022826c4 100644 --- a/components/input-number/demo/formatter.ts +++ b/components/input-number/demo/formatter.ts @@ -18,7 +18,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; `, styles: ` nz-input-number { - margin-right: 8px; + margin-inline-end: 8px; } ` }) diff --git a/components/input-number/demo/keyboard.ts b/components/input-number/demo/keyboard.ts index 1c00c7d1897..cd8b2eacf11 100644 --- a/components/input-number/demo/keyboard.ts +++ b/components/input-number/demo/keyboard.ts @@ -13,7 +13,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; `, styles: ` nz-input-number { - margin-right: 8px; + margin-inline-end: 8px; } ` }) diff --git a/components/input-number/demo/size.ts b/components/input-number/demo/size.ts index 799987f2d9f..12811a9bffd 100644 --- a/components/input-number/demo/size.ts +++ b/components/input-number/demo/size.ts @@ -13,7 +13,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; `, styles: ` nz-input-number { - margin-right: 8px; + margin-inline-end: 8px; } ` }) diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index 8d4b198f52a..54cf6e480ed 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -11,6 +11,14 @@ .reset-component(); .input(); + &-rtl { + direction: rtl; + + .@{input-number-prefix-cls}-input { + direction: rtl; + } + } + //== Style for input-group: input with label, with button or dropdown... &-group { .reset-component(); diff --git a/components/input/style/IE11.less b/components/input/style/IE11.less deleted file mode 100644 index 984413e6d21..00000000000 --- a/components/input/style/IE11.less +++ /dev/null @@ -1,20 +0,0 @@ -// Fix Input component height issue in IE11 -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .@{ant-prefix}-input { - height: @input-height-base; - - &-lg { - height: @input-height-lg; - } - - &-sm { - height: @input-height-sm; - } - - &-affix-wrapper { - > input.@{ant-prefix}-input { - height: auto; - } - } - } -} diff --git a/components/input/style/index.less b/components/input/style/index.less index 94529ee669c..555c053bee0 100644 --- a/components/input/style/index.less +++ b/components/input/style/index.less @@ -11,11 +11,19 @@ .reset-component(); .input(); + &-rtl, &-textarea-rtl { + direction: rtl; + } + //== Style for input-group: input with label, with button or dropdown... &-group { .reset-component(); .input-group(~'@{input-prefix-cls}'); + &-rtl { + direction: rtl; + } + &-wrapper { display: inline-block; width: 100%; @@ -23,6 +31,10 @@ vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403 .input-group-wrapper-compact(~'@{input-prefix-cls}'); + + &-rtl { + direction: rtl; + } } } @@ -104,4 +116,3 @@ } @import './search-input'; -@import './IE11'; diff --git a/components/input/style/input-otp.less b/components/input/style/input-otp.less index 7886d7e3906..13efc3eb176 100644 --- a/components/input/style/input-otp.less +++ b/components/input/style/input-otp.less @@ -4,6 +4,10 @@ align-items: center; column-gap: 8px; + &-rtl { + direction: rtl; + } + &-input { text-align: center; padding-inline: 4px; diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index a4a6afc523b..23acd0a64fe 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -436,7 +436,7 @@ } .@{ant-prefix}-input-group-wrapper + .@{ant-prefix}-input-group-wrapper { - margin-left: -1px; + margin-inline-start: -1px; .@{ant-prefix}-input-affix-wrapper { border-radius: 0; } diff --git a/components/input/style/patch.less b/components/input/style/patch.less index e62ea371737..efe9752e710 100644 --- a/components/input/style/patch.less +++ b/components/input/style/patch.less @@ -9,21 +9,21 @@ textarea.nz-textarea-autosize-measuring { } .ant-input-affix-wrapper-textarea-with-clear-btn .ant-input-suffix { - margin-left: 0; + margin-inline-start: 0; } nz-form-item-feedback-icon.@{ant-prefix}-input { &-suffix { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; z-index: 1; display: flex; flex: none; align-items: center; height: 100%; - margin-right: @padding-sm; - margin-left: @input-affix-margin; + margin-inline-start: @input-affix-margin; + margin-inline-end: @padding-sm; pointer-events: none; } } @@ -34,7 +34,7 @@ nz-form-item-feedback-icon.@{ant-prefix}-input { &-status-validating, &-status-success { &.@{ant-prefix}-input-has-feedback { - padding-right: @padding-lg + @padding-xss; + padding-inline-end: @padding-lg + @padding-xss; } } } diff --git a/components/input/style/status.less b/components/input/style/status.less index e6562e60241..413e713477b 100644 --- a/components/input/style/status.less +++ b/components/input/style/status.less @@ -25,7 +25,7 @@ each(@input-wrapper-cls, { &-status-validating { &.@{input-prefix-cls}-textarea-has-feedback { .@{input-prefix-cls} { - padding-right: 24px; + padding-inline-end: 24px; } } } diff --git a/components/layout/demo/fixed-sider.ts b/components/layout/demo/fixed-sider.ts index 52228f9120a..cb27fd28caf 100644 --- a/components/layout/demo/fixed-sider.ts +++ b/components/layout/demo/fixed-sider.ts @@ -166,11 +166,11 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; overflow: auto; height: 100%; position: fixed; - left: 0; + inset-inline-start: 0; } .right-layout { - margin-left: 200px; + margin-inline-start: 200px; } nz-header { diff --git a/components/layout/demo/fixed.ts b/components/layout/demo/fixed.ts index 66455a19783..0826b359331 100644 --- a/components/layout/demo/fixed.ts +++ b/components/layout/demo/fixed.ts @@ -37,8 +37,9 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; width: 120px; height: 31px; background: rgba(255, 255, 255, 0.2); - margin: 16px 24px 16px 0; - float: left; + margin-block: 16px; + margin-inline-end: 24px; + float: inline-start; } nz-header { diff --git a/components/layout/demo/top-side-2.ts b/components/layout/demo/top-side-2.ts index 886abdca32d..ca9500f3088 100644 --- a/components/layout/demo/top-side-2.ts +++ b/components/layout/demo/top-side-2.ts @@ -63,8 +63,9 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; width: 120px; height: 31px; background: rgba(255, 255, 255, 0.2); - margin: 16px 30px 16px 0; - float: left; + margin-block: 16px; + margin-inline-end: 24px; + float: inline-start; } .header-menu { diff --git a/components/layout/demo/top-side.ts b/components/layout/demo/top-side.ts index 12b6ffac4ea..1776497fac4 100644 --- a/components/layout/demo/top-side.ts +++ b/components/layout/demo/top-side.ts @@ -64,8 +64,9 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; width: 120px; height: 31px; background: rgba(255, 255, 255, 0.2); - margin: 16px 28px 16px 0; - float: left; + margin-block: 16px; + margin-inline-end: 24px; + float: inline-start; } .header-menu { diff --git a/components/layout/demo/top.ts b/components/layout/demo/top.ts index ed49f14bc44..8c82085ad9e 100644 --- a/components/layout/demo/top.ts +++ b/components/layout/demo/top.ts @@ -34,8 +34,9 @@ import { NzMenuModule } from 'ng-zorro-antd/menu'; width: 120px; height: 31px; background: rgba(255, 255, 255, 0.2); - margin: 16px 24px 16px 0; - float: left; + margin-block: 16px; + margin-inline-end: 24px; + float: inline-start; } [nz-menu] { diff --git a/components/layout/style/index.less b/components/layout/style/index.less index 57b33731d74..d1d6dcf4083 100644 --- a/components/layout/style/index.less +++ b/components/layout/style/index.less @@ -18,6 +18,10 @@ box-sizing: border-box; } + &-rtl { + direction: rtl; + } + &&-has-sider { flex-direction: row; diff --git a/components/layout/style/patch.less b/components/layout/style/patch.less index 5392f838821..4a8d7b32868 100644 --- a/components/layout/style/patch.less +++ b/components/layout/style/patch.less @@ -1,11 +1,5 @@ -nz-content { - display: block; -} - +nz-content, +nz-header, nz-footer { display: block; } - -nz-header { - display: block; -} diff --git a/components/list/style/bordered.less b/components/list/style/bordered.less index 63859a3eb10..34a73433990 100644 --- a/components/list/style/bordered.less +++ b/components/list/style/bordered.less @@ -3,19 +3,17 @@ .@{list-prefix-cls}-bordered { border: 1px solid @border-color-base; border-radius: @border-radius-base; + .@{list-prefix-cls}-header { - padding-right: @padding-lg; - padding-left: @padding-lg; + padding-inline: @padding-lg; } .@{list-prefix-cls}-footer { - padding-right: @padding-lg; - padding-left: @padding-lg; + padding-inline: @padding-lg; } .@{list-prefix-cls}-item { - padding-right: @padding-lg; - padding-left: @padding-lg; + padding-inline: @padding-lg; } .@{list-prefix-cls}-pagination { diff --git a/components/list/style/index.less b/components/list/style/index.less index 2b1e8e4bd8f..f8ed600ea9d 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -13,6 +13,10 @@ outline: none; } + &-rtl { + direction: rtl; + } + &-pagination { margin-top: @margin-lg; text-align: end; diff --git a/components/mention/style/index.less b/components/mention/style/index.less index d1380056571..249009f0d07 100644 --- a/components/mention/style/index.less +++ b/components/mention/style/index.less @@ -18,6 +18,10 @@ white-space: pre-wrap; vertical-align: bottom; + &-rtl { + direction: rtl; + } + // =================== Status =================== &-disabled { > .@{ant-prefix}-input { diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less index fe110330b75..c4dd94e811f 100644 --- a/components/menu/style/dark.less +++ b/components/menu/style/dark.less @@ -71,19 +71,19 @@ &-dark&-vertical, &-dark&-vertical-left, &-dark&-vertical-right { - border-right: 0; + border-inline-end: 0; } &-dark&-inline &-item, &-dark&-vertical &-item, &-dark&-vertical-left &-item, &-dark&-vertical-right &-item { - left: 0; - margin-left: 0; - border-right: 0; + inset-inline-start: 0; + margin-inline-start: 0; + border-inline-end: 0; &::after { - border-right: 0; + border-inline-end: 0; } } @@ -127,10 +127,10 @@ &-dark &-item-selected { color: @menu-dark-highlight-color; - border-right: 0; + border-inline-end: 0; &::after { - border-right: 0; + border-inline-end: 0; } > a, diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 6b3f084af12..ae2eea99af7 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -16,11 +16,10 @@ .reset-component(); margin-bottom: 0; - padding-left: 0; // Override default ul/ol + padding-inline-start: 0; // Override default ul/ol color: @menu-item-color; font-size: @menu-item-font-size; line-height: 0; // Fix display inline-block gap - text-align: left; list-style: none; background: @menu-bg; outline: none; @@ -33,6 +32,10 @@ .accessibility-focus(); } + &&-rtl { + direction: rtl; + } + ul, ol { margin: 0; @@ -103,10 +106,7 @@ &::before { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; background-color: transparent; content: ''; } @@ -160,11 +160,11 @@ &-inline, &-vertical, &-vertical-left { - border-right: @border-width-base @border-style-base @border-color-split; + border-inline-end: @border-width-base @border-style-base @border-color-split; } &-vertical-right { - border-left: @border-width-base @border-style-base @border-color-split; + border-inline-start: @border-width-base @border-style-base @border-color-split; } &-vertical&-sub, @@ -174,7 +174,7 @@ max-height: calc(100vh - 100px); padding: 0; overflow: hidden; - border-right: 0; + border-inline-end: 0; // https://github.com/ant-design/ant-design/issues/22244 // https://github.com/ant-design/ant-design/issues/26812 @@ -184,12 +184,12 @@ } .@{menu-prefix-cls}-item { - left: 0; - margin-left: 0; - border-right: 0; + inset-inline-start: 0; + margin-inline-start: 0; + border-inline-end: 0; &::after { - border-right: 0; + border-inline-end: 0; } } > .@{menu-prefix-cls}-item, @@ -226,7 +226,7 @@ margin @animation-duration-slow @ease-in-out, color @animation-duration-slow; + span { - margin-left: @menu-icon-margin-right; + margin-inline-start: @menu-icon-margin-right; opacity: 1; transition: opacity @animation-duration-slow @ease-in-out, margin @animation-duration-slow, color @animation-duration-slow; @@ -240,7 +240,7 @@ &.@{menu-prefix-cls}-item-only-child { > .@{iconfont-css-prefix}, > .@{menu-prefix-cls}-item-icon { - margin-right: 0; + margin-inline-end: 0; } } @@ -267,9 +267,8 @@ &::before { position: absolute; top: -7px; - right: 0; bottom: 0; - left: 0; + inset-inline: 0; z-index: -1; width: 100%; height: 100%; @@ -281,7 +280,7 @@ // https://github.com/ant-design/ant-design/issues/13955 &-placement-rightTop::before { top: 0; - left: -7px; + inset-inline-start: -7px; } > .@{menu-prefix-cls} { @@ -301,7 +300,7 @@ &-arrow { position: absolute; top: 50%; - right: 16px; + inset-inline-end: 16px; width: 10px; color: @menu-item-color; transform: translateY(-50%); @@ -408,9 +407,8 @@ &::after { position: absolute; - right: @menu-item-padding-horizontal; bottom: 0; - left: @menu-item-padding-horizontal; + inset-inline: @menu-item-padding-horizontal; border-bottom: 2px solid transparent; transition: border-color @animation-duration-slow @ease-in-out; content: ''; @@ -457,9 +455,9 @@ &::after { position: absolute; top: 0; - right: 0; bottom: 0; - border-right: @menu-item-active-border-width solid @menu-highlight-color; + inset-inline-end: 0; + border-inline-end: @menu-item-active-border-width solid @menu-highlight-color; transform: scaleY(0.0001); opacity: 0; transition: transform @menu-animation-duration-normal @ease-out, @@ -498,7 +496,7 @@ &-vertical { .@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-submenu-title { - padding-right: 34px; + padding-inline-end: 34px; } } @@ -521,7 +519,7 @@ .@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title, .@{menu-prefix-cls}-submenu-title { - padding-right: 34px; + padding-inline-end: 34px; } // Motion enhance for first level @@ -559,7 +557,7 @@ > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title, > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { - left: 0; + inset-inline-start: 0; padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)'; text-overflow: clip; @@ -599,8 +597,7 @@ } .@{menu-prefix-cls}-item-group-title { - padding-right: 4px; - padding-left: 4px; + padding-inline: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -648,7 +645,7 @@ } & .@{menu-prefix-cls}-item-group-title { - padding-left: 32px; + padding-inline-start: 32px; } } @@ -698,165 +695,3 @@ @import './light'; @import './dark'; - - -.@{menu-prefix-cls} { - &&:dir(rtl) { - direction: rtl; - text-align: right; - } - - &-item-group-title { - &:dir(rtl) { - text-align: right; - } - } - - &-inline, - &-vertical { - &:dir(rtl) { - border-right: none; - border-left: @border-width-base @border-style-base @border-color-split; - } - } - - &-dark&-inline, - &-dark&-vertical { - &:dir(rtl) { - border-left: none; - } - } - - &-vertical&-sub, - &-vertical-left&-sub, - &-vertical-right&-sub { - > .@{menu-prefix-cls}-item, - > .@{menu-prefix-cls}-submenu { - &:dir(rtl) { - transform-origin: top right; - } - } - } - - &-item, - &-submenu-title { - .@{menu-prefix-cls}-item-icon, - .@{iconfont-css-prefix} { - &:dir(rtl) { - margin-right: auto; - margin-left: @menu-icon-margin-right; - } - } - - &.@{menu-prefix-cls}-item-only-child { - > .@{menu-prefix-cls}-item-icon, - > .@{iconfont-css-prefix} { - &:dir(rtl) { - margin-left: 0; - } - } - } - } - - &-submenu { - &:dir(rtl).@{menu-prefix-cls}-submenu-popup { - transform-origin: 100% 0; - } - - &-vertical, - &-vertical-left, - &-vertical-right, - &-inline { - > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { - &:dir(rtl) { - right: auto; - left: 16px; - } - } - } - - &-vertical, - &-vertical-left, - &-vertical-right { - > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { - &::before { - &:dir(rtl) { - transform: rotate(-45deg) translateY(-2px); - } - } - - &::after { - &:dir(rtl) { - transform: rotate(45deg) translateY(2px); - } - } - } - } - } - - &-vertical, - &-vertical-left, - &-vertical-right, - &-inline { - .@{menu-prefix-cls}-item { - &::after { - &:dir(rtl) { - right: auto; - left: 0; - } - } - } - - .@{menu-prefix-cls}-item, - .@{menu-prefix-cls}-submenu-title { - &:dir(rtl) { - text-align: right; - } - } - } - - &-inline { - .@{menu-prefix-cls}-submenu-title { - &:dir(rtl) { - padding-right: 0; - padding-left: 34px; - } - } - } - - &-vertical { - .@{menu-prefix-cls}-submenu-title { - &:dir(rtl) { - padding-right: 16px; - padding-left: 34px; - } - } - } - - &-inline-collapsed&-vertical { - .@{menu-prefix-cls}-submenu-title { - &:dir(rtl) { - padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)'; - } - } - } - - &-item-group-list { - .@{menu-prefix-cls}-item, - .@{menu-prefix-cls}-submenu-title { - &:dir(rtl) { - padding: 0 28px 0 16px; - } - } - } - - &-sub&-inline { - border: 0; - & .@{menu-prefix-cls}-item-group-title { - &:dir(rtl) { - padding-right: 32px; - padding-left: 0; - } - } - } -} diff --git a/components/message/style/index.less b/components/message/style/index.less index e476401eb49..87c1c6ae9a1 100644 --- a/components/message/style/index.less +++ b/components/message/style/index.less @@ -13,6 +13,10 @@ width: 100%; pointer-events: none; + &-rtl { + direction: rtl; + } + &-notice { padding: 8px; text-align: center; diff --git a/components/modal/style/index.less b/components/modal/style/index.less index 926a06dd89a..c5b5b397bb9 100644 --- a/components/modal/style/index.less +++ b/components/modal/style/index.less @@ -4,8 +4,6 @@ @import './modal'; @import './confirm'; -@dialog-prefix-cls: ~'@{ant-prefix}-modal'; -@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm'; .popover-customize-bg(@dialog-prefix-cls, @popover-background); // Animations diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index 8f26a460ce0..5aa75107a95 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -13,6 +13,10 @@ &-wrap { z-index: @zindex-modal; + + &-rtl { + direction: rtl; + } } &-title { diff --git a/components/notification/demo/placement.ts b/components/notification/demo/placement.ts index ae5ea346508..aa4bc6ad02c 100644 --- a/components/notification/demo/placement.ts +++ b/components/notification/demo/placement.ts @@ -38,7 +38,7 @@ import { NzNotificationPlacement, NzNotificationService } from 'ng-zorro-antd/no `, styles: ` button { - margin-right: 1em; + margin-inline-end: 1em; } ` }) diff --git a/components/notification/demo/with-icon.ts b/components/notification/demo/with-icon.ts index 39d2be4290b..83f8f885886 100644 --- a/components/notification/demo/with-icon.ts +++ b/components/notification/demo/with-icon.ts @@ -14,7 +14,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification'; `, styles: ` button { - margin-right: 1em; + margin-inline-end: 1em; } ` }) diff --git a/components/notification/style/index.less b/components/notification/style/index.less index 33ac204347e..967a040b290 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -14,7 +14,11 @@ position: fixed; z-index: @zindex-notification; - margin-right: @notification-margin-edge; + margin-inline-end: @notification-margin-edge; + + &-rtl { + direction: rtl; + } &-close-icon { font-size: @font-size-base; @@ -29,8 +33,8 @@ position: relative; width: @notification-width; max-width: ~'calc(100vw - @{notification-margin-edge} * 2)'; - margin-bottom: @notification-margin-bottom; - margin-left: auto; + margin-block-end: @notification-margin-bottom; + margin-inline-start: auto; padding: @notification-padding; overflow: hidden; line-height: @line-height-base; @@ -41,8 +45,7 @@ .@{notification-prefix-cls}-top &, .@{notification-prefix-cls}-bottom & { - margin-right: auto; - margin-left: auto; + margin-inline: auto; } .@{notification-prefix-cls}-topLeft &, @@ -52,7 +55,7 @@ } &-message { - margin-bottom: 8px; + margin-block-end: 8px; color: @heading-color; font-size: @font-size-lg; line-height: 24px; @@ -81,7 +84,7 @@ } &-with-icon &-message { - margin-bottom: 4px; + margin-block-end: 4px; margin-inline-start: 48px; font-size: @font-size-lg; } diff --git a/components/notification/style/placement.less b/components/notification/style/placement.less index 76e417b2350..ee8583a669d 100644 --- a/components/notification/style/placement.less +++ b/components/notification/style/placement.less @@ -1,4 +1,3 @@ -@import '../../style/themes/index'; @import '../../style/core/motion/util'; @animation-max-height: 150px; @@ -94,12 +93,12 @@ @keyframes antNotificationFadeOut { 0% { max-height: @animation-max-height; - margin-bottom: @notification-margin-bottom; + margin-block-end: @notification-margin-bottom; } 100% { max-height: 0; - margin-bottom: 0; + margin-block-end: 0; padding-top: 0; padding-bottom: 0; opacity: 0; diff --git a/components/page-header/demo/responsive.ts b/components/page-header/demo/responsive.ts index da87f308a65..f87a53c3d06 100644 --- a/components/page-header/demo/responsive.ts +++ b/components/page-header/demo/responsive.ts @@ -73,8 +73,6 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs'; .extra { width: 100%; - margin-left: 0; - text-align: left; } } ` diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index a43c9148789..9a1002b1393 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -9,6 +9,10 @@ padding: @page-header-padding-vertical @page-header-padding; background-color: @component-background; + &-rtl { + direction: rtl; + } + &-ghost { background-color: @page-header-ghost-bg; } diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index ef078d0274e..cdc6c888286 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -133,20 +133,14 @@ transition: all 0.2s; &-svg { - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; margin: auto; } } .@{pagination-prefix-cls}-item-ellipsis { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; display: block; margin: auto; color: @disabled-color; @@ -181,7 +175,7 @@ &-prev, &-jump-prev, &-jump-next { - margin-right: 8px; + margin-inline-end: 8px; } &-prev, @@ -395,7 +389,7 @@ &&-mini &-jump-prev, &&-mini &-jump-next { height: @pagination-item-size-sm; - margin-right: 0; + margin-inline-end: 0; line-height: @pagination-item-size-sm; } diff --git a/components/popover/demo/overlay.ts b/components/popover/demo/overlay.ts index 026d71150fc..76eb93680ca 100644 --- a/components/popover/demo/overlay.ts +++ b/components/popover/demo/overlay.ts @@ -9,8 +9,8 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover'; template: ` - > - + ` }) diff --git a/components/popover/style/index.less b/components/popover/style/index.less index ec50f2e5590..8f0914d6218 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -16,7 +16,7 @@ max-width: 100vw; font-weight: normal; white-space: normal; - text-align: left; + text-align: start; cursor: auto; user-select: text; diff --git a/components/progress/demo/circle-mini.ts b/components/progress/demo/circle-mini.ts index 73b29a6bb1e..79e5fac3fd2 100644 --- a/components/progress/demo/circle-mini.ts +++ b/components/progress/demo/circle-mini.ts @@ -12,9 +12,9 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; `, styles: ` nz-progress { - margin-right: 8px; - margin-bottom: 8px; display: inline-block; + margin-inline-end: 8px; + margin-bottom: 8px; } ` }) diff --git a/components/progress/demo/circle.ts b/components/progress/demo/circle.ts index 393a42a1c3c..9e7ae021dc6 100644 --- a/components/progress/demo/circle.ts +++ b/components/progress/demo/circle.ts @@ -12,9 +12,9 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; `, styles: ` nz-progress { - margin-right: 8px; - margin-bottom: 8px; display: inline-block; + margin-inline-end: 8px; + margin-bottom: 8px; } ` }) diff --git a/components/progress/demo/format.ts b/components/progress/demo/format.ts index 551a37810fd..0e7cdf571c5 100644 --- a/components/progress/demo/format.ts +++ b/components/progress/demo/format.ts @@ -11,9 +11,9 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; `, styles: ` nz-progress { - margin-right: 8px; - margin-bottom: 8px; display: inline-block; + margin-inline-end: 8px; + margin-bottom: 8px; } ` }) diff --git a/components/progress/demo/gradient.ts b/components/progress/demo/gradient.ts index 4c3a5e23eff..8b4ed6226ec 100644 --- a/components/progress/demo/gradient.ts +++ b/components/progress/demo/gradient.ts @@ -17,9 +17,9 @@ import { NzProgressModule } from 'ng-zorro-antd/progress'; `, styles: ` .ant-progress { - margin-right: 8px; - margin-bottom: 8px; display: inline-block; + margin-inline-end: 8px; + margin-bottom: 8px; } ` }) diff --git a/components/progress/style/index.less b/components/progress/style/index.less index f955b3eeaf5..56825bff996 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -8,6 +8,10 @@ display: inline-block; + &-rtl { + direction: rtl; + } + &-line { position: relative; width: 100%; diff --git a/components/qr-code/style/index.less b/components/qr-code/style/index.less index a3730ee37ad..24f079d29fa 100644 --- a/components/qr-code/style/index.less +++ b/components/qr-code/style/index.less @@ -8,31 +8,31 @@ display: inline-block; padding: @padding-sm; - &>canvas { + & > canvas { display: block; } -} -.@{qrcode-prefix-cls}-border { - border: @border-width-base @border-style-base @border-color-split; - border-radius: @border-radius-base; -} + &-border { + border: @border-width-base @border-style-base @border-color-split; + border-radius: @border-radius-base; + } -.@{qrcode-prefix-cls}-mask { - position: absolute; - top: 0; - right: 0; - z-index: 10; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - text-align: center; - background-color: fade(@white, 96%); -} + &-mask { + position: absolute; + top: 0; + right: 0; + z-index: 10; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + text-align: center; + background-color: fade(@white, 96%); + } -.@{qrcode-prefix-cls}-expired { - color: fade(@black, 85%); + &-expired { + color: fade(@black, 85%); + } } diff --git a/components/radio/style/index.less b/components/radio/style/index.less index 07c7efab27a..8a73e649e97 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -32,6 +32,10 @@ margin-inline-end: @radio-wrapper-margin-right; cursor: pointer; + &-rtl { + direction: rtl; + } + &-disabled { cursor: not-allowed; } @@ -60,6 +64,10 @@ outline: none; cursor: pointer; + &-rtl { + direction: rtl; + } + .@{radio-prefix-cls}-wrapper:hover &, &:hover .@{radio-inner-prefix-cls}, &-input:focus + .@{radio-inner-prefix-cls} { diff --git a/components/rate/style/index.less b/components/rate/style/index.less index 0119b00be45..3071415df42 100644 --- a/components/rate/style/index.less +++ b/components/rate/style/index.less @@ -15,6 +15,10 @@ list-style: none; outline: none; + &-rtl { + direction: rtl; + } + &-disabled &-star { cursor: default; diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx deleted file mode 100644 index 3a3ab0de59a..00000000000 --- a/components/rate/style/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import '../../style/index.less'; -import './index.less'; diff --git a/components/result/style/index.less b/components/result/style/index.less index 1a6c6806c33..83284419625 100644 --- a/components/result/style/index.less +++ b/components/result/style/index.less @@ -5,6 +5,11 @@ .@{result-prefix-cls} { padding: 48px 32px; + + &-rtl { + direction: rtl; + } + // status color &-success &-icon > .@{iconfont-css-prefix} { color: @success-color; diff --git a/components/segmented/style/index.less b/components/segmented/style/index.less index b25747c08f0..e0e44c77aa7 100644 --- a/components/segmented/style/index.less +++ b/components/segmented/style/index.less @@ -15,6 +15,10 @@ border-radius: @border-radius-base; transition: all 0.3s @ease-in-out; + &-rtl { + direction: rtl; + } + &-group { position: relative; display: flex; diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md index f1ec109bf87..fdf9a319c6d 100644 --- a/components/select/doc/index.en-US.md +++ b/components/select/doc/index.en-US.md @@ -16,7 +16,7 @@ description: A dropdown menu for displaying choices. ```html - + ``` diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md index f5e7138e21a..45e392e873b 100644 --- a/components/select/doc/index.zh-CN.md +++ b/components/select/doc/index.zh-CN.md @@ -17,7 +17,7 @@ description: 下拉选择器。 ```html - + ``` diff --git a/components/select/style/index.less b/components/select/style/index.less index 8089dd6202c..1b240024d45 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -86,6 +86,10 @@ display: inline-flex; cursor: pointer; + &-rtl { + direction: rtl; + } + &:not(&-customize-input) &-selector { .select-selector(); .select-search-input-without-border(); @@ -235,6 +239,10 @@ outline: none; box-shadow: @box-shadow-base; + &-rtl { + direction: rtl; + } + &.@{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; diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index 1c8eed7a0ee..15ce6bf74b4 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -14,6 +14,10 @@ display: table; width: 100%; + &-rtl { + direction: rtl; + } + &-header { display: table-cell; padding-inline-end: @padding-md; @@ -262,10 +266,8 @@ &::after { position: absolute; - top: 0; - right: -150%; - bottom: 0; - left: -150%; + inset-block: 0; + inset-inline: -150%; background: linear-gradient( 90deg, @skeleton-color 25%, @@ -286,36 +288,3 @@ transform: translateX(37.5%); } } - - - -.@{skeleton-prefix-cls} { - - // With active animation - &.@{skeleton-prefix-cls}-active { - & .@{skeleton-prefix-cls}-content { - .@{skeleton-title-prefix-cls}, - .@{skeleton-paragraph-prefix-cls} > li { - &:dir(rtl) { - animation-name: ~'@{skeleton-prefix-cls}-loading-reverse'; - } - } - } - - .@{skeleton-avatar-prefix-cls} { - &:dir(rtl) { - animation-name: ~'@{skeleton-prefix-cls}-loading-reverse'; - } - } - } -} - -@keyframes ~"@{skeleton-prefix-cls}-loading-reverse" { - 0% { - background-position: 0% 50%; - } - - 100% { - background-position: 100% 50%; - } -} diff --git a/components/slider/demo/basic.ts b/components/slider/demo/basic.ts index 56f5f56fbe1..9775a5be0e3 100644 --- a/components/slider/demo/basic.ts +++ b/components/slider/demo/basic.ts @@ -8,8 +8,8 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch'; selector: 'nz-demo-slider-basic', imports: [FormsModule, NzSliderModule, NzSwitchModule], template: ` - - + + Disabled: ` diff --git a/components/slider/demo/reverse.ts b/components/slider/demo/reverse.ts index 9038259e629..633699f0770 100644 --- a/components/slider/demo/reverse.ts +++ b/components/slider/demo/reverse.ts @@ -8,9 +8,9 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch'; selector: 'nz-demo-slider-reverse', imports: [FormsModule, NzSliderModule, NzSwitchModule], template: ` - - - + + + Reversed: `, diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 8f41b062271..03ac1102222 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -13,6 +13,10 @@ cursor: pointer; touch-action: none; + &-rtl { + direction: rtl; + } + .vertical(); &-with-marks { diff --git a/components/space/space-compact-item.directive.ts b/components/space/space-compact-item.directive.ts index 29f17cce88c..e8d9fbde7e1 100644 --- a/components/space/space-compact-item.directive.ts +++ b/components/space/space-compact-item.directive.ts @@ -38,7 +38,10 @@ export class NzSpaceCompactItemDirective { const items = this.items(); const direction = this.spaceCompactCmp.nzDirection(); - const classes = [compactItemClassOf(this.type, direction, this.dir() === 'rtl')]; + const classes = [compactItemClassOf(this.type, direction)]; + if (this.dir() === 'rtl') { + classes.push(compactItemRtlClassOf(this.type, direction)); + } const index = items.indexOf(this); const firstIndex = items.findIndex(element => element); // Array [empty, item] @@ -84,9 +87,12 @@ function generateCompactClass( return `ant-${type}-compact-${directionPrefix}${position}`; } -function compactItemClassOf(type: string, direction: 'vertical' | 'horizontal', rtl?: boolean): string { - const rtlSuffix = rtl ? '-rtl' : ''; - return `${generateCompactClass(type, direction, 'item')}${rtlSuffix}`; +function compactItemClassOf(type: string, direction: 'vertical' | 'horizontal'): string { + return generateCompactClass(type, direction, 'item'); +} + +function compactItemRtlClassOf(type: string, direction: 'vertical' | 'horizontal'): string { + return `${compactItemClassOf(type, direction)}-rtl`; } function compactFirstItemClassOf(type: string, direction: 'vertical' | 'horizontal'): string { diff --git a/components/space/space-compact.component.spec.ts b/components/space/space-compact.component.spec.ts index 35881275d74..007cb4b25ba 100644 --- a/components/space/space-compact.component.spec.ts +++ b/components/space/space-compact.component.spec.ts @@ -3,6 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { Directionality } from '@angular/cdk/bidi'; import { Component, signal, type WritableSignal } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; @@ -11,6 +12,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzCascaderModule } from 'ng-zorro-antd/cascader'; import { provideNzNoAnimation } from 'ng-zorro-antd/core/animation'; import { NZ_FORM_SIZE } from 'ng-zorro-antd/core/form'; +import { provideMockDirectionality } from 'ng-zorro-antd/core/testing'; import { NzSizeLDSType } from 'ng-zorro-antd/core/types'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzInputModule } from 'ng-zorro-antd/input'; @@ -215,6 +217,32 @@ describe('space compact direction', () => { }); }); +describe('space compact RTL', () => { + let fixture: ComponentFixture; + let directionality: Directionality; + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [provideNzNoAnimation(), provideMockDirectionality()] + }); + directionality = TestBed.inject(Directionality); + fixture = TestBed.createComponent(SpaceCompactDirectionTestComponent); + fixture.detectChanges(); + }); + + it('should add the RTL compact item class without replacing the base class', () => { + directionality.valueSignal.set('rtl'); + fixture.detectChanges(); + + const buttons = fixture.nativeElement.querySelectorAll('button[nz-button]') as NodeListOf; + + buttons.forEach(button => { + expect(button.classList).toContain('ant-btn-compact-item'); + expect(button.classList).toContain('ant-btn-compact-item-rtl'); + }); + }); +}); + @Component({ imports: [ NzSpaceModule, diff --git a/components/space/space-compact.component.ts b/components/space/space-compact.component.ts index 9d2f83c66f4..91031edc774 100644 --- a/components/space/space-compact.component.ts +++ b/components/space/space-compact.component.ts @@ -3,6 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { Directionality } from '@angular/cdk/bidi'; import { booleanAttribute, Component, computed, ElementRef, inject, input, signal } from '@angular/core'; import { NZ_FORM_SIZE } from 'ng-zorro-antd/core/form'; @@ -16,6 +17,7 @@ import { NZ_SPACE_COMPACT_ITEMS, NZ_SPACE_COMPACT_SIZE } from './space-compact.t template: ``, host: { class: 'ant-space-compact', + '[class.ant-space-compact-rtl]': `dir() === 'rtl'`, '[class.ant-space-compact-block]': `nzBlock()`, '[class.ant-space-compact-vertical]': `nzDirection() === 'vertical'` }, @@ -25,10 +27,12 @@ import { NZ_SPACE_COMPACT_ITEMS, NZ_SPACE_COMPACT_SIZE } from './space-compact.t ] }) export class NzSpaceCompactComponent { + protected readonly dir = inject(Directionality).valueSignal; private readonly formSize = inject(NZ_FORM_SIZE, { optional: true }); + readonly elementRef: ElementRef = inject(ElementRef); + readonly nzBlock = input(false, { transform: booleanAttribute }); readonly nzDirection = input<'vertical' | 'horizontal'>('horizontal'); readonly nzSize = input('default'); - readonly elementRef: ElementRef = inject(ElementRef); protected readonly finalSize = computed(() => this.formSize?.() || this.nzSize()); } diff --git a/components/space/space.component.ts b/components/space/space.component.ts index c094f60c8d7..cec94505463 100644 --- a/components/space/space.component.ts +++ b/components/space/space.component.ts @@ -3,6 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { Directionality } from '@angular/cdk/bidi'; import { NgTemplateOutlet } from '@angular/common'; import { AfterContentInit, @@ -20,7 +21,7 @@ import { } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; -import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; +import { NzConfigKey, WithConfig } from 'ng-zorro-antd/core/config'; import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -54,6 +55,7 @@ const SPACE_SIZE: Record = { `, host: { class: 'ant-space', + '[class.ant-space-rtl]': `dir() === 'rtl'`, '[class.ant-space-horizontal]': 'nzDirection === "horizontal"', '[class.ant-space-vertical]': 'nzDirection === "vertical"', '[class.ant-space-align-start]': 'mergedAlign === "start"', @@ -69,9 +71,9 @@ const SPACE_SIZE: Record = { export class NzSpaceComponent implements OnChanges, AfterContentInit { readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME; - nzConfigService = inject(NzConfigService); - private cdr = inject(ChangeDetectorRef); - private destroyRef = inject(DestroyRef); + protected readonly dir = inject(Directionality).valueSignal; + private readonly cdr = inject(ChangeDetectorRef); + private readonly destroyRef = inject(DestroyRef); @Input() nzDirection: NzSpaceDirection = 'horizontal'; @Input() nzAlign?: NzSpaceAlign; diff --git a/components/space/style/compact.less b/components/space/style/compact.less index 4c760f39a00..9bf3ef7e42b 100644 --- a/components/space/style/compact.less +++ b/components/space/style/compact.less @@ -14,4 +14,8 @@ &-vertical { flex-direction: column; } + + &-rtl { + direction: rtl; + } } diff --git a/components/space/style/index.less b/components/space/style/index.less index 3f2f9d3d7d0..8ab7c3b6842 100644 --- a/components/space/style/index.less +++ b/components/space/style/index.less @@ -7,6 +7,10 @@ .@{space-prefix-cls} { display: inline-flex; + &-rtl { + direction: rtl; + } + &-vertical { flex-direction: column; } diff --git a/components/spin/style/index.less b/components/spin/style/index.less index d1e91639210..5d890bd587b 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -16,6 +16,10 @@ opacity: 0; transition: transform 0.3s @ease-in-out-circ; + &-rtl { + direction: rtl; + } + &-spinning { position: static; display: inline-block; diff --git a/components/splitter/splitter.component.ts b/components/splitter/splitter.component.ts index 83043785bea..cc0e17b36a0 100644 --- a/components/splitter/splitter.component.ts +++ b/components/splitter/splitter.component.ts @@ -89,7 +89,7 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t [active]="movingIndex()?.index === $index" [vertical]="nzLayout() === 'vertical'" [lazy]="nzLazy()" - [constrainedOffset]="constrainedOffset()" + [constrainedOffset]="previewOffset()" (offsetStart)="startResize($index, $event)" (collapse)="collapse($index, $event)" >
@@ -289,6 +289,10 @@ export class NzSplitterComponent { * Constrained by the min and max size of the target panel. */ protected readonly constrainedOffset = signal(0); + protected readonly previewOffset = computed(() => { + const offset = this.constrainedOffset(); + return this.nzLayout() === 'horizontal' && this.dir() === 'rtl' ? -offset : offset; + }); /** * The resizable information of each splitter bar. */ diff --git a/components/splitter/splitter.spec.ts b/components/splitter/splitter.spec.ts index 443585d03c7..5fb6a877eb1 100644 --- a/components/splitter/splitter.spec.ts +++ b/components/splitter/splitter.spec.ts @@ -624,5 +624,22 @@ describe('nz-splitter', () => { expect(component.onResize).toHaveBeenCalledWith([90, 10]); expect(component.onResizeEnd).toHaveBeenCalledWith([90, 10]); }); + + it('should move the lazy preview in the pointer direction', async () => { + component.lazy.set(true); + component.panels.set([ + { defaultSize: '50%', min: '20%', max: '80%' }, + { defaultSize: '50%', min: '20%', max: '80%' } + ]); + await fixture.whenStable(); + + const { dragger, x, y } = getDraggerAndPos(); + dispatchMouseEvent(dragger, 'mousedown', x, y); + dispatchMouseEvent(document, 'mousemove', x - 40, y); + fixture.detectChanges(); + + const preview = container.query(By.css('.ant-splitter-bar-preview'))!.nativeElement as HTMLElement; + expect(preview.style.transform).toBe('translateX(-30px)'); + }); }); }); diff --git a/components/splitter/style/index.less b/components/splitter/style/index.less index 8b76873cea8..713c86ec260 100644 --- a/components/splitter/style/index.less +++ b/components/splitter/style/index.less @@ -21,6 +21,10 @@ @half-trigger-size: calc(@splitter-split-trigger-size / 2); + &-rtl { + direction: rtl; + } + &-horizontal { flex-direction: row; } diff --git a/components/statistic/style/index.less b/components/statistic/style/index.less index 28ea119caec..d50e037ff6e 100644 --- a/components/statistic/style/index.less +++ b/components/statistic/style/index.less @@ -6,6 +6,10 @@ .@{statistic-prefix-cls} { .reset-component(); + &-rtl { + direction: rtl; + } + &-title { margin-bottom: @margin-xss; color: @text-color-secondary; diff --git a/components/steps/doc/index.en-US.md b/components/steps/doc/index.en-US.md index 7f7a6f3dae2..840569fe14e 100755 --- a/components/steps/doc/index.en-US.md +++ b/components/steps/doc/index.en-US.md @@ -15,9 +15,9 @@ When a given task is complicated or has a certain sequence in the series of subt ```html - - - + + + ``` diff --git a/components/steps/doc/index.zh-CN.md b/components/steps/doc/index.zh-CN.md index a90d142c416..d69ce416200 100755 --- a/components/steps/doc/index.zh-CN.md +++ b/components/steps/doc/index.zh-CN.md @@ -16,9 +16,9 @@ description: 引导用户按照流程完成任务的导航条。 ```html - - - + + + ``` diff --git a/components/steps/style/custom-icon.less b/components/steps/style/custom-icon.less index debbb994e6d..abd0aec7524 100644 --- a/components/steps/style/custom-icon.less +++ b/components/steps/style/custom-icon.less @@ -5,7 +5,7 @@ border: 0; > .@{steps-prefix-cls}-icon { top: @steps-icon-custom-top; - left: 0.5px; + inset-inline-start: 0.5px; width: @steps-icon-custom-size; height: @steps-icon-custom-size; font-size: @steps-icon-custom-font-size; diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 2e00f197c02..b14148ead52 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -28,6 +28,9 @@ font-size: 0; text-align: initial; + &-rtl { + direction: rtl; + } } .@{steps-prefix-cls}-item { @@ -60,6 +63,7 @@ width: @steps-icon-size; height: @steps-icon-size; margin: @steps-icon-margin; + margin-inline: 0 8px; font-size: @steps-icon-font-size; font-family: @font-family; line-height: @steps-icon-size; @@ -79,7 +83,7 @@ &-tail { position: absolute; top: 12px; - left: 0; + inset-inline-start: 0; width: 100%; padding: 0 10px; @@ -97,7 +101,7 @@ &-title { position: relative; display: inline-block; - padding-right: 16px; + padding-inline-end: 16px; color: @text-color; font-size: @font-size-lg; line-height: @steps-title-line-height; @@ -105,7 +109,7 @@ &::after { position: absolute; top: (@steps-title-line-height / 2); - left: 100%; + inset-inline-start: 100%; display: block; width: 9999px; height: 1px; @@ -116,7 +120,7 @@ &-subtitle { display: inline; - margin-left: 8px; + margin-inline-start: 8px; color: @text-color-secondary; font-weight: normal; font-size: @font-size-base; @@ -195,14 +199,14 @@ .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) { .@{steps-prefix-cls}-item { - padding-left: 16px; + padding-inline-start: 16px; white-space: nowrap; &:first-child { - padding-left: 0; + padding-inline-start: 0; } &:last-child .@{steps-prefix-cls}-item-title { - padding-right: 0; + padding-inline-end: 0; } &-tail { @@ -252,287 +256,4 @@ @import './label-placement'; @import './progress-dot'; @import './nav'; - -.@{steps-prefix-cls}-item { - &-icon { - &:dir(rtl) { - margin-right: 0; - margin-left: 8px; - } - } - - &-tail { - &:dir(rtl) { - right: 0; - left: auto; - } - } - - &-title { - &:dir(rtl) { - padding-right: 0; - padding-left: 16px; - } - - .@{steps-prefix-cls}-item-subtitle { - &:dir(rtl) { - float: left; - margin-right: 8px; - margin-left: 0; - } - } - - &::after { - &:dir(rtl) { - right: 100%; - left: auto; - } - } - } -} - -.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) { - .@{steps-prefix-cls}-item { - &:dir(rtl) { - padding-right: 16px; - padding-left: 0; - } - - &:first-child { - &:dir(rtl) { - padding-right: 0; - } - } - - &:last-child .@{steps-prefix-cls}-item-title { - &:dir(rtl) { - padding-left: 0; - } - } - } -} - -// custom-icon -.@{steps-prefix-cls}-item-custom { - .@{steps-prefix-cls}-item-icon { - > .@{steps-prefix-cls}-icon { - &:dir(rtl) { - right: 0.5px; - left: auto; - } - } - } -} - -// nav -.@{steps-prefix-cls}-navigation { - &.@{steps-prefix-cls}-small { - .@{steps-prefix-cls}-item { - &-container { - &:dir(rtl) { - margin-right: -12px; - margin-left: 0; - } - } - } - } - - .@{steps-prefix-cls}-item { - &-container { - &:dir(rtl) { - margin-right: -16px; - margin-left: 0; - text-align: right; - } - - .@{steps-prefix-cls}-item-title { - &:dir(rtl) { - padding-left: 0; - } - } - } - - &::after { - &:dir(rtl) { - right: 100%; - left: auto; - margin-right: -2px; - margin-left: 0; - transform: rotate(225deg); - } - } - } -} - -// small -.@{steps-prefix-cls}-small { - &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) - .@{steps-prefix-cls}-item { - &:dir(rtl) { - padding-right: 12px; - padding-left: 0; - } - - &:first-child { - &:dir(rtl) { - padding-right: 0; - } - } - } - - .@{steps-prefix-cls}-item-title { - &:dir(rtl) { - padding-right: 0; - padding-left: 12px; - } - } -} - -// vertical -.@{steps-prefix-cls}-vertical { - > .@{steps-prefix-cls}-item { - .@{steps-prefix-cls}-item-icon { - &:dir(rtl) { - float: right; - margin-right: 0; - margin-left: @steps-vertical-icon-width; - } - } - } - - > .@{steps-prefix-cls}-item - > .@{steps-prefix-cls}-item-container - > .@{steps-prefix-cls}-item-tail { - &:dir(rtl) { - right: @steps-vertical-tail-width; - left: auto; - } - } - - &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container { - .@{steps-prefix-cls}-item-tail { - &:dir(rtl) { - right: @steps-vertical-tail-width-sm; - left: auto; - } - } - } -} - -// label -.@{steps-prefix-cls}-label-vertical { - .@{steps-prefix-cls}-item { - &-title { - &:dir(rtl) { - padding-left: 0; - } - } - } -} - -// progress-dot -.@{steps-prefix-cls}-dot, -.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small { - .@{steps-prefix-cls}-item { - &-tail { - &:dir(rtl) { - margin: 0 (@steps-description-max-width / 2) 0 0; - } - - &::after { - &:dir(rtl) { - margin-right: 12px; - margin-left: 0; - } - } - } - - &:first-child .@{steps-prefix-cls}-icon-dot { - &:dir(rtl) { - right: 2px; - left: auto; - } - } - - &-icon { - &:dir(rtl) { - margin-right: 67px; - margin-left: 0; - } - - .@{steps-prefix-cls}-icon-dot { - &:dir(rtl) { - float: right; - } - - /* expand hover area */ - &::after { - &:dir(rtl) { - right: -26px; - left: auto; - } - } - } - } - } -} - -.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot { - .@{steps-prefix-cls}-item-icon { - &:dir(rtl) { - margin-right: 0; - margin-left: 16px; - } - } - - // https://github.com/ant-design/ant-design/issues/18354 - .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { - &:dir(rtl) { - right: -9px; - left: auto; - } - } - - .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot { - &:dir(rtl) { - right: 0; - left: auto; - } - } - - .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot { - &:dir(rtl) { - right: -2px; - left: auto; - } - } -} - -// RTL Steps with progress -.@{steps-prefix-cls}-with-progress:dir(rtl) { - &.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item { - padding-right: 4px; - > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { - right: @steps-vertical-tail-width + 3; - } - } - - &.@{steps-prefix-cls}-small.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item { - > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { - right: @steps-vertical-tail-width-sm + 3; - } - } - - &.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal { - .@{steps-prefix-cls}-item:first-child { - padding-right: 4px; - padding-left: 0; - - &.@{steps-prefix-cls}-item-active { - padding-right: 4px; - } - } - } -} - -@import './progress.less'; +@import './progress'; diff --git a/components/steps/style/label-placement.less b/components/steps/style/label-placement.less index a1bfd9b26e9..668fc5f7d65 100644 --- a/components/steps/style/label-placement.less +++ b/components/steps/style/label-placement.less @@ -3,7 +3,7 @@ overflow: visible; &-tail { - margin-left: 58px; + margin-inline-start: 58px; padding: 3.5px 24px; } @@ -16,12 +16,11 @@ &-icon { display: inline-block; - margin-left: 42px; + margin-inline-start: 42px; } &-title { - padding-right: 0; - padding-left: 0; + padding-inline: 0; &::after { display: none; @@ -31,14 +30,14 @@ &-subtitle { display: block; margin-bottom: 4px; - margin-left: 0; + margin-inline-start: 0; line-height: @line-height-base; } } &.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-dot) { .@{steps-prefix-cls}-item { &-icon { - margin-left: 46px; + margin-inline-start: 46px; } } } diff --git a/components/steps/style/nav.less b/components/steps/style/nav.less index 0c39fa6f822..3238f11d6cf 100644 --- a/components/steps/style/nav.less +++ b/components/steps/style/nav.less @@ -4,7 +4,7 @@ &.@{steps-prefix-cls}-small { .@{steps-prefix-cls}-item { &-container { - margin-left: -12px; + margin-inline-start: -12px; } } } @@ -16,9 +16,9 @@ &-container { display: inline-block; height: 100%; - margin-left: -16px; + margin-inline-start: -16px; padding-bottom: 12px; - text-align: left; + text-align: start; transition: opacity 0.3s; .@{steps-prefix-cls}-item-content { @@ -27,7 +27,7 @@ .@{steps-prefix-cls}-item-title { max-width: 100%; - padding-right: 0; + padding-inline-end: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -59,15 +59,15 @@ &::after { position: absolute; top: 50%; - left: 100%; + inset-inline-start: 100%; display: inline-block; width: 12px; height: 12px; margin-top: -14px; - margin-left: -2px; + margin-inline-start: -2px; border: 1px solid @steps-nav-arrow-color; border-bottom: none; - border-left: none; + border-inline-start: none; transform: rotate(45deg); content: ''; } @@ -75,34 +75,33 @@ &::before { position: absolute; bottom: 0; - left: 50%; + inset-inline-start: 50%; display: inline-block; width: 0; height: 2px; background-color: @steps-nav-active-color; - transition: width 0.3s, left 0.3s; + transition: width 0.3s, inset-inline-start 0.3s; transition-timing-function: ease-out; content: ''; } } .@{steps-prefix-cls}-item.@{steps-prefix-cls}-item-active::before { - left: 0; + inset-inline-start: 0; width: 100%; } } .@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical { > .@{steps-prefix-cls}-item { - margin-right: 0 !important; + margin-inline-end: 0 !important; &::before { display: none; } &.@{steps-prefix-cls}-item-active::before { top: 0; - right: 0; - left: unset; + inset-inline-end: 0; display: block; width: 3px; height: calc(100% - 24px); @@ -111,7 +110,7 @@ &::after { position: relative; top: -2px; - left: 50%; + inset-inline-start: 50%; display: block; width: 8px; height: 8px; diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less index a3bd3417b41..fcb78f2055c 100644 --- a/components/steps/style/progress-dot.less +++ b/components/steps/style/progress-dot.less @@ -8,31 +8,31 @@ &-tail { top: @steps-dot-top; width: 100%; - margin: 0 0 0 (@steps-description-max-width / 2); + margin-inline-start: (@steps-description-max-width / 2); padding: 0; &::after { width: ~'calc(100% - 20px)'; height: 3px; - margin-left: 12px; + margin-inline-start: 12px; } } &:first-child .@{steps-prefix-cls}-icon-dot { - left: 2px; + inset-inline-start: 2px; } &-icon { width: @steps-dot-size; height: @steps-dot-size; - margin-left: 67px; - padding-right: 0; + margin-inline-start: 67px; + padding-inline-end: 0; line-height: @steps-dot-size; background: transparent; border: 0; .@{steps-prefix-cls}-icon-dot { position: relative; - float: left; + float: inline-start; width: 100%; height: 100%; border-radius: 100px; @@ -42,7 +42,7 @@ &::after { position: absolute; top: -12px; - left: -26px; + inset-inline-start: -26px; width: 60px; height: 32px; background: fade(@black, 0.1%); @@ -64,7 +64,7 @@ } &-process .@{steps-prefix-cls}-icon { &:first-child .@{steps-prefix-cls}-icon-dot { - left: 0; + inset-inline-start: 0; } } } @@ -73,14 +73,14 @@ .@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot { .@{steps-prefix-cls}-item-icon { margin-top: 13px; - margin-left: 0; + margin-inline-start: 0; background: none; } // https://github.com/ant-design/ant-design/issues/18354 .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { top: 6.5px; - left: -9px; + inset-inline-start: -9px; margin: 0; padding: 22px 0 4px; } @@ -98,7 +98,7 @@ } .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot { - left: 0; + inset-inline-start: 0; } .@{steps-prefix-cls}-item-content { width: inherit; @@ -108,6 +108,6 @@ .@{steps-prefix-cls}-item-icon .@{steps-prefix-cls}-icon-dot { top: -1px; - left: -1px; + inset-inline-start: -1px; } } diff --git a/components/steps/style/progress.less b/components/steps/style/progress.less index 98cc430e630..04c4db16c8f 100644 --- a/components/steps/style/progress.less +++ b/components/steps/style/progress.less @@ -6,7 +6,6 @@ & > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { top: 4px; - left: @steps-vertical-tail-width + 3; } } @@ -14,19 +13,23 @@ &.@{steps-prefix-cls}-small { &.@{steps-prefix-cls}-horizontal .@{steps-prefix-cls}-item:first-child { padding-bottom: 4px; - padding-left: 4px; + padding-inline-start: 4px; } } - &.@{steps-prefix-cls}-small + &.@{steps-prefix-cls}-vertical .@{steps-prefix-cls}-item { + padding-inline-start: 4px; + + > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { + inset-inline-start: @steps-vertical-tail-width + 3; + } + } + + &.@{steps-prefix-cls}-small.@{steps-prefix-cls}-vertical > .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail { - left: @steps-vertical-tail-width-sm + 3; - } - - &.@{steps-prefix-cls}-vertical .@{steps-prefix-cls}-item { - padding-left: 4px; + inset-inline-start: @steps-vertical-tail-width-sm + 3; } &.@{steps-prefix-cls}-label-vertical { @@ -40,10 +43,7 @@ .@{progress-prefix-cls} { position: absolute; - top: -5px; - right: -5px; - bottom: -5px; - left: -5px; + inset: -5px; } } } diff --git a/components/steps/style/small.less b/components/steps/style/small.less index 329e5984376..ad0bc6df804 100644 --- a/components/steps/style/small.less +++ b/components/steps/style/small.less @@ -1,23 +1,24 @@ .@{steps-prefix-cls}-small { &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) .@{steps-prefix-cls}-item { - padding-left: 12px; + padding-inline-start: 12px; &:first-child { - padding-left: 0; + padding-inline-start: 0; } } .@{steps-prefix-cls}-item-icon { width: @steps-small-icon-size; height: @steps-small-icon-size; margin: @steps-small-icon-margin; + margin-inline: 0 8px; font-size: @font-size-sm; line-height: @steps-small-icon-size; text-align: center; border-radius: @steps-small-icon-size; } .@{steps-prefix-cls}-item-title { - padding-right: 12px; + padding-inline-end: 12px; font-size: @font-size-base; line-height: @steps-small-icon-size; diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less index 8c7d21a1cde..12bb59ae4cb 100644 --- a/components/steps/style/vertical.less +++ b/components/steps/style/vertical.less @@ -5,12 +5,12 @@ > .@{steps-prefix-cls}-item { display: block; flex: 1 0 auto; - padding-left: 0; + padding-inline-start: 0; overflow: visible; .@{steps-prefix-cls}-item-icon { - float: left; - margin-right: @steps-vertical-icon-width; + float: inline-start; + margin-inline-end: @steps-vertical-icon-width; } .@{steps-prefix-cls}-item-content { @@ -33,7 +33,7 @@ > .@{steps-prefix-cls}-item-tail { position: absolute; top: 0; - left: @steps-vertical-tail-width - 1; // line width + inset-inline-start: @steps-vertical-tail-width - 1; // line width width: 1px; height: 100%; padding: @steps-icon-size + 6px 0 6px; @@ -63,7 +63,7 @@ .@{steps-prefix-cls}-item-tail { position: absolute; top: 0; - left: @steps-vertical-tail-width-sm - 1; // line width + inset-inline-start: @steps-vertical-tail-width-sm - 1; // line width padding: @steps-small-icon-size + 6px 0 6px; } .@{steps-prefix-cls}-item-title { diff --git a/components/style/mixins/placement-arrow.less b/components/style/mixins/placement-arrow.less index 016ae047562..9cfb1fa37e5 100644 --- a/components/style/mixins/placement-arrow.less +++ b/components/style/mixins/placement-arrow.less @@ -38,11 +38,11 @@ } &-placement-topLeft > &-arrow { - left: @arrow-offset-horizontal; + inset-inline-start: @arrow-offset-horizontal; } &-placement-topRight > &-arrow { - right: @arrow-offset-horizontal; + inset-inline-end: @arrow-offset-horizontal; } // >>>>> Bottom @@ -59,11 +59,11 @@ } &-placement-bottomLeft > &-arrow { - left: @arrow-offset-horizontal; + inset-inline-start: @arrow-offset-horizontal; } &-placement-bottomRight > &-arrow { - right: @arrow-offset-horizontal; + inset-inline-end: @arrow-offset-horizontal; } // >>>>> Left @@ -107,4 +107,4 @@ &-placement-rightBottom > &-arrow { bottom: @arrow-offset-horizontal; } -} \ No newline at end of file +} diff --git a/components/switch/style/index.less b/components/switch/style/index.less index 28d9c879f25..7973db4bb2a 100644 --- a/components/switch/style/index.less +++ b/components/switch/style/index.less @@ -24,6 +24,10 @@ transition: all @switch-duration; user-select: none; + &-rtl { + direction: rtl; + } + &:focus { outline: 0; box-shadow: 0 0 0 2px fade(@disabled-color, 10%); diff --git a/components/table/demo/ajax.ts b/components/table/demo/ajax.ts index ea68a3caa0f..fa18aec28f3 100644 --- a/components/table/demo/ajax.ts +++ b/components/table/demo/ajax.ts @@ -37,7 +37,7 @@ interface RandomUser { - @for (data of listOfRandomUser(); track data) { + @for (data of listOfRandomUser(); track data.email) { {{ data.name.first }} {{ data.name.last }} {{ data.gender }} diff --git a/components/table/demo/basic.ts b/components/table/demo/basic.ts index b5895af0826..72db04fd180 100644 --- a/components/table/demo/basic.ts +++ b/components/table/demo/basic.ts @@ -24,7 +24,7 @@ interface Person { - @for (data of basicTable.data; track data) { + @for (data of basicTable.data; track data.key) { {{ data.name }} {{ data.age }} diff --git a/components/table/demo/colspan-rowspan.ts b/components/table/demo/colspan-rowspan.ts index 2e1894c35ea..a9f75f35375 100644 --- a/components/table/demo/colspan-rowspan.ts +++ b/components/table/demo/colspan-rowspan.ts @@ -16,7 +16,7 @@ import { NzTableModule } from 'ng-zorro-antd/table'; - @for (data of colSpanTable.data; track data) { + @for (data of colSpanTable.data; track data.key) { {{ data.name }} @switch ($index) { diff --git a/components/table/demo/custom-column.ts b/components/table/demo/custom-column.ts index 04fa09a7a52..545afcece24 100644 --- a/components/table/demo/custom-column.ts +++ b/components/table/demo/custom-column.ts @@ -49,7 +49,7 @@ interface CustomColumn extends NzCustomColumn { - @for (data of basicTable.data; track data) { + @for (data of basicTable.data; track data.key) { {{ data.name }} {{ data.gender }} @@ -71,7 +71,7 @@ interface CustomColumn extends NzCustomColumn {

Displayed (drag and drop to sort)

- @for (item of title(); track item) { + @for (item of title(); track item.value) {
{{ item.name }}
@@ -84,14 +84,14 @@ interface CustomColumn extends NzCustomColumn { class="example-list" (cdkDropListDropped)="drop($event)" > - @for (item of fix(); track item) { + @for (item of fix(); track item.value) {
{{ item.name }}
}
- @for (item of footer(); track item) { + @for (item of footer(); track item.value) {
{{ item.name }}
@@ -109,7 +109,7 @@ interface CustomColumn extends NzCustomColumn { class="example-list" (cdkDropListDropped)="drop($event)" > - @for (item of notFix(); track item) { + @for (item of notFix(); track item.value) {
{{ item.name }} diff --git a/components/table/demo/custom-filter-panel.ts b/components/table/demo/custom-filter-panel.ts index 7c69f379e83..9026b277f3a 100644 --- a/components/table/demo/custom-filter-panel.ts +++ b/components/table/demo/custom-filter-panel.ts @@ -65,7 +65,7 @@ interface DataItem { } .search-button { - margin-right: 8px; + margin-inline-end: 8px; } ` }) diff --git a/components/table/demo/drag-sorting.ts b/components/table/demo/drag-sorting.ts index 9715df28d04..1bc09719078 100644 --- a/components/table/demo/drag-sorting.ts +++ b/components/table/demo/drag-sorting.ts @@ -16,7 +16,7 @@ import { NzTableModule } from 'ng-zorro-antd/table'; - @for (data of listOfData; track data) { + @for (data of listOfData; track data.key) { {{ data.name }} {{ data.age }} diff --git a/components/table/demo/dynamic-settings.ts b/components/table/demo/dynamic-settings.ts index 08aba5a16db..354bf1c079e 100644 --- a/components/table/demo/dynamic-settings.ts +++ b/components/table/demo/dynamic-settings.ts @@ -14,6 +14,7 @@ import { } from 'ng-zorro-antd/table'; interface ItemData { + id: number; name: string; age: number | string; address: string; @@ -115,7 +116,7 @@ interface Setting { } - @for (data of dynamicTable.data; track data) { + @for (data of dynamicTable.data; track data.id) { @if (settingValue().expandable) { @@ -143,7 +144,7 @@ interface Setting { `, styles: ` form nz-form-item { - margin-right: 16px; + margin-inline-end: 16px; margin-bottom: 8px; } ` @@ -266,6 +267,7 @@ export class NzDemoTableDynamicSettingsComponent implements OnInit { const data: ItemData[] = []; for (let i = 1; i <= 100; i++) { data.push({ + id: i, name: 'John Brown', age: `${i}2`, address: `New York No. ${i} Lake Park`, diff --git a/components/table/demo/edit-cell.ts b/components/table/demo/edit-cell.ts index b9a71c25f78..5be545e9a51 100644 --- a/components/table/demo/edit-cell.ts +++ b/components/table/demo/edit-cell.ts @@ -30,7 +30,7 @@ interface ItemData { - @for (data of editRowTable.data; track data) { + @for (data of editRowTable.data; track data.id) {
diff --git a/components/table/demo/edit-row.ts b/components/table/demo/edit-row.ts index 0d2185b3d1e..4275f236c9d 100644 --- a/components/table/demo/edit-row.ts +++ b/components/table/demo/edit-row.ts @@ -26,7 +26,7 @@ interface ItemData { - @for (data of editRowTable.data; track data) { + @for (data of editRowTable.data; track data.id) { @if (!editCache()[data.id].edit) { {{ data.name }} @@ -49,7 +49,7 @@ interface ItemData { `, styles: ` .save { - margin-right: 8px; + margin-inline-end: 8px; } ` }) diff --git a/components/table/demo/expand-children.ts b/components/table/demo/expand-children.ts index 4dbe9a0656d..a919e2f8ba9 100644 --- a/components/table/demo/expand-children.ts +++ b/components/table/demo/expand-children.ts @@ -26,8 +26,8 @@ export interface TreeNodeInterface { - @for (data of expandTable.data; track data) { - @for (item of mapOfExpandedData[data.key]; track item) { + @for (data of expandTable.data; track data.key) { + @for (item of mapOfExpandedData[data.key]; track item.key) { @if ((item.parent && item.parent.expand) || !item.parent) { - @for (data of nzTable.data; track data) { + @for (data of nzTable.data; track data.id) { {{ data.name }} diff --git a/components/table/demo/expand.ts b/components/table/demo/expand.ts index ca32d42a601..110c4d80559 100644 --- a/components/table/demo/expand.ts +++ b/components/table/demo/expand.ts @@ -16,7 +16,7 @@ import { NzTableModule } from 'ng-zorro-antd/table'; - @for (data of nzTable.data; track data) { + @for (data of nzTable.data; track data.id) { {{ data.name }} diff --git a/components/table/demo/fixed-columns.ts b/components/table/demo/fixed-columns.ts index 9298679b11f..3d3c64e088c 100644 --- a/components/table/demo/fixed-columns.ts +++ b/components/table/demo/fixed-columns.ts @@ -23,7 +23,7 @@ import { NzTableModule } from 'ng-zorro-antd/table'; - @for (data of columnTable.data; track data) { + @for (data of columnTable.data; track data.key) { {{ data.name }} {{ data.age }} diff --git a/components/table/demo/nested-table.ts b/components/table/demo/nested-table.ts index dac29f2cbeb..a8a1c675be5 100644 --- a/components/table/demo/nested-table.ts +++ b/components/table/demo/nested-table.ts @@ -42,7 +42,7 @@ interface ChildrenItemData { - @for (data of nestedTable.data; track data) { + @for (data of nestedTable.data; track data.key) { {{ data.name }} @@ -67,7 +67,7 @@ interface ChildrenItemData { - @for (data of innerTable.data; track data) { + @for (data of innerTable.data; track data.key) { {{ data.date }} {{ data.name }} diff --git a/components/table/demo/reset-filter.ts b/components/table/demo/reset-filter.ts index a9cbff2f7ea..2f3bf9d8b76 100644 --- a/components/table/demo/reset-filter.ts +++ b/components/table/demo/reset-filter.ts @@ -64,7 +64,7 @@ interface ColumnItem { } .table-operations > button { - margin-right: 8px; + margin-inline-end: 8px; } ` }) diff --git a/components/table/demo/row-selection-and-operation.ts b/components/table/demo/row-selection-and-operation.ts index 119b42c3cad..44aceef7e1c 100644 --- a/components/table/demo/row-selection-and-operation.ts +++ b/components/table/demo/row-selection-and-operation.ts @@ -48,7 +48,7 @@ export interface Data { - @for (data of rowSelectionTable.data; track data) { + @for (data of rowSelectionTable.data; track data.id) { - @for (data of rowSelectionTable.data; track data) { + @for (data of rowSelectionTable.data; track data.id) { {{ data.name }} diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md index 668cef95fe4..627bac65c4a 100644 --- a/components/table/doc/index.en-US.md +++ b/components/table/doc/index.en-US.md @@ -26,7 +26,7 @@ The component in `nz-table` such as `th`, `td`, `thead` etc. are enhanced. Devel ### Data Processing -The data passed to `[nzData]` is exported with [Template Context](https://angular.dev/guide/templates/template-statements#statement-context) after processing (including paging, sorting and filtering). `*ngFor` can be used to render current page data in table. +The data passed to `[nzData]` is exported with [Template Context](https://angular.dev/guide/templates/template-statements#statement-context) after processing (including paging, sorting and filtering). `@for` can be used to render current page data in table. ```html @@ -39,7 +39,8 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula - + @for (data of basicTable.data; track data.name) { + {{data.name}} {{data.age}} {{data.address}} @@ -49,6 +50,7 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula Delete + } ``` diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md index ffd28ba0d8f..a84672ab73d 100644 --- a/components/table/doc/index.zh-CN.md +++ b/components/table/doc/index.zh-CN.md @@ -27,7 +27,7 @@ Table 组件同时具备了易用性和高度可定制性 ### 数据处理 -将数据传入`[nzData]`，经过组件处理之后（包括分页、排序、筛选等），通过 [模板变量](https://angular.cn/guide/templates/template-statements#statement-context) 获取当前展示表格部分的数据，使用 `*ngFor` 依据需求将数据渲染。 +将数据传入`[nzData]`，经过组件处理之后（包括分页、排序、筛选等），通过 [模板变量](https://angular.cn/guide/templates/template-statements#statement-context) 获取当前展示表格部分的数据，使用 `@for` 依据需求将数据渲染。 ```html @@ -40,7 +40,8 @@ Table 组件同时具备了易用性和高度可定制性 - + @for (data of basicTable.data; track data.name) { + {{data.name}} {{data.age}} {{data.address}} @@ -50,6 +51,7 @@ Table 组件同时具备了易用性和高度可定制性 Delete + } ``` diff --git a/components/table/style/bordered.less b/components/table/style/bordered.less index 30c09a0de5d..5b62b9aabaf 100644 --- a/components/table/style/bordered.less +++ b/components/table/style/bordered.less @@ -1,7 +1,3 @@ -@import './size'; -@import (reference) '../../style/themes/index'; -@table-prefix-cls: ~'@{ant-prefix}-table'; - @table-border: @border-width-base @border-style-base @table-border-color; .@{table-prefix-cls}.@{table-prefix-cls}-bordered { @@ -13,7 +9,7 @@ > .@{table-prefix-cls}-container { // ============================ Content ============================ - border-left: @table-border; + border-inline-start: @table-border; > .@{table-prefix-cls}-content, > .@{table-prefix-cls}-header, @@ -25,7 +21,7 @@ > tbody > tr > td, > tfoot > tr > th, > tfoot > tr > td { - border-right: @table-border; + border-inline-end: @table-border; } // ============================ Header ============================ > thead { diff --git a/components/table/style/index.less b/components/table/style/index.less index d5d3885837b..c07c6cf3504 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -396,7 +396,7 @@ &-checkall { width: 100%; margin-bottom: 4px; - margin-left: 4px; + margin-inline-start: 4px; } &-submenu > ul { @@ -409,7 +409,7 @@ &, &-submenu { .@{ant-prefix}-checkbox-wrapper + span { - padding-left: 8px; + padding-inline-start: 8px; } } @@ -435,12 +435,11 @@ table tr th&-selection-column, table tr td&-selection-column { - padding-right: @padding-xs; - padding-left: @padding-xs; + padding-inline: @padding-xs; text-align: center; .@{ant-prefix}-radio-wrapper { - margin-right: 0; + margin-inline-end: 0; } } @@ -761,27 +760,3 @@ } @import './radius'; - -.@{table-prefix-cls} { - &-pagination-left:dir(rtl) { - justify-content: flex-end; - } - - &-pagination-right:dir(rtl) { - justify-content: flex-start; - } - - &-row-expand-icon:dir(rtl) { - &::after { - transform: rotate(-90deg); - } - - &-collapsed::before { - transform: rotate(180deg); - } - - &-collapsed::after { - transform: rotate(0deg); - } - } -} diff --git a/components/table/style/patch.less b/components/table/style/patch.less index 2a915bc4872..b4bdc393066 100644 --- a/components/table/style/patch.less +++ b/components/table/style/patch.less @@ -58,7 +58,7 @@ cdk-virtual-scroll-viewport.ant-table-body { > tbody > tr > td, > tfoot > tr > th, > tfoot > tr > td { - border-right: @table-border; + border-inline-end: @table-border; } // ============================ Header ============================ > thead { diff --git a/components/table/style/size.less b/components/table/style/size.less index 4fa18dcb339..5e93513f92e 100644 --- a/components/table/style/size.less +++ b/components/table/style/size.less @@ -1,7 +1,3 @@ -@import (reference) '../../style/themes/index'; - -@table-prefix-cls: ~'@{ant-prefix}-table'; - .table-size(@size, @padding-vertical, @padding-horizontal, @font-size) { .@{table-prefix-cls}.@{table-prefix-cls}-@{size} { font-size: @font-size; @@ -16,7 +12,7 @@ } .@{table-prefix-cls}-filter-trigger { - margin-right: -(@padding-horizontal / 2); + margin-inline-end: -(@padding-horizontal / 2); } .@{table-prefix-cls}-expanded-row-fixed { diff --git a/components/tabs/demo/card-top.ts b/components/tabs/demo/card-top.ts index cafe6c16110..5aadbe3407e 100644 --- a/components/tabs/demo/card-top.ts +++ b/components/tabs/demo/card-top.ts @@ -31,7 +31,7 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs'; } .card-container ::ng-deep > .ant-tabs-card .ant-tabs-content { height: 120px; - margin-top: -16px; + margin-block-start: -16px; } .card-container ::ng-deep > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane { background: #fff; diff --git a/components/tabs/demo/custom-add-trigger.ts b/components/tabs/demo/custom-add-trigger.ts index 0b69e538eef..4ef6436106b 100644 --- a/components/tabs/demo/custom-add-trigger.ts +++ b/components/tabs/demo/custom-add-trigger.ts @@ -7,7 +7,7 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs'; selector: 'nz-demo-tabs-custom-add-trigger', imports: [NzButtonModule, NzTabsModule], template: ` -
+
diff --git a/components/tabs/demo/extra.ts b/components/tabs/demo/extra.ts index 24b046eed3d..e1f0adc3a2f 100644 --- a/components/tabs/demo/extra.ts +++ b/components/tabs/demo/extra.ts @@ -28,10 +28,10 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs'; @if (positions().includes('start')) { - + } @if (positions().includes('end')) { - + } @for (tab of tabs; track tab) { diff --git a/components/tabs/demo/link-router.ts b/components/tabs/demo/link-router.ts index b58617f7401..9dbfa7b4793 100644 --- a/components/tabs/demo/link-router.ts +++ b/components/tabs/demo/link-router.ts @@ -8,7 +8,7 @@ import { NzTabsModule } from 'ng-zorro-antd/tabs'; selector: 'nz-demo-tabs-link-router', imports: [RouterLink, NzTabsModule, NzButtonModule], template: ` -
+
diff --git a/components/tabs/demo/slide.ts b/components/tabs/demo/slide.ts index a0ad451553d..907e1534e8f 100644 --- a/components/tabs/demo/slide.ts +++ b/components/tabs/demo/slide.ts @@ -1,7 +1,6 @@ -import { Component, OnInit, signal } from '@angular/core'; +import { Component, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; import { NzRadioModule } from 'ng-zorro-antd/radio'; import { NzTabPosition, NzTabsModule } from 'ng-zorro-antd/tabs'; @@ -13,53 +12,28 @@ interface Tab { @Component({ selector: 'nz-demo-tabs-slide', - imports: [FormsModule, NzInputNumberModule, NzRadioModule, NzTabsModule], + imports: [FormsModule, NzRadioModule, NzTabsModule], template: ` - - - @for (tab of tabs(); track tab) { - + + @for (tab of tabs; track tab) { + {{ tab.content }} } ` }) -export class NzDemoTabsSlideComponent implements OnInit { - readonly tabs = signal([]); +export class NzDemoTabsSlideComponent { + readonly tabs = Array.from({ length: 30 }, (_, i): Tab => ({ + name: `Tab ${i}`, + disabled: i === 28, + content: `Content of tab ${i}` + })); readonly position = signal('top'); readonly selectedIndex = signal(27); - - log(args: unknown[]): void { - console.log(args); - } - - ngOnInit(): void { - const tabs: Tab[] = []; - for (let i = 0; i < 30; i++) { - tabs.push({ - name: `Tab ${i}`, - disabled: i === 28, - content: `Content of tab ${i}` - }); - } - this.tabs.set(tabs); - } } diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index 8fa27ab0892..882f170472c 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -100,10 +100,7 @@ svg { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; margin: auto; } } diff --git a/components/tabs/style/card.less b/components/tabs/style/card.less index 20033d1d107..b687093a24d 100644 --- a/components/tabs/style/card.less +++ b/components/tabs/style/card.less @@ -1,8 +1,3 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@tab-prefix-cls: ~'@{ant-prefix}-tabs'; - .@{tab-prefix-cls}-card { > .@{tab-prefix-cls}-nav, > div > .@{tab-prefix-cls}-nav { diff --git a/components/tabs/style/dropdown.less b/components/tabs/style/dropdown.less index b0444afcb91..2fa91559470 100644 --- a/components/tabs/style/dropdown.less +++ b/components/tabs/style/dropdown.less @@ -12,6 +12,10 @@ z-index: @zindex-dropdown; display: block; + &-rtl { + direction: rtl; + } + &-hidden { display: none; } @@ -22,7 +26,7 @@ padding: @dropdown-edge-child-vertical-padding 0; overflow-x: hidden; overflow-y: auto; - text-align: left; + text-align: start; list-style-type: none; background-color: @dropdown-menu-bg; background-clip: padding-box; @@ -53,7 +57,7 @@ &-remove { flex: none; - margin-left: @margin-sm; + margin-inline-start: @margin-sm; color: @text-color-secondary; font-size: @font-size-sm; background: transparent; diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 078184c18f8..bcf5733b448 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -69,9 +69,8 @@ &::after { position: absolute; - right: 0; bottom: 0; - left: 0; + inset-inline: 0; height: 5px; transform: translateY(100%); content: ''; @@ -149,8 +148,8 @@ &-remove { flex: none; - margin-right: -@margin-xss; - margin-left: @margin-xs; + margin-inline-start: @margin-xs; + margin-inline-end: -@margin-xss; color: @text-color-secondary; font-size: @font-size-sm; background: transparent; diff --git a/components/tabs/style/patch.less b/components/tabs/style/patch.less index 3e7adaf06cc..e7b67235a9d 100644 --- a/components/tabs/style/patch.less +++ b/components/tabs/style/patch.less @@ -1,5 +1,3 @@ -@import './index'; - .ant-tabs-dropdown-menu-item a[nz-tab-link] { position: relative; } @@ -7,10 +5,7 @@ .ant-tabs-tab a[nz-tab-link] { &::before { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; background-color: transparent; content: ''; } @@ -27,7 +22,7 @@ padding: @dropdown-edge-child-vertical-padding 0; overflow-x: hidden; overflow-y: auto; - text-align: left; + text-align: start; list-style-type: none; background-color: @dropdown-menu-bg; background-clip: padding-box; diff --git a/components/tabs/style/position.less b/components/tabs/style/position.less index 9087f43ba2f..50fe87ef97b 100644 --- a/components/tabs/style/position.less +++ b/components/tabs/style/position.less @@ -1,6 +1,3 @@ -@import '../../style/themes/index'; -@tab-prefix-cls: ~'@{ant-prefix}-tabs'; - .@{tab-prefix-cls} { // ========================== Top & Bottom ========================== &-top, @@ -13,8 +10,7 @@ &::before { position: absolute; - right: 0; - left: 0; + inset-inline: 0; border-bottom: @border-width-base @border-style-base @border-color-split; content: ''; } @@ -73,8 +69,8 @@ > .@{tab-prefix-cls}-nav, > div > .@{tab-prefix-cls}-nav { order: 1; - margin-top: @margin-md; - margin-bottom: 0; + margin-block-start: @margin-md; + margin-block-end: 0; &::before { top: 0; @@ -115,8 +111,7 @@ &::before, &::after { - right: 0; - left: 0; + inset-inline: 0; height: 30px; } diff --git a/components/tabs/style/size.less b/components/tabs/style/size.less index 03c0fea9a4f..75f4a80af07 100644 --- a/components/tabs/style/size.less +++ b/components/tabs/style/size.less @@ -1,8 +1,3 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@tab-prefix-cls: ~'@{ant-prefix}-tabs'; - .@{tab-prefix-cls} { &-small { > .@{tab-prefix-cls}-nav { diff --git a/components/tabs/tabs.component.spec.ts b/components/tabs/tabs.component.spec.ts index bf47e62e497..3bd2d6005e2 100644 --- a/components/tabs/tabs.component.spec.ts +++ b/components/tabs/tabs.component.spec.ts @@ -269,7 +269,7 @@ describe('tabs', () => { expect(tabsButtons.length).toBe(3); tabsButtons.forEach(tab => { - expect(tab.style.marginRight).toBe('10px'); + expect(tab.style.marginInlineEnd).toBe('10px'); expect(tab.style.marginBottom).toBe(''); }); @@ -277,7 +277,7 @@ describe('tabs', () => { fixture.detectChanges(); tabsButtons.forEach(tab => { - expect(tab.style.marginRight).toBe(''); + expect(tab.style.marginInlineEnd).toBe(''); expect(tab.style.marginBottom).toBe('10px'); }); }); diff --git a/components/tabs/tabs.component.ts b/components/tabs/tabs.component.ts index 7ffabce0329..9197c197fc4 100644 --- a/components/tabs/tabs.component.ts +++ b/components/tabs/tabs.component.ts @@ -88,7 +88,7 @@ let nextId = 0; @for (tab of tabs; track tab) {
- +
- ` }) export class NzDemoTransferTableTransferComponent { @@ -82,9 +81,7 @@ export class NzDemoTransferTableTransferComponent { direction: [2, 3].includes(i) ? 'right' : undefined })) ); - readonly $asTransferItems = (data: unknown): TransferItem[] => data as TransferItem[]; readonly disabled = signal(false); - readonly showSearch = signal(false); select(ret: TransferSelectChange): void { console.log('nzSelectChange', ret); diff --git a/components/transfer/style/customize.less b/components/transfer/style/customize.less index 042a0cb17e5..673b7565c55 100644 --- a/components/transfer/style/customize.less +++ b/components/transfer/style/customize.less @@ -1,7 +1,3 @@ -@import '../../style/themes/index'; - -@transfer-prefix-cls: ~'@{ant-prefix}-transfer'; - @table-prefix-cls: ~'@{ant-prefix}-table'; @input-prefix-cls: ~'@{ant-prefix}-input'; diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index c0495227368..330a94d5752 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -1,11 +1,12 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../checkbox/style/mixin'; -@import './customize'; -@import './status'; @transfer-prefix-cls: ~'@{ant-prefix}-transfer'; +@import './customize'; +@import './status'; + @transfer-header-vertical-padding: ceil( ((@transfer-header-height - 1px - @font-size-base * @line-height-base) / 2) ); @@ -17,6 +18,10 @@ display: flex; align-items: stretch; + &-rtl { + direction: rtl; + } + &-disabled { .@{transfer-prefix-cls}-list { background: @transfer-disabled-bg; @@ -37,8 +42,7 @@ } &-search { - padding-inline-start: @control-padding-horizontal-sm; - padding-inline-end: 24px; + padding-inline: @control-padding-horizontal-sm; .anticon-search { color: @disabled-color; @@ -145,10 +149,8 @@ &::after { position: absolute; - top: -@transfer-item-padding-vertical; - right: -50%; - bottom: -@transfer-item-padding-vertical; - left: -50%; + inset-block: -@transfer-item-padding-vertical; + inset-inline: -50%; content: ''; } } diff --git a/components/transfer/style/status.less b/components/transfer/style/status.less index a8612231748..40e8eb3a9c3 100644 --- a/components/transfer/style/status.less +++ b/components/transfer/style/status.less @@ -1,7 +1,3 @@ -@import '../../input/style/mixin'; - -@transfer-prefix-cls: ~'@{ant-prefix}-transfer'; - .transfer-status-color(@color) { .@{transfer-prefix-cls}-list { border-color: @color; diff --git a/components/tree-select/style/entry.less b/components/tree-select/style/entry.less index 851844b3500..9f7aa76d9ba 100644 --- a/components/tree-select/style/entry.less +++ b/components/tree-select/style/entry.less @@ -1,6 +1,5 @@ @import './index.less'; // style dependencies -// deps-lint-skip: select @import '../../tree/style/entry.less'; @import '../../select/style/entry.less'; @import '../../empty/style/entry.less'; diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index f2c72beac04..f0106397c0a 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -9,6 +9,10 @@ .antCheckboxFn(@checkbox-prefix-cls: ~'@{select-tree-prefix-cls}-checkbox'); .@{tree-select-prefix-cls} { + &-rtl { + direction: rtl; + } + // ======================= Dropdown ======================= &-dropdown { padding: @padding-xs (@padding-xs / 2); @@ -38,7 +42,7 @@ &_close { .@{select-tree-prefix-cls}-switcher-icon { svg { - &:dir(rtl) { + .@{tree-select-prefix-cls}-dropdown-rtl & { transform: rotate(90deg); } } @@ -46,7 +50,7 @@ } &-loading-icon { - &:dir(rtl) { + .@{tree-select-prefix-cls}-dropdown-rtl & { transform: scaleY(-1); } } diff --git a/components/tree-view/style/entry.less b/components/tree-view/style/entry.less index d2fc8c63656..77f06f03747 100644 --- a/components/tree-view/style/entry.less +++ b/components/tree-view/style/entry.less @@ -1,6 +1 @@ -/* - * 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 'index.less'; diff --git a/components/tree-view/style/index.less b/components/tree-view/style/index.less index 3bfa2756bdd..b7a9e9fa108 100644 --- a/components/tree-view/style/index.less +++ b/components/tree-view/style/index.less @@ -1,8 +1,3 @@ -/* - * 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 - */ - nz-tree-virtual-scroll-view { position: relative; display: block; diff --git a/components/tree/demo/directory.ts b/components/tree/demo/directory.ts index ff005931b89..223906072e2 100644 --- a/components/tree/demo/directory.ts +++ b/components/tree/demo/directory.ts @@ -50,13 +50,13 @@ import { NzFormatEmitEvent, NzTreeModule, NzTreeNode } from 'ng-zorro-antd/tree' .custom-node { cursor: pointer; line-height: 24px; - margin-left: 4px; display: inline-block; } + .custom-node, .file-name, .folder-name { - margin-left: 4px; + margin-inline-start: 4px; } .file-desc, @@ -66,7 +66,7 @@ import { NzFormatEmitEvent, NzTreeModule, NzTreeNode } from 'ng-zorro-antd/tree' background: #87ceff; color: #ffffff; position: relative; - left: 12px; + inset-inline-start: 12px; } ` }) diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less index 286bab6c366..57db6a25f43 100644 --- a/components/tree/style/mixin.less +++ b/components/tree/style/mixin.less @@ -52,6 +52,10 @@ border-radius: @border-radius-base; transition: background-color 0.3s; + &-rtl { + direction: rtl; + } + &-focused:not(:hover):not(&-active-focused) { background: @primary-1; } @@ -181,6 +185,10 @@ .@{custom-tree-prefix-cls}-switcher-icon { svg { transform: rotate(-90deg); + + .@{custom-tree-prefix-cls}-rtl & { + transform: rotate(90deg); + } } } } diff --git a/components/typography/style/index.less b/components/typography/style/index.less index 0e6cf755bc3..7b339af5bc3 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -8,7 +8,7 @@ color: @text-color; overflow-wrap: break-word; - &&-rtl { + &-rtl { direction: rtl; } diff --git a/components/upload/style/index.less b/components/upload/style/index.less index db5e3c453e6..9ebfc711d33 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -11,7 +11,7 @@ outline: 0; - &&-rtl { + &-rtl { direction: rtl; } @@ -149,7 +149,7 @@ .clearfix(); line-height: @line-height-base; - &&-rtl { + &-rtl { direction: rtl; } @@ -322,7 +322,7 @@ top: 50%; inset-inline-start: 50%; font-size: 26px; - transform: translateX(-50%) translateY(-50%); + transform: translate(-50%, -50%); .@{iconfont-css-prefix} { font-size: 26px; @@ -409,7 +409,7 @@ inset-inline-start: 50%; z-index: 10; white-space: nowrap; - transform: translateX(-50%) translateY(-50%); + transform: translate(-50%, -50%); opacity: 0; transition: all 0.3s; From f2abff5d914d46f6ffb5bfd18bbbde6b269e431b Mon Sep 17 00:00:00 2001 From: laffery86 Date: Mon, 17 Aug 2026 15:53:23 +0800 Subject: [PATCH 7/7] refactor(module:*): consolidate rtl styles --- components/button/style/index.less | 2 +- components/button/style/mixin.less | 3 +-- components/checkbox/style/mixin.less | 3 +-- components/date-picker/style/Calendar.less | 3 +-- components/date-picker/style/RangePicker.less | 3 +-- components/date-picker/style/TimePicker.less | 3 +-- components/dropdown/style/index.less | 3 +-- components/form/style/index.less | 7 ------- components/tooltip/demo/placement.ts | 10 +++++----- 9 files changed, 12 insertions(+), 25 deletions(-) diff --git a/components/button/style/index.less b/components/button/style/index.less index 181a706f04b..0d0f42cce88 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -122,7 +122,7 @@ } .@{iconfont-css-prefix} { - transition: margin-left 0.3s @ease-in-out; + transition: margin 0.3s @ease-in-out; // Follow icon blur under windows. Change the render. // https://github.com/ant-design/ant-design/issues/13924 diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index e66517cd79c..b4967495c9c 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -470,8 +470,7 @@ // circle button: the content only contains icon .btn-circle(@btnClassName: btn) { min-width: @btn-height-base; - padding-right: 0; - padding-left: 0; + padding-inline: 0; text-align: center; border-radius: 50%; &.@{btnClassName}-lg { diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index f44883318f2..e05b82f8575 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -179,8 +179,7 @@ } .@{checkbox-prefix-cls} + span { - padding-right: 8px; - padding-left: 8px; + padding-inline: 8px; } .@{checkbox-prefix-cls}-group { diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index 1499224ccf5..6061c1a9339 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -308,8 +308,7 @@ &-disabled-cell&-today &-date { position: relative; - padding-right: 5px; - padding-left: 5px; + padding-inline: 5px; &::before { position: absolute; diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index 1bc430af574..2b6d3d36779 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -114,8 +114,7 @@ .@{calendar-timepicker-prefix-cls}-input { .input; height: @input-height-sm; - padding-right: 0; - padding-left: 0; + padding-inline: 0; line-height: @input-height-sm; border: 0; box-shadow: none; diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less index 9f4c1e49ccc..a68255302a7 100644 --- a/components/date-picker/style/TimePicker.less +++ b/components/date-picker/style/TimePicker.less @@ -62,8 +62,7 @@ } &:first-child { - margin-left: 0; - border-left: 0; + margin-inline: 0; } &:last-child { diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 94a207622b0..8d8625599fd 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -288,8 +288,7 @@ } &:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) { - padding-right: @padding-xs; - padding-left: @padding-xs; + padding-inline: @padding-xs; } } } diff --git a/components/form/style/index.less b/components/form/style/index.less index da322964651..1adb6017b0e 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -338,10 +338,3 @@ opacity: 1; } } - -// vertical -.make-vertical-layout-label() { - &:dir(rtl) { - text-align: right; - } -} diff --git a/components/tooltip/demo/placement.ts b/components/tooltip/demo/placement.ts index e96bc684bea..6ea9e716ebb 100644 --- a/components/tooltip/demo/placement.ts +++ b/components/tooltip/demo/placement.ts @@ -7,24 +7,24 @@ import { NzTooltipModule } from 'ng-zorro-antd/tooltip'; selector: 'nz-demo-tooltip-placement', imports: [NzButtonModule, NzTooltipModule], template: ` -
+
-
+
-
+
-
+
@@ -35,7 +35,7 @@ import { NzTooltipModule } from 'ng-zorro-antd/tooltip'; width: 70px; text-align: center; padding: 0; - margin-right: 8px; + margin-inline-end: 8px; margin-bottom: 8px; } `