amis-ui 2.6.0 → 2.7.0

package/scss/components/form/_checks.scss

@@ -69,12 +69,48 @@
 
   &--checkbox {
     padding-left: var(--Checkbox-size);
+    font-size: var(--checkbox-checkbox-default-fontSize);
+    color: var(--checkbox-checkbox-default-color);
 
     input {
       margin-left: calc(var(--Checkbox-size) * -1);
 
       &:checked + i {
-        border-color: var(--Checkbox-onHover-color);
+        border-width: var(--checkbox-checked-default-top-border-width)
+          var(--checkbox-checked-default-right-border-width)
+          var(--checkbox-checked-default-bottom-border-width)
+          var(--checkbox-checked-default-left-border-width);
+        border-style: var(--checkbox-checked-default-top-border-style)
+          var(--checkbox-checked-default-right-border-style)
+          var(--checkbox-checked-default-bottom-border-style)
+          var(--checkbox-checked-default-left-border-style);
+        border-color: var(--checkbox-checked-default-top-border-color)
+          var(--checkbox-checked-default-right-border-color)
+          var(--checkbox-checked-default-bottom-border-color)
+          var(--checkbox-checked-default-left-border-color);
+        border-radius: var(--checkbox-checked-default-top-left-border-radius)
+          var(--checkbox-checked-default-top-right-border-radius)
+          var(--checkbox-checked-default-bottom-right-border-radius)
+          var(--checkbox-checked-default-bottom-left-border-radius);
+
+        &:hover {
+          border-width: var(--checkbox-checkbox-hover-top-border-width)
+            var(--checkbox-checkbox-hover-right-border-width)
+            var(--checkbox-checkbox-hover-bottom-border-width)
+            var(--checkbox-checkbox-hover-left-border-width);
+          border-style: var(--checkbox-checkbox-hover-top-border-style)
+            var(--checkbox-checkbox-hover-right-border-style)
+            var(--checkbox-checkbox-hover-bottom-border-style)
+            var(--checkbox-checkbox-hover-left-border-style);
+          border-color: var(--checkbox-checkbox-hover-top-border-color)
+            var(--checkbox-checkbox-hover-right-border-color)
+            var(--checkbox-checkbox-hover-bottom-border-color)
+            var(--checkbox-checkbox-hover-left-border-color);
+          border-radius: var(--checkbox-checkbox-hover-top-left-border-radius)
+            var(--checkbox-checkbox-hover-top-right-border-radius)
+            var(--checkbox-checkbox-hover-bottom-right-border-radius)
+            var(--checkbox-checkbox-hover-bottom-left-border-radius);
+        }
 
         &:before {
           width: var(--Checkbox-inner-size);
@@ -105,6 +141,63 @@
       border: px2rem(1px) solid var(--Checkbox-color);
       border-radius: var(--Checkbox-borderRadius);
       margin-left: calc(var(--Checkbox-size) * -1);
+
+      border-width: var(--checkbox-checkbox-default-top-border-width)
+        var(--checkbox-checkbox-default-right-border-width)
+        var(--checkbox-checkbox-default-bottom-border-width)
+        var(--checkbox-checkbox-default-left-border-width);
+      border-style: var(--checkbox-checkbox-default-top-border-style)
+        var(--checkbox-checkbox-default-right-border-style)
+        var(--checkbox-checkbox-default-bottom-border-style)
+        var(--checkbox-checkbox-default-left-border-style);
+      border-color: var(--checkbox-checkbox-default-top-border-color)
+        var(--checkbox-checkbox-default-right-border-color)
+        var(--checkbox-checkbox-default-bottom-border-color)
+        var(--checkbox-checkbox-default-left-border-color);
+      border-radius: var(--checkbox-checkbox-default-top-left-border-radius)
+        var(--checkbox-checkbox-default-top-right-border-radius)
+        var(--checkbox-checkbox-default-bottom-right-border-radius)
+        var(--checkbox-checkbox-default-bottom-left-border-radius);
+      background: var(--checkbox-checkbox-default-bg-color);
+
+      &:hover {
+        border-width: var(--checkbox-checkbox-hover-top-border-width)
+          var(--checkbox-checkbox-hover-right-border-width)
+          var(--checkbox-checkbox-hover-bottom-border-width)
+          var(--checkbox-checkbox-hover-left-border-width);
+        border-style: var(--checkbox-checkbox-hover-top-border-style)
+          var(--checkbox-checkbox-hover-right-border-style)
+          var(--checkbox-checkbox-hover-bottom-border-style)
+          var(--checkbox-checkbox-hover-left-border-style);
+        border-color: var(--checkbox-checkbox-hover-top-border-color)
+          var(--checkbox-checkbox-hover-right-border-color)
+          var(--checkbox-checkbox-hover-bottom-border-color)
+          var(--checkbox-checkbox-hover-left-border-color);
+        border-radius: var(--checkbox-checkbox-hover-top-left-border-radius)
+          var(--checkbox-checkbox-hover-top-right-border-radius)
+          var(--checkbox-checkbox-hover-bottom-right-border-radius)
+          var(--checkbox-checkbox-hover-bottom-left-border-radius);
+        background: var(--checkbox-checkbox-hover-bg-color);
+      }
+      &:active {
+        border-width: var(--checkbox-checkbox-active-top-border-width)
+          var(--checkbox-checkbox-active-right-border-width)
+          var(--checkbox-checkbox-active-bottom-border-width)
+          var(--checkbox-checkbox-active-left-border-width);
+        border-style: var(--checkbox-checkbox-active-top-border-style)
+          var(--checkbox-checkbox-active-right-border-style)
+          var(--checkbox-checkbox-active-bottom-border-style)
+          var(--checkbox-checkbox-active-left-border-style);
+        border-color: var(--checkbox-checkbox-active-top-border-color)
+          var(--checkbox-checkbox-active-right-border-color)
+          var(--checkbox-checkbox-active-bottom-border-color)
+          var(--checkbox-checkbox-active-left-border-color);
+        border-radius: var(--checkbox-checkbox-active-top-left-border-radius)
+          var(--checkbox-checkbox-active-top-right-border-radius)
+          var(--checkbox-checkbox-active-bottom-right-border-radius)
+          var(--checkbox-checkbox-active-bottom-left-border-radius);
+        background: var(--checkbox-checkbox-active-bg-color);
+      }
     }
 
     &.#{$ns}Checkbox {
@@ -119,7 +212,7 @@
 
       &:active {
         & > i:before {
-          background: var(--Switch-checked-onHover-bgColor);
+          background: var(--Checkbox-checked-onHover-bgColor);
         }
       }
     }
@@ -136,7 +229,7 @@
         border-color: transparent;
 
         &:before {
-          background: var(--button-primary-hover-bg-color);
+          background: var(--checkbox-checked-hover-bg-color);
         }
       }
 
@@ -147,10 +240,10 @@
 
     &:active {
       input:checked + i {
-        background: var(--Switch-checked-onHover-bgColor);
+        background: var(--Checkbox-checked-onHover-bgColor);
 
         &:before {
-          background: var(--Switch-checked-onHover-bgColor);
+          background: var(--Checkbox-checked-onHover-bgColor);
         }
       }
     }
@@ -159,6 +252,9 @@
       &:checked + i {
         border-color: var(--Checkbox-onHover-color);
         background: var(--Checkbox-onHover-color);
+        &:hover {
+          background: var(--checkbox-checked-hover-bg-color);
+        }
 
         &:before {
           width: var(--Checkbox--full-inner-size);
@@ -169,7 +265,7 @@
 
       &[disabled] + i {
         border-color: var(--Checkbox-color);
-        background: var(--Checkbox-onDisabled-bg);
+        background: var(--checkbox-checkbox-disabled-bg-color);
       }
 
       &[disabled]:checked + i {
@@ -274,8 +370,8 @@
     &:active {
       input:checked + i {
         background: transparent;
-        border-color: var(--Switch-checked-onHover-bgColor) transparent
-          transparent var(--Switch-checked-onHover-bgColor);
+        border-color: var(--Checkbox-checked-onHover-bgColor) transparent
+          transparent var(--Checkbox-checked-onHover-bgColor);
       }
     }
 
@@ -352,9 +448,9 @@
       box-shadow: -1px 0 0 0 var(--menu-active-color);
     }
     &:active {
-      border-color: var(--Switch-checked-onHover-bgColor);
-      color: var(--Switch-checked-onHover-bgColor);
-      box-shadow: -1px 0 0 0 var(--Switch-checked-onHover-bgColor);
+      border-color: var(--Checkbox-checked-onHover-bgColor);
+      color: var(--Checkbox-checked-onHover-bgColor);
+      box-shadow: -1px 0 0 0 var(--Checkbox-checked-onHover-bgColor);
     }
   }
   &--button--disabled--unchecked.#{$ns}Checkbox--checkbox {
@@ -379,6 +475,11 @@
 
       &:checked + i {
         border-color: var(--Radio-onHover-color);
+        background-color: var(--radio-default-active-bg-color);
+
+        + span {
+          color: var(--radio-default-active-text-color);
+        }
 
         &:before {
           width: var(--Radio-inner-size);
@@ -400,7 +501,7 @@
 
       &[disabled] + i + span {
         cursor: not-allowed;
-        color: var(--text--muted-color);
+        color: var(--radio-default-disabled-text-color);
       }
 
       &:focus + i {
@@ -416,6 +517,28 @@
       margin-left: calc(var(--Radio-size) * -1);
       margin-top: px2rem(-2px);
       border-radius: 50%;
+      background: var(--radio-default-default-bg-color);
+
+      + span {
+        color: var(--radio-default-default-text-color);
+        font-size: var(--radio-default-default-fontSize);
+        font-weight: var(--radio-default-default-fontWeight);
+        line-height: var(--radio-default-default-lineHeight);
+        margin-left: var(--radio-default-default-distance);
+      }
+    }
+
+    &:hover input:not(:disabled) + i {
+      border-color: var(--radio-default-hover-color);
+      background-color: var(--radio-default-hover-bg-color);
+
+      &:before {
+        background: var(--radio-default-hover-color);
+      }
+
+      + span {
+        color: var(--radio-default-hover-text-color);
+      }
     }
 
     &.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full {
@@ -497,7 +620,44 @@
   ); // 3px 是空白的高度
 }
 
-.#{$ns}RadiosControl,
+.#{$ns}RadiosControl {
+  .#{$ns}Checkbox {
+    display: block;
+    margin: var(--radio-default-vertical-marginTop)
+      var(--radio-default-vertical-marginRight)
+      var(--radio-default-vertical-marginBottom)
+      var(--radio-default-vertical-marginLeft);
+  }
+
+  .#{$ns}Checkbox--button {
+    margin-bottom: 0;
+
+    &--disabled--unchecked {
+      background: var(--FileControl-onDisabled-bg);
+    }
+
+    &-checked {
+      &:active {
+        border-color: var(--Checkbox-checked-onHover-bgColor);
+      }
+    }
+  }
+
+  &.is-inline .#{$ns}Checkbox {
+    display: inline-block;
+    margin: var(--radio-default-default-marginTop)
+      var(--radio-default-default-marginRight)
+      var(--radio-default-default-marginBottom)
+      var(--radio-default-default-marginLeft);
+  }
+
+  &.is-inline .#{$ns}Checkbox--button {
+    display: inline-block;
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+}
+
 .#{$ns}CheckboxesControl {
   .#{$ns}Checkbox {
     display: block;
