style: fix rtl.less place and name (#22384)

5 years ago · 7f4c7b5978
54 changed files with 457 additions and 445 deletions
--- 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';
--- 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';
--- 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';
--- 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) {
--- a/components/button/style/mixin.rtl.less
+++ b/components/button/style/mixin.rtl.less
@ -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;
-      }
-    }
-  }
-}
--- 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;
+      }
+    }
+  }
+}
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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
 // ------------------------
--- a/components/grid/style/mixin.rtl.less
+++ b/components/grid/style/mixin.rtl.less
@ -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;
-    }
-  }
-}
--- 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;
+    }
+  }
+}
--- 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';
--- a/components/list/style/responsive.less
+++ b/components/list/style/responsive.less
@ -38,5 +38,3 @@
    }
  }
 }
-
-@import './responsive.rtl.less';
--- a/components/list/style/responsive.rtl.less
+++ b/components/list/style/responsive.rtl.less
@ -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;
-        }
-      }
-    }
-  }
-}
--- 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;
+        }
+      }
+    }
+  }
+}
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- a/components/progress/style/index.less
+++ b/components/progress/style/index.less
@ -195,3 +195,5 @@
    opacity: 0;
  }
 }
+
+@import './rtl.less';
--- 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';
--- 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';
--- a/components/result/style/index.less
+++ b/components/result/style/index.less
@ -70,3 +70,5 @@
    background-color: @background-color-light;
  }
 }
+
+@import './rtl.less';
--- 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';
--- 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';
--- 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
--- a/components/select/style/multiple.rtl.less
+++ b/components/select/style/multiple.rtl.less
@ -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;
-      }
-    }
-  }
-}
--- 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;
+        }
+      }
+    }
+  }
+}
--- 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);

--- a/components/select/style/single.rtl.less
+++ b/components/select/style/single.rtl.less
@ -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;
-        }
-      }
-    }
-  }
-}
--- 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';
--- 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;
--- a/components/steps/style/custom-icon.rtl.less
+++ b/components/steps/style/custom-icon.rtl.less
@ -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;
-      }
-    }
-  }
-}
--- 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';
--- 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;

--- a/components/steps/style/nav.rtl.less
+++ b/components/steps/style/nav.rtl.less
@ -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);
-      }
-    }
-  }
-}
--- 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;
+      }
+    }
+  }
+}
--- 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 {
--- a/components/steps/style/small.rtl.less
+++ b/components/steps/style/small.rtl.less
@ -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;
-    }
-  }
-}
--- 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 {
--- a/components/steps/style/vertical.rtl.less
+++ b/components/steps/style/vertical.rtl.less
@ -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;
-      }
-    }
-  }
-}
--- 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';
--- 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';
--- 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';
--- 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';