refactor: tree select style (ant-design#24291)

* chore(list): improve code (ant-design#24280) * chore(list): improve code * Update index.tsx * refactor: tree select style code * 🔒 lock antd-theme-generator to 1.2.2 mzohaibqc/antd-theme-generator#42 Co-authored-by: Tom Xu <ycxzhkx@gmail.com>
waydeechen · May 19, 2020 · 4feb186 · 4feb186
1 parent baa56b6
commit 4feb186
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 207 deletions.
diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less
@@ -1,6 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
-@import '../../tree/style/index';
+@import '../../tree/style/mixin';
 @import '../../checkbox/style/mixin';
 
 @tree-select-prefix-cls: ~'@{ant-prefix}-tree-select';

diff --git a/components/tree/style/index.less b/components/tree/style/index.less
@@ -6,212 +6,9 @@
 
 @tree-prefix-cls: ~'@{ant-prefix}-tree';
 @tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
-@tree-motion: ~'@{ant-prefix}-motion-collapse';
 
 .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');
 
-.antTreeFn(@custom-tree-prefix-cls) {
-  @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
-  .@{custom-tree-prefix-cls} {
-    .reset-component;
-    background: @tree-bg;
-    border-radius: @border-radius-base;
-    transition: background-color 0.3s;
-
-    &-focused:not(:hover):not(&-active-focused) {
-      background: @primary-1;
-    }
-
-    // =================== Virtual List ===================
-    &-list-holder-inner {
-      align-items: flex-start;
-    }
-
-    &.@{custom-tree-prefix-cls}-block-node {
-      .@{custom-tree-prefix-cls}-list-holder-inner {
-        align-items: stretch;
-
-        // >>> Title
-        .@{custom-tree-prefix-cls}-node-content-wrapper {
-          flex: auto;
-        }
-      }
-    }
-
-    // ===================== TreeNode =====================
-    .@{custom-tree-node-prefix-cls} {
-      display: flex;
-      align-items: flex-start;
-      padding: 0 0 (@padding-xs / 2) 0;
-      outline: none;
-      // Disabled
-      &-disabled {
-        // >>> Title
-        .@{custom-tree-prefix-cls}-node-content-wrapper {
-          color: @disabled-color;
-          cursor: not-allowed;
-
-          &:hover {
-            background: transparent;
-          }
-        }
-      }
-
-      &-active .@{custom-tree-prefix-cls}-node-content-wrapper {
-        background: @tree-node-hover-bg;
-      }
-    }
-
-    // >>> Indent
-    &-indent {
-      align-self: stretch;
-      white-space: nowrap;
-      user-select: none;
-
-      &-unit {
-        display: inline-block;
-        width: @tree-title-height;
-      }
-    }
-
-    // >>> Switcher
-    & &-switcher {
-      .antTreeSwitcherIcon();
-      flex: none;
-
-      width: @tree-title-height;
-      height: @tree-title-height;
-      margin: 0;
-      line-height: @tree-title-height;
-      text-align: center;
-      cursor: pointer;
-
-      &-noop {
-        cursor: default;
-      }
-
-      &_close {
-        .@{custom-tree-prefix-cls}-switcher-icon {
-          svg {
-            transform: rotate(-90deg);
-          }
-        }
-      }
-
-      &-loading-icon {
-        color: @primary-color;
-      }
-    }
-
-    // >>> Checkbox
-    & &-checkbox {
-      top: initial;
-      margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
-    }
-
-    // >>> Title
-    & &-node-content-wrapper {
-      min-height: @tree-title-height;
-      margin: 0;
-      padding: 0 4px;
-      color: inherit;
-      line-height: @tree-title-height;
-      background: transparent;
-      border-radius: @border-radius-base;
-      cursor: pointer;
-      transition: all 0.3s;
-
-      &:hover {
-        background-color: @tree-node-hover-bg;
-      }
-
-      &.@{custom-tree-prefix-cls}-node-selected {
-        background-color: @tree-node-selected-bg;
-      }
-
-      // Icon
-      .@{custom-tree-prefix-cls}-iconEle {
-        display: inline-block;
-        width: @tree-title-height;
-        height: @tree-title-height;
-        line-height: @tree-title-height;
-        text-align: center;
-        vertical-align: top;
-        &:empty {
-          display: none;
-        }
-      }
-    }
-
-    // ==================== Draggable =====================
-    &-node-content-wrapper[draggable='true'] {
-      line-height: @tree-title-height - 4px;
-      border-top: 2px transparent solid;
-      border-bottom: 2px transparent solid;
-      user-select: none;
-    }
-
-    .@{custom-tree-node-prefix-cls}.drag-over {
-      > [draggable] {
-        color: white;
-        background-color: @primary-color;
-        opacity: 0.8;
-      }
-    }
-    .@{custom-tree-node-prefix-cls}.drag-over-gap-top {
-      > [draggable] {
-        border-top-color: @primary-color;
-      }
-    }
-    .@{custom-tree-node-prefix-cls}.drag-over-gap-bottom {
-      > [draggable] {
-        border-bottom-color: @primary-color;
-      }
-    }
-
-    // ==================== Show Line =====================
-    &-show-line {
-      // ================ Indent lines ================
-      .@{custom-tree-prefix-cls}-indent {
-        &-unit {
-          position: relative;
-          height: 100%;
-
-          &::before {
-            position: absolute;
-            top: calc(100% - 4px);
-            right: -@tree-title-height / 2;
-            bottom: -@tree-title-height - 4px;
-            border-right: 1px solid @border-color-base;
-            content: '';
-          }
-
-          &-end {
-            &::before {
-              display: none;
-            }
-          }
-        }
-      }
-
-      /* Motion should hide line of measure */
-      .@{custom-tree-node-prefix-cls}-motion:not(.@{tree-motion}-leave):not(.@{tree-motion}-appear-active) {
-        .@{custom-tree-prefix-cls}-indent-unit {
-          &::before {
-            display: none;
-          }
-        }
-      }
-
-      // ============== Cover Background ==============
-      .@{custom-tree-prefix-cls}-switcher {
-        z-index: 1;
-        background: @component-background;
-      }
-    }
-  }
-}
-
 .antTreeFn(@tree-prefix-cls);
 
 @import './rtl';