@@ -513,7 +673,7 @@
 
     &-checked {
       &:active {
-        border-color: var(--Switch-checked-onHover-bgColor);
+        border-color: var(--Checkbox-checked-onHover-bgColor);
       }
     }
   }

package/scss/components/form/_combo.scss

@@ -30,6 +30,7 @@
 
     @include button-size(
       var(--Combo-addBtn-fontSize),
+      var(--Combo-addBtn-fontWeight),
       var(--Combo-addBtn-lineHeight),
       var(--Combo-addBtn-borderRadius),
       var(--Combo-addBtn-borderRadius),

package/scss/components/form/_file.scss

@@ -16,7 +16,7 @@
 
   &-selectBtn {
     display: inline-flex;
-    margin-right: 10px;
+    margin-right: var(--inputFile-base-des-margin);
 
     > svg {
       margin-right: 4px !important;
@@ -47,8 +47,9 @@
   // }
 
   &-description {
-    color: #999;
-    font-size: 12px;
+    color: var(--inputFile-base-des-color);
+    font-size: var(--inputFile-base-des-fontSize);
+    font-weight: var(--inputFile-base-des-fontWeight);
   }
 
   &-sizeTip {
@@ -60,7 +61,8 @@
 
   &-list {
     list-style: none;
-    margin: 8px 0;
+    margin: var(--inputFile-list-marginTop) var(--inputFile-list-marginRight)
+      var(--inputFile-list-marginBottom) var(--inputFile-list-marginLeft);
     padding: 0;
     max-height: 144px;
     overflow-x: hidden;
@@ -69,6 +71,7 @@
     > li {
       margin-bottom: 4px;
       font-size: 12px;
+      background: var(--inputFile-list-bg-color);
 
       &:hover {
         border-radius: 2px;
@@ -83,7 +86,8 @@
   }
 
   &-itemInfo {
-    padding: 2px 4px;
+    padding: var(--inputFile-list-paddingTop) var(--inputFile-list-paddingRight)
+      var(--inputFile-list-paddingBottom) var(--inputFile-list-paddingLeft);
     display: flex;
     line-height: 24px;
     height: auto;
@@ -105,7 +109,9 @@
   }
 
   &-itemInfoIcon {
-    margin-right: 4px;
+    margin-right: var(--inputFile-list-icon-margin);
+    font-size: var(--inputFile-list-icon-size);
+    color: var(--inputFile-list-icon-color);
   }
 
   &-itemInfoText {
@@ -114,6 +120,17 @@
     text-overflow: ellipsis;
 
     vertical-align: middle;
+    color: var(--inputFile-list-color);
+    font-size: var(--inputFile-list-fontSize);
+    font-weight: var(--inputFile-list-fontWeight);
+    line-height: px2rem(24px);
+
+    &:hover {
+      color: var(--inputFile-list-color);
+      font-size: var(--inputFile-list-fontSize);
+      font-weight: var(--inputFile-list-fontWeight);
+      line-height: px2rem(24px);
+    }
   }
 
   &-clear {
@@ -122,7 +139,11 @@
     cursor: pointer;
     margin-left: auto;
     margin-right: var(--gap-xs);
+    font-size: var(--inputFile-list-delete-icon-size);
+    line-height: px2rem(24px);
     &:hover {
+      font-size: var(--inputFile-list-delete-icon-size);
+      line-height: px2rem(24px);
       color: var(--FileControl-icon-onHover-color);
     }
   }
@@ -199,9 +220,20 @@
     flex-flow: column;
     height: 180px;
     text-align: center;
-    border: 1px dashed var(--FileControl-border-color);
-    border-radius: var(--borderRadius);
-    background: var(--white);
+    border-style: var(--inputFile-drag-top-border-style)
+      var(--inputFile-drag-right-border-style)
+      var(--inputFile-drag-bottom-border-style)
+      var(--inputFile-drag-left-border-style);
+    border-color: var(--FileControl-border-color);
+    border-width: var(--inputFile-drag-top-border-width)
+      var(--inputFile-drag-right-border-width)
+      var(--inputFile-drag-bottom-border-width)
+      var(--inputFile-drag-left-border-width);
+    border-radius: var(--inputFile-drag-top-left-border-radius)
+      var(--inputFile-drag-top-right-border-radius)
+      var(--inputFile-drag-bottom-right-border-radius)
+      var(--inputFile-drag-bottom-left-border-radius);
+    background: var(--inputFile-drag-bg-color);
     cursor: pointer;
 
     &-click {
@@ -216,20 +248,33 @@
     }
 
     &:hover {
-      border-color: var(--info);
+      border-style: var(--inputFile-drag-hover-top-border-style)
+        var(--inputFile-drag-hover-right-border-style)
+        var(--inputFile-drag-hover-bottom-border-style)
+        var(--inputFile-drag-hover-left-border-style);
+      border-color: var(--inputFile-drag-hover-top-border-color)
+        var(--inputFile-drag-hover-right-border-color)
+        var(--inputFile-drag-hover-bottom-border-color)
+        var(--inputFile-drag-hover-left-border-color);
+      border-width: var(--inputFile-drag-hover-top-border-width)
+        var(--inputFile-drag-hover-right-border-width)
+        var(--inputFile-drag-hover-bottom-border-width)
+        var(--inputFile-drag-hover-left-border-width);
+      background: var(--inputFile-drag-bg-color-hover);
     }
 
     > span {
-      margin-top: 8px;
+      margin-top: var(--inputFile-drag-icon-margin);
       line-height: 20px;
-      font-size: var(--fontSizeSm);
+      font-size: var(--inputFile-drag-fontSize);
+      font-weight: var(--inputFile-drag-fontWeight);
       color: var(--FileControl-drag-color);
     }
 
     > svg {
-      width: 48px;
-      height: 48px;
       top: 0;
+      font-size: var(--inputFile-drag-icon-size);
+      color: var(--inputFile-drag-icon-color);
     }
   }
 

package/scss/components/form/_form.scss

@@ -52,8 +52,9 @@
 }
 
 .#{$ns}Form-label {
-  font-weight: var(--fontWeightNormal);
-  margin-bottom: var(--gap-sm);
+  font-weight: var(--Form-item-fontWeight);
+  line-height: var(--Form-item-lineHeight);
+  margin-bottom: var(--Form-mode-default-labelGap);
   position: relative;
   font-size: var(--Form-item-fontSize);
   color: var(--Form-item-fontColor);
@@ -64,24 +65,27 @@
 }
 
 .#{$ns}Form-star {
-  color: var(--danger);
-  font-size: var(--fontSizeXs);
+  color: var(--Form-item-star-color);
+  font-size: var(--Form-item-star-size);
   line-height: 1;
 }
 
 .#{$ns}Form-feedback {
-  color: var(--danger);
-  margin: var(--Form-input-marginBottom) 0 0;
-  padding-left: var(--gap-base);
-  font-size: var(--fontSizeSm);
-  position: var(--Form-feedback-position);
+  color: var(--Form-feedBack-color);
+  list-style-type: none;
+  margin: 0;
+  margin-top: var(--Form-feedBack-gap);
+  padding: 0;
+  font-size: var(--Form-feedBack-fontSize);
 }
 
 .#{$ns}Form-description {
   display: block;
   word-break: break-word;
   color: var(--Form-description-color);
-  margin: var(--Form-input-marginBottom) 0 0;
+  font-weight: var(--Form-description-fontWeight);
+  line-height: var(--Form-description-lineHeight);
+  margin-top: var(--Form-description-gap);
   font-size: var(--Form-description-fontSize);
 }
 
