@kdcloudjs/kdesign 1.5.6 → 1.5.9

package/es/tabs/style/index.css

@@ -155,6 +155,13 @@
 .kd-tabs-left-arrows {
   -webkit-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.08);
           box-shadow: 2px 0 2px rgba(0, 0, 0, 0.08);
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-tabs-left-arrows-line {
   background-color: #fff;
@@ -166,6 +173,13 @@
 .kd-tabs-right-arrows {
   -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.08);
           box-shadow: -2px 0 2px rgba(0, 0, 0, 0.08);
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-tabs-right-arrows-line {
   background-color: #fff;
@@ -191,19 +205,7 @@
 }
 .kd-tabs-left-operations {
   position: relative;
-  line-height: 40px;
-  margin-right: 8px;
-}
-.kd-tabs-left-operations::after {
-  position: absolute;
-  content: '';
-  width: 1px;
-  height: 28px;
-  right: 0;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  margin-right: 2px;
 }
 .kd-tabs-left-operations-item {
   padding: 0 12px;
@@ -211,21 +213,10 @@
 }
 .kd-tabs-right-operations {
   position: relative;
-  line-height: 40px;
-}
-.kd-tabs-right-operations::before {
-  position: absolute;
-  content: '';
-  width: 1px;
-  height: 100%;
-  left: 0;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  padding-right: 18px;
 }
 .kd-tabs-right-operations-item {
-  padding: 0 12px;
+  padding-left: 12px;
   cursor: pointer;
 }
 .kd-tabs-more-btn {
@@ -233,8 +224,6 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 48px;
-  height: 100%;
-  line-height: 46px;
   text-align: center;
   cursor: pointer;
 }
@@ -267,6 +256,20 @@
   height: var(--kd-c-tabs-sizing-height, 48px);
   border-bottom: var(--kd-c-tabs-sizing-border, 1px) solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
+.kd-tabs-navs-line.kd-tabs-navs-middle {
+  height: var(--kd-c-tabs-pane-type-line-sizing-height-middle, 32px);
+}
+.kd-tabs-navs-line.kd-tabs-navs-small {
+  height: var(--kd-c-tabs-pane-type-line-sizing-height-small, 32px) !important;
+}
+.kd-tabs-navs-line .kd-tab-pane-middle {
+  line-height: var(--kd-c-tabs-pane-type-line-sizing-height-middle, 32px);
+  height: var(--kd-c-tabs-pane-type-line-sizing-height-middle, 32px);
+}
+.kd-tabs-navs-line .kd-tab-pane-small {
+  line-height: var(--kd-c-tabs-pane-type-line-sizing-height-small, 32px);
+  height: var(--kd-c-tabs-pane-type-line-sizing-height-small, 32px);
+}
 .kd-tabs-navs-line.kd-tabs-navs-bottom {
   border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   border-bottom: unset;
@@ -346,13 +349,13 @@
 .kd-tabs-navs-dynamic {
   background-color: var(--kd-c-tabs-card-color-background, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-bottom: unset;
-  height: 40px;
+  height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
 }
 .kd-tabs-navs-dynamic .kd-tabs-tab-wrap {
-  height: 40px;
+  height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
 }
 .kd-tabs-navs-dynamic .kd-tabs-more-btn {
-  line-height: 40px;
+  line-height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
 }
 .kd-tabs-navs-small:not(.kd-tabs-navs-left):not(.kd-tabs-navs-right) {
   height: 36px;
@@ -368,8 +371,7 @@
   font-size: var(--kd-c-tabs-pane-font-size, var(--kd-g-font-size-middle, 14px));
   color: var(--kd-c-tabs-color-text, var(--kd-g-color-text-secondary, #666));
   height: var(--kd-c-tabs-pane-sizing-height, 48px);
-  line-height: var(--kd-c-tabs-pane-line-height, 48px);
-  margin-right: var(--kd-c-tabs-pane-spacing-margin-right, 24px);
+  line-height: var(--kd-c-tabs-pane-height, 48px);
   cursor: pointer;
 }
 .kd-tab-pane-text {
@@ -391,11 +393,13 @@
 .kd-tab-pane-disabled:hover {
   color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
+.kd-tab-pane-type-line {
+  padding: 0 var(--kd-c-tabs-pane-line-paddinng-horizontal, 20px);
+}
 .kd-tab-pane-type-card {
   margin-right: 0;
-}
-.kd-tab-pane-type-card .kd-tab-pane-text {
-  padding: 0 24px;
+  padding: 0 var(--kd-c-tabs-pane-card-paddinng-horizontal, 18px);
+  border: 1px solid transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-box-active {
   background-color: #fff;
@@ -406,25 +410,14 @@
   transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
 }
 .kd-tab-pane-type-card.kd-tab-pane-box-active:first-of-type {
-  border-left: unset;
-}
-.kd-tab-pane-type-card.kd-tab-pane-left,
-.kd-tab-pane-type-card.kd-tab-pane-right {
-  width: 100%;
-  padding: 0;
-  text-align: center;
-  border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-}
-.kd-tab-pane-type-card.kd-tab-pane-left:last-of-type,
-.kd-tab-pane-type-card.kd-tab-pane-right:last-of-type {
-  border-bottom: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border-left-color: transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-left {
-  border-left: 1px solid transparent;
+  border-left: 2px solid transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-left.kd-tab-pane-box-active {
-  border-left: 2px solid var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
-  border-right: 1px solid transparent;
+  border-left: 2px solid;
+  border-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) transparent transparent var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tab-pane-type-card.kd-tab-pane-right {
   border-right: 1px solid transparent;
@@ -433,14 +426,40 @@
   border-right: 2px solid var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
   border-left: 1px solid transparent;
 }
+.kd-tab-pane-type-card.kd-tab-pane-left,
+.kd-tab-pane-type-card.kd-tab-pane-right {
+  width: 100%;
+  border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-tab-pane-type-card.kd-tab-pane-left:last-of-type,
+.kd-tab-pane-type-card.kd-tab-pane-right:last-of-type {
+  border-bottom: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-tab-pane-type-card.kd-tab-pane-bottom {
+  border-top: 1px solid transparent;
+  border-bottom: 2px solid transparent;
+}
 .kd-tab-pane-type-card.kd-tab-pane-bottom.kd-tab-pane-box-active {
   border-bottom: 2px solid;
   border-color: transparent var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
+.kd-tab-pane-type-card.kd-tab-pane-bottom.kd-tab-pane-box-active:first-of-type {
+  border-left-color: transparent;
+}
+.kd-tab-pane-type-card.kd-tab-pane-top {
+  border-top: 2px solid transparent;
+}
+.kd-tab-pane-type-card.kd-tab-pane-top.kd-tab-pane-box-active {
+  border-top: 2px solid;
+  border-color: var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) transparent var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-tab-pane-type-card.kd-tab-pane-top.kd-tab-pane-box-active:first-of-type {
+  border-left-color: transparent;
+}
 .kd-tab-pane-type-dynamic {
-  height: 40px;
-  line-height: 40px;
-  margin: 0 0 0 8px;
+  height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
+  line-height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
+  margin: 0 0 0 4px;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -448,17 +467,17 @@
       -ms-flex-align: center;
           align-items: center;
 }
-.kd-tab-pane-type-dynamic:hover .kd-tab-pane-operations span:first-child {
+.kd-tab-pane-type-dynamic:not(.kd-tab-pane-disabled):hover .kd-tab-pane-operations span:first-child {
   opacity: 1;
   cursor: pointer;
 }
 .kd-tab-pane-type-dynamic .kd-tab-pane-operations .kdicon {
-  font-size: 14px;
+  font-size: 16px;
 }
 .kd-tab-pane-type-grid {
   height: 24px;
   line-height: 22px;
-  padding: 0 19px;
+  padding: 0 var(--kd-c-tabs-pane-grid-paddinng-horizontal, 20px);
   border: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   margin-right: -1px;
 }
@@ -480,7 +499,7 @@
   color: #fff;
 }
 .kd-tab-pane-type-grid.kd-tab-pane-disabled {
-  background-color: var(--kd-c-tabs-color-background-disabled, var(--kd-g-color-background-2, #f2f2f2));
+  background-color: var(--kd-c-tabs-color-background-disabled, transparent);
 }
 .kd-tab-pane-type-grid:hover {
   color: var(--kd-c-tabs-color-text-active, var(--kd-g-color-theme, #5582f3));
@@ -489,7 +508,7 @@
   position: relative;
   display: inline-block;
   line-height: 1;
-  padding: 0 18px 0 8px;
+  padding: 0 4px;
 }
 .kd-tab-pane-operations span:first-child {
   display: inline-block;
@@ -497,18 +516,6 @@
   font-size: 0;
   opacity: 0;
 }
-.kd-tab-pane-operations::after {
-  position: absolute;
-  content: '';
-  width: 1px;
-  height: 14px;
-  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-  right: 0;
-  top: 50%;
-  opacity: 1;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
 .kd-tab-pane-small {
   height: 36px;
   line-height: 36px;
@@ -531,8 +538,6 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 48px;
-  height: 100%;
-  line-height: 46px;
   text-align: center;
   cursor: pointer;
 }
@@ -544,7 +549,7 @@
 }
 .kd-arrow-button-dynamic {
   width: 24px;
-  line-height: 40px;
+  line-height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
 }
 .kd-arrow-button-disabled {
   color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));

package/es/tabs/style/index.less

@@ -38,6 +38,9 @@
 
   &-left-arrows {
     box-shadow: 2px 0 2px rgba(0, 0, 0, 0.08);
+    height: 100%;
+    display: flex;
+    align-items: center;
     &-line {
       background-color: #fff;
     }
@@ -47,6 +50,9 @@
   }
   &-right-arrows {
     box-shadow: -2px 0 2px rgba(0, 0, 0, 0.08);
+    height: 100%;
+    display: flex;
+    align-items: center;
     &-line {
       background-color: #fff;
       .@{tabs-prefix-cls}-more-btn {
@@ -70,18 +76,7 @@
   }
   &-left-operations {
     position: relative;
-    line-height: 40px;
-    margin-right: 8px;
-    &::after {
-      position: absolute;
-      content: '';
-      width: 1px;
-      height: 28px;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      background-color: @tabs-border-color;
-    }
+    margin-right: 2px;
     &-item {
       padding: 0 12px;
       cursor: pointer;
@@ -89,19 +84,9 @@
   }
   &-right-operations {
     position: relative;
-    line-height: 40px;
-    &::before {
-      position: absolute;
-      content: '';
-      width: 1px;
-      height: 100%;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      background-color: @tabs-border-color;
-    }
+    padding-right: 18px;
     &-item {
-      padding: 0 12px;
+      padding-left: 12px;
       cursor: pointer;
     }
   }
@@ -110,8 +95,6 @@
     display: inline-block;
     box-sizing: border-box;
     width: 48px;
-    height: 100%;
-    line-height: 46px;
     text-align: center;
     cursor: pointer;
     &:hover {
@@ -130,6 +113,20 @@
 .@{tabs-prefix-cls}-navs {
   .tabNavs;
   &-line {
+    &.@{tabs-prefix-cls}-navs-middle {
+      height: @tab-pane-type-line-height-middle;
+    }
+    &.@{tabs-prefix-cls}-navs-small {
+      height: @tab-pane-type-line-height-small !important;
+    }
+    .@{tabPane-prefix-cls}-middle {
+      line-height: @tab-pane-type-line-height-middle;
+      height: @tab-pane-type-line-height-middle;
+    }
+    .@{tabPane-prefix-cls}-small {
+      line-height: @tab-pane-type-line-height-small;
+      height: @tab-pane-type-line-height-small;
+    }
     &.@{tabs-prefix-cls}-navs-bottom {
       border-top: 1px solid @tabs-border-color;
       border-bottom: unset;
@@ -152,12 +149,14 @@
       top: -1px;
       height: ~'calc(100% + 2px)';
     }
-    &.@{tabs-prefix-cls}-navs-left, &.@{tabs-prefix-cls}-navs-right {
+    &.@{tabs-prefix-cls}-navs-left,
+    &.@{tabs-prefix-cls}-navs-right {
       min-width: 120px;
       height: 100%;
       font-size: 0;
       border-top: 1px solid transparent;
-      &::before, &::after {
+      &::before,
+      &::after {
         position: absolute;
         content: '';
         display: inline-block;
@@ -196,12 +195,12 @@
   &-dynamic {
     background-color: @tabs-card-bg;
     border-bottom: unset;
-    height: 40px;
+    height: @tab-pane-type-dynamic-height;
     .@{tabs-prefix-cls}-tab-wrap {
-      height:  40px;
+      height: @tab-pane-type-dynamic-height;
     }
     .@{tabs-prefix-cls}-more-btn {
-      line-height: 40px;
+      line-height: @tab-pane-type-dynamic-height;
     }
   }
   &-small:not(.@{tabs-prefix-cls}-navs-left):not(.@{tabs-prefix-cls}-navs-right) {
@@ -217,7 +216,8 @@
   &-text {
     display: inline-block;
     transition: color @tab-g-motion-duration;
-    &-active, &:hover {
+    &-active,
+    &:hover {
       color: @tabPane-font-color-active;
     }
     &-disabled {
@@ -233,35 +233,28 @@
       color: @tabPane-font-color-disabled;
     }
   }
+  &-type-line {
+    padding: 0 @tab-pane-line-paddinng-horizontal;
+  }
   &-type-card {
     margin-right: 0;
-    .@{tabPane-prefix-cls}-text {
-      padding: 0 24px;
-    }
+    padding: 0 @tab-pane-card-paddinng-horizontal;
+    border: 1px solid transparent;
     &.@{tabPane-prefix-cls}-box-active {
       background-color: #fff;
       border: 1px solid @tabs-border-color;
       border-top: 2px solid;
       border-color: @tab-line-color-active @tabs-border-color transparent @tabs-border-color;
-      transition: background-color .2s @tab-transition-fn;
+      transition: background-color 0.2s @tab-transition-fn;
       &:first-of-type {
-        border-left: unset;
-      }
-    }
-    &.@{tabPane-prefix-cls}-left, &.@{tabPane-prefix-cls}-right {
-      width: 100%;
-      padding: 0;
-      text-align: center;
-      border-top: 1px solid @tabs-border-color;
-      &:last-of-type {
-        border-bottom: 1px solid @tabs-border-color;
+        border-left-color: transparent;
       }
     }
     &.@{tabPane-prefix-cls}-left {
-      border-left: 1px solid transparent;
+      border-left: 2px solid transparent;
       &.@{tabPane-prefix-cls}-box-active {
-        border-left: 2px solid @tab-line-color-active;
-        border-right: 1px solid transparent;
+        border-left: 2px solid;
+        border-color: @tabs-border-color transparent transparent @tab-line-color-active;
       }
     }
     &.@{tabPane-prefix-cls}-right {
@@ -271,20 +264,43 @@
         border-left: 1px solid transparent;
       }
     }
+    &.@{tabPane-prefix-cls}-left,
+    &.@{tabPane-prefix-cls}-right {
+      width: 100%;
+      border-top: 1px solid @tabs-border-color;
+      &:last-of-type {
+        border-bottom: 1px solid @tabs-border-color;
+      }
+    }
     &.@{tabPane-prefix-cls}-bottom {
+      border-top: 1px solid transparent;
+      border-bottom: 2px solid transparent;
       &.@{tabPane-prefix-cls}-box-active {
         border-bottom: 2px solid;
-        border-color:  transparent @tabs-border-color @tab-line-color-active @tabs-border-color;
+        border-color: transparent @tabs-border-color @tab-line-color-active @tabs-border-color;
+        &:first-of-type {
+          border-left-color: transparent;
+        }
+      }
+    }
+    &.@{tabPane-prefix-cls}-top {
+      border-top: 2px solid transparent;
+      &.@{tabPane-prefix-cls}-box-active {
+        border-top: 2px solid;
+        border-color: @tab-line-color-active @tabs-border-color transparent @tabs-border-color;
+        &:first-of-type {
+          border-left-color: transparent;
+        }
       }
     }
   }
   &-type-dynamic {
-    height: 40px;
-    line-height: 40px;
-    margin: 0 0 0 8px;
+    height: @tab-pane-type-dynamic-height;
+    line-height: @tab-pane-type-dynamic-height;
+    margin: 0 0 0 4px;
     display: inline-flex;
     align-items: center;
-    &:hover {
+    &:not(.@{tabPane-prefix-cls}-disabled):hover {
       .@{tabPane-prefix-cls}-operations {
         span:first-child {
           opacity: 1;
@@ -293,13 +309,13 @@
       }
     }
     .@{tabPane-prefix-cls}-operations .@{icon-prefix-cls} {
-      font-size: 14px;
+      font-size: 16px;
     }
   }
   &-type-grid {
     height: 24px;
     line-height: 22px;
-    padding: 0 19px;
+    padding: 0 @tab-pane-grid-paddinng-horizontal;
     border: 1px solid @tabs-border-color;
     margin-right: -1px;
     &:first-of-type {
@@ -313,7 +329,7 @@
       z-index: 2;
       background-color: @tab-line-color-active;
       border: 1px solid @tab-line-color-active;
-      transition: background-color .2s @tab-transition-fn;
+      transition: background-color 0.2s @tab-transition-fn;
       .@{tabPane-prefix-cls}-text-active {
         color: #fff;
       }
@@ -329,24 +345,13 @@
     position: relative;
     display: inline-block;
     line-height: 1;
-    padding: 0 18px 0 8px;
+    padding: 0 4px;
     span:first-child {
       display: inline-block;
       vertical-align: top;
       font-size: 0;
       opacity: 0;
     }
-    &::after {
-      position: absolute;
-      content: '';
-      width: 1px;
-      height: 14px;
-      background-color: @tabs-border-color;
-      right: 0;
-      top: 50%;
-      opacity: 1;
-      transform: translateY(-50%);
-    }
   }
   &-small {
     height: 36px;
@@ -370,8 +375,6 @@
   display: inline-block;
   box-sizing: border-box;
   width: 48px;
-  height: 100%;
-  line-height: 46px;
   text-align: center;
   cursor: pointer;
   &:hover {
@@ -382,7 +385,7 @@
   }
   &-dynamic {
     width: 24px;
-    line-height: 40px;
+    line-height: @tab-pane-type-dynamic-height;
   }
   &-disabled {
     color: @tabPane-font-color-disabled;
@@ -394,4 +397,4 @@
   .@{icon-prefix-cls} {
     font-size: 14px;
   }
-}
+}

package/es/tabs/style/mixin.less

@@ -5,11 +5,6 @@
   flex-direction: column;
   flex-wrap: nowrap;
   height: 100%;
-  // box-sizing: border-box;
-  // width: 100%;
-  // height: @tabs-height;
-  // color: @tabs-font-color;
-  // border-bottom: @tabs-border-width solid @tabs-border-color;
 }
 .tabNavs() {
   position: relative;
@@ -29,6 +24,5 @@
   color: @tabs-font-color;
   height: @tab-pane-height;
   line-height: @tab-pane-line-height;
-  margin-right: @tab-pane-margin-right;
   cursor: pointer;
 }

package/es/tabs/style/token.less

@@ -6,7 +6,7 @@
 @tabs-border-color: var(~'@{tabs-custom-prefix}-color-border', @color-border-strong);
 @tab-line-color-active: var(~'@{tabs-custom-prefix}-line-color-active', @color-theme);
 @tabs-card-bg: var(~'@{tabs-custom-prefix}-card-color-background', @color-background-contain-disabled);
-@tab-disabled-bg: var(~'@{tabs-custom-prefix}-color-background-disabled', @color-background-2);
+@tab-disabled-bg: var(~'@{tabs-custom-prefix}-color-background-disabled', transparent);
 @tabs-font-color: var(~'@{tabs-custom-prefix}-color-text', @color-text-secondary);
 @tabPane-font-color-active: var(~'@{tabs-custom-prefix}-color-text-active', @color-theme);
 @tabPane-font-color-hover: var(~'@{tabs-custom-prefix}-color-text-hover', @color-theme);
@@ -16,7 +16,7 @@
 @tabPane-font-size: var(~'@{tabs-custom-prefix}-pane-font-size', @font-size-middle);
 
 // line-height
-@tab-pane-line-height: var(~'@{tabs-custom-prefix}-pane-line-height', 48px);
+@tab-pane-line-height: var(~'@{tabs-custom-prefix}-pane-height', 48px);
 
 // motion
 @tab-transition-fn: var(~'@{tabs-custom-prefix}-motion-timing-function', cubic-bezier(0.42, 0, 1, 1));
@@ -26,7 +26,12 @@
 @tabs-height: var(~'@{tabs-custom-prefix}-sizing-height', 48px);
 @tabs-border-width: var(~'@{tabs-custom-prefix}-sizing-border', 1px);
 @tab-pane-height: var(~'@{tabs-custom-prefix}-pane-sizing-height', 48px);
+@tab-pane-type-line-height-small: var(~'@{tabs-custom-prefix}-pane-type-line-sizing-height-small', 32px);
+@tab-pane-type-line-height-middle: var(~'@{tabs-custom-prefix}-pane-type-line-sizing-height-middle', 32px);
+@tab-pane-type-dynamic-height: var(~'@{tabs-custom-prefix}-pane-type-dynamic-sizing-height', 32px);
 
 
 // spacing
-@tab-pane-margin-right: var(~'@{tabs-custom-prefix}-pane-spacing-margin-right', 24px);
+@tab-pane-line-paddinng-horizontal: var(~'@{tabs-custom-prefix}-pane-line-paddinng-horizontal', 20px);
+@tab-pane-card-paddinng-horizontal: var(~'@{tabs-custom-prefix}-pane-card-paddinng-horizontal', 18px);
+@tab-pane-grid-paddinng-horizontal: var(~'@{tabs-custom-prefix}-pane-grid-paddinng-horizontal', 20px);

package/es/tree/style/index.css

@@ -131,6 +131,7 @@
           flex-grow: 1;
   font-size: var(--kd-c-tree-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-c-tree-color-text, var(--kd-g-color-text-primary, #212121));
+  margin-left: var(--kd-c-tree-spacing-margin-left, 16px);
 }
 .kd-tree-root {
   min-width: 100%;
@@ -155,7 +156,7 @@
           align-items: center;
 }
 .kd-tree-node-root .kd-spin-dot-spin {
-  border: none;
+  border: 2px solid transparent;
   width: var(--kd-c-tree-expand-icon-loading-sizing-width, 16px);
   height: var(--kd-c-tree-expand-icon-loading-sizing-height, 16px);
 }

package/es/tree/style/index.less

@@ -11,6 +11,7 @@
   flex-grow: 1;
   font-size: @tree-font-size;
   color: @tree-color-text;
+  margin-left: @tree-margin-left;
   &-root {
     min-width: 100%;
     flex-shrink: 0;
@@ -30,7 +31,7 @@
     align-items: center;
 
     .@{kd-prefix}-spin-dot-spin {
-      border: none;
+      border: 2px solid transparent;
       width: @tree-expand-icon-loading-width;
       height: @tree-expand-icon-loading-height;
 
@@ -47,7 +48,7 @@
     display: flex;
     align-items: center;
 
-    .node-hover()
+    .node-hover();
   }
 
   &-indent {
@@ -115,14 +116,14 @@
     .node-hover();
 
     &-selected {
-      .node-selected()
+      .node-selected();
     }
   }
   &-title {
     white-space: nowrap;
   }
   &-selected {
-    .node-selected()
+    .node-selected();
   }
 
   &-draggabled {