amis-ui 2.3.1 → 2.4.0

package/scss/components/form/_transfer.scss

@@ -17,18 +17,21 @@
   &-title {
     display: flex;
     align-items: center;
-    background: var(--Transfer-title-bg);
-    height: px2rem(30px);
-    line-height: var(--Form-input-lineHeight);
-    font-size: var(--Form-input-fontSize);
-    padding: calc(
-        (
-            #{px2rem(30px)} - var(--Form-input-lineHeight) * var(--Form-input-fontSize)
-          ) / 2
-      )
-      var(--gap-sm);
+    background: var(--transfer-base-title-bg);
+    color: var(--transfer-base-title-font-color);
+    line-height: var(--transfer-base-title-font-lineHeight);
+    font-size: var(--transfer-base-title-font-size);
+    font-weight: var(--transfer-base-title-font-weight);
+    font-family: var(--transfer-base-title-font-family);
+    padding: var(--transfer-base-header-paddingTop)
+      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;
-    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
 
     &--light {
       background: transparent;
@@ -39,20 +42,31 @@
     }
   }
 
-  &-select {
-    overflow: hidden;
-  }
-
   &-select,
   &-result {
+    overflow: hidden;
     width: 0;
     min-width: px2rem(200px);
     max-height: px2rem(400px);
     flex-grow: 1;
-    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
     display: flex;
     flex-direction: column;
-    border-radius: var(--borderRadius);
+    border-width: var(--transfer-base-top-border-width)
+      var(--transfer-base-right-border-width)
+      var(--transfer-base-bottom-border-width)
+      var(--transfer-base-left-border-width);
+    border-style: var(--transfer-base-top-border-style)
+      var(--transfer-base-right-border-style)
+      var(--transfer-base-bottom-border-style)
+      var(--transfer-base-left-border-style);
+    border-color: var(--transfer-base-top-border-color)
+      var(--transfer-base-right-border-color)
+      var(--transfer-base-bottom-border-color)
+      var(--transfer-base-left-border-color);
+    border-radius: var(--transfer-base-top-left-border-radius)
+      var(--transfer-base-top-right-border-radius)
+      var(--transfer-base-bottom-right-border-radius)
+      var(--transfer-base-bottom-left-border-radius);
   }
 
   &-select > &-selection,
@@ -61,7 +75,53 @@
     max-height: 100%;
     overflow: auto;
     position: relative; // 貌似不加 relative 会有 bug。
-    padding: 0;
+    padding: var(--transfer-base-body-paddingTop)
+      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);
+  }
+
+  .#{$ns}GroupedSelection-item,
+  .#{$ns}Selections-item {
+    padding: var(--transfer-base-option-paddingTop)
+      var(--transfer-base-option-paddingRight)
+      var(--transfer-base-option-paddingBottom)
+      var(--transfer-base-option-paddingLeft);
+    margin: var(--transfer-base-option-marginTop)
+      var(--transfer-base-option-marginRight)
+      var(--transfer-base-option-marginBottom)
+      var(--transfer-base-option-marginLeft);
+    line-height: var(--transfer-base-content-font-lineHeight);
+    font-size: var(--transfer-base-content-font-size);
+    font-weight: var(--transfer-base-content-font-weight);
+    font-family: var(--transfer-base-content-font-family);
+    color: var(--transfer-base-content-font-color);
+  }
+
+  .#{$ns}ChainedSelection-item {
+    padding: var(--transfer-chained-paddingTop)
+      var(--transfer-chained-paddingRight) var(--transfer-chained-paddingBottom)
+      var(--transfer-chained-paddingLeft);
+    margin: var(--transfer-chained-marginTop)
+      var(--transfer-chained-marginRight) var(--transfer-chained-marginBottom)
+      var(--transfer-chained-marginLeft);
+    line-height: var(--transfer-base-content-font-lineHeight);
+    font-size: var(--transfer-base-content-font-size);
+    font-weight: var(--transfer-base-content-font-weight);
+    font-family: var(--transfer-base-content-font-family);
+    color: var(--transfer-base-content-font-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);
   }
 
   &-select > .#{$ns}ChainedSelection {