@@ -119,8 +123,7 @@
   }
 
   &--inline {
-    margin-bottom: calc(var(--Form-item-gap) / 2);
-    margin-right: calc(var(--Form-item-gap) / 2);
+    margin-right: var(--Form-mode-inline-item-gap);
   }
 
   &--horizontal {
@@ -153,7 +156,7 @@
   &--normal {
     > .#{$ns}Form-label {
       display: block;
-
+      width: var(--Form-mode-default-width);
       .#{$ns}Form-star {
         position: absolute;
         left: px2rem(-6px);
@@ -163,7 +166,7 @@
   }
 
   &.is-error > .#{$ns}Form-label {
-    color: var(--danger);
+    color: var(--Form-item-onError-color);
   }
 
   .#{$ns}Form-control--withSize {
@@ -240,19 +243,12 @@
     &--horizontal {
       display: flex;
       flex-wrap: nowrap;
-      margin-left: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
-      margin-right: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
-
-      > * {
-        padding-left: calc(var(--Form--horizontal-gutterWidth) / 2);
-        padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
-      }
 
       > .#{$ns}Form-value {
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
-        min-width: 0;
+        max-width: var(--Form--horizontal-value-maxWidth);
+        min-width: var(--Form--horizontal-value-minWidth);
       }
 
       .#{$ns}Form-itemColumn--xs,
@@ -266,8 +262,10 @@
       }
 
       > .#{$ns}Form-label {
-        padding-top: var(--Form-label-paddingTop);
-        margin-bottom: 0;
+        height: px2rem(32px);
+        line-height: px2rem(32px);
+        margin: 0;
+        margin-right: var(--Form--horizontal-label-gap);
         flex-shrink: 0;
 
         .#{$ns}Form-star {
@@ -321,9 +319,10 @@
       vertical-align: top;
 
       > .#{$ns}Form-label {
-        padding-top: var(--Form-label-paddingTop);
-        margin-bottom: 0;
-        margin-right: calc(var(--Form-item-gap) / 2);
+        height: px2rem(32px);
+        line-height: px2rem(32px);
+        margin: 0;
+        margin-right: var(--Form-mode-inline-label-gap);
 
         .#{$ns}Form-star {
           position: absolute;