amis-ui 2.6.0 → 2.7.0

package/scss/components/form/_range.scss

@@ -10,9 +10,10 @@
   }
 
   &-input {
-    width: 20 * 4px;
-    height: 8 * 4px;
-    margin: 0 2 * 4px;
+    width: var(--InputRange-input-width);
+    margin: var(--InputRange-input-marginTop)
+      var(--InputRange-input-marginRight) var(--InputRange-input-marginBottom)
+      var(--InputRange-input-marginLeft);
 
     .#{$ns}Number {
       overflow: hidden;
@@ -38,9 +39,12 @@
     cursor: pointer;
 
     svg {
-      height: px2rem(12px);
-      width: px2rem(12px);
-      fill: #999;
+      height: var(--InputRange-clearIcon-height);
+      width: var(--InputRange-clearIcon-width);
+      fill: var(--InputRange-clearIcon-color);
+    }
+    &:hover svg {
+      fill: var(--InputRange-clearIcon-hoverColor);
     }
   }
 
@@ -57,11 +61,18 @@
 
     .#{$ns}InputRange-handle-icon {
       border-color: var(--InputRange-handle-onDisabled-border-color);
+      background-color: var(--InputRange-handle-onDisabled-bg);
       cursor: not-allowed;
 
       &:hover {
         transform: none;
       }
+
+      .icon-slider-handle {
+        g path {
+          fill: var(--InputRange-handle-icon-onDisabled-color);
+        }
+      }
     }
 
     .#{$ns}Number-handler {
@@ -98,7 +109,7 @@
       justify-content: center;
       align-items: center;
       outline: none;
-      border-radius: 50%;
+      border-radius: var(--InputRange-handle-border-radius);
       transition: var(--InputRange-handle-transition);
 
       &:hover {
@@ -134,7 +145,7 @@
       top: 0;
 
       g path {
-        fill: var(--colors-brand-9);
+        fill: var(--InputRange-handle-icon-color);
       }
     }
   }
@@ -155,7 +166,7 @@
     }
 
     &-dot {
-      width: var(--InputRange-track-dot-height);
+      width: var(--InputRange-track-dot-width);
       height: var(--InputRange-track-dot-height);
       border-radius: 50%;
       background-color: var(--InputRange-track-dot-bg);
@@ -188,6 +199,8 @@
     background-color: var(--InputRange-label-bg);
     color: var(--InputRange-label-color);
     font-size: var(--InputRange-label-font-size);
+    font-weight: var(--InputRange-label-fontWeight);
+    line-height: var(--InputRange-label-lineHeight);
     border-radius: var(--InputRange-label-border-radius);
     visibility: hidden;
 
@@ -208,7 +221,8 @@
         bottom: -4px;
         border-width: 4px 4px 0 4px;
         border-style: solid;
-        border-color: #000 transparent transparent transparent;
+        border-color: var(--InputRange-label-bg) transparent transparent
+          transparent;
       }
     }
 
@@ -225,7 +239,8 @@
         top: -4px;
         border-width: 0 4px 4px 4px;
         border-style: solid;
-        border-color: transparent transparent #000 transparent;
+        border-color: transparent transparent var(--InputRange-label-bg)
+          transparent;
       }
     }
 
@@ -241,7 +256,8 @@
         right: -4px;
         border-width: 4px 0 4px 4px;
         border-style: solid;
-        border-color: transparent transparent transparent #000;
+        border-color: transparent transparent transparent
+          var(--InputRange-label-bg);
       }
     }
 
@@ -257,7 +273,8 @@
         left: -4px;
         border-width: 4px 4px 4px 0;
         border-style: solid;
-        border-color: transparent #000 transparent transparent;
+        border-color: transparent var(--InputRange-label-bg) transparent
+          transparent;
       }
     }
   }
