@kdcloudjs/kdesign 1.8.29 → 1.8.31

package/dist/kdesign-complete.less

@@ -391,6 +391,20 @@
   }
 }
 
+.@{anchor-prefix-cls}-rtl {
+  direction: rtl;
+  .@{anchor-prefix-cls} {
+    padding-right: @anchor-link-left;
+    padding-left: 0;
+    &-line {
+      right: @anchor-link-left;
+      left: auto;
+    }
+    &-link {
+      text-align: right;
+    }
+  }
+}
 
 
 .disabled() {
@@ -1313,7 +1327,7 @@
         }
       }
     }
-    &>.@{btn-prefix-cls} {
+    & > .@{btn-prefix-cls} {
       &:first-child {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
@@ -1368,6 +1382,47 @@
     transition: all calc(@transition-duration - 0.1s) @ease;
   }
 }
+.@{btn-prefix-cls}-rtl {
+  direction: rtl;
+  .@{btn-prefix-cls}-iconWrapper-left {
+    float: right;
+    margin-left: 4px;
+  }
+  .@{btn-prefix-cls}-iconWrapper-right {
+    float: left;
+    margin-right: 4px;
+  }
+  .@{btn-prefix-cls}-group-basic {
+    &-icon {
+      margin-right: 5px;
+      margin-left: 0;
+    }
+  }
+  .btn-space {
+    margin-left: 0;
+  }
+  &-similar {
+    .@{btn-prefix-cls}-group-trigger {
+      .@{btn-prefix-cls} {
+        border-top-left-radius: @btn-g-radius-border;
+        border-bottom-left-radius: @btn-g-radius-border;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        margin-right: -1px;
+      }
+    }
+    & > .@{btn-prefix-cls} {
+      &:first-child {
+        border-top-right-radius: @btn-g-radius-border;
+        border-bottom-right-radius: @btn-g-radius-border;
+      }
+    }
+  }
+}
+
+.@{btn-prefix-cls}-group-rtl {
+  direction: rtl;
+}
 
 
 
@@ -2349,7 +2404,6 @@
     }
   }
 }
-
 .@{checkbox-prefix-cls}-square {
   border-radius: 2px;
   border: 1px solid @checkbox-border-color;
@@ -2386,8 +2440,8 @@
     border-bottom-color: @checkbox-checked-border-color;
   }
   &-triangle {
-    animation: kdZoomBounceLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
-    transition: all @checkbox-transition-duration cubic-bezier(0.4,0,0.6,1);
+    animation: kdZoomBounceLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+    transition: all @checkbox-transition-duration cubic-bezier(0.4, 0, 0.6, 1);
     visibility: hidden;
     opacity: 0;
   }
@@ -2405,7 +2459,7 @@
   &-inner-icon {
     font-size: inherit;
     line-height: 100%;
-    animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+    animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   }
   &-triangle-disabled {
     border-bottom-color: @checkbox-disabled-text-color;
@@ -2421,14 +2475,14 @@
   &-checked {
     border-color: @checkbox-checked-border-color;
     &:not(&-disabled)::after {
-      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0,.4,.4,1) forwards,
-        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
+      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards,
+        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
     }
     .@{checkbox-prefix-cls}-square-triangle-checked:not(.@{checkbox-prefix-cls}-square-disabled) {
-      animation: kdZoomBounceEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4,0,0.6,1);
+      animation: kdZoomBounceEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
     }
     .@{checkbox-prefix-cls}-square-inner-icon:not(.@{checkbox-prefix-cls}-square-disabled) {
-      animation: kdZoomEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+      animation: kdZoomEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
     }
   }
   &-checked-disabled {
@@ -2509,14 +2563,14 @@
   &-checked {
     background-color: @checkbox-checked-border-color;
     border-color: @checkbox-checked-border-color;
-    transition: background-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1),
-      border-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+    transition: background-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1),
+      border-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
     &:not(&-disabled)::after {
-      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0,.4,.4,1) forwards,
-        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
+      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards,
+        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
     }
     .@{checkbox-prefix-cls}-default-inner:not(&-disabled .@{checkbox-prefix-cls}-default-inner) {
-      animation: kdZoomBounceDefaultEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4,0,0.6,1) !important;
+      animation: kdZoomBounceDefaultEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
     }
   }
   &-inner {
@@ -2542,9 +2596,9 @@
     height: @checkbox-default-indeterminate-square;
     background-color: @checkbox-checked-border-color;
     border: 0;
-    transform: translate(-50%,-50%) scale(1);
+    transform: translate(-50%, -50%) scale(1);
     opacity: 1;
-    content: " ";
+    content: ' ';
   }
   &.checked {
     .@{checkbox-prefix-cls}-children {
@@ -2558,6 +2612,48 @@
   }
 }
 