@@ -128,7 +188,65 @@
   }
 
   &-search {
-    padding: var(--gap-sm);
+    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);
+
+    .#{$ns}InputBox {
+      font-size: var(--transfer-search-font-size);
+      font-weight: var(--transfer-search-font-weight);
+      line-height: var(--transfer-search-font-lineHeight);
+      font-family: var(--transfer-search-font-family);
+      color: var(--transfer-search-font-color);
+      border-width: var(--transfer-search-top-border-width)
+        var(--transfer-search-right-border-width)
+        var(--transfer-search-bottom-border-width)
+        var(--transfer-search-left-border-width);
+      border-style: var(--transfer-search-top-border-style)
+        var(--transfer-search-right-border-style)
+        var(--transfer-search-bottom-border-style)
+        var(--transfer-search-left-border-style);
+      border-color: var(--transfer-search-top-border-color)
+        var(--transfer-search-right-border-color)
+        var(--transfer-search-bottom-border-color)
+        var(--transfer-search-left-border-color);
+      border-radius: var(--transfer-search-top-left-border-radius)
+        var(--transfer-search-top-right-border-radius)
+        var(--transfer-search-bottom-right-border-radius)
+        var(--transfer-search-bottom-left-border-radius);
+      box-shadow: var(--transfer-search-shadow);
+      padding: var(--transfer-search-input-paddingTop)
+        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);
+      }
+
+      &.is-focused {
+        border-color: var(--transfer-search-border-active-color);
+      }
+
+      input {
+        color: var(--transfer-search-font-color);
+        font-size: var(--transfer-search-font-size);
+        font-weight: var(--transfer-search-font-weight);
+        line-height: var(--transfer-search-font-lineHeight);
+        font-family: var(--transfer-search-font-family);
+        height: var(--transfer-search-font-lineHeight);
+      }
+
+      input::placeholder {
+        color: var(--transfer-search-placeholder-font-color);
+      }
+    }
   }
 
   &-mid {
@@ -167,11 +285,85 @@
   }
 
   .#{$ns}Tree {
-    padding: px2rem(2px) px2rem(10px);
+    padding: var(--transfer-tree-paddingTop) var(--transfer-tree-paddingRight)
+      var(--transfer-tree-paddingBottom) var(--transfer-tree-paddingLeft);
+    margin: var(--transfer-tree-marginTop) var(--transfer-tree-marginLeft)
+      var(--transfer-tree-marginBottom) var(--transfer-tree-marginRight);
 
     &-itemLabel:hover::after {
       left: 0;
     }
+
+    &-itemLabel {
+      padding: var(--transfer-tree-option-paddingTop)
+        var(--transfer-tree-option-paddingRight)
+        var(--transfer-tree-option-paddingBottom)
+        var(--transfer-tree-option-paddingLeft);
+      margin: var(--transfer-tree-option-marginTop)
+        var(--transfer-tree-option-marginLeft)
+        var(--transfer-tree-option-marginBottom)
+        var(--transfer-tree-option-marginRight);
+      border-radius: var(--transfer-tree-top-left-border-radius)
+        var(--transfer-tree-top-right-border-radius)
+        var(--transfer-tree-bottom-right-border-radius)
+        var(--transfer-tree-bottom-left-border-radius);
+
+      &:hover {
+        background: var(--transfer-tree-bg-hover-color);
+      }
+
+      &.is-checked {
+        background: var(--transfer-tree-bg-active-color);
+      }
+    }
+
+    &-itemText {
+      line-height: var(--transfer-base-content-font-lineHeight);
+      font-size: var(--transfer-base-content-font-size);
+      font-weight: var(--transfer-base-content-font-weight);
+      font-family: var(--transfer-base-content-font-family);
+      color: var(--transfer-base-content-font-color);
+    }
+  }
+
+  .#{$ns}Table-content {
+    .#{$ns}Table-table > thead > tr > th {
+      padding: var(--transfer-table-header-paddingTop)
+        var(--transfer-table-header-paddingRight)
+        var(--transfer-table-header-paddingBottom)
+        var(--transfer-table-header-paddingLeft);
+      background: var(--transfer-base-title-bg);
+      color: var(--transfer-base-title-font-color);
+      line-height: var(--transfer-base-title-font-lineHeight);
+      font-size: var(--transfer-base-title-font-size);
+      font-weight: var(--transfer-base-title-font-weight);
+      font-family: var(--transfer-base-title-font-family);
+
+      &:last-child {
+        padding-right: var(--transfer-table-last-paddingRight);
+      }
+    }
+    .#{$ns}Table-table > tbody > tr > td {
+      padding: var(--transfer-table-option-paddingTop)
+        var(--transfer-table-option-paddingRight)
+        var(--transfer-table-option-paddingBottom)
+        var(--transfer-table-option-paddingLeft);
+      line-height: var(--transfer-base-content-font-lineHeight);
+      font-size: var(--transfer-base-content-font-size);
+      font-weight: var(--transfer-base-content-font-weight);
+      font-family: var(--transfer-base-content-font-family);
+
+      &:last-child {
+        padding-right: var(--transfer-table-last-paddingRight);
+      }
+    }
+  }
+
+  .#{$ns}Selections .#{$ns}TableSelection {
+    .#{$ns}Table-table > thead > tr,
+    .#{$ns}Table-table > tbody > tr {
+      height: auto;
+    }
   }
 }
 
@@ -275,6 +467,7 @@
 .#{$ns}TransferControl {
   position: relative;
   overflow: hidden;
+  box-shadow: var(--transfer-base-shadow);
 
   &.is-inline {
     display: inline-block;

package/scss/components/form/_tree-select.scss

@@ -4,6 +4,13 @@
   > .#{$ns}TreeSelect-popover {
     width: 100%;
   }
+  .#{$ns}PopOver {
+    box-shadow: var(--boxShadow);
+    .#{$ns}Tree {
+      border-radius: var(--borders-radius-3);
+      border: none;
+    }
+  }
 }
 
 .#{$ns}TreeSelect {