plain-design 1.0.0-beta.6 → 1.0.0-beta.61

package/src/packages/components/Tree/tree.scss

@@ -1,226 +1,259 @@
-@include comp(tree-node) {
-  display: flex;
-  align-items: center;
-  line-height: 22px;
-  padding-bottom: 1px;
-
-  .tree-node-operator > div, .tree-node-content {
-    transition: background-color linear 150ms, color linear 150ms;
-  }
-
-  .tree-node-operator {
-    display: flex;
-    align-self: stretch;
-    align-items: center;
-    user-select: none;
-    color: plv(text-3);
-
-    & > div:not(:last-child) {
-      margin-right: 4px;
-    }
-
-    .tree-node-connector, .tree-node-expander, .tree-node-checker, .tree-node-draggier {
-      height: 20px;
-      width: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 99px;
-
-      &:hover:not(.tree-node-connector) {
-        background-color: plv(background-hover);
-        cursor: pointer;
-      }
-    }
-
-    .tree-node-connector {
-      position: relative;
-
-      &:before, &:after {
-        background-color: #ccc;
-        //background-color: #DCE0E6;
-      }
-
-      &.tree-node-connector-x {
-        &:after {
-          position: absolute;
-          top: 50%;
-          left: 8.5px;
-          height: 1px;
-          width: 6px;
-          content: '';
-          transform: scaleY(0.5);
-        }
-      }
-
-      &.tree-node-connector-y {
-        &:before {
-          position: absolute;
-          content: '';
-          width: 1px;
-          left: 8px;
-          top: 0;
-          bottom: -14px;
-          transform: scaleX(0.5);
-        }
-
-        &.tree-node-connector-y-prev {
-          &:before {
-            height: 50%;
-            bottom: initial;
-          }
-        }
-
-        &.tree-node-connector-y-next {
-          &:before {
-            //height: 50%;
-            //top: initial;
-          }
-        }
-      }
-
-      &.tree-node-connector-hide {
-        opacity: 0;
-      }
-    }
-  }
-
-  .tree-node-content {
-    padding: 5px 8px;
-    color: plv(text-2);
-
-    &:hover {
-      background-color: plv(background-hover);
-      cursor: pointer;
-    }
-  }
-
-  &.tree-node-current, &.tree-node-single-check {
-    .tree-node-content {
-      &, &:hover {
-        background-color: plv(primary-light-1);
-        color: plv(primary-6);
-      }
-    }
-  }
-
-  .tree-node-draggier {
-    &:hover {
-      background-color: plv(background-hover);
-      cursor: move;
-    }
-
-    &.tree-node-draggier-disable {
-      border-radius: 0;
-      background-color: plv(background-hover);
-      @include prefix(icon) {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-@include comp(tree) {
-  display: block;
-  min-height: 80px;
-
-  .tree-inner {
-    display: inline-block;
-    position: relative;
-    min-height: 50px;
-    min-width: 50px;
-  }
-
-  &.tree-display-block {
-    .tree-inner {
-      display: block;
-      min-width: initial;
-
-      @include prefix(tree-node) {
-        .tree-node-content {
-          flex: 1;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-  }
-
-  &.tree-scroll {
-    height: 100%;
-
-    .tree-inner {
-      height: 100%;
-    }
-  }
-
-  &:not(.tree-content-wrap) {
-    .tree-node-content {
-      white-space: nowrap;
-    }
-  }
-
-  .tree-no-data, .tree-no-match {
-    text-align: center;
-    padding: 16px 0;
-    color: plv(text-3);
-  }
-
-  &.tree-expander-cover {
-    .tree-node-expander {
-      border-radius: 2px;
-      background-color: plv(secondary-2);
-      transform: scale(0.75);
-    }
-  }
-
-  /*---------------------------------------connector-------------------------------------------*/
-  &:not(.tree-with-connector) {
-    @include prefix(tree-node) {
-      .tree-node-connector {
-        &:before, &:after {
-          display: none;
-        }
-      }
-    }
-  }
-
-  /*---------------------------------------size-------------------------------------------*/
-  &.tree-size-large, &.tree-size-normal {
-    @include prefix(tree-node) {
-      line-height: 22px;
-      font-size: plv(font-size-normal);
-      .tree-node-content {
-        padding: 5px 8px;
-      }
-    }
-  }
-  &.tree-size-small, &.tree-size-mini {
-    @include prefix(tree-node) {
-      line-height: 20px;
-      font-size: plv(font-size-small);
-      .tree-node-content {
-        padding: 2px 4px;
-      }
-    }
-  }
-
-  @include sizeMixin(tree, ()) {
-    .tree-node-content {
-      border-radius: plv(box-size-#{$name}-border-radius);
-    }
-  }
-}
-
-@include comp(tree-draggier-indicator) {
-  position: fixed;
-  pointer-events: none;
-
-  &[data-available=true] {
-    background-color: plv(primary-6);
-  }
-  &[data-available=false] {
-    background-color: plv(error-6);
-  }
-}
+@include comp(tree-node) {
+  display: flex;
+  align-items: center;
+  line-height: 22px;
+  padding-bottom: 1px;
+  position: relative;
+
+  .tree-node-operator > div, .tree-node-content {
+    transition: background-color linear 150ms, color linear 150ms;
+  }
+
+  .tree-node-operator {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    user-select: none;
+    color: plv(text-3);
+
+    & > div:not(:last-child) {
+      margin-right: 4px;
+    }
+
+    .tree-node-connector, .tree-node-expander, .tree-node-checker, .tree-node-draggier {
+      height: 20px;
+      width: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 99px;
+
+      &:hover:not(.tree-node-connector) {
+        background-color: plv(background-hover);
+        cursor: pointer;
+      }
+    }
+
+    .tree-node-connector {
+      position: relative;
+
+      &:before, &:after {
+        background-color: #ccc;
+        //background-color: #DCE0E6;
+      }
+
+      &.tree-node-connector-x {
+        &:after {
+          position: absolute;
+          top: 50%;
+          left: 8.5px;
+          height: 1px;
+          width: 6px;
+          content: '';
+          transform: scaleY(0.5);
+        }
+      }
+
+      &.tree-node-connector-y {
+        &:before {
+          position: absolute;
+          content: '';
+          width: 1px;
+          left: 8px;
+          top: 0;
+          bottom: -14px;
+          transform: scaleX(0.5);
+        }
+
+        &.tree-node-connector-y-prev {
+          &:before {
+            height: 50%;
+            bottom: initial;
+          }
+        }
+
+        &.tree-node-connector-y-next {
+          &:before {
+            //height: 50%;
+            //top: initial;
+          }
+        }
+      }
+
+      &.tree-node-connector-hide {
+        opacity: 0;
+      }
+    }
+  }
+
+  .tree-node-content {
+    padding: 5px 8px;
+    color: plv(text-2);
+  }
+
+  .tree-node-operator, .tree-node-content {
+    position: relative;
+    z-index: 2;
+  }
+
+  &:after {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    border-radius: plv(border-radius-normal);
+    content: '';
+    transition: background-color ease 0.3s;
+  }
+
+  &:hover:not(.tree-node-current):not(.tree-node-single-check) {
+    cursor: pointer;
+
+    &:after {
+      background-color: plv(background-hover);
+      content: '';
+    }
+  }
+
+  &.tree-node-current, &.tree-node-single-check, &.tree-node-multi-check {
+
+    .tree-node-operator, .tree-node-content {
+      color: plv(primary-6);
+    }
+
+    &:after {
+      background-color: plv(primary-light-1);
+      content: '';
+    }
+  }
+
+  .tree-node-draggier {
+    &:hover {
+      background-color: plv(background-hover);
+      cursor: move;
+    }
+
+    &.tree-node-draggier-disable {
+      border-radius: 0;
+      background-color: plv(background-hover);
+      @include prefix(icon) {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+@include comp(tree) {
+  display: block;
+  min-height: 80px;
+
+  .tree-inner {
+    display: inline-block;
+    position: relative;
+    min-height: 50px;
+    min-width: 50px;
+  }
+
+  &.tree-display-block {
+    .tree-inner {
+      display: block;
+      min-width: initial;
+
+      @include prefix(tree-node) {
+        .tree-node-content {
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+
+  &.tree-scroll {
+    height: 100%;
+
+    .tree-inner {
+      height: 100%;
+    }
+  }
+
+  &:not(.tree-content-wrap) {
+    .tree-node-content {
+      white-space: nowrap;
+    }
+  }
+
+  .tree-no-data, .tree-no-match {
+    text-align: center;
+    padding: 16px 0;
+    color: plv(text-3);
+  }
+
+  &.tree-expander-cover {
+    @include comp(tree-node) {
+      &:not(.tree-node-lead) {
+        .tree-node-expander {
+          background-color: plv(secondary-2);
+        }
+      }
+    }
+
+    .tree-node-expander {
+      border-radius: 2px;
+      transform: scale(0.75);
+    }
+  }
+
+  /*---------------------------------------connector-------------------------------------------*/
+  &:not(.tree-with-connector) {
+    @include prefix(tree-node) {
+      .tree-node-connector {
+        &:before, &:after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  /*---------------------------------------size-------------------------------------------*/
+  &.tree-size-large, &.tree-size-normal {
+    @include prefix(tree-node) {
+      line-height: 22px;
+      font-size: plv(font-size-normal);
+      .tree-node-content {
+        padding: 5px 8px;
+      }
+    }
+  }
+  &.tree-size-small, &.tree-size-mini {
+    @include prefix(tree-node) {
+      line-height: 20px;
+      font-size: plv(font-size-small);
+      .tree-node-content {
+        padding: 2px 4px;
+      }
+    }
+  }
+
+  @include sizeMixin(tree, ()) {
+    .tree-node-content {
+      border-radius: plv(box-size-#{$name}-border-radius);
+    }
+  }
+}
+
+@include comp(tree-draggier-indicator) {
+  position: fixed;
+  pointer-events: none;
+  z-index: 10;
+
+  &[data-available=true] {
+    background-color: plv(primary-6);
+  }
+  &[data-available=false] {
+    background-color: plv(error-6);
+  }
+}