+.@{checkbox-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{checkbox-prefix-cls}-default {
+    .@{checkbox-prefix-cls}-default-margin {
+      margin-right: 0;
+      margin-left: @checkbox-default-input-margin-right;
+    }
+  }
+}
+.@{checkbox-prefix-cls}-group-rtl {
+  direction: rtl;
+  &.@{checkbox-prefix-cls}-group {
+    text-align: right;
+    > .@{checkbox-prefix-cls}-rtl:not(:last-child) {
+      margin-left: @checkbox-group-margin-right;
+      margin-right: 0;
+    }
+    .@{checkbox-prefix-cls} {
+      margin-left: @checkbox-group-margin-right;
+      margin-right: 0;
+    }
+  }
+  .@{checkbox-prefix-cls}-square {
+    &-triangle,
+    &-triangle-checked {
+      position: absolute;
+      content: '';
+      height: 0;
+      width: 0;
+      right: auto;
+      left: 0;
+      bottom: 0;
+      border-style: solid;
+      border-width: 0 @checkbox-square-triangle-width @checkbox-square-triangle-height 0;
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-left-color: transparent;
+      border-bottom-color: @checkbox-checked-border-color;
+    }
+  }
+}
+
 
 
 @checkbox-prefix: '--@{kd-prefix}-c-checkbox';
@@ -2977,6 +3073,72 @@
   }
 }
 
+.@{city-picker-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{city-picker-prefix-cls} {
+    .@{city-picker-prefix-cls}-description {
+      text-align: right;
+    }
+    .@{city-picker-prefix-cls}-selector {
+      .@{city-picker-prefix-cls}-wrapper {
+        padding-right: 0;
+        padding-left: 24px;
+      }
+    }
+    .@{city-picker-prefix-cls}-placeholder {
+      position: absolute;
+      left: 24px;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    .@{city-picker-prefix-cls}-bordered {
+      padding-right: @city-picker-bordered !important;
+      padding-left: auto !important;
+      .@{city-picker-prefix-cls}-suffix {
+        padding-right: 8px;
+        padding-left: auto;
+      }
+
+      .@{city-picker-prefix-cls}-placeholder {
+        padding-right: @city-picker-bordered;
+      }
+    }
+
+    .@{city-picker-prefix-cls}-suffix {
+      left: 0;
+      right: auto;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+      display: flex;
+      margin-right: 8px;
+    }
+
+    
+
+    .@{city-picker-prefix-cls}-disabled {
+      &.@{city-picker-prefix-cls}-bordered {
+        padding-right: auto;
+        padding-left: @city-picker-bordered;
+      }
+    }
+
+    .@{city-picker-prefix-cls}-content {
+      &-item {
+        position: absolute;
+        right: 0;
+        left: auto;
+      }
+
+      &-info {
+        text-align: left;
+        .over();
+      }
+    }
+  }
+}
 
 
 .item() {
@@ -3306,6 +3468,32 @@
   }
 }
 
+.@{collapse-prefix-cls}-rtl {
+  direction: rtl;
+  .@{collapse-prefix-cls}-panel {
+    &-top {
+      padding: 8px 28px 8px 50px;
+    }
+    &-icon {
+      margin-left: @collapse-icon-margin-right;
+      margin-right: 0;
+    }
+    &-animation-expand {
+      transform: rotate(180deg);
+    }
+    &-children > div {
+      text-align: right;
+    }
+    &-children-hide > div {
+      text-align: right;
+    }
+    &-middle {
+      margin-right: 22px;
+      margin-left: 0;
+    }
+  }
+}
+
 
 
 
@@ -3435,13 +3623,13 @@
     box-sizing: border-box;
     width: @color-picker-panel-sizing-width;
     padding: 4px 12px 16px;
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
     border-radius: 2px;
     transform-origin: top left;
     z-index: @color-picker-panel-z-index;
 
