improve the CSS codes for RTL support

riophae · Aug 19, 2019 · 5013d4e · 5013d4e
1 parent ea8019a
commit 5013d4e
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 63 deletions.
diff --git a/docs/components/MoreFeatures.vue b/docs/components/MoreFeatures.vue
@@ -1,22 +1,24 @@
 <template>
   <div>
-    <treeselect
-      name="demo"
-      :multiple="multiple"
-      :clearable="clearable"
-      :searchable="searchable"
-      :disabled="disabled"
-      :open-on-click="openOnClick"
-      :open-on-focus="openOnFocus"
-      :clear-on-select="clearOnSelect"
-      :close-on-select="closeOnSelect"
-      :always-open="alwaysOpen"
-      :append-to-body="appendToBody"
-      :options="options"
-      :limit="3"
-      :max-height="200"
-      v-model="value"
-      />
+    <div :dir="rtl ? 'rtl' : 'ltr'">
+      <treeselect
+        name="demo"
+        :multiple="multiple"
+        :clearable="clearable"
+        :searchable="searchable"
+        :disabled="disabled"
+        :open-on-click="openOnClick"
+        :open-on-focus="openOnFocus"
+        :clear-on-select="clearOnSelect"
+        :close-on-select="closeOnSelect"
+        :always-open="alwaysOpen"
+        :append-to-body="appendToBody"
+        :options="options"
+        :limit="3"
+        :max-height="200"
+        v-model="value"
+        />
+    </div>
     <pre class="result">{{ value }}</pre>
     <p>
       <label><input type="checkbox" v-model="multiple">Multi-select</label>
@@ -35,6 +37,7 @@
     <p>
       <label><input type="checkbox" v-model="alwaysOpen">Always open</label>
       <label><input type="checkbox" v-model="appendToBody">Append to body</label>
+      <label><input type="checkbox" v-model="rtl">RTL mode</label>
     </p>
   </div>
 </template>
@@ -54,6 +57,7 @@
       closeOnSelect: false,
       alwaysOpen: false,
       appendToBody: false,
+      rtl: false,
       value: [ 'a' ],
       options: generateOptions(2, 3),
     }),