@@ -266,6 +283,11 @@
   &-marks {
     position: relative;
     top: 8px;
+    color: var(--InputRange-marks-color);
+    font-size: var(--InputRange-marks-fontSize);
+    font-weight: var(--InputRange-marks-fontWeight);
+    line-height: var(--InputRange-marks-lineHeight);
+    margin-top: var(--InputRange-marks-marginTop);
     div {
       position: absolute;
       top: 0;

package/scss/components/form/_rating.scss

@@ -4,6 +4,7 @@
   align-items: center;
   justify-content: flex-start;
   flex-flow: row wrap;
+  content: var(--Rating-colors);
 
   & > ul {
     display: flex;
@@ -32,7 +33,7 @@
       height: px2rem(24px);
       top: 0;
     }
-  
+
     &:last-of-type {
       margin-right: 0;
     }
@@ -54,9 +55,10 @@
   }
 
   &-text {
-    font-size: var(--fontSizeMd);
+    font-size: var(--Rating-text-fontSize);
     color: var(--Rating-text-color);
-    font-weight: var(--fontWeightNormal);
+    font-weight: var(--Rating-text-fontWeight);
+    line-height: var(--Rating-text-lineHeight);
 
     &--left {
       margin-right: var(--Rating-star-margin);
@@ -68,6 +70,10 @@
   }
 }
 
+.Rating-star-icon {
+  content: var(--Rating-star-icon);
+}
+
 .#{$ns}RatingControl {
   position: relative;
   overflow: hidden;

package/scss/components/form/_switch.scss

@@ -5,7 +5,10 @@
   height: var(--Switch-height);
   min-width: var(--Switch-width);
   overflow: hidden;
-  border-radius: px2rem(30px);
+  border-radius: var(--switch-size-default-top-left-border-radius)
+    var(--switch-size-default-top-right-border-radius)
+    var(--switch-size-default-bottom-right-border-radius)
+    var(--switch-size-default-bottom-left-border-radius);
   background: var(--Switch-bgColor);
   margin: 0;
   vertical-align: middle;
@@ -18,21 +21,24 @@
   }
 
   .text {
-    margin: 0 var(--Switch-text-marginRight) 0 var(--Switch-text-marginLeft);
+    margin: var(--switch-text-off-marginTop) var(--Switch-text-marginRight)
+      var(--switch-text-off-marginBottom) var(--Switch-text-marginLeft);
     color: var(--Switch-valueColor);
     text-indent: var(--gap-xs);
     text-transform: uppercase;
-    font-size: var(--fontSizeSm);
+    font-size: var(--switch-text-off-fontSize);
+    font-weight: var(--switch-text-off-fontWeight);
     line-height: var(--Switch-height);
     vertical-align: super;
     font-style: normal;
-    font-weight: bold;
     transition: all var(--animation-duration);
 
     > svg {
-      width: var(--fontSizeSm);
-      height: var(--fontSizeSm);
-      margin-top: calc((var(--Switch-height) - var(--fontSizeSm)) / 2);
+      width: var(--switch-text-off-fontSize);
+      height: var(--switch-text-off-fontSize);
+      margin-top: calc(
+        (var(--Switch-height) - var(--switch-text-off-fontSize)) / 2
+      );
     }
   }
 
