amis-ui 2.9.0 → 3.0.0

package/scss/components/form/_transfer.scss

@@ -18,7 +18,7 @@
     display: flex;
     align-items: center;
     background: var(--transfer-base-title-bg);
-    color: var(--transfer-base-title-font-color);
+    color: var(--transfer-base-title-color);
     line-height: var(--transfer-base-title-lineHeight);
     font-size: var(--transfer-base-title-fontSize);
     font-weight: var(--transfer-base-title-fontWeight);
@@ -27,10 +27,6 @@
       var(--transfer-base-header-paddingRight)
       var(--transfer-base-header-paddingBottom)
       var(--transfer-base-header-paddingLeft);
-    margin: var(--transfer-base-header-marginTop)
-      var(--transfer-base-header-marginRight)
-      var(--transfer-base-header-marginBottom)
-      var(--transfer-base-header-marginLeft);
     flex-direction: row;
     width: 100%;
 
@@ -80,10 +76,6 @@
       var(--transfer-base-body-paddingRight)
       var(--transfer-base-body-paddingBottom)
       var(--transfer-base-body-paddingLeft);
-    margin: var(--transfer-base-body-marginTop)
-      var(--transfer-base-body-marginRight)
-      var(--transfer-base-body-marginBottom)
-      var(--transfer-base-body-marginLeft);
     width: 100%;
   }
 
@@ -101,7 +93,7 @@
     font-size: var(--transfer-base-content-fontSize);
     font-weight: var(--transfer-base-content-fontWeight);
 
-    color: var(--transfer-base-content-font-color);
+    color: var(--transfer-base-content-color);
   }
 
   .#{$ns}ChainedSelection-item {
@@ -115,15 +107,14 @@
     font-size: var(--transfer-base-content-fontSize);
     font-weight: var(--transfer-base-content-fontWeight);
 
-    color: var(--transfer-base-content-font-color);
+    color: var(--transfer-base-content-color);
   }
 
   .#{$ns}GroupedSelection-group > .#{$ns}GroupedSelection-itemLabel {
-    font-size: var(--transfer-group-font-size);
-    font-weight: var(--transfer-group-font-weight);
-    line-height: var(--transfer-group-font-lineHeight);
-    font-family: var(--transfer-group-font-family);
-    color: var(--transfer-group-font-color);
+    font-size: var(--transfer-group-fontSize);
+    font-weight: var(--transfer-group-fontWeight);
+    line-height: var(--transfer-group-lineHeight);
+    color: var(--transfer-group-color);
   }
 
   &-select > .#{$ns}ChainedSelection {
@@ -197,14 +188,12 @@
     padding: var(--transfer-search-paddingTop)
       var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom)
       var(--transfer-search-paddingLeft);
-    margin: var(--transfer-search-marginTop) var(--transfer-search-marginRight)
-      var(--transfer-search-marginBottom) var(--transfer-search-marginLeft);
     width: 100%;
     .#{$ns}InputBox {
       font-size: var(--transfer-search-fontSize);
       font-weight: var(--transfer-search-fontWeight);
       line-height: var(--transfer-search-lineHeight);
-      color: var(--transfer-search-font-color);
+      color: var(--transfer-search-color);
       border-width: var(--transfer-search-top-border-width)
         var(--transfer-search-right-border-width)
         var(--transfer-search-bottom-border-width)
@@ -226,10 +215,6 @@
         var(--transfer-search-input-paddingRight)
         var(--transfer-search-input-paddingBottom)
         var(--transfer-search-input-paddingLeft);
-      margin: var(--transfer-search-input-marginTop)
-        var(--transfer-search-input-marginRight)
-        var(--transfer-search-input-marginBottom)
-        var(--transfer-search-input-marginLeft);
 
       &:hover {
         border-color: var(--transfer-search-border-hover-color);
@@ -240,7 +225,7 @@
       }
 
       input {
-        color: var(--transfer-search-font-color);
+        color: var(--transfer-search-color);
         font-size: var(--transfer-search-fontSize);
         font-weight: var(--transfer-search-fontWeight);
         line-height: var(--transfer-search-lineHeight);
@@ -312,13 +297,20 @@
         var(--transfer-tree-top-right-border-radius)
         var(--transfer-tree-bottom-right-border-radius)
         var(--transfer-tree-bottom-left-border-radius);
+      overflow: hidden;
 
       &:hover {
         background: var(--transfer-tree-bg-hover-color);
+        .#{$ns}Tree-itemLabel-item {
+          background: var(--transfer-tree-bg-hover-color);
+        }
       }
 
       &.is-checked {
         background: var(--transfer-tree-bg-active-color);
+        .#{$ns}Tree-itemLabel-item {
+          background: var(--transfer-tree-bg-active-color);
+        }
       }
     }
 
@@ -327,7 +319,7 @@
       font-size: var(--transfer-base-content-fontSize);
       font-weight: var(--transfer-base-content-fontWeight);
 
-      color: var(--transfer-base-content-font-color);
+      color: var(--transfer-base-content-color);
     }
   }
 
@@ -338,7 +330,7 @@
         var(--transfer-table-header-paddingBottom)
         var(--transfer-table-header-paddingLeft);
       background: var(--transfer-base-title-bg);