diff --git a/src/style.less b/src/style.less
@@ -187,10 +187,10 @@
 
 .wide-cell() {
   .cell();
+  .horizontal-padding(@treeselect-padding);
   .text-truncate();
 
   width: @treeselect-wide-cell-width;
-  padding-left: @treeselect-padding;
 }
 
 .narrow-cell() {
@@ -331,6 +331,10 @@
   position: relative;
   text-align: left;
 
+  [dir="rtl"] & {
+    text-align: right;
+  }
+
   div,
   span {
     box-sizing: border-box;
@@ -441,6 +445,11 @@
   padding-top: @treeselect-padding;
   padding-right: @treeselect-padding;
   vertical-align: top;
+
+  [dir="rtl"] & {
+    padding-right: 0;
+    padding-left: @treeselect-padding;
+  }
 }
 
 .vue-treeselect__multi-value-item {
@@ -499,6 +508,11 @@
   border-left: 1px solid @treeselect-multi-value-divider-color;
   line-height: 0;
 
+  [dir="rtl"] & {
+    border-left: 0 none;
+    border-right: 1px solid @treeselect-multi-value-divider-color;
+  }
+
   .vue-treeselect__multi-value-item:hover & {
     color: @treeselect-multi-value-remove-color-hover;
   }
@@ -525,6 +539,11 @@
   padding-top: @treeselect-padding;
   padding-right: @treeselect-padding;
   vertical-align: top;
+
+  [dir="rtl"] & {
+    padding-right: 0;
+    padding-left: @treeselect-padding;
+  }
 }
 
 .vue-treeselect__limit-tip-text {
@@ -561,6 +580,11 @@
   .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value & {
     padding-top: @treeselect-padding;
     padding-left: 0;
+
+    [dir="rtl"] & {
+      padding-left: @treeselect-padding;
+      padding-right: 0;
+    }
   }
 
   .vue-treeselect--disabled & {
@@ -722,10 +746,20 @@
   .vue-treeselect__indent-level-@{i} {
     .vue-treeselect__option {
       padding-left: @treeselect-padding + @i * @treeselect-narrow-cell-width;
+
+      [dir="rtl"] & {
+        padding-left: @treeselect-padding;
+        padding-right: @treeselect-padding + @i * @treeselect-narrow-cell-width;
+      }
     }
 
     .vue-treeselect__tip {
       padding-left: @treeselect-padding + (@i + 1) * @treeselect-narrow-cell-width;
+
+      [dir="rtl"] & {
+        padding-left: @treeselect-padding;
+        padding-right: @treeselect-padding + (@i + 1) * @treeselect-narrow-cell-width;
+      }
     }
   }
 }
@@ -773,6 +807,10 @@
   transition: @treeselect-transition-duration transform @treeselect-arrow-transition-timing-function;
   transform: rotateZ(-90deg);
 
+  [dir="rtl"] & {
+    transform: rotateZ(90deg);
+  }
+
   .vue-treeselect__option-arrow-container:hover &,
   .vue-treeselect--branch-nodes-disabled .vue-treeselect__option:hover & {
     color: @treeselect-arrow-color-hover;
@@ -782,8 +820,16 @@
 .vue-treeselect__option-arrow--rotated {
   transform: rotateZ(0);
 
+  [dir="rtl"] & {
+    transform: rotateZ(0);
+  }
+
   &.vue-treeselect__option-arrow--prepare-enter {
     transform: rotateZ(-90deg) !important; // stylelint-disable-line declaration-no-important
+
+    [dir="rtl"] & {
+      transform: rotateZ(90deg) !important; // stylelint-disable-line declaration-no-important
+    }
   }
 }
 
@@ -920,12 +966,22 @@
   max-width: 100%;
   vertical-align: middle;
   cursor: inherit; // override user agent style
+
+  [dir="rtl"] & {
+    padding-left: 0;
+    padding-right: @treeselect-padding;
+  }
 }
 
 .vue-treeselect__count {
   margin-left: @treeselect-padding;
   font-weight: 400;
   opacity: 0.6;
+
+  [dir="rtl"] & {
+    margin-left: 0;
+    margin-right: @treeselect-padding;
+  }
 }
 
 .vue-treeselect__tip {
@@ -949,6 +1005,11 @@
     font-weight: 600;
     text-decoration: none;
     color: @treeselect-retry-text-color;
+
+    [dir="rtl"] & {
+      margin-left: 0;
+      margin-right: @treeselect-padding;
+    }
   }
 }
 
@@ -957,6 +1018,11 @@
 
   .vue-treeselect--single & {
     padding-left: @treeselect-padding;
+
+    [dir="rtl"] & {
+      padding-left: 0;
+      padding-right: @treeselect-padding;
+    }
   }
 }
 
@@ -1074,48 +1140,3 @@
   overflow: visible;
   box-sizing: border-box;
 }
-
-[dir="rtl"] {
-  .vue-treeselect {
-    text-align: unset;
-
-    .vue-treeselect__option-arrow {
-      transform: rotateZ(90deg);
-    }
-    .vue-treeselect__option-arrow--rotated {
-      transform: rotateZ(0);
-    }
-
-    .vue-treeselect__label {
-      padding-left: unset;
-      padding-right: 5px;
-    }
-
-    .vue-treeselect__multi-value-item-container {
-      padding-right: unset;
-      padding-left: 5px;
-    }
-
-    .vue-treeselect__value-remove {
-      border-left: unset;
-      border-right: 1px solid #fff;
-    }
-
-    .generate-level-indentations(@i) when (@i >= 0) {
-      .generate-level-indentations((@i - 1));
-
-      .vue-treeselect__indent-level-@{i} {
-        .vue-treeselect__option {
-          padding-left: unset;
-          padding-right: @treeselect-padding + @i * @treeselect-narrow-cell-width;
-        }
-
-        .vue-treeselect__tip {
-          padding-left: unset;
-          padding-right: @treeselect-padding + (@i + 1) * @treeselect-narrow-cell-width;
-        }
-      }
-    }
-    .generate-level-indentations(@treeselect-max-level);
-  }
-}