@kdcloudjs/kdesign 1.6.40 → 1.7.1

package/dist/kdesign-complete.less

@@ -2891,6 +2891,287 @@
 
 
 
+@color-picker-prefix-cls: ~'@{kd-prefix}-color-picker';
+
+.@{color-picker-prefix-cls}-container {
+    position: relative;
+
+    .@{color-picker-prefix-cls}-input {
+        width: @color-picker-input-sizing-width;
+        height: @color-picker-input-sizing-height;
+        border-bottom: 1px solid rgba(217, 217, 217, 1);
+        font-size: @color-picker-input-font-size;
+    }
+
+    .@{color-picker-prefix-cls}-icon-container {
+        position: absolute;
+        top: 3px;
+        right: 6px;
+        cursor: pointer;
+
+        .@{color-picker-prefix-cls}-icon {
+            width: @color-picker-input-suffix-sizing-width;
+            height: @color-picker-input-suffix-sizing-height;
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            border-radius: 2px;
+            line-height: 18px;
+            text-align: center;
+            color: @bg;
+
+            &-underline {
+                margin-right: -6px;
+            }
+
+            &-up {
+                .kdicon-arrow-down {
+                    transform: rotate(180deg);
+                    transition: transform @transition-duration-quickly ease-in-out;
+                }
+            }
+
+            &-down {
+                .kdicon-arrow-down {
+                    transform: rotate(0deg);
+                    transition: transform @transition-duration-quickly ease-in-out;
+                }
+            }
+        }
+    }
+
+}
+
+.@{color-picker-prefix-cls}-pop {
+
+    &.topLeft.hidden,
+    &.bottomLeft.hidden,
+    &.topRight.hidden,
+    &.bottomRight.hidden {
+        opacity: 0;
+        visibility: hidden;
+        transition: all calc(@transition-duration - 0.1s) @ease;
+    }
+
+    .@{color-picker-prefix-cls}-panel {
+        box-sizing: border-box;
+        width: @color-picker-panel-sizing-width;
+        padding: 4px 12px 16px;
+        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;
+
+        &-chrome {
+            width: 278px !important;
+            margin-top: 12px;
+            box-shadow: none !important;
+
+            &>div:last-child {
+                padding: 9px 0 4px !important;
+
+                .flexbox-fix:first-child {
+                    display: flex;
+                    flex-direction: row-reverse;
+
+                    &>div:first-child {
+                        &>div {
+                            width: 28px !important;
+                            height: 28px !important;
+                            border-radius: 50% !important;
+                            margin-top: -1px !important;
+                            margin-left: 4px !important;
+                        }
+                    }
+
+                    &>div:last-child {
+
+                        .hue-horizontal {
+                            width: 240px !important;
+                            height: 12px !important;
+                            border-radius: 6px !important;
+                            padding: unset !important;
+
+                            &>div>div {
+                                margin-top: 1px;
+                            }
+                        }
+
+                        &>div:last-child {
+                            &>div {
+                                width: 240px !important;
+                                height: 12px !important;
+                                margin: unset;
+
+                                &>div:first-child {
+                                    border-radius: 6px !important;
+                                }
+
+                                &>div:nth-child(2) {
+                                    border-radius: 6px !important;
+                                }
+
+                                &>div:last-child {
+                                    margin: unset !important;
+
+                                    &>div>div {
+                                        margin-top: 1px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                }
+
+                .flexbox-fix:last-child {
+                    display: none !important;
+                }
+            }
+
+        }
+
+        &-switch {
+            margin: 12px 0 0;
+            font-size: 12px;
+            color: #666666;
+            letter-spacing: 0;
+            line-height: 16px;
+            font-weight: 400;
+
+            span {
+                vertical-align: middle;
+                margin-right: 9px;
+            }
+        }
+
+        &-input {
+            display: inline-block;
+            position: relative;
+            margin-top: 12px;
+            font-size: @color-picker-panel-select-font-size;
+
+            &-no-recommend {
+                margin-bottom: 8px;
+            }
+
+            .@{kd-prefix}-select {
+
+                &.bottomLeft,
+                &.topLeft {
+                    position: absolute;
+                    width: 60px !important;
+                    background: #FFFFFF;
+                    right: 0;
+                    left: unset !important;
+                    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
+                    border-radius: 2px;
+                }
+
+                .@{kd-prefix}-select-dropdown {
+                    overflow: hidden;
+                }
+            }
+
+            .@{kd-prefix}-select-bordered {
+                border-radius: 2px;
+                width: @color-picker-panel-select-sizing-width;
+                height: @color-picker-panel-select-sizing-height;
+                min-height: 28px;
+                margin-top: -2px;
+
+                .@{kd-prefix}-select-placeholder {
+                    left: 8px;
+                }
+            }
+
+            .active-option {
+                background-color: #E3EBFF;
+            }
+        }
+
+        &-transparent {
+            width: 60px;
+            height: 28px;
+            margin-left: 8px;
+            text-align: center;
+            font-size: @color-picker-panel-alpha-font-size;
+        }
+
+        &-colorDivContainer {
+            display: grid;
+            grid-template-columns: repeat(12, 1fr);
+            grid-column-gap: 8px;
+            grid-row-gap: 8px;
+            margin-top: 12px;
+
+            li {
+                position: relative;
+                box-sizing: border-box;
+                width: @color-picker-panel-preset-sizing-width;
+                height: @color-picker-panel-preset-sizing-height;
+                border: 1px solid rgba(0, 0, 0, 0.05);
+                border-radius: 2px;
+                list-style: none;
+                cursor: pointer;
+
+                .square {
+                    display: none;
+                    position: absolute;
+                    box-sizing: inherit;
+                    top: -3px;
+                    left: -3px;
+                    width: calc(@color-picker-panel-preset-sizing-width + 4px);
+                    height: calc(@color-picker-panel-preset-sizing-height + 4px);
+                    border: 1px solid rgba(178, 178, 176, 1);
+                    border-radius: 4px;
+
+                    &-click {
+                        display: block;
+                        box-shadow: 0 0 0 1px #e5e5e5 !important;
+                    }
+                }
+
+                &:hover {
+                    .square {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// code component mixin here
+.test() {
+  display: inline;
+}
+
+
+
+@color-picker-custom-prefix: ~'--@{kd-prefix}-c-color-picker';
+
+// z-index
+@color-picker-panel-z-index: var(~'@{color-picker-custom-prefix}-panel-z-index', @z-index-popper);
+
+// font
+@color-picker-input-font-size: var(~'@{color-picker-custom-prefix}-input-font-size', @font-size-middle);
+@color-picker-panel-select-font-size: var(~'@{color-picker-custom-prefix}-panel-select-font-size', @font-size-middle);
+@color-picker-panel-alpha-font-size: var(~'@{color-picker-custom-prefix}-panel-alpha-font-size', @font-size-middle);
+
+// sizing
+@color-picker-input-sizing-width: var(~'@{color-picker-custom-prefix}-input-sizing-width', 230px);
+@color-picker-input-sizing-height: var(~'@{color-picker-custom-prefix}-input-sizing-height', 28px);
+@color-picker-input-suffix-sizing-width: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-width', 20px);
+@color-picker-input-suffix-sizing-height: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-height', 20px);
+@color-picker-panel-sizing-width: var(~'@{color-picker-custom-prefix}-panel-sizing-width', 304px);
+@color-picker-panel-select-sizing-width: var(~'@{color-picker-custom-prefix}-panel-select-sizing-width', 212px);
+@color-picker-panel-select-sizing-height: var(~'@{color-picker-custom-prefix}-panel-select-sizing-height', 28px);
+@color-picker-panel-preset-sizing-width: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-width', 16px);
+@color-picker-panel-preset-sizing-height: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-height', 16px);
+
+
+
+
 
 @datePicker-prefix-cls: ~'@{kd-prefix}-date-picker';
 @datePicker-prefix-cls-panel: ~'@{datePicker-prefix-cls}-panel';
@@ -7009,17 +7290,19 @@ textarea {
   .reset-component;
   color: @pagination-text-color;
   font-size: @pagination-font-size;
+  display: flex;
+  align-items: center;
 
   .@{pagination-prefix-cls}-total {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-right: 12px;
-    vertical-align: middle;
   }
 
   .@{pagination-prefix-cls}-current {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-right: 12px;
-    vertical-align: middle;
 
     .@{pagination-prefix-cls}-current-input {
       box-sizing: border-box;
@@ -7053,12 +7336,13 @@ textarea {
 
   .@{pagination-action-prefix-cls} {
     .reset-component;
-    display: inline-block;
-    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
 
     .@{pagination-action-prefix-cls}-item {
       .reset-component;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
 
       &.bordered {
         margin-right: calc(2 * @pagination-button-spacing);
@@ -7086,7 +7370,6 @@ textarea {
         border-radius: @radius-border;
         cursor: pointer;
         outline: none;
-        vertical-align: middle;
         transition: border-color @duration-promptly;
 
         &:hover,
@@ -7129,11 +7412,11 @@ textarea {
   .@{pagination-selector-prefix-cls} {
     .reset-component;
     position: relative;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-left: 20px;
     outline: none;
     height: @pagination-size;
-    vertical-align: middle;
 
     .@{pagination-selector-prefix-cls}-size {
       box-sizing: border-box;
@@ -7210,11 +7493,11 @@ textarea {
 
       &-item {
         .reset-component;
-        display: inline-block;
         height: @pagination-size;
         overflow: hidden;
         margin: 0 8px;
-        vertical-align: middle;
+        display: inline-flex;
+        align-items: center;
         color: @color-text-primary;
 
         &:first-child,
@@ -7224,7 +7507,6 @@ textarea {
 
         .@{pagination-prefix-cls}-current {
           margin-right: 2px;
-          vertical-align: middle;
 
           .@{pagination-prefix-cls}-current-input {
             margin: 0;
@@ -7237,7 +7519,6 @@ textarea {
         }
 
         .@{pagination-prefix-cls}-total {
-          vertical-align: middle;
           margin-right: 0;
         }
 
@@ -7255,7 +7536,9 @@ textarea {
           border-radius: @radius-border;
           cursor: pointer;
           outline: none;
-          vertical-align: middle;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
           transition: border-color @duration-promptly;
 
           &:hover,
@@ -7303,9 +7586,9 @@ textarea {
       &-item {
         .reset-component;
         position: relative;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         margin-right: @pagination-button-spacing;
-        vertical-align: middle;
 
         &:last-child {
           margin-right: 0;
@@ -7354,6 +7637,9 @@ textarea {
           border: none;
           background: @color-background;
           transition: color @duration-promptly, border-color @duration-promptly;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
 
           &:disabled {
             cursor: not-allowed;
@@ -7368,14 +7654,15 @@ textarea {
   &.nicety {
     .@{pagination-pages-prefix-cls} {
       .reset-component;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
 
       &-item {
         .reset-component;
         position: relative;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         margin-right: @pagination-button-spacing;
-        vertical-align: middle;
 
         &:last-child {
           margin-right: 0;
@@ -7424,6 +7711,9 @@ textarea {
           padding: 0 6px;
           cursor: pointer;
           outline: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
           font-size: @pagination-font-size;
           color: @color-text-primary;
           border-radius: @radius-border;
@@ -7457,9 +7747,9 @@ textarea {
     }
 
     .@{pagination-jumper-prefix-cls} {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       margin-left: 4px;
-      vertical-align: middle;
 
       .@{pagination-jumper-prefix-cls}-input {
         box-sizing: border-box;
@@ -7494,8 +7784,9 @@ textarea {
         width: @pagination-size;
         height: @pagination-size;
         margin-left: @pagination-button-spacing;
-        line-height: @pagination-size;
-        vertical-align: top;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
         outline: none;
         color: @color-text-primary;
@@ -7525,25 +7816,24 @@ textarea {
     .@{pagination-options-prefix-cls} {
       .reset-component;
       position: relative;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       margin-left: 22px;
       outline: none;
       height: @pagination-size;
       color: @color-text-primary;
-      vertical-align: middle;
 
       .@{pagination-options-prefix-cls}-size {
         position: relative;
         box-sizing: border-box;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         min-width: 64px;
         height: @pagination-size;
         margin-right: 8px;
         padding: 0 24px 0 4px;
-        line-height: @pagination-size;
         font-size: @pagination-font-size;
         color: @color-text-primary;
-        text-align: left;
         border-radius: @radius-border;
         border: @pagination-border-size solid @color-border-strong;
         background: @color-background;
@@ -11667,7 +11957,6 @@ template {
   list-style: none;
   font-feature-settings: @font-feature-settings;
 }
-
 @kd-prefix: kd;
 
 /* -----------  color  ——————---- start */
@@ -11687,7 +11976,7 @@ template {
 
 @theme-color-disabled: @theme-color-level3;
 @theme-color-hover: @theme-color-level5;
-@theme-color-click: @theme-color-level7;// 点击色
+@theme-color-click: @theme-color-level7; // 点击色
 @theme-color-active-light: @theme-color-level1; // 浅色选中
 @theme-color-active-dark: @theme-color; // 深色选中
 @hover-color: #f5f5f5; // 中性的悬停色
@@ -11737,9 +12026,9 @@ template {
 /* -----------  color  ——————---- end */
 
 /* -----------  motion  ——————---- start */
-@ease-out: cubic-bezier(0,.4,.4,1);
-@ease-in: cubic-bezier(0.4,0,1,0.6);
-@ease: cubic-bezier(0.4,0,0.6,1);
+@ease-out: cubic-bezier(0, .4, .4, 1);
+@ease-in: cubic-bezier(0.4, 0, 1, 0.6);
+@ease: cubic-bezier(0.4, 0, 0.6, 1);
 /* -----------  motion  ——————---- end */
 
 /* -----------  transition  ——————---- start */
@@ -12157,6 +12446,11 @@ template {
 @date-ranges-width: 160px;
 
 /* -----------  DatePicker  ——————---- end */
+
+/* -----------  ColorPicker  ——————---- start */
+
+/* -----------  ColorPicker  ——————---- end */
+
 /* -----------  Tree  ——————---- start */
 @tree-node-height: 28px;
 @tree-font-size: @font-size;
@@ -12373,7 +12667,6 @@ template {
 
 /* -----------  AdvancedSelector  ——————---- end */
 
-
 @global-custom-prefix: '--@{kd-prefix}-g';
 
 @color-theme: var(~'@{global-custom-prefix}-color-theme', @theme-color);
@@ -14163,6 +14456,484 @@ template {
 
 
 
+
+@tree-select-prefix-cls: ~'@{kd-prefix}-tree-select';
+@tree-prefix-cls: ~'@{kd-prefix}-tree';
+
+.@{tree-select-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  background-color: transparent;
+  cursor: pointer;
+  vertical-align: middle;
+
+  &-selector:hover {
+    .@{tree-select-prefix-cls}-icon-active {
+      color: #3761ca;
+    }
+  }
+  &-visible {
+    .@{tree-select-prefix-cls}-icon-active {
+      color: #3761ca;
+    }
+    .@{tree-select-prefix-cls}-selection-item {
+      color: @tree-select-placeholder-color;
+    }
+  }
+
+  &-icon {
+    &-arrow {
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      &-up {
+        transform: rotate(180deg);
+        transition: transform calc(@transition-duration - 0.1s) @ease;
+      }
+
+      &-down {
+        transform: rotate(0deg);
+        transition: transform calc(@transition-duration - 0.1s) @ease;
+      }
+
+      &-focus {
+        color: @tree-select-g-color-border-foucs;
+      }
+    }
+
+    &-clear {
+      opacity: 0;
+      z-index: 1;
+      position: absolute;
+      background: #fff;
+      transition: opacity 0.15s ease;
+      &:hover {
+        color: @tree-select-g-color-border-hover;
+      }
+    }
+  }
+
+  &-focused {
+    .focusColor();
+  }
+  &-placeholder {
+    position: absolute;
+    color: @tree-select-placeholder-color;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    right: 28px;
+    left: 0;
+  }
+
+  &-borderless {
+    border: none;
+  }
+
+  &-underline {
+    border-bottom: 1px solid @tree-select-g-color-border;
+    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled) {
+      border-bottom: 1px solid @tree-select-g-color-border-hover;
+    }
+  }
+
+  &-bordered {
+    border: 1px solid @tree-select-border-g-color-border;
+    padding-left: @tree-select-bordered !important;
+    border-radius: @tree-select-border-radius-border;
+    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled) {
+      border: 1px solid @tree-select-g-color-border-hover;
+    }
+
+    .@{tree-select-prefix-cls}-suffix {
+      padding-right: 8px;
+    }
+
+    &.@{tree-select-prefix-cls}-single {
+      .@{tree-select-prefix-cls}-selection-search {
+        padding-left: @tree-select-bordered;
+      }
+    }
+
+    .@{tree-select-prefix-cls}-placeholder {
+      padding-left: @tree-select-bordered;
+    }
+  }
+
+  &-wrapper {
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    padding: @tree-select-wrapper-padding;
+    max-width: 100%;
+    color: #212121;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+  }
+
+  &-dropdown {
+    display: block;
+    left: 0;
+    z-index: @tree-select-z-index;
+    box-sizing: border-box;
+    padding: 4px 0;
+    margin: 0;
+    overflow: auto;
+    font-size: @tree-select-list-font-size;
+    font-variant: initial;
+    background-color: @tree-select-dropdown-bg;
+    border-radius: @tree-select-g-radius-border;
+    outline: none;
+    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+    max-height: 200px;
+
+    .@{tree-prefix-cls} {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+    
+
+    &-scroll {
+      overflow-y: auto;
+    }
+
+    &-empty {
+      padding: 5px 12px;
+    }
+
+    // 搜索框
+    &-search {
+      padding: 5px 6px;
+      &-hidden {
+        display: none;
+      }
+    }
+  }
+
+  // 选择器框大小
+  &-size-small {
+    .select-input-size(@tree-select-small-height, @tree-select-small-height, @tree-select-small-line-height, @tree-select-small-font-size);
+  }
+
+  &-size-middle {
+    .select-input-size(@tree-select-middle-height, @tree-select-middle-height, @tree-select-middle-line-height, @tree-select-middle-font-size);
+  }
+
+  &-size-large {
+    .select-input-size(@tree-select-large-height, @tree-select-large-height, @tree-select-large-line-height, @tree-select-large-font-size);
+  }
+
+  &-suffix {
+    right: 0;
+    position: absolute;
+    display: flex;
+    flex: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+  }
+  .@{tree-select-prefix-cls}-single {
+    .@{tree-select-prefix-cls}-selection {
+      &-search {
+        position: absolute;
+        right: 28px;
+        left: 0;
+        height: 100%;
+        &-input {
+          outline: 0;
+          border-radius: 0;
+          border: none;
+          background: transparent;
+          height: 100%;
+          width: 100%;
+        }
+      }
+      &-item {
+        display: inline-block;
+        .over();
+      }
+    }
+    &-focused {
+      .focusColor();
+    }
+    &-disabled {
+      background-color: @tree-select-color-background-disabled;
+      color: @tree-select-color-text-disabled;
+      &:hover {
+        cursor: not-allowed;
+      }
+
+      .@{tree-select-prefix-cls}-suffix {
+        color: @tree-select-arrow-icon-color-text-disabled;
+      }
+    }
+    &:hover .@{tree-select-prefix-cls}-icon-clear {
+      opacity: 1;
+    }
+
+    .@{tree-select-prefix-cls}-icon-clear {
+      color: @tree-select-clear-color;
+      &:hover {
+        color: @tree-select-clear-color-hover;
+      }
+    }
+    &-text {
+      color: @tree-select-single-color-text;
+      .over();
+    }
+    &-disabled-text {
+      color: @tree-select-color-text-disabled;
+    }
+  }
+
+  .@{tree-select-prefix-cls}-selection-item {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: center;
+    vertical-align: middle;
+    max-width: 100%;
+    height: 20px;
+    line-height: 20px;
+    margin: 2px 8px 2px 0;
+    cursor: default;
+    user-select: none;
+    &-small {
+      height: 20px;
+      line-height: 18px;
+      font-size: 12px;
+    }
+
+    &-middle {
+      font-size: 12px;
+      height: 20px;
+      line-height: 18px;
+    }
+
+    &-large {
+      font-size: 14px;
+      line-height: 22px;
+      height: 22px;
+    }
+
+    &-content {
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      padding: 0 7px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      border: 1px solid #ccc;
+      color: #212121;
+    }
+
+    &-span {
+      position: relative;
+      margin-left: 0.5px;
+      box-sizing: border-box;
+    }
+    &-input {
+      cursor: text;
+      margin: 0;
+      padding: 0;
+      background: 0 0;
+      border: none;
+      outline: none;
+      appearance: none;
+      width: 100%;
+      min-width: 20px;
+    }
+  }
+
+  // 多选
+  &-multiple {
+    .@{tree-select-prefix-cls}-selection {
+      &-tag {
+        max-width: calc(100% - 5px);
+
+        .@{kd-prefix}-tag {
+          margin: 2px 8px 2px 0;
+          max-width: 100%;
+        }
+      }
+      &-search {
+        position: relative;
+        max-width: 100%;
+        &-input {
+          outline: 0;
+          border-radius: 0;
+          border: none;
+          background: transparent;
+          width: 100%;
+        }
+        &-mirror {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 999;
+          white-space: pre;
+          visibility: hidden;
+        }
+      }
+    }
+    &-disabled {
+      cursor: not-allowed;
+      background-color: @tree-select-color-background-disabled;
+      color: @tree-select-color-text-disabled;
+
+      .@{tree-select-prefix-cls}-suffix {
+        color: @tree-select-arrow-icon-color-text-disabled;
+      }
+    }
+    &:hover .@{tree-select-prefix-cls}-icon-clear {
+      opacity: 1;
+    }
+    .@{tree-select-prefix-cls}-icon-clear {
+      color: @tree-select-clear-color;
+      &:hover {
+        color: @tree-select-clear-color-hover;
+      }
+    }
+    &-selector {
+      position: relative;
+      cursor: text;
+      padding-right: 24px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .@{tree-select-prefix-cls}-wrapper {
+      &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled) {
+        border-bottom: 1px solid @tree-select-g-color-border-hover;
+      }
+    }
+
+    &-footer {
+      color: @tree-select-font-color;
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      padding: 0 12px;
+      height: 32px;
+      line-height: 32px;
+      border-top: 1px solid #d9d9d9;
+      box-sizing: border-box;
+
+      &-hadSelected {
+        color: #999999;
+        padding-left: 12px;
+        > span {
+          color: @tree-select-footer-g-text-color-selected;
+          padding: 0 2px;
+        }
+      }
+    }
+  }
+
+  &.topLeft.hidden,
+  &.bottomLeft.hidden,
+  &.topRight.hidden,
+  &.bottomRight.hidden {
+    opacity: 0;
+    visibility: hidden;
+    transition: all calc(@transition-duration - 0.1s) @ease;
+  }
+}
+
+
+
+.item() {
+  position: relative;
+  display: block;
+  font-weight: normal;
+  font-size: @tree-select-list-font-size;
+  min-height: @tree-select-dropdown-height;
+  padding: 5px 12px;
+  color: @tree-select-font-color;
+  line-height: @tree-select-dropdown-line-height;
+}
+
+.focusColor() {
+  border-color: @tree-select-g-color-border-foucs !important;
+}
+
+.select-input-size(@height, @maxHeight, @lineHeight, @fontSize) {
+  min-height: @height;
+  max-height: calc(@maxHeight * 3 - 10px);
+  font-size: @fontSize;
+}
+
+.over() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
+
+
+@select-custom-prefix: ~'--@{kd-prefix}-c-tree-select';
+
+
+// color
+@tree-select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
+@tree-select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', #fff);
+@tree-select-item-active-bg: var(~'@{select-custom-prefix}-color-background', #f5f5f5);
+@tree-select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', @color-theme-3);
+@tree-select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
+@tree-select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
+@tree-select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
+@tree-select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
+@tree-select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', #b2b2b2);
+@tree-select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
+@tree-select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
+@tree-select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', #0e5fd8);
+@tree-select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
+@tree-select-color-background-disabled: var(~'@{select-custom-prefix}-color-background-disabled', #f5f5f5);
+@tree-select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', @color-disabled);
+@tree-select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
+@tree-select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
+@tree-select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #d9d9d9);
+@tree-select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', #999);
+
+// font
+@tree-select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
+@tree-select-large-font-size: var(~'@{select-custom-prefix}-font-size-large', 16px); // 大号字体
+@tree-select-middle-font-size: var(~'@{select-custom-prefix}-font-size-middle', 14px); // 中号高度
+@tree-select-small-font-size: var(~'@{select-custom-prefix}-font-size-small', 12px); // 小号高度
+
+// line-height
+@tree-select-dropdown-line-height: var(~'@{select-custom-prefix}-dropdown-line-height', 22px);
+@tree-select-large-line-height: var(~'@{select-custom-prefix}-line-height-large', 28px);
+@tree-select-middle-line-height: var(~'@{select-custom-prefix}-line-height-middle', 22px);
+@tree-select-small-line-height: var(~'@{select-custom-prefix}-line-height-small', 14px);
+
+// sizing
+@tree-select-dropdown-height: var(~'@{select-custom-prefix}-item-sizing-height', 22px);
+@tree-select-large-height: var(~'@{select-custom-prefix}-sizing-height-large', 36px); // 大号高度 lh:28px
+@tree-select-middle-height: var(~'@{select-custom-prefix}-sizing-height-middle', 32px); // 中号高度lh:22px
+@tree-select-small-height: var(~'@{select-custom-prefix}-sizing-height-small', 24px); // 小号高度lh:12px
+
+// spacing
+@tree-select-bordered: var(~'@{select-custom-prefix}-bordered-spacing-padding-left', 8px);
+@tree-select-wrapper-padding: var(~'@{select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
+
+// radius
+@tree-select-g-radius-border: var(~'@{select-custom-prefix}-radius-border', @radius-border);
+@tree-select-border-radius-border: var(~'@{select-custom-prefix}-bordered-radius-border', 2px);
+
+// z-index
+@tree-select-z-index: var(~'@{select-custom-prefix}-z-index', @z-index-popper);
+
+
+
+
 @typography-prefix-cls: ~'@{kd-prefix}-typography';
 .@{typography-prefix-cls} {
   color: @typography-color-text-primary;