-      color: var(--transfer-base-title-font-color);
+      color: var(--transfer-base-title-color);
       line-height: var(--transfer-base-title-lineHeight);
       font-size: var(--transfer-base-content-fontSize);
 

package/scss/components/form/_tree.scss

@@ -1,14 +1,7 @@
 .#{$ns}TreeControl {
-  border: 1px solid var(--Form-input-borderColor);
+  border: 1px solid var(--inputTree-border-color);
   padding: 6px 12px;
   border-radius: 2px;
-  max-height: var(--Tree-max-height);
-  overflow: auto;
-
-  &.h-full {
-    max-height: none;
-    overflow: visible;
-  }
 
   &.no-border {
     border: 0;
@@ -32,6 +25,11 @@
     max-height: var(--Tree-max-height);
     overflow: auto;
   }
+
+  &.h-auto > .#{$ns}Tree {
+    max-height: none;
+    overflow: visible;
+  }
 }
 
 .#{$ns}Tree {
@@ -54,6 +52,15 @@
     position: relative;
 
     > div {
+      color: var(--inputTree-base-default-color);
+
+      &:hover {
+        color: var(--inputTree-base-hover-color);
+      }
+
+      &:active {
+        color: var(--inputTree-base-active-color);
+      }
       &:hover {
         text-decoration: none;
 
@@ -76,6 +83,12 @@
 
   &.is-disabled {
     pointer-events: none;
+    .#{$ns}Tree-itemLabel.is-disabled {
+      color: var(--inputTree-base-disabled-color);
+      .#{$ns}Tree-itemArrow > svg {
+        color: var(--inputTree-base-disabled-expandColor);
+      }
+    }
   }
 
   &.is-draggable {
@@ -142,6 +155,10 @@
         }
       }
     }
+
+    .#{$ns}Checkbox {
+      margin-right: var(--inputTree-checkboxes-size-marginRight);
+    }
   }
 
   &-item {
@@ -157,7 +174,7 @@
       }
     }
     .is-disabled {
-      color: var(--text--muted-color);
+      color: var(--inputTree-item-disabled-color);
       background: none;
       &:hover {
         background: none;
@@ -215,20 +232,20 @@
       width: 100%;
       outline: none;
       background: var(--Form-input-bg);
-      border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
-      border-radius: var(--Form-input-borderRadius);
-      line-height: var(--Form-input-lineHeight);
+      border: var(--Form-input-borderWidth) solid var(--inputTree-border-color);
+      border-radius: var(--inputTree-border-radius);
+      line-height: var(--inputTree-input-lineHeight);
       padding: calc(
           (
-              var(--Tree-inputHeight) - var(--Form-input-lineHeight) *
-                var(--Form-input-fontSize) - #{px2rem(2px)}
+              var(--Tree-inputHeight) - var(--inputTree-input-lineHeight) *
+                var(--inputTree-fontSize) - #{px2rem(2px)}
             ) / 2
         )
         var(--Form-input-paddingX);
-      font-size: var(--Form-input-fontSize);
+      font-size: var(--inputTree-fontSize);
 
       &::placeholder {
-        color: var(--Form-input-placeholderColor);
+        color: var(--inputTree-placeholder-color);
         user-select: none;
       }
 
@@ -252,7 +269,7 @@
 
     &.is-disabled {
       pointer-events: none;
-      color: var(--text--muted-color);
+      color: var(--inputTree-item-disabled-color);
     }
 
     > svg {
@@ -268,7 +285,7 @@
     cursor: pointer;
     width: var(--Tree-itemArrowWidth);
     display: inline-flex;
-    margin-right: var(--Tree-icon-margin-right);
+    margin-right: var(--inputTree-base-size-expandMarginRight);
 
     // &:before {
     //   font-style: normal;
@@ -281,7 +298,15 @@
       display: block;
       transition: transform var(--animation-duration);
       top: 0;
-      color: var(--Tree-item-arrow-color);
+      color: var(--inputTree-base-default-expandColor);
+
+      &:hover {
+        color: var(--inputTree-base-hover-expandColor);
+      }
+
+      &:active {
+        color: var(--inputTree-base-active-expandColor);
+      }
     }
 
     &.is-folded > svg {
@@ -305,7 +330,7 @@
 
   &-itemIcon {
     display: inline-flex;
-    margin-right: var(--Tree-icon-margin-right);
+    margin-right: var(--inputTree-base-size-nodeMarginRight);
   }
 
   &-rootIcon,
@@ -322,19 +347,26 @@
     cursor: pointer;
     flex: 1 auto;
     display: inline-block;
-    color: var(--select-tree-color);
+    color: var(--inputTree-base-default-color);
     font-size: var(--select-tree-fontSize);
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    &:hover {
+      color: var(--inputTree-base-hover-color);
+    }
+    &:active {
+      color: var(--inputTree-base-active-color);
+    }
   }
   .is-disabled &-itemText {
-    color: var(--text--muted-color);
+    color: var(--inputTree-base-disabled-color);
   }
 
   &-placeholder {
-    color: var(--text--muted-color);
+    color: var(--inputTree-placeholder-color);
   }
 
   &-dropIndicator {