@@ -40,7 +46,7 @@
     &:before {
       content: '';
       position: absolute;
-      background: var(--white);
+      background: var(--switch-default-off-slider-color);
       width: var(--Switch-slider-width);
       top: var(--Switch-slider-margin);
       bottom: var(--Switch-slider-margin);
@@ -55,17 +61,23 @@
   }
 
   &.is-checked {
-    background: var(--Switch-onActive-bgColor);
+    background: var(--Switch-checked-bgColor);
 
     .slider::before {
-      left: auto;
+      left: calc(
+        100% - var(--Switch-slider-width) - var(--Switch-slider-margin)
+      );
       right: var(--Switch-slider-margin);
       border-width: 0;
+      background: var(--switch-default-on-slider-color);
     }
 
     .text {
-      color: var(--white);
-      margin: 0 var(--Switch-text-marginLeft) 0 var(--Switch-text-marginRight);
+      margin: var(--switch-text-on-marginTop) var(--switch-text-on-marginRight)
+        var(--switch-text-on-marginBottom) var(--switch-text-on-marginLeft);
+      color: var(--switch-text-on-color);
+      font-size: var(--switch-text-on-fontSize);
+      font-weight: var(--switch-text-on-fontWeight);
     }
 
     &:hover {
@@ -100,10 +112,15 @@
   &--sm {
     height: var(--Switch-height--sm);
     min-width: var(--Switch-width--sm);
+    border-radius: var(--switch-size-sm-top-left-border-radius)
+      var(--switch-size-sm-top-right-border-radius)
+      var(--switch-size-sm-bottom-right-border-radius)
+      var(--switch-size-sm-bottom-left-border-radius);
 
     .text {
       line-height: var(--Switch-height--sm);
-      margin: 0 var(--Switch-text-marginRight--sm) 0
+      margin: var(--switch-text-off-marginTop)
+        var(--Switch-text-marginRight--sm) var(--switch-text-off-marginBottom)
         var(--Switch-text-marginLeft--sm);
 
       > svg {
@@ -113,58 +130,39 @@
 
     .slider::before {
       width: var(--Switch-slider-width--sm);
+      top: var(--switch-size-sm-slider-margin);
+      bottom: var(--switch-size-sm-slider-margin);
+      left: var(--switch-size-sm-slider-margin);
+      right: auto;
     }
 
     &.is-checked {
       .slider::before {
-        right: var(--Switch-slider-margin);
-      }
-
-      .text {
-        margin: 0 var(--Switch-text-marginLeft--sm) 0
-          var(--Switch-text-marginRight--sm);
+        left: calc(
+          100% - var(--Switch-slider-width--sm) -
+            var(--switch-size-sm-slider-margin)
+        );
+        right: var(--switch-size-sm-slider-margin);
       }
     }
   }
 
-  .text {
-    margin: 0 px2rem(8px) 0 px2rem(25px);
-    vertical-align: super;
-  }
-  .slider {
-    &:before {
-      width: calc(var(--Switch-height) - #{px2rem(4px)});
-      top: px2rem(2px);
-      bottom: px2rem(2px);
-      left: px2rem(2px);
-      transition: all 0.5s ease;
-    }
-  }
   &:active {
     .slider::before {
       width: calc(var(--Switch-height) + #{px2rem(2px)});
       border-radius: 10px;
     }
   }
-  &.is-checked {
-    background: var(--Switch-checked-bgColor);
-
-    .slider::before {
-      right: auto;
-      left: calc(
-        100% - (var(--Switch-height) - #{px2rem(4px)}) - #{px2rem(2px)}
-      );
-    }
-
-    .text {
-      margin: 0 px2rem(25px) 0 px2rem(8px);
-    }
-  }
 }
 
 .#{$ns}Switch-option {
   vertical-align: middle;
-  margin-left: var(--Switch-gap);
+  font-size: var(--switch-option-fontSize);
+  font-weight: var(--switch-option-fontWeight);
+  line-height: var(--switch-option-lineHeight);
+  color: var(--switch-option-color);
+  margin: var(--switch-option-marginTop) var(--switch-option-marginRight)
+    var(--switch-option-marginBottom) var(--Switch-gap);
 
   &:first-child {
     margin-left: 0;

package/scss/components/form/_tag.scss

@@ -52,6 +52,7 @@
 
       @include button-size(
         var(--TagControl-sugBtn-fontSize),
+        var(--TagControl-sugBtn-fontWeight),
         var(--TagControl-sugBtn-lineHeight),
         var(--TagControl-sugBtn-borderRadius),
         var(--TagControl-sugBtn-borderRadius),

package/scss/components/form/_text.scss

@@ -1,6 +1,127 @@
 .#{$ns}TextControl {
   @include input-text();
 
+  .InputText-clear {
+    content: var(--input-clearable-icon);
+  }
+
+  &-clear {
+    padding: 0 var(--Form-input-clearBtn-padding);
+  }
+
+  .#{$ns}TextControl-clear svg {
+    font-size: var(--input-clearable-icon-size);
+    fill: var(--input-clearable-default-color);
+    width: var(--input-clearable-icon-size);
+    height: var(--input-clearable-icon-size);
+    &:hover {
+      fill: var(--input-clearable-hover-color);
+    }
+    &:active {
+      fill: var(--input-clearable-active-color);
+    }
+  }
+
+  &-input {
+    border-width: var(--input-default-default-top-border-width)
+      var(--input-default-default-right-border-width)
+      var(--input-default-default-bottom-border-width)
+      var(--input-default-default-left-border-width);
+    border-style: var(--input-default-default-top-border-style)
+      var(--input-default-default-right-border-style)
+      var(--input-default-default-bottom-border-style)
+      var(--input-default-default-left-border-style);
+    border-color: var(--input-default-default-top-border-color)
+      var(--input-default-default-right-border-color)
+      var(--input-default-default-bottom-border-color)
+      var(--input-default-default-left-border-color);
+    border-radius: var(--input-default-default-top-left-border-radius)
+      var(--input-default-default-top-right-border-radius)
+      var(--input-default-default-bottom-right-border-radius)
+      var(--input-default-default-bottom-left-border-radius);
+    padding: var(--input-default-default-paddingTop)
+      var(--input-default-default-paddingRight)
+      var(--input-default-default-paddingBottom)
+      var(--input-default-default-paddingLeft);
+    background: var(--input-default-default-bg-color);
+    height: var(--input-size-default-height);
+
+    &:hover,
+    &.hover {
+      border-width: var(--input-default-hover-top-border-width)
+        var(--input-default-hover-right-border-width)
+        var(--input-default-hover-bottom-border-width)
+        var(--input-default-hover-left-border-width);
+      border-style: var(--input-default-hover-top-border-style)
+        var(--input-default-hover-right-border-style)
+        var(--input-default-hover-bottom-border-style)
+        var(--input-default-hover-left-border-style);
+      border-color: var(--input-default-hover-top-border-color)
+        var(--input-default-hover-right-border-color)
+        var(--input-default-hover-bottom-border-color)
+        var(--input-default-hover-left-border-color);
+      border-radius: var(--input-default-hover-top-left-border-radius)
+        var(--input-default-hover-top-right-border-radius)
+        var(--input-default-hover-bottom-right-border-radius)
+        var(--input-default-hover-bottom-left-border-radius);
+      padding: var(--input-default-hover-paddingTop)
+        var(--input-default-hover-paddingRight)
+        var(--input-default-hover-paddingBottom)
+        var(--input-default-hover-paddingLeft);
+      background: var(--input-default-hover-bg-color);
+    }
+  }
+
+  &.is-focused > &-input,
+  &-input.active {
+    border-width: var(--input-default-active-top-border-width)
+      var(--input-default-active-right-border-width)
+      var(--input-default-active-bottom-border-width)
+      var(--input-default-active-left-border-width);
+    border-style: var(--input-default-active-top-border-style)
+      var(--input-default-active-right-border-style)
+      var(--input-default-active-bottom-border-style)
+      var(--input-default-active-left-border-style);
+    border-color: var(--input-default-active-top-border-color)
+      var(--input-default-active-right-border-color)
+      var(--input-default-active-bottom-border-color)
+      var(--input-default-active-left-border-color);
+    border-radius: var(--input-default-active-top-left-border-radius)
+      var(--input-default-active-top-right-border-radius)
+      var(--input-default-active-bottom-right-border-radius)
+      var(--input-default-active-bottom-left-border-radius);
+    padding: var(--input-default-active-paddingTop)
+      var(--input-default-active-paddingRight)
+      var(--input-default-active-paddingBottom)
+      var(--input-default-active-paddingLeft);
+    background: var(--input-default-active-bg-color);
+    box-shadow: var(--input-default-active-shadow);
+  }
+
+  &.is-disabled > &-input {
+    border-width: var(--input-default-disabled-top-border-width)
+      var(--input-default-disabled-right-border-width)
+      var(--input-default-disabled-bottom-border-width)
+      var(--input-default-disabled-left-border-width);
+    border-style: var(--input-default-disabled-top-border-style)
+      var(--input-default-disabled-right-border-style)
+      var(--input-default-disabled-bottom-border-style)
+      var(--input-default-disabled-left-border-style);
+    border-color: var(--input-default-disabled-top-border-color)
+      var(--input-default-disabled-right-border-color)
+      var(--input-default-disabled-bottom-border-color)
+      var(--input-default-disabled-left-border-color);
+    border-radius: var(--input-default-disabled-top-left-border-radius)
+      var(--input-default-disabled-top-right-border-radius)
+      var(--input-default-disabled-bottom-right-border-radius)
+      var(--input-default-disabled-bottom-left-border-radius);
+    padding: var(--input-default-disabled-paddingTop)
+      var(--input-default-disabled-paddingRight)
+      var(--input-default-disabled-paddingBottom)
+      var(--input-default-disabled-paddingLeft);
+    background: var(--input-default-disabled-bg-color);
+  }
+
   &-input input {
     overflow: hidden;
     white-space: nowrap;
@@ -77,18 +198,29 @@
     justify-content: center;
     padding-left: px2rem(10px);
     padding-right: px2rem(10px);
-    background: var(--Form-input-addOnBg);
+    background: var(--input-addon-text-bg-color-default);
     color: var(--Form-input-addOnColor);
-    border-color: var(--Form-input-borderColor);
-    border-style: solid;
-    border-width: px2rem(1px) 0;
+    border-width: var(--input-addon-text-top-border-width) 0
+      var(--input-addon-text-bottom-border-width) 0;
+    border-style: var(--input-addon-text-top-border-style)
+      var(--input-addon-text-right-border-style)
+      var(--input-addon-text-bottom-border-style)
+      var(--input-addon-text-left-border-style);
+    border-color: var(--input-addon-text-top-border-color)
+      var(--input-addon-text-right-border-color)
+      var(--input-addon-text-bottom-border-color)
+      var(--input-addon-text-left-border-color);
+
+    &:hover {
+      background: var(--input-addon-text-bg-color-hover);
+    }
 
     &:first-child {
-      border-left-width: px2rem(1px);
+      border-left-width: var(--input-addon-text-left-border-width);
     }
 
     &:last-child {
-      border-right-width: px2rem(1px);
+      border-right-width: var(--input-addon-text-right-border-width);
       border-top-right-radius: var(--Form-input-borderRadius);
       border-bottom-right-radius: var(--Form-input-borderRadius);
     }
@@ -275,7 +407,14 @@
   }
 
   &-counter {
-    color: var(--text--muted-color);
+    color: var(--input-count-single-color);
+    font-size: var(--input-count-single-fontSize);
+  }
+
+  &-inputPrefix,
+  &-inputSuffix {
+    color: var(--input-prefix-color);
+    font-size: var(--input-prefix-fontSize);
   }
 
   .has-error--maxLength &-counter {
@@ -290,17 +429,54 @@
   }
 
   &-revealPassword {
-    font-size: 0;
-    display: inline-flex;
+    padding: 0 var(--Form-input-clearBtn-padding);
+    cursor: pointer;
+    display: flex;
     align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    text-decoration: none;
 
-    .icon {
-      width: var(--Form-input-password-icon-size);
-      height: var(--Form-input-password-icon-size);
-      color: var(--Form-input-password-icon-color);
+    svg {
       cursor: pointer;
     }
   }
+
+  .InputText-invisible {
+    content: var(--input-password-invisible-icon);
+  }
+
+  .InputText-view {
+    content: var(--input-password-view-icon);
+  }
+
+  &-icon-view {
+    font-size: var(--input-password-view-icon-size);
+    fill: var(--input-password-view-icon-color);
+    color: var(--input-password-view-icon-color);
+    width: var(--input-password-view-icon-size);
+    height: var(--input-password-view-icon-size);
+    display: flex;
+    align-items: center;
+    svg {
+      width: var(--input-password-view-icon-size);
+      height: var(--input-password-view-icon-size);
+    }
+  }
+
+  &-icon-invisible {
+    font-size: var(--input-password-invisible-icon-size);
+    fill: var(--input-password-invisible-icon-color);
+    color: var(--input-password-invisible-icon-color);
+    width: var(--input-password-invisible-icon-size);
+    height: var(--input-password-invisible-icon-size);
+    display: flex;
+    align-items: center;
+    svg {
+      width: var(--input-password-invisible-icon-size);
+      height: var(--input-password-invisible-icon-size);
+    }
+  }
 }
 
 // 特殊处理 input-password。否则 form 内联模式，icon 会换行

package/scss/components/form/_textarea.scss

@@ -15,9 +15,10 @@
     border: 1px solid var(--Form-input-borderColor);
     border-radius: var(--Form-input-borderRadius);
     background: var(--Form-input-bg);
-    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
-    /* 避免和clear btn 重叠 */
-    padding-right: calc(var(--Form-input-paddingX) + var(--Form-fontSize));
+    padding: var(--input-textarea-paddingTop)
+      var(--input-textarea-paddingRight)
+      var(--input-textarea-paddingBottom)
+      var(--input-textarea-paddingLeft);
     font-size: var(--Form-input-fontSize);
     display: block;
     width: 100%;
@@ -43,15 +44,12 @@
     padding-bottom: var(--Form-input-paddingY);
     background-color: #fff;
     text-align: right;
-    // right: var(--Form-input-paddingX);
-    // bottom: var(--Form-input-paddingY);
-    font-size: var(--fontSizeSm);
-    // padding: 0 5px;
     border-radius: 3px;
-    color: #84868c;
+    color: var(--input-count-multi-color);
+    font-size: var(--input-count-multi-fontSize);
 
     &.is-empty {
-      color: #84868c;
+      color: var(--input-count-multi-color);
     }
   }
 

package/scss/components/form/_tree.scss

@@ -63,11 +63,16 @@
     position: relative;
   }
 
-  &--outline &-item--isLeaf {
+  &--outline &-item--isLeaf.is-child {
     &:before {
       position: absolute;
       top: -8px;
-      left: calc((var(--Tree-indent) - 5px) * -1);
+      left: calc(
+        (
+            var(--Tree-icon-gap) + var(--Tree-itemArrowWidth) +
+              var(--Tree-icon-margin-right)
+          ) / 2 - var(--Tree-indent)
+      );
       bottom: 0px;
       border-left: 1px solid var(--borderColor);
       content: '';