polestar-ui-kit/styles/components/tree/index.less

## Install

/**
 * Ant Design CSS Override
 */
@import '~antd/lib/tree/style/index';

@import '../../themes/default/index';
@import '../../mixins/index';

 @import "./mixin.less";

 @ps-tree-prefix-cls: ~"@{polestar-prefix}-tree";
 @tree-showline-icon-color: @text-color;
 
 @keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(0deg);
     transform: rotate(359deg);
     }
 }
 
.@{ps-tree-prefix-cls}-container {
    width: 100%;
   .tree-buttton-wrap {
        margin: 0 10px;
        border-bottom: 1px solid @gray-2;
        button {
            border: none !important;
            box-shadow: none;
        }
   }
   .@{ps-tree-prefix-cls}-header {
     display: flex;
     .@{ant-prefix}-input-suffix {
       i {
         cursor: pointer;
       }
     }
   }
   .@{tree-prefix-cls} {
     overflow: auto;
     margin-top: 10px;
     li {
       padding: 3px;
       &.@{tree-prefix-cls}-treenode-loading {
         span {
           &.@{tree-prefix-cls}-switcher {
             &.@{tree-prefix-cls}-switcher_open,
             &.@{tree-prefix-cls}-switcher_close {
               top: 11px !important;
             }
           }
         }
       }
       .@{tree-prefix-cls}-node-content-wrapper {
         color: @black;
         font-size: @font-size-base;
       }
       span {
         &.@{tree-prefix-cls}-switcher {
           line-height: 22px;
           &.@{tree-prefix-cls}-switcher-noop {
             cursor: default;
           }
           &.@{tree-prefix-cls}-switcher_open {
             .antTreeSwitcherIcon();
           }
           &.@{tree-prefix-cls}-switcher_close {
             .antTreeSwitcherIcon();
             &:after {
               transform: rotate(270deg) scale(1);
             }
           }
         }
         svg {
           display: none;
         }
       }
       // When node is loading
       &.@{tree-prefix-cls}-treenode-loading {
         span {
           &.@{tree-prefix-cls}-switcher {
             &.@{tree-prefix-cls}-switcher_open,
             &.@{tree-prefix-cls}-switcher_close {
               .@{tree-prefix-cls}-switcher-loading-icon {
                 width: 14px;
                 height: 5px;
                 top: 0;
                 left: 6px;
                 .antTreeSwitcherIcon("tree-loading-icon");
                 animation: spin 1.5s linear infinite;
               }
             }
           }
         }
       }
    }
   }
   .@{ps-tree-prefix-cls}-show-plus {
     li {
       span {
         &.@{tree-prefix-cls}-switcher {
           &.@{tree-prefix-cls}-switcher_open {
             .antTreeSwitcherIcon("tree-minus-icon");
           }
           &.@{tree-prefix-cls}-switcher_close {
             .antTreeSwitcherIcon("tree-plus-icon");
           }
         }
       }
     }
   }

   .tree-loading {
     padding-left: 10px;
     padding-top: 10px;

     margin: 0;
      // padding: 0;
      display: flex;
      // justify-content: center;
      // align-items: center;
      color: @primary-6;
      font-size: @font-size-base;
      &:before {
        font-family: "polestar";
        content: '\E263';
        margin: 0 5px 0 0;
        animation-name: spin;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

   }
 }
 
 .ant-tree.ant-tree-directory {
  .ant-tree-switcher.ant-tree-switcher_close::after {
    display: none;
  }
  .ant-tree-switcher.ant-tree-switcher_open::after {
    display: none;
  }
}