diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index 66738eed5d..8bb41aba03 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -10,10 +10,6 @@ padding: 0; list-style: none; - &-rtl { - direction: rtl; - } - &-item { position: relative; margin: 0; @@ -27,13 +23,6 @@ left: 4px; height: calc(100% - 10px); border-left: @timeline-width solid @timeline-color; - - .@{timeline-prefix-cls}-rtl & { - right: 4px; - left: auto; - border-right: @timeline-width solid @timeline-color; - border-left: none; - } } &-pending &-head { @@ -87,12 +76,6 @@ border: 0; border-radius: 0; transform: translate(-50%, -50%); - - .@{timeline-prefix-cls}-rtl & { - right: 5px; - left: auto; - transform: translate(50%, -50%); - } } &-content { @@ -100,10 +83,6 @@ top: -(@font-size-base * @line-height-base - @font-size-base) + 1px; margin: 0 0 0 18px; word-break: break-word; - - .@{timeline-prefix-cls}-rtl & { - margin: 0 18px 0 0; - } } &-last { @@ -124,27 +103,13 @@ &-head, &-head-custom { left: 50%; - - .@{timeline-prefix-cls}-rtl& { - right: 50%; - left: auto; - } } &-head { margin-left: -4px; - .@{timeline-prefix-cls}-rtl& { - margin-right: -4px; - margin-left: 0; - } &-custom { margin-left: 1px; - - .@{timeline-prefix-cls}-rtl& { - margin-right: 1px; - margin-left: 0; - } } } @@ -153,12 +118,6 @@ left: calc(50% - 4px); width: calc(50% - 14px); text-align: left; - - .@{timeline-prefix-cls}-rtl& { - right: calc(50% - 4px); - left: auto; - text-align: right; - } } } @@ -167,10 +126,6 @@ width: calc(50% - 12px); margin: 0; text-align: right; - - .@{timeline-prefix-cls}-rtl& { - text-align: left; - } } } } @@ -183,20 +138,9 @@ .@{timeline-prefix-cls}-item-head-custom { // stylelint-disable-next-line function-calc-no-invalid left: calc(100% - 4px - @timeline-width); - - .@{timeline-prefix-cls}-rtl& { - right: 0; - left: auto; - } } .@{timeline-prefix-cls}-item-content { width: calc(100% - 18px); - - .@{timeline-prefix-cls}-rtl& { - width: 100%; - margin-right: 18px; - text-align: right; - } } } } @@ -205,11 +149,6 @@ display: block; height: calc(100% - 14px); border-left: 2px dotted @timeline-color; - - .@{timeline-prefix-cls}-rtl& { - border-right: 2px dotted @timeline-color; - border-left: none; - } } &&-reverse &-item-last &-item-tail { @@ -222,11 +161,6 @@ display: block; height: calc(100% - 15px); border-left: 2px dotted @timeline-color; - - .@{timeline-prefix-cls}-rtl& { - border-right: 2px dotted @timeline-color; - border-left: none; - } } .@{timeline-prefix-cls}-item-content { min-height: 48px; @@ -248,3 +182,5 @@ } } } + +@import './rtl.less'; diff --git a/components/timeline/style/rtl.less b/components/timeline/style/rtl.less new file mode 100644 index 0000000000..0e0147a2fa --- /dev/null +++ b/components/timeline/style/rtl.less @@ -0,0 +1,119 @@ +@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; + } + } + } +} diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index ba5f593dc3..6a664fc65d 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -21,10 +21,6 @@ max-width: @tooltip-max-width; visibility: visible; - &-rtl { - direction: rtl; - } - &-hidden { display: none; } @@ -65,10 +61,6 @@ background-color: @tooltip-bg; border-radius: @border-radius-base; box-shadow: @box-shadow-base; - - .@{tooltip-prefix-cls}-rtl & { - text-align: right; - } } // Arrows @@ -193,3 +185,5 @@ right: @tooltip-arrow-offset-horizontal; } } + +@import './rtl.less'; diff --git a/components/tooltip/style/rtl.less b/components/tooltip/style/rtl.less new file mode 100644 index 0000000000..77d09a3f8d --- /dev/null +++ b/components/tooltip/style/rtl.less @@ -0,0 +1,14 @@ +@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip'; + +// Base class +.@{tooltip-prefix-cls} { + &-rtl { + direction: rtl; + } + // Wrapper for the tooltip content + &-inner { + .@{tooltip-prefix-cls}-rtl & { + text-align: right; + } + } +} diff --git a/components/tree/style/index.less b/components/tree/style/index.less index 0832a994b6..d60f2a0b1e 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -17,10 +17,6 @@ border-radius: @border-radius-base; transition: background-color 0.3s; - &-rtl { - direction: rtl; - } - &-focused:not(:hover):not(&-active-focused) { background: @primary-1; } @@ -47,10 +43,6 @@ align-items: flex-start; padding: 0 0 (@padding-xs / 2) 0; outline: none; - - &-rtl { - direction: rtl; - } // Disabled &-disabled { // >>> Title @@ -101,10 +93,6 @@ .@{tree-prefix-cls}-switcher-icon { svg { transform: rotate(-90deg); - - .@{tree-prefix-cls}-rtl& { - transform: rotate(90deg); - } } } } @@ -198,12 +186,6 @@ bottom: -@tree-title-height - 4px; border-right: 1px solid @border-color-base; content: ''; - .@{tree-prefix-cls}-rtl& { - right: auto; - left: -@tree-title-height / 2; - border-right: none; - border-left: 1px solid @border-color-base; - } } &-end { @@ -233,3 +215,5 @@ } .antTreeFn(@tree-prefix-cls); + +@import './rtl.less'; diff --git a/components/tree/style/rtl.less b/components/tree/style/rtl.less new file mode 100644 index 0000000000..a5c9d423fd --- /dev/null +++ b/components/tree/style/rtl.less @@ -0,0 +1,50 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; +@import '../../checkbox/style/mixin'; + +@tree-prefix-cls: ~'@{ant-prefix}-tree'; +@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode'; + +.antTreeFn(@tree-prefix-cls) { + .@{tree-prefix-cls} { + &-rtl { + direction: rtl; + } + + // ===================== 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; + border-right: none; + border-left: 1px solid @border-color-base; + } + } + } + } + } + } +}