-    &>div {
+    & > div {
       margin-top: 12px;
     }
 
@@ -3511,15 +3699,15 @@
       width: 278px !important;
       box-shadow: none !important;
 
-      &>div:last-child {
+      & > div:last-child {
         padding: 9px 0 4px !important;
 
         .flexbox-fix:first-child {
           display: flex;
           flex-direction: row-reverse;
 
-          &>div:first-child {
-            &>div {
+          & > div:first-child {
+            & > div {
               width: 28px !important;
               height: 28px !important;
               border-radius: 50% !important;
@@ -3528,44 +3716,42 @@
             }
           }
 
-          &>div:last-child {
-
+          & > div:last-child {
             .hue-horizontal {
               width: 240px !important;
               height: 12px !important;
               border-radius: 6px !important;
               padding: unset !important;
 
-              &>div>div {
+              & > div > div {
                 margin-top: 1px;
               }
             }
 
-            &>div:last-child {
-              &>div {
+            & > div:last-child {
+              & > div {
                 width: 240px !important;
                 height: 12px !important;
                 margin: unset;
 
-                &>div:first-child {
+                & > div:first-child {
                   border-radius: 6px !important;
                 }
 
-                &>div:nth-child(2) {
+                & > div:nth-child(2) {
                   border-radius: 6px !important;
                 }
 
-                &>div:last-child {
+                & > div:last-child {
                   margin: unset !important;
 
-                  &>div>div {
+                  & > div > div {
                     margin-top: 1px;
                   }
                 }
               }
             }
           }
-
         }
 
         .flexbox-fix:last-child {
@@ -3574,20 +3760,20 @@
       }
 
       &-no-box {
-        &>div:first-child {
+        & > div:first-child {
           display: none;
         }
       }
 
       &-no-hue {
-        &>div:last-child {
+        & > div:last-child {
           .flexbox-fix:first-child {
-            &>div:last-child {
-              &>div:first-child {
+            & > div:last-child {
+              & > div:first-child {
                 display: none;
               }
 
-              &>div:last-child {
+              & > div:last-child {
                 margin-top: 8px;
               }
             }
@@ -3596,14 +3782,14 @@
       }
 
       &-no-opacity {
-        &>div:last-child {
+        & > div:last-child {
           .flexbox-fix:first-child {
-            &>div:last-child {
-              &>div:last-child {
+            & > div:last-child {
+              & > div:last-child {
                 display: none;
               }
 
-              &>div:first-child {
+              & > div:first-child {
                 margin-top: 8px;
               }
             }
@@ -3617,7 +3803,7 @@
     }
 
     .@{color-picker-prefix-cls}-panel-chrome-no-hue.@{color-picker-prefix-cls}-panel-chrome-no-opacity {
-      &>div:last-child {
+      & > div:last-child {
         display: none;
       }
     }
@@ -3671,10 +3857,10 @@
             position: absolute;
             width: 64px !important;
             min-width: unset !important;
-            background: #FFFFFF;
+            background: #ffffff;
             right: 0;
             left: unset !important;
-            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
+            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
             border-radius: 2px;
           }
 
@@ -3778,7 +3964,7 @@
               margin-right: 0;
             }
 
-            &:nth-child(-n+12) {
+            &:nth-child(-n + 12) {
               margin-top: 0;
             }
           }
@@ -3847,7 +4033,7 @@
               margin-right: 0;
             }
 
-            &:nth-child(-n+12) {
+            &:nth-child(-n + 12) {
               margin-top: 0;
             }
           }
@@ -3891,6 +4077,153 @@
   }
 }
 
+.@{color-picker-prefix-cls}-rtl {
+  direction: rtl;
+  .@{color-picker-prefix-cls}-input {
+    .@{kd-prefix}-input-prefix {
+      margin-right: auto;
+      margin-left: 3px;
+    }
+  }
+  &.@{color-picker-prefix-cls}-pop {
+    .@{color-picker-prefix-cls}-panel {
+      transform-origin: top left;
+      &-clear {
+        &-box {
+          margin-left: 4px;
+        }
+      }
+      &-switch {
+        span {
+          vertical-align: middle;
+          margin-right: 9px;
+        }
+      }
+
+      &-container {
+        display: flex;
+        flex-wrap: nowrap;
+
+        &-select {
+          margin-left: 8px;
+          margin-right: 0;
+          .@{kd-prefix}-select-bordered {
+            border-radius: 2px;
+            width: @color-picker-panel-select-sizing-width;
+            height: @color-picker-panel-select-sizing-height;
+            min-height: 28px;
+            padding: 0 28px 0 0;
+          }
+
+          .active-option {
+            background-color: @color-picker-panel-option-color-background;
+          }
+        }
+
+        &-input {
+          height: 28px;
+          flex: 1 1 auto;
+          padding: 0 8px;
+        }
+
+        &-input-group {
+          display: flex;
+          align-items: center;
+
+          &-item {
+            height: 28px;
+            flex: 1;
+
+            &.active {
+              z-index: 2;
+            }
+
+            &:first-child {
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
+              z-index: 1;
+            }
+
+            &:nth-child(2) {
+              margin-right: -1px;
+              margin-left: -1px;
+              border-radius: 0;
+
+              &:hover {
+                z-index: 1;
+              }
+            }
+
+            &:last-child {
+              border-top-left-radius: 0;
+              border-bottom-left-radius: 0;
+            }
+          }
+        }
+
+        &-transparent {
+          flex: 0 0 54px;
+          height: 28px;
+          margin-right: 8px;
+          margin-left: 0;
+          padding: 0;
+          text-align: center;
+          font-size: @color-picker-panel-alpha-font-size;
+        }
+      }
+
+      &-historical-color-box {
+        &-title {
+          font-size: 12px;
+          color: #666666;
+          line-height: 18px;
+          font-weight: 400;
+          margin-bottom: 8px;
+        }
+
+        &-container {
+          display: grid;
+          grid-template-columns: repeat(12, 1fr);
+          grid-column-gap: 8px;
+          grid-row-gap: 8px;
+
+          &-ie11 {
+            display: flex;
+            flex-wrap: wrap;
+
+            li {
+              margin-right: 8px;
+              margin-top: 8px;
+
+              &:nth-child(12n) {
+                margin-right: 0;
+              }
+
+              &:nth-child(-n + 12) {
+                margin-top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .@{color-picker-prefix-cls}-panel {
+    &-chrome {
+      & > div:last-child {
+        .flexbox-fix:first-child {
+          & > div:first-child {
+            & > div {
+              margin-right: 4px !important;
+              margin-left: 0 !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 
 // code component mixin here
 .test() {
@@ -5295,6 +5628,10 @@
       }
     }
   }
+
+  .@{dropdown-prefix-cls}-menu-rtl {
+    direction: rtl;
+  }
 }
 
 
@@ -6302,7 +6639,7 @@
     transition: all 0.2s ease-out;
     background-color: @image-action-background-color;
 
-    >* {
+    > * {
       color: @image-icon-color;
       cursor: pointer;
       display: inline-block;
@@ -6325,14 +6662,14 @@
   opacity: 0;
   transform: scale(0.15);
   visibility: hidden;
-  transition: all 0.2s cubic-bezier(0.4,0,1,0.6);
+  transition: all 0.2s cubic-bezier(0.4, 0, 1, 0.6);
   -webkit-overflow-scrolling: touch;
 
   &.show {
     opacity: 1;
     transform: scale(1);
     visibility: visible;
-    transition: all 0.2s cubic-bezier(0,.4,.4,1);
+    transition: all 0.2s cubic-bezier(0, 0.4, 0.4, 1);
   }
 
   &-mask {
@@ -6466,7 +6803,7 @@
       position: absolute;
       right: 40px;
 
-      >* {
+      > * {
         display: inline-block;
         margin-left: 20px;
         cursor: pointer;
@@ -6480,6 +6817,22 @@
   }
 }
 
+.@{image-prefix-cls}-rtl {
+  direction: rtl;
+  .@{image-preview-prefix-cls}-close {
+    left: 18px;
+    right: auto;
+  }
+  .@{image-preview-prefix-cls}-action {
+    i {
+      &:not(:first-child) {
+        margin-right: 20px;
+        margin-left: 0;
+      }
+    }
+  }
+}
+
 
 
 @image-prefix: '--@{kd-prefix}-c-image';
@@ -7151,6 +7504,61 @@ textarea {
   }
 }
 
+.@{input-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{input-prefix-cls}-group {
+    .@{input-prefix-cls}-group-addon {
+      &:first-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: @input-border-radius-inner;
+        border-bottom-right-radius: @input-border-radius-inner;
+        border-left: none;
+        border-right: 1px solid @input-border-color-disabled-inner;
+      }
+      &:last-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: @input-border-radius-inner;
+        border-bottom-left-radius: @input-border-radius-inner;
+        border-right: none;
+        border-left: 1px solid @input-border-color-disabled-inner;
+      }
+    }
+  }
+  &.@{input-prefix-cls}-wrapper {
+    .@{input-prefix-cls}-prefix {
+      margin-right: 0;
+      margin-left: calc(@input-small-padding-vertical-inner * 2);
+    }
+    .@{input-prefix-cls}-suffix {
+      margin-left: 0;
+      margin-right: calc(@input-small-padding-vertical-inner * 2);
+    }
+    .@{input-prefix-cls}-clear-icon-rightSpace {
+      margin-left: 4px;
+      margin-right: 0;
+    }
+  }
+  .@{input-prefix-cls}-textarea-mark {
+    right: auto;
+    left: 2px;
+    &-inner {
+      top: auto;
+      left: 8px;
+      right: auto;
+    }
+  }
+  .@{input-prefix-cls}-textarea-clear-icon {
+    left: 8px;
+    right: auto;
+  }
+  &.@{input-prefix-cls}-allowClear-spacing {
+    padding-right: @input-small-padding-horizontal-inner;
+    padding-left: 20px;
+  }
+}
+
 
 
 @input-prefix-cls: ~'@{kd-prefix}-input';
@@ -7636,6 +8044,19 @@ textarea {
   }
 }
 
+.@{link-prefix-cls}-rtl {
+  direction: rtl;
+  .@{link-prefix-cls} {
+    &-prefix {
+      margin-right: 0;
+      margin-left: @link-prefix-horizontal;
+    }
+    &-suffix {
+      margin-left: 0;
+      margin-right: @link-suffix-horizontal;
+    }
+  }
+} 
 
 
 .link-size(@font-size, @height,) {
@@ -7794,13 +8215,13 @@ textarea {
 
 // dark
 .@{menu-dark-prefix-cls} {
-
   .@{submenu-prefix-cls}-sub {
     color: @menu-sub-color;
     background: @menu-sub-inline-color-background;
   }
 
-  .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
+  .@{submenu-prefix-cls}-sub-second,
+  .@{submenu-prefix-cls}-sub-third {
     background: @menu-sub-color-background;
   }
 
@@ -7810,29 +8231,32 @@ textarea {
     }
 
     &-active {
-      .menu-dark-active()
+      .menu-dark-active();
     }
   }
 
-  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
-    .menu-dark-active()
+  .@{menuitem-prefix-cls}-active,
+  .@{submenu-prefix-cls}-active {
+    .menu-dark-active();
   }
 
-  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
-    .menu-dark-hover()
+  .@{menuitem-prefix-cls}-hover,
+  .@{submenu-prefix-cls}-hover {
+    .menu-dark-hover();
   }
 }
 
 .@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
-  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+  .@{menuitem-prefix-cls}-active,
+  .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .menu-dark-active-inline-title()
+      .menu-dark-active-inline-title();
     }
   }
 
   .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active) {
     > .@{submenu-prefix-cls}-title:hover {
-      .menu-dark-active-inline-title()
+      .menu-dark-active-inline-title();
     }
   }
 }
@@ -7843,9 +8267,10 @@ textarea {
 }
 
 .@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
-  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+  .@{menuitem-prefix-cls}-active,
+  .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .menu-light-active-inline-title()
+      .menu-light-active-inline-title();
     }
   }
 }
@@ -7857,7 +8282,7 @@ textarea {
   }
 
   &.hidden {
-    .menu-hidden()
+    .menu-hidden();
   }
 
   .@{submenu-prefix-cls} {
@@ -7867,18 +8292,18 @@ textarea {
       color: @menu-sub-color;
       background: @menu-sub-inline-color-background;
       box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+        0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
       .@{menuitem-prefix-cls} {
         &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
         &-active {
-          .menu-dark-hover()
+          .menu-dark-hover();
         }
       }
 
       &-second,
       &-third {
-        animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+        animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
         opacity: 1;
         visibility: visible;
         transition: opacity, visibility;
@@ -7887,7 +8312,7 @@ textarea {
       }
 
       &-hide {
-        .menu-hidden()
+        .menu-hidden();
       }
     }
   }
@@ -7897,11 +8322,18 @@ textarea {
   }
 }
 
-
-
-
-
-
+.@{menu-prefix-cls}-rtl {
+  direction: rtl;
+  .@{submenu-prefix-cls} {
+    direction: rtl;
+    .@{submenu-prefix-cls}-title {
+      .@{submenu-prefix-cls}-arrow {
+        margin-left: 0;
+        margin-right: auto;
+      }
+    }
+  }
+}
 
 
 
@@ -8487,6 +8919,20 @@ textarea {
   }
 }
 
+.@{modal-prefix-cls}-rtl {
+  direction: rtl;
+  .@{modal-prefix-cls}-container-box {
+    .@{modal-prefix-cls}-footer {
+      .@{modal-prefix-cls}-cancel-node {
+        .@{modal-prefix-cls}-margin-btn {
+          margin-left: @modal-footer-button-spacing;
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+
 
 
 .modal-title-icon-type(@squareWidth) {
@@ -9350,6 +9796,105 @@ textarea {
   }
 }
 
+.@{pagination-prefix-cls}-rtl {
+  direction: rtl;
+  .@{pagination-prefix-cls}-total {
+    margin-left: 12px;
+    margin-right: 0;
+  }
+  .@{pagination-prefix-cls}-current {
+    margin-right: 0;
+    margin-left: 12px;
+  }
+  .@{pagination-action-prefix-cls} {
+    .@{pagination-action-prefix-cls}-item {
+      &.bordered {
+        margin-left: calc(2 * @pagination-button-spacing);
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  .@{pagination-selector-prefix-cls} {
+    margin-right: 20px;
+    margin-left: 0;
+    .@{pagination-selector-prefix-cls}-size {
+      i {
+        margin-left: 0;
+        margin-right: 4px;
+      }
+    }
+  }
+  &.simple {
+    .@{pagination-prefix-cls}-action {
+      &-item {
+        .@{pagination-prefix-cls}-current {
+          margin-right: 0;
+          margin-left: 2px;
+        }
+        .@{pagination-prefix-cls}-total {
+          margin-left: 0;
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+  &.less {
+    .@{pagination-pages-prefix-cls} {
+      &-item {
+        margin-left: @pagination-button-spacing;
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+  &.nicety {
+    .@{pagination-pages-prefix-cls} {
+      &-item {
+        margin-left: @pagination-button-spacing;
+        margin-right: 0;
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .@{pagination-jumper-prefix-cls} {
+      margin-right: @pagination-button-spacing;
+      margin-left: 0;
+      .@{pagination-jumper-prefix-cls}-button {
+        margin-right: @pagination-button-spacing;
+        margin-left: 0;
+      }
+    }
+    .@{pagination-options-prefix-cls} {
+      margin-right: 22px;
+      margin-left: 0;
+      .@{pagination-options-prefix-cls}-size {
+        margin-right: 0;
+        margin-left: 8px;
+        padding: 0 4px 0 24px;
+        i {
+          left: 5px;
+          right: auto;
+        }
+      }
+      .@{kd-prefix}-dropdown {
+        &-menu {
+          &-item {
+            & > span {
+              text-align: right;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 
 
 @pagination-custom-prefix: ~'--@{kd-prefix}-c-pagination';
@@ -9878,11 +10423,11 @@ textarea {
   list-style: none;
   overflow: hidden;
 
-  &-expired{
+  &-expired {
     margin-bottom: @qrcode-spacing-margin-vertical;
   }
 
-  &-mask{
+  &-mask {
     position: absolute;
     z-index: 10;
     display: flex;
@@ -9895,11 +10440,15 @@ textarea {
     background: @qrcode-color-background;
     text-align: center;
   }
-  &-borderless{
+  &-borderless {
     border: none;
   }
 }
 
+.@{qrcode-prefix-cls}-rtl {
+  direction: rtl;
+}
+
 
 
 .qrcode() {
@@ -10300,6 +10849,51 @@ textarea {
   }
 }
 
+.@{radio-prefix-cls}-rtl {
+  direction: rtl;
+}
+
+.@{radio-button-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{radio-button-prefix-cls} {
+    border: @radio-border-width solid @radio-color-border;
+    border-right: none;
+    &.@{radio-button-prefix-cls}:first-child {
+      border-radius: 0 @radius-size @radius-size 0;
+      border-right: @radio-border-width solid @radio-color-border;
+      &::before {
+        content: none;
+      }
+    }
+
+    &.@{radio-button-prefix-cls}:last-child {
+    border-radius: @radius-size 0 0 @radius-size;
+  }
+  }
+  
+} 
+
+.@{radio-square-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{radio-square-prefix-cls} {
+    margin-left: @radio-margin-right;
+    margin-right: 0;
+    &.@{radio-square-prefix-cls}::after {
+      left: calc(-1 * (@radio-square-height - 10px) / 2);
+      right: auto;
+  }
+    &.@{radio-square-prefix-cls}-checked {
+      &::after {
+        left: calc(-1 * (@radio-square-height - 10px) / 2);
+        right: auto;
+      }
+    }
+  }
+
+ }
+.@{radio-group-prefix-cls}-rtl {
+  direction: rtl;
+}
 
 
 
@@ -11497,6 +12091,93 @@ textarea {
   }
 }
 
+.@{select-prefix-cls}-rtl {
+  direction: rtl;
+  .@{select-prefix-cls}-selector {
+    .@{select-prefix-cls}-wrapper {
+      padding: 1px 0 1px 28px;
+      .@{select-prefix-cls}-suffix {
+        position: absolute;
+        right: auto;
+        left: 0;
+        margin-left: 0;
+        margin-right: 8px;
+      }
+      .@{select-prefix-cls}-placeholder {
+        right: 0;
+        left: 28px;
+      }
+      &.@{select-prefix-cls}-single {
+        .@{select-prefix-cls}-selection-search {
+          padding-left: auto;
+          position: absolute;
+          left: 28px;
+          right: 0;
+          height: 100%;
+          top: 0;
+          bottom: 0;
+        }
+      }
+    }
+    .@{select-prefix-cls}-multiple {
+      .@{select-prefix-cls}-selection-tag {
+        .@{kd-prefix}-tag {
+          margin: 2px 0 2px 8px;
+          &-closeWrapper {
+            margin-right: 4px;
+            margin-left: 0;
+          }
+        }
+      }
+    }
+    .@{select-prefix-cls}-bordered {
+      padding-left: auto !important;
+      padding-right: @select-bordered !important;
+      .@{select-prefix-cls}-suffix {
+        padding-left: 8px;
+      }
+
+      &.@{select-prefix-cls}-single {
+        .@{select-prefix-cls}-selection-search {
+          padding-right: @select-bordered;
+        }
+      }
+
+      .@{select-prefix-cls}-placeholder {
+        padding-right: @select-bordered;
+      }
+    }
+  }
+  .@{select-prefix-cls}-dropdown {
+    .@{select-prefix-cls}-multiple-footer {
+      &-hadSelected {
+        padding-right: 12px;
+        padding-left: 0;
+      }
+      .@{kd-prefix}-checkbox {
+        &-default-margin {
+          margin-right: 0;
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}
+
+.@{select-prefix-cls}-item-rtl {
+  direction: rtl;
+  &.@{select-prefix-cls}-item {
+    .@{select-prefix-cls}-item-option-content {
+      .@{kd-prefix}-checkbox {
+        &-default-margin {
+          margin-right: 0;
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}
+
 
 
 .item() {
@@ -12648,7 +13329,6 @@ textarea {
           background-color: @steps-color-white;
         }
       }
-
     }
 
     &-clickable&-wait {
@@ -12678,7 +13358,7 @@ textarea {
 
       &:hover {
         .@{steps-prefix-cls}-item-title {
-          color: @steps-color-completed
+          color: @steps-color-completed;
         }
       }
     }
@@ -12703,7 +13383,8 @@ textarea {
         position: absolute;
         left: 50%;
         top: calc(50% - @steps-line-sizing-height / 2);
-        transition: width @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96)
+        transition: width @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96),
+          background-color @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96);
       }
 
       &:last-child {
@@ -12762,7 +13443,8 @@ textarea {
         border-color: @steps-color-hover;
       }
 
-      .@{steps-prefix-cls}-item-title, .@{steps-prefix-cls}-item-description {
+      .@{steps-prefix-cls}-item-title,
+      .@{steps-prefix-cls}-item-description {
         color: @steps-color-hover;
       }
     }
@@ -12791,7 +13473,6 @@ textarea {
       }
     }
 
-
     &-error {
       .@{steps-prefix-cls}-icon {
         color: @steps-color-error;
@@ -12880,6 +13561,60 @@ textarea {
   }
 }
 
+.@{steps-prefix-cls}-rtl {
+  direction: rtl;
+  .@{steps-prefix-cls}-item:first-child {
+    .@{steps-prefix-cls}-item-iconContainer {
+      &::before {
+        display: none;
+      }
+    }
+  }
+  &.@{steps-prefix-cls}-horizontal {
+    &:first-child {
+      padding-right: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+      padding-left: 0;
+    }
+    .@{steps-prefix-cls}-item {
+      .@{steps-prefix-cls}-item-container {
+        .@{steps-prefix-cls}-item-iconContainer {
+          &::after {
+            display: none;
+          }
+          &::before {
+            content: '';
+            width: ~'calc(100% + 35px)';
+            height: @steps-line-sizing-height;
+            border-bottom: 1px dashed @steps-color-wait;
+            border-left: 1px dashed @steps-color-wait;
+            position: absolute;
+            left: 50%;
+            top: calc(50% - @steps-line-sizing-height / 2);
+            transition: width @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96),
+              background-color @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96);
+            
+          }
+        }
+      }
+    }
+  }
+  &.@{steps-prefix-cls}-vertical {
+    .@{steps-prefix-cls}-item {
+      &-iconContainer {
+        margin-left: 4px;
+        margin-right: 0;
+      }
+      &-content {
+        text-align: right;
+      }
+    }
+  }
+}
+
 
 
 @steps-prefix: '--@{kd-prefix}-c-steps';
@@ -14868,7 +15603,6 @@ template {
 @switch-prefix-cls: ~'@{kd-prefix}-switch';
 @icon-prefix-cls: ~'@{kd-prefix}icon';
 
-
 .@{switch-prefix-cls} {
   .switch;
 
@@ -14889,7 +15623,7 @@ template {
 
     .@{icon-prefix-cls}-loadding-circle {
       animation: loadingcircle 1s infinite;
-      animation-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);
+      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
       font-size: @switch-small-font-size;
       line-height: 1;
       vertical-align: baseline;
@@ -14945,6 +15679,14 @@ template {
   }
 }
 
+.@{switch-prefix-cls}-rtl {
+  direction: rtl;
+  transform: rotateY(180deg);
+  .@{switch-prefix-cls}-inner {
+    transform: rotateY(180deg);
+  }
+}
+
 
 .switch() {
   padding: 0;
@@ -15637,6 +16379,13 @@ template {
   }
 }
 
+.@{tag-prefix-cls}-rtl {
+  direction: rtl;
+  .@{tag-prefix-cls}-closeWrapper {
+    margin-right: 4px;
+    margin-left: 0;
+  }
+}
 
 
 // code component mixin here
@@ -16487,6 +17236,33 @@ template {
     align-items: center;
   }
 }
+.@{tree-prefix-cls}-rtl {
+  direction: rtl;
+  .@{tree-prefix-cls}-root {
+    .@{tree-node-prefix-cls}-item {
+      .@{tree-node-prefix-cls}-root {
+        .@{tree-node-prefix-cls}-indent {
+          margin-right: 0;
+          margin-left: 6px;
+        }
+        .@{tree-node-prefix-cls}-title-wrap {
+          padding-right: 4px;
+          padding-left: 0;
+          .@{kd-prefix}-checkbox {
+            &-default-margin {
+              margin-right: 0;
+              margin-left: 4px;
+            }
+          }
+        }
+        .@{tree-node-prefix-cls}-animation-expand {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+  }
+}
+
 
 
 
@@ -17351,7 +18127,7 @@ template {
     opacity: 0;
     overflow: hidden;
 
-    input[type="file"] {
+    input[type='file'] {
       position: absolute;
       top: -20%;
       left: 0;
@@ -17399,7 +18175,8 @@ template {
         font-size: @upload-font-size;
       }
 
-      &-name,&-icon {
+      &-name,
+      &-icon {
         cursor: pointer;
       }
 
@@ -17545,6 +18322,43 @@ template {
   }
 }
 
+.@{upload-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{upload-prefix-cls} {
+    .@{upload-prefix-text-list-cls} {
+      &-item {
+        &-name {
+          margin: 0 @upload-text-list-item-name-padding-left 0 @upload-text-list-item-name-padding-right;
+        }
+        &-action {
+          left: 0;
+          right: auto;
+          transform: translateX(-5px);
+          a {
+            &:not(:first-child) {
+              margin-right: 20px;
+              margin-left: 0;
+            }
+          }
+        }
+      }
+    }
+    .@{upload-prefix-picture-list-cls} {
+      &-item {
+        margin: 0 0 28px 28px;
+        &-error {
+          a {
+            &:not(:first-child) {
+              margin-right: 10px;
+              margin-left: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 
 
 @upload-prefix: '--@{kd-prefix}-c-upload';