style: add rtl.less of Tree\Tooltip\Timeline

smwhr · Mar 18, 2020 · ef86892 · ef86892
1 parent 09a2567
commit ef86892
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 92 deletions.
diff --git 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,23 +76,13 @@
       border: 0;
       border-radius: 0;
       transform: translate(-50%, -50%);
-
-      .@{timeline-prefix-cls}-rtl & {
-        right: 5px;
-        left: auto;
-        transform: translate(50%, -50%);
-      }
     }
 
     &-content {
       position: relative;
       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
@@ -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
@@ -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
@@ -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
@@ -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';