From 7f4c7b5978b07f0cd1f9c40544659552c8c9d7be Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Thu, 19 Mar 2020 12:13:24 +0800 Subject: [PATCH] style: fix rtl.less place and name (#22384) --- components/badge/style/index.less | 3 +- components/breadcrumb/style/index.less | 3 +- components/button/style/index.less | 3 +- components/button/style/mixin.less | 2 - components/button/style/mixin.rtl.less | 60 --------- components/button/style/rtl.less | 62 +++++++++ components/carousel/style/index.less | 3 +- components/checkbox/style/index.less | 2 +- components/collapse/style/index.less | 3 +- components/comment/style/index.less | 3 +- components/descriptions/style/index.less | 3 +- components/drawer/style/index.less | 1 + components/drawer/style/index.tsx | 1 - components/dropdown/style/index.less | 3 +- components/empty/style/index.less | 3 +- components/grid/style/index.less | 3 +- components/grid/style/mixin.less | 1 - components/grid/style/mixin.rtl.less | 60 --------- components/grid/style/rtl.less | 60 +++++++++ components/list/style/index.less | 2 +- components/list/style/responsive.less | 2 - components/list/style/responsive.rtl.less | 47 ------- components/list/style/rtl.less | 49 ++++++++ components/menu/style/index.less | 2 +- components/modal/style/index.less | 1 + components/modal/style/index.tsx | 2 - components/page-header/style/index.less | 3 +- components/pagination/style/index.less | 3 +- components/progress/style/index.less | 2 + components/progress/style/index.tsx | 1 - components/rate/style/index.less | 3 +- components/result/style/index.less | 2 + components/result/style/index.tsx | 1 - components/select/style/index.less | 3 +- components/select/style/multiple.less | 1 - components/select/style/multiple.rtl.less | 69 ---------- components/select/style/rtl.less | 133 ++++++++++++++++++++ components/select/style/single.less | 1 - components/select/style/single.rtl.less | 69 ---------- components/slider/style/index.less | 3 +- components/steps/style/custom-icon.less | 2 - components/steps/style/custom-icon.rtl.less | 10 -- components/steps/style/index.less | 2 +- components/steps/style/nav.less | 2 - components/steps/style/nav.rtl.less | 37 ------ components/steps/style/rtl.less | 105 ++++++++++++++++ components/steps/style/small.less | 2 - components/steps/style/small.rtl.less | 21 ---- components/steps/style/vertical.less | 2 - components/steps/style/vertical.rtl.less | 29 ----- components/switch/style/index.less | 3 +- components/transfer/style/index.less | 3 +- components/typography/style/index.less | 3 +- components/upload/style/index.less | 3 +- 54 files changed, 457 insertions(+), 445 deletions(-) delete mode 100644 components/button/style/mixin.rtl.less delete mode 100644 components/grid/style/mixin.rtl.less delete mode 100644 components/list/style/responsive.rtl.less delete mode 100644 components/select/style/multiple.rtl.less delete mode 100644 components/select/style/single.rtl.less delete mode 100644 components/steps/style/custom-icon.rtl.less delete mode 100644 components/steps/style/nav.rtl.less delete mode 100644 components/steps/style/small.rtl.less delete mode 100644 components/steps/style/vertical.rtl.less diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 85e240b789..c48559c66e 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @badge-prefix-cls: ~'@{ant-prefix}-badge'; @number-prefix-cls: ~'@{ant-prefix}-scroll-number'; @@ -190,3 +189,5 @@ opacity: 0; } } + +@import './rtl'; diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index a6edbd8223..918938b0e3 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb'; @@ -50,3 +49,5 @@ } } } + +@import './rtl'; diff --git a/components/button/style/index.less b/components/button/style/index.less index d36250db63..3d07dfe776 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -1,7 +1,6 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import './mixin'; -@import './rtl'; @btn-prefix-cls: ~'@{ant-prefix}-btn'; @@ -247,3 +246,5 @@ a.@{btn-prefix-cls} { line-height: @btn-height-sm - 2px; } } + +@import './rtl'; diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 581ac2a3ab..5ceb216e7e 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -1,5 +1,3 @@ -@import './mixin.rtl.less'; - // mixins for button // ------------------------ .button-size(@height; @padding-horizontal; @font-size; @border-radius) { diff --git a/components/button/style/mixin.rtl.less b/components/button/style/mixin.rtl.less deleted file mode 100644 index 1febd9b05f..0000000000 --- a/components/button/style/mixin.rtl.less +++ /dev/null @@ -1,60 +0,0 @@ -.btn-group(@btnClassName: btn) { - .@{btnClassName} + .@{btnClassName}, - .@{btnClassName} + &, - span + .@{btnClassName}, - .@{btnClassName} + span, - > span + span, - & + .@{btnClassName}, - & + & { - .@{btnClassName}-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-top-left-radius: 0; - border-top-right-radius: @btn-border-radius-base; - border-bottom-right-radius: @btn-border-radius-base; - border-bottom-left-radius: 0; - } - } - - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-top-left-radius: @btn-border-radius-base; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: @btn-border-radius-base; - } - } - - &-sm { - > .@{btnClassName}:first-child:not(:last-child), - > span:first-child:not(:last-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-top-left-radius: 0; - border-top-right-radius: @btn-border-radius-sm; - border-bottom-right-radius: @btn-border-radius-sm; - border-bottom-left-radius: 0; - } - } - - > .@{btnClassName}:last-child:not(:first-child), - > span:last-child:not(:first-child) > .@{btnClassName} { - .@{btnClassName}-group-rtl& { - border-top-left-radius: @btn-border-radius-sm; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: @btn-border-radius-sm; - } - } - } -} diff --git a/components/button/style/rtl.less b/components/button/style/rtl.less index 8f90eda68d..0b93153acc 100644 --- a/components/button/style/rtl.less +++ b/components/button/style/rtl.less @@ -60,3 +60,65 @@ } } } + +// mixin +.btn-group(@btnClassName: btn) { + .@{btnClassName} + .@{btnClassName}, + .@{btnClassName} + &, + span + .@{btnClassName}, + .@{btnClassName} + span, + > span + span, + & + .@{btnClassName}, + & + & { + .@{btnClassName}-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-top-left-radius: 0; + border-top-right-radius: @btn-border-radius-base; + border-bottom-right-radius: @btn-border-radius-base; + border-bottom-left-radius: 0; + } + } + + > .@{btnClassName}:last-child:not(:first-child), + > span:last-child:not(:first-child) > .@{btnClassName} { + .@{btnClassName}-group-rtl& { + border-top-left-radius: @btn-border-radius-base; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: @btn-border-radius-base; + } + } + + &-sm { + > .@{btnClassName}:first-child:not(:last-child), + > span:first-child:not(:last-child) > .@{btnClassName} { + .@{btnClassName}-group-rtl& { + border-top-left-radius: 0; + border-top-right-radius: @btn-border-radius-sm; + border-bottom-right-radius: @btn-border-radius-sm; + border-bottom-left-radius: 0; + } + } + + > .@{btnClassName}:last-child:not(:first-child), + > span:last-child:not(:first-child) > .@{btnClassName} { + .@{btnClassName}-group-rtl& { + border-top-left-radius: @btn-border-radius-sm; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: @btn-border-radius-sm; + } + } + } +} diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index 75461322d7..722c76de87 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @carousel-prefix-cls: ~'@{ant-prefix}-carousel'; @@ -253,3 +252,5 @@ } } } + +@import './rtl'; diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less index a1d42408cd..1ce3012cdc 100644 --- a/components/checkbox/style/index.less +++ b/components/checkbox/style/index.less @@ -1,5 +1,5 @@ @import '../../style/themes/index'; @import './mixin'; -@import './rtl'; .antCheckboxFn(); +@import './rtl'; diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 7a4c19ab71..60f714f79e 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @collapse-prefix-cls: ~'@{ant-prefix}-collapse'; @@ -134,3 +133,5 @@ } } } + +@import './rtl'; diff --git a/components/comment/style/index.less b/components/comment/style/index.less index 73268ffa63..0af056a8df 100644 --- a/components/comment/style/index.less +++ b/components/comment/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @comment-prefix-cls: ~'@{ant-prefix}-comment'; @@ -96,3 +95,5 @@ margin-left: @comment-nest-indent; } } + +@import './rtl'; diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index e5fa57f974..c724bab317 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/default'; @import '../../style/mixins/index'; -@import './rtl'; @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; @@ -144,3 +143,5 @@ } } } + +@import './rtl'; diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less index d6b1c4f8b7..4a8e99a674 100644 --- a/components/drawer/style/index.less +++ b/components/drawer/style/index.less @@ -2,3 +2,4 @@ @import '../../style/mixins/index'; @import './drawer'; @import './customize'; +@import './rtl.less'; diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx index 5c29415d6e..1f18f88462 100644 --- a/components/drawer/style/index.tsx +++ b/components/drawer/style/index.tsx @@ -1,4 +1,3 @@ // deps-lint-skip: empty import '../../style/index.less'; import './index.less'; -import './rtl.less'; diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 51f9d0536b..825679b5de 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown'; @@ -285,3 +284,5 @@ } } } + +@import './rtl'; diff --git a/components/empty/style/index.less b/components/empty/style/index.less index b6d3b0dca6..38278b04fc 100644 --- a/components/empty/style/index.less +++ b/components/empty/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @empty-prefix-cls: ~'@{ant-prefix}-empty'; @empty-img-prefix-cls: ~'@{ant-prefix}-empty-img'; @@ -136,3 +135,5 @@ } } } + +@import './rtl'; diff --git a/components/grid/style/index.less b/components/grid/style/index.less index 4c2e7eba9d..fa7cc98136 100644 --- a/components/grid/style/index.less +++ b/components/grid/style/index.less @@ -1,7 +1,6 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import './mixin'; -@import './rtl'; // Grid system .@{ant-prefix}-row { @@ -111,3 +110,5 @@ @media (min-width: @screen-xxl-min) { .make-grid(-xxl); } + +@import './rtl'; diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less index 7f12b1cb59..4d9de47060 100644 --- a/components/grid/style/mixin.less +++ b/components/grid/style/mixin.less @@ -1,5 +1,4 @@ @import '../../style/mixins/index'; -@import './mixin.rtl.less'; // mixins for grid system // ------------------------ diff --git a/components/grid/style/mixin.rtl.less b/components/grid/style/mixin.rtl.less deleted file mode 100644 index accb844dbd..0000000000 --- a/components/grid/style/mixin.rtl.less +++ /dev/null @@ -1,60 +0,0 @@ -@import '../../style/mixins/index'; - -.loop-grid-columns(@index, @class) when (@index > 0) { - .@{ant-prefix}-col@{class}-push-@{index} { - // reset property in RTL direction - &.@{ant-prefix}-col-rtl { - right: percentage((@index / @grid-columns)); - left: auto; - } - } - - .@{ant-prefix}-col@{class}-pull-@{index} { - // reset property in RTL direction - &.@{ant-prefix}-col-rtl { - right: auto; - left: percentage((@index / @grid-columns)); - } - } - - .@{ant-prefix}-col@{class}-offset-@{index} { - // reset property in RTL direction - &.@{ant-prefix}-col-rtl { - margin-right: percentage((@index / @grid-columns)); - margin-left: 0; - } - } -} - -.loop-grid-columns(@index, @class) when (@index = 0) { - .@{ant-prefix}-col-push-@{index} { - // reset property in RTL direction - &.@{ant-prefix}-col-rtl { - right: auto; - } - } - - .@{ant-prefix}-col-pull-@{index} { - &.@{ant-prefix}-col-rtl { - left: auto; - } - } - - .@{ant-prefix}-col@{class}-push-@{index} { - &.@{ant-prefix}-col-rtl { - right: auto; - } - } - - .@{ant-prefix}-col@{class}-pull-@{index} { - &.@{ant-prefix}-col-rtl { - left: auto; - } - } - - .@{ant-prefix}-col@{class}-offset-@{index} { - &.@{ant-prefix}-col-rtl { - margin-right: 0; - } - } -} diff --git a/components/grid/style/rtl.less b/components/grid/style/rtl.less index d3efc70f2d..66be0155c1 100644 --- a/components/grid/style/rtl.less +++ b/components/grid/style/rtl.less @@ -12,3 +12,63 @@ float: right; } } + +// mixin +.loop-grid-columns(@index, @class) when (@index > 0) { + .@{ant-prefix}-col@{class}-push-@{index} { + // reset property in RTL direction + &.@{ant-prefix}-col-rtl { + right: percentage((@index / @grid-columns)); + left: auto; + } + } + + .@{ant-prefix}-col@{class}-pull-@{index} { + // reset property in RTL direction + &.@{ant-prefix}-col-rtl { + right: auto; + left: percentage((@index / @grid-columns)); + } + } + + .@{ant-prefix}-col@{class}-offset-@{index} { + // reset property in RTL direction + &.@{ant-prefix}-col-rtl { + margin-right: percentage((@index / @grid-columns)); + margin-left: 0; + } + } +} + +.loop-grid-columns(@index, @class) when (@index = 0) { + .@{ant-prefix}-col-push-@{index} { + // reset property in RTL direction + &.@{ant-prefix}-col-rtl { + right: auto; + } + } + + .@{ant-prefix}-col-pull-@{index} { + &.@{ant-prefix}-col-rtl { + left: auto; + } + } + + .@{ant-prefix}-col@{class}-push-@{index} { + &.@{ant-prefix}-col-rtl { + right: auto; + } + } + + .@{ant-prefix}-col@{class}-pull-@{index} { + &.@{ant-prefix}-col-rtl { + left: auto; + } + } + + .@{ant-prefix}-col@{class}-offset-@{index} { + &.@{ant-prefix}-col-rtl { + margin-right: 0; + } + } +} diff --git a/components/list/style/index.less b/components/list/style/index.less index e8d6227ab7..db19017cd6 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -235,4 +235,4 @@ @import './bordered'; @import './responsive'; -@import './rtl.less'; +@import './rtl'; diff --git a/components/list/style/responsive.less b/components/list/style/responsive.less index 3e3f1e37d2..151dec453d 100644 --- a/components/list/style/responsive.less +++ b/components/list/style/responsive.less @@ -38,5 +38,3 @@ } } } - -@import './responsive.rtl.less'; diff --git a/components/list/style/responsive.rtl.less b/components/list/style/responsive.rtl.less deleted file mode 100644 index 454d82f8e8..0000000000 --- a/components/list/style/responsive.rtl.less +++ /dev/null @@ -1,47 +0,0 @@ -@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/list/style/rtl.less b/components/list/style/rtl.less index dd9899104e..750503b0a1 100644 --- a/components/list/style/rtl.less +++ b/components/list/style/rtl.less @@ -88,3 +88,52 @@ } } } + +// 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/menu/style/index.less b/components/menu/style/index.less index c496e92a51..2d801f0f89 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @menu-prefix-cls: ~'@{ant-prefix}-menu'; @@ -558,3 +557,4 @@ } @import './dark'; +@import './rtl'; diff --git a/components/modal/style/index.less b/components/modal/style/index.less index c727c4b9d2..afafbaf896 100644 --- a/components/modal/style/index.less +++ b/components/modal/style/index.less @@ -3,3 +3,4 @@ @import './modal'; @import './confirm'; @import './customize.less'; +@import './rtl.less'; diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index bc6f5df47c..416ec0177e 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -3,5 +3,3 @@ import './index.less'; // style dependencies import '../../button/style'; - -import './rtl.less'; diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index d98634253d..473aba6931 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @pageheader-prefix-cls: ~'@{ant-prefix}-page-header'; @@ -122,3 +121,5 @@ } } } + +@import './rtl'; diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index f01e7f9f53..f7c7354d02 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -1,7 +1,6 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; -@import './rtl'; @pagination-prefix-cls: ~'@{ant-prefix}-pagination'; @@ -399,3 +398,5 @@ display: none; } } + +@import './rtl'; diff --git a/components/progress/style/index.less b/components/progress/style/index.less index eced1d33b1..92b6e93209 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -195,3 +195,5 @@ opacity: 0; } } + +@import './rtl.less'; diff --git a/components/progress/style/index.tsx b/components/progress/style/index.tsx index d0c69a4c84..3a3ab0de59 100644 --- a/components/progress/style/index.tsx +++ b/components/progress/style/index.tsx @@ -1,3 +1,2 @@ import '../../style/index.less'; import './index.less'; -import './rtl.less'; diff --git a/components/rate/style/index.less b/components/rate/style/index.less index 206d5c1565..17625a5b4f 100644 --- a/components/rate/style/index.less +++ b/components/rate/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @rate-prefix-cls: ~'@{ant-prefix}-rate'; @@ -84,3 +83,5 @@ font-size: @font-size-base; } } + +@import './rtl'; diff --git a/components/result/style/index.less b/components/result/style/index.less index 91b31272fd..e72f94f3c1 100644 --- a/components/result/style/index.less +++ b/components/result/style/index.less @@ -70,3 +70,5 @@ background-color: @background-color-light; } } + +@import './rtl.less'; diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx index d0c69a4c84..3a3ab0de59 100644 --- a/components/result/style/index.tsx +++ b/components/result/style/index.tsx @@ -1,3 +1,2 @@ import '../../style/index.less'; import './index.less'; -import './rtl.less'; diff --git a/components/select/style/index.less b/components/select/style/index.less index 47fe3435c0..9eaa543339 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -4,7 +4,6 @@ @import './single'; @import './multiple'; -@import './rtl'; @select-prefix-cls: ~'@{ant-prefix}-select'; @select-height-without-border: @input-height-base - 2 * @border-width-base; @@ -267,3 +266,5 @@ box-shadow: none !important; } } + +@import './rtl'; diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less index 0bf38bba1b..59770f1818 100644 --- a/components/select/style/multiple.less +++ b/components/select/style/multiple.less @@ -1,5 +1,4 @@ @import './index'; -@import './multiple.rtl.less'; @select-multiple-item-border-width: 1px; @select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px diff --git a/components/select/style/multiple.rtl.less b/components/select/style/multiple.rtl.less deleted file mode 100644 index 52eaea8ab3..0000000000 --- a/components/select/style/multiple.rtl.less +++ /dev/null @@ -1,69 +0,0 @@ -@import './index'; - -@select-multiple-item-border-width: 1px; -@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2); -@select-multiple-padding: max( - @input-padding-vertical-base - @select-multiple-item-border-width - - @select-multiple-item-spacing-half, - 0 -); - -/** - * Do not merge `height` & `line-height` under style with `selection` & `search`, - * since chrome may update to redesign with its align logic. - */ - -.@{select-prefix-cls}-multiple { - // ======================== Selections ======================== - .@{select-prefix-cls}-selection-item { - .@{select-prefix-cls}-rtl& { - margin-right: 0; - margin-left: @input-padding-vertical-base; - text-align: right; - } - // It's ok not to do this, but 24px makes bottom narrow in view should adjust - &-content { - .@{select-prefix-cls}-rtl& { - margin-right: 0; - margin-left: @padding-xs / 2; - text-align: right; - } - } - } - - // ========================== Input ========================== - .@{select-prefix-cls}-selection-search { - .@{select-prefix-cls}-rtl& { - margin-right: @select-multiple-padding / 2; - margin-left: @input-padding-vertical-base; - } - - &-mirror { - .@{select-prefix-cls}-rtl& { - right: 0; - left: auto; - } - } - } - - // ======================= Placeholder ======================= - .@{select-prefix-cls}-selection-placeholder { - .@{select-prefix-cls}-rtl& { - right: @input-padding-horizontal; - left: auto; - } - } - - // ============================================================ - // == Size == - // ============================================================ - - // Size small need additional set padding - &.@{select-prefix-cls}-sm { - .@{select-prefix-cls}-selection-placeholder { - .@{select-prefix-cls}-rtl& { - right: @input-padding-horizontal-sm; - } - } - } -} diff --git a/components/select/style/rtl.less b/components/select/style/rtl.less index 72ecbf90f1..f469755976 100644 --- a/components/select/style/rtl.less +++ b/components/select/style/rtl.less @@ -32,3 +32,136 @@ } } } + +// multiple +@select-multiple-item-border-width: 1px; +@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2); +@select-multiple-padding: max( + @input-padding-vertical-base - @select-multiple-item-border-width - + @select-multiple-item-spacing-half, + 0 +); + +.@{select-prefix-cls}-multiple { + // ======================== Selections ======================== + .@{select-prefix-cls}-selection-item { + .@{select-prefix-cls}-rtl& { + margin-right: 0; + margin-left: @input-padding-vertical-base; + text-align: right; + } + // It's ok not to do this, but 24px makes bottom narrow in view should adjust + &-content { + .@{select-prefix-cls}-rtl& { + margin-right: 0; + margin-left: @padding-xs / 2; + text-align: right; + } + } + } + + // ========================== Input ========================== + .@{select-prefix-cls}-selection-search { + .@{select-prefix-cls}-rtl& { + margin-right: @select-multiple-padding / 2; + margin-left: @input-padding-vertical-base; + } + + &-mirror { + .@{select-prefix-cls}-rtl& { + right: 0; + left: auto; + } + } + } + + // ======================= Placeholder ======================= + .@{select-prefix-cls}-selection-placeholder { + .@{select-prefix-cls}-rtl& { + right: @input-padding-horizontal; + left: auto; + } + } + + // ============================================================ + // == Size == + // ============================================================ + + // Size small need additional set padding + &.@{select-prefix-cls}-sm { + .@{select-prefix-cls}-selection-placeholder { + .@{select-prefix-cls}-rtl& { + right: @input-padding-horizontal-sm; + } + } + } +} + +// single +@selection-item-padding: ceil(@font-size-base * 1.25); + +.@{select-prefix-cls}-single { + // ========================= Selector ========================= + .@{select-prefix-cls}-selector { + .@{select-prefix-cls}-selection-item, + .@{select-prefix-cls}-selection-placeholder { + .@{select-prefix-cls}-rtl& { + right: 0; + left: 9px; + text-align: right; + } + } + } + + // With arrow should provides `padding-right` to show the arrow + &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search { + .@{select-prefix-cls}-rtl& { + right: @input-padding-horizontal-base; + left: @input-padding-horizontal-base + @font-size-base; + } + } + + &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item, + &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder { + .@{select-prefix-cls}-rtl& { + padding-right: 0; + padding-left: @selection-item-padding; + } + } + + // ========================== Input ========================== + // We only change the style of non-customize input which is only support by `combobox` mode. + + // Not customize + &:not(.@{select-prefix-cls}-customize-input) { + .@{select-prefix-cls}-selector { + .@{select-prefix-cls}-rtl& { + padding: 0 @input-padding-horizontal-base; + } + } + } + + // ============================================================ + // == Size == + // ============================================================ + + // Size small need additional set padding + &.@{select-prefix-cls}-sm { + &:not(.@{select-prefix-cls}-customize-input) { + // With arrow should provides `padding-right` to show the arrow + &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search { + .@{select-prefix-cls}-rtl& { + right: 0; + } + } + + &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item, + &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder { + .@{select-prefix-cls}-rtl& { + padding-right: 0; + padding-left: @font-size-base * 1.5; + } + } + } + } +} diff --git a/components/select/style/single.less b/components/select/style/single.less index fdaec8cc8c..bf6a2aebea 100644 --- a/components/select/style/single.less +++ b/components/select/style/single.less @@ -1,5 +1,4 @@ @import './index'; -@import './single.rtl.less'; @selection-item-padding: ceil(@font-size-base * 1.25); diff --git a/components/select/style/single.rtl.less b/components/select/style/single.rtl.less deleted file mode 100644 index 2a7e1e9e4a..0000000000 --- a/components/select/style/single.rtl.less +++ /dev/null @@ -1,69 +0,0 @@ -@import './index'; - -@selection-item-padding: ceil(@font-size-base * 1.25); - -.@{select-prefix-cls}-single { - // ========================= Selector ========================= - .@{select-prefix-cls}-selector { - .@{select-prefix-cls}-selection-item, - .@{select-prefix-cls}-selection-placeholder { - .@{select-prefix-cls}-rtl& { - right: 0; - left: 9px; - text-align: right; - } - } - } - - // With arrow should provides `padding-right` to show the arrow - &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search { - .@{select-prefix-cls}-rtl& { - right: @input-padding-horizontal-base; - left: @input-padding-horizontal-base + @font-size-base; - } - } - - &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item, - &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder { - .@{select-prefix-cls}-rtl& { - padding-right: 0; - padding-left: @selection-item-padding; - } - } - - // ========================== Input ========================== - // We only change the style of non-customize input which is only support by `combobox` mode. - - // Not customize - &:not(.@{select-prefix-cls}-customize-input) { - .@{select-prefix-cls}-selector { - .@{select-prefix-cls}-rtl& { - padding: 0 @input-padding-horizontal-base; - } - } - } - - // ============================================================ - // == Size == - // ============================================================ - - // Size small need additional set padding - &.@{select-prefix-cls}-sm { - &:not(.@{select-prefix-cls}-customize-input) { - // With arrow should provides `padding-right` to show the arrow - &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search { - .@{select-prefix-cls}-rtl& { - right: 0; - } - } - - &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item, - &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder { - .@{select-prefix-cls}-rtl& { - padding-right: 0; - padding-left: @font-size-base * 1.5; - } - } - } - } -} diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 6c68b7e2b6..3d4d1ee6fd 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @slider-prefix-cls: ~'@{ant-prefix}-slider'; @@ -202,3 +201,5 @@ } } } + +@import './rtl'; diff --git a/components/steps/style/custom-icon.less b/components/steps/style/custom-icon.less index b2f2bd68b2..75a6e4feb9 100644 --- a/components/steps/style/custom-icon.less +++ b/components/steps/style/custom-icon.less @@ -1,5 +1,3 @@ -@import './custom-icon.rtl.less'; - .@{steps-prefix-cls}-item-custom { .@{steps-prefix-cls}-item-icon { height: auto; diff --git a/components/steps/style/custom-icon.rtl.less b/components/steps/style/custom-icon.rtl.less deleted file mode 100644 index 9b5bdc7f9e..0000000000 --- a/components/steps/style/custom-icon.rtl.less +++ /dev/null @@ -1,10 +0,0 @@ -.@{steps-prefix-cls}-item-custom { - .@{steps-prefix-cls}-item-icon { - > .@{steps-prefix-cls}-icon { - .@{steps-prefix-cls}-rtl & { - right: 0.5px; - left: auto; - } - } - } -} diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 199494cb52..f16c7f5f53 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @steps-prefix-cls: ~'@{ant-prefix}-steps'; @process-icon-color: @primary-color; @@ -244,3 +243,4 @@ @import 'label-placement'; @import 'progress-dot'; @import 'nav'; +@import './rtl'; diff --git a/components/steps/style/nav.less b/components/steps/style/nav.less index 096687d7ed..b4bc366a7b 100644 --- a/components/steps/style/nav.less +++ b/components/steps/style/nav.less @@ -1,5 +1,3 @@ -@import './nav.rtl.less'; - .@{steps-prefix-cls}-navigation { padding-top: 12px; diff --git a/components/steps/style/nav.rtl.less b/components/steps/style/nav.rtl.less deleted file mode 100644 index b6b5e01b5e..0000000000 --- a/components/steps/style/nav.rtl.less +++ /dev/null @@ -1,37 +0,0 @@ -.@{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); - } - } - } -} diff --git a/components/steps/style/rtl.less b/components/steps/style/rtl.less index 96374043fc..dcfeca18be 100644 --- a/components/steps/style/rtl.less +++ b/components/steps/style/rtl.less @@ -58,3 +58,108 @@ } } } + +// 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& { + margin-right: 0; + margin-left: 12px; + } + + &:last-child { + .@{steps-prefix-cls}-rtl& { + margin-left: 0; + } + } + } + + .@{steps-prefix-cls}-item-title { + .@{steps-prefix-cls}-rtl& { + padding-right: 0; + } + } +} + +// vertical +.steps-vertical() { + .@{steps-prefix-cls}-item { + &-icon { + .@{steps-prefix-cls}-rtl& { + float: right; + margin-right: 0; + margin-left: 16px; + } + } + } + + > .@{steps-prefix-cls}-item + > .@{steps-prefix-cls}-item-container + > .@{steps-prefix-cls}-item-tail { + .@{steps-prefix-cls}-rtl& { + right: 16px; + left: auto; + } + } + + &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container { + .@{steps-prefix-cls}-item-tail { + .@{steps-prefix-cls}-rtl& { + right: 12px; + left: auto; + } + } + } +} diff --git a/components/steps/style/small.less b/components/steps/style/small.less index 98a7663dca..7c89b088e9 100644 --- a/components/steps/style/small.less +++ b/components/steps/style/small.less @@ -1,5 +1,3 @@ -@import './small.rtl.less'; - .@{steps-prefix-cls}-small { &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) .@{steps-prefix-cls}-item { diff --git a/components/steps/style/small.rtl.less b/components/steps/style/small.rtl.less deleted file mode 100644 index 6ac7b01a66..0000000000 --- a/components/steps/style/small.rtl.less +++ /dev/null @@ -1,21 +0,0 @@ -.@{steps-prefix-cls}-small { - &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) - .@{steps-prefix-cls}-item { - .@{steps-prefix-cls}-rtl& { - margin-right: 0; - margin-left: 12px; - } - - &:last-child { - .@{steps-prefix-cls}-rtl& { - margin-left: 0; - } - } - } - - .@{steps-prefix-cls}-item-title { - .@{steps-prefix-cls}-rtl& { - padding-right: 0; - } - } -} diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less index 3637165bd8..bd848cb7f9 100644 --- a/components/steps/style/vertical.less +++ b/components/steps/style/vertical.less @@ -1,5 +1,3 @@ -@import './vertical.rtl.less'; - .steps-vertical() { display: block; .@{steps-prefix-cls}-item { diff --git a/components/steps/style/vertical.rtl.less b/components/steps/style/vertical.rtl.less deleted file mode 100644 index 19c992d4c8..0000000000 --- a/components/steps/style/vertical.rtl.less +++ /dev/null @@ -1,29 +0,0 @@ -.steps-vertical() { - .@{steps-prefix-cls}-item { - &-icon { - .@{steps-prefix-cls}-rtl& { - float: right; - margin-right: 0; - margin-left: 16px; - } - } - } - - > .@{steps-prefix-cls}-item - > .@{steps-prefix-cls}-item-container - > .@{steps-prefix-cls}-item-tail { - .@{steps-prefix-cls}-rtl& { - right: 16px; - left: auto; - } - } - - &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container { - .@{steps-prefix-cls}-item-tail { - .@{steps-prefix-cls}-rtl& { - right: 12px; - left: auto; - } - } - } -} diff --git a/components/switch/style/index.less b/components/switch/style/index.less index 24c667d7f0..6a571cc8cb 100644 --- a/components/switch/style/index.less +++ b/components/switch/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @switch-prefix-cls: ~'@{ant-prefix}-switch'; @switch-duration: 0.36s; @@ -177,3 +176,5 @@ transform-origin: 50% 50%; } } + +@import './rtl'; diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 63ad65a3d3..b0b8f79401 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -2,7 +2,6 @@ @import '../../style/mixins/index'; @import '../../checkbox/style/mixin'; @import './customize.less'; -@import './rtl.less'; @transfer-prefix-cls: ~'@{ant-prefix}-transfer'; @@ -183,3 +182,5 @@ } } } + +@import './rtl'; diff --git a/components/typography/style/index.less b/components/typography/style/index.less index 18d4a3db2b..14a65d82d4 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @typography-prefix-cls: ~'@{ant-prefix}-typography'; @@ -203,3 +202,5 @@ overflow: hidden; } } + +@import './rtl'; diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 0b8f3d168c..e8e4e9eff2 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -1,6 +1,5 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; -@import './rtl'; @upload-prefix-cls: ~'@{ant-prefix}-upload'; @upload-item: ~'@{ant-prefix}-upload-list-item'; @@ -547,3 +546,5 @@ opacity: 0; } } + +@import './rtl';