amis-ui 2.8.0 → 3.0.0

package/scss/components/_steps.scss

@@ -14,11 +14,11 @@
       &Icon {
         vertical-align: top;
         display: inline-block;
-        padding-right: px2rem(10px);
+        padding-right: var(--steps-base-icon-paddingRight);
         .#{$ns}StepsItem-icon {
           display: inline-block;
-          width: px2rem(30px);
-          height: px2rem(30px);
+          width: var(--steps-base-icon-size);
+          height: var(--steps-base-icon-size);
           line-height: px2rem(28px);
           border-radius: 50%;
           font-size: var(--Steps-icon-fontsize);
@@ -26,7 +26,7 @@
           .icon {
             width: px2rem(9px);
             height: px2rem(9px);
-            position: relative; 
+            position: relative;
             top: 0;
           }
         }
@@ -38,7 +38,8 @@
           .#{$ns}StepsItem-title {
             font-size: var(--Steps-title-fontsize);
             color: var(--Steps-title-color);
-            padding-right: px2rem(8px);
+            font-weight: var(--steps-base-fontWeight);
+            padding-right: var(--steps-base-title-paddingRight);
             position: relative;
             display: inline-block;
             > span {
@@ -68,18 +69,20 @@
             white-space: nowrap;
           }
           .#{$ns}StepsItem-subTitle {
-            padding-left: px2rem(10px);
+            padding-left: var(--steps-base-subTitle-paddingLeft);
             font-size: var(--Steps-sub-title-fontsize);
             color: var(--Steps-sub-title-color);
+            font-weight: var(--steps-base-subTitle-fontWeight);
           }
           .#{$ns}StepsItem-description {
             max-width: px2rem(140px);
             white-space: nowrap;
             position: relative;
             bottom: px2rem(20px);
-            >span {
+            > span {
               color: var(--Steps-description-title-color);
               font-size: var(--Steps-description-title-fontsize);
+              font-weight: var(--steps-base-des-fontWeight);
             }
           }
         }
@@ -102,15 +105,19 @@
       min-height: 75px;
       overflow: hidden !important;
       &-container {
-        &Icon:after {
-          content: '';
-          position: absolute;
-          right: 0;
-          top: px2rem(36px);
-          height: 9999px;
-          left: px2rem(11px);
-          width: 1px;
-          background-color: var(--Steps-line-bg);
+        &Icon {
+          position: relative;
+          &:after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            right: 0;
+            top: px2rem(36px);
+            height: 9999px;
+            width: 1px;
+            background-color: var(--Steps-line-bg);
+          }
         }
         &Wrapper > .#{$ns}StepsItem-body > .#{$ns}StepsItem-title {
           &:after {
@@ -273,42 +280,43 @@
         &ProgressDot {
           margin-top: px2rem(13px);
           margin-bottom: px2rem(5px);
-          width: px2rem(8px);
-          height: px2rem(8px);
+          width: var(--steps-dot-icon-size);
+          height: var(--steps-dot-icon-size);
           margin-left: px2rem(96px);
-          border: 1px solid var(--Steps-line-success-bg);
+          border: 1px solid var(--steps-dot-process-bg-color);
           border-radius: 100%;
+          background: var(--steps-dot-finish-bg-color);
         }
       }
     }
     .is-finish {
       .#{$ns}StepsItem-container {
         &Tail:after {
-          background: var(--Steps-status-success);
+          background: var(--Steps-line-success-bg);
         }
       }
     }
     .is-wait {
       .#{$ns}StepsItem-container {
         &ProgressDot {
-          background: var(--Steps-line-bg);
-          border: 1px solid var(--Steps-line-bg);
+          background: var(--steps-dot-wait-bg-color);
+          border: 1px solid var(--steps-dot-wait-bg-color);
         }
       }
     }
     .is-error {
       .#{$ns}StepsItem-container {
         &ProgressDot {
-          background: var(--Steps-status-error);
-          border: 1px solid var(--Steps-status-error);
+          background: var(--steps-dot-error-bg-color);
+          border: 1px solid var(--steps-dot-error-bg-color);
         }
       }
     }
     .is-process {
       .#{$ns}StepsItem-container {
         &ProgressDot {
-          border: 1px solid var(--Steps-status-success);
-          background: var(--Steps-status-success);
+          border: 1px solid var(--steps-dot-process-bg-color);
+          background: var(--steps-dot-process-bg-color);
         }
       }
     }
@@ -316,31 +324,67 @@
 
   .#{$ns}StepsItem.is-wait {
     .#{$ns}StepsItem-icon {
-      background-color: var(--white);
+      background-color: var(--steps-status-wait-bg-color);
       color: var(--Steps-bg);
       border: 1px solid var(--Steps-bg);
     }
     .#{$ns}StepsItem-title,
-      .#{$ns}StepsItem-subTitle,
-      .#{$ns}StepsItem-description {
-        color: var(--Steps-status-wait);
-      }
+    .#{$ns}StepsItem-subTitle,
+    .#{$ns}StepsItem-description {
+      color: var(--Steps-status-wait);
+    }
   }
   .#{$ns}StepsItem.is-error {
     .#{$ns}StepsItem-icon {
-        background-color: var(--Steps-status-error);
-      color: var(--white);
+      background-color: var(--Steps-status-error);
+      color: var(--steps-status-error-color);
       border: 1px solid var(--Steps-status-error);
     }
   }
-  .#{$ns}StepsItem.is-finish,
-  .#{$ns}StepsItem.is-process {
+  .#{$ns}StepsItem.is-finish {
     .#{$ns}StepsItem-icon {
       background-color: var(--Steps-status-success);
-      color: var(--white);
+      color: var(--steps-status-finish-color);
       border: 1px solid var(--Steps-status-success);
     }
   }
+  .#{$ns}StepsItem.is-process {
+    .#{$ns}StepsItem-icon {
+      background-color: var(--steps-status-process-bg-color);
+      color: var(--steps-status-process-color);
+      border: 1px solid var(--steps-status-process-bg-color);
+    }
+  }
+
+  &--simple {
+    justify-content: center;
+
+    .#{$ns}StepsItem {
+      flex: none;
+    }
+
+    .#{$ns}StepsItem-containerWrapper
+      .#{$ns}StepsItem-body
+      .#{$ns}StepsItem-title:after {
+      display: none;
+    }
+
+    .#{$ns}StepsItem-icon-line {
+      display: inline-block;
+      vertical-align: top;
+      margin-left: px2rem(8px);
+
+      svg {
+        width: var(--steps-simple-icon-size);
+        height: var(--steps-simple-icon-size);
+        font-size: var(--steps-simple-icon-size);
+      }
+    }
+
+    .StepsItem-icon-line {
+      content: var(--steps-simple-icon);
+    }
+  }
 }
 
 .#{$ns}Steps-mobile.#{$ns}Steps--horizontal {

package/scss/components/_table2.scss

@@ -34,30 +34,37 @@
     .#{$ns}Table-table {
       > thead > tr {
         > th {
-          padding: var(--TableCell-paddingY-large)
-            var(--TableCell-paddingX-large);
+          padding: var(--table-size-large-paddingTop)
+            var(--table-size-large-paddingRight)
+            var(--table-size-large-paddingBottom)
+            var(--table-size-large-paddingLeft);
         }
       }
 
       > tbody > tr {
         > td,
         > th {
-          padding: var(--TableCell-paddingY-large)
-            var(--TableCell-paddingX-large);
+          padding: var(--table-size-large-paddingTop)
+            var(--table-size-large-paddingRight)
+            var(--table-size-large-paddingBottom)
+            var(--table-size-large-paddingLeft);
         }
       }
 
       > tfoot > tr {
         > td {
-          padding: var(--TableCell-paddingY-large)
-            var(--TableCell-paddingX-large);
+          padding: var(--table-size-large-paddingTop)
+            var(--table-size-large-paddingRight)
+            var(--table-size-large-paddingBottom)
+            var(--table-size-large-paddingLeft);
         }
       }
     }
 
     .#{$ns}TableCell-filterBtn {
       right: calc(
-        var(--TableCell-paddingX-large) - var(--TableCell-filterBtn-width) / 2
+        var(--table-size-large-paddingRight) - var(--TableCell-filterBtn-width) /
+          2
       );
     }
   }
@@ -66,44 +73,50 @@
     .#{$ns}Table-table {
       > thead > tr {
         > th {
-          padding: var(--TableCell-paddingY-small)
-            var(--TableCell-paddingX-small);
+          padding: var(--table-size-small-paddingTop)
+            var(--table-size-small-paddingRight)
+            var(--table-size-small-paddingBottom)
+            var(--table-size-small-paddingLeft);
         }
       }
 
       > tbody > tr {
         > td,
         > th {
-          padding: var(--TableCell-paddingY-small)
-            var(--TableCell-paddingX-small);
+          padding: var(--table-size-small-paddingTop)
+            var(--table-size-small-paddingRight)
+            var(--table-size-small-paddingBottom)
+            var(--table-size-small-paddingLeft);
         }
       }
 
       > tfoot > tr {
         > td {
-          padding: var(--TableCell-paddingY-small)
-            var(--TableCell-paddingX-small);
+          padding: var(--table-size-small-paddingTop)
+            var(--table-size-small-paddingRight)
+            var(--table-size-small-paddingBottom)
+            var(--table-size-small-paddingLeft);
         }
       }
     }
 
     .#{$ns}TableCell-filterBtn {
       right: calc(
-        var(--TableCell-paddingX-small) - var(--TableCell-filterBtn-width) / 2
+        var(--table-size-small-paddingRight) - var(--TableCell-filterBtn-width) /
+          2
       );
     }
   }
 
   .#{$ns}Table-title,
   .#{$ns}Table-footer {
+    color: var(--table-title-color);
+    font-size: var(--table-title-fontSize);
+    font-weight: var(--table-title-fontWeight);
+    line-height: var(--table-title-lineHeight);
     background: var(--Table-heading-bg);
-    padding: calc(
-        (
-            var(--Table-heading-height) - var(--Table-fontSize) *
-              var(--lineHeightBase)
-          ) / 2
-      )
-      var(--gap-sm);
+    padding: var(--table-title-paddingTop) var(--table-title-paddingRight)
+      var(--table-title-paddingBottom) var(--table-title-paddingLeft);
   }
 
   .#{$ns}Table-header {
@@ -154,6 +167,8 @@
     margin-bottom: 0;
     font-size: var(--Table-fontSize);
     color: var(--Table-color);
+    font-weight: var(--table-body-fontWeight);
+    line-height: var(--table-body-lineHeight);
     background: var(--Table-bg);
     border-spacing: 0;
     border-collapse: collapse;
@@ -179,7 +194,8 @@
     > thead > tr {
       > th {
         background: var(--Table-thead-bg);
-        padding: var(--TableCell-paddingY-default) var(--TableCell-paddingX);
+        padding: var(--table-paddingTop) var(--table-paddingRight)
+          var(--table-paddingBottom) var(--table-paddingLeft);
 
         &:first-child {
           padding-left: var(--TableCell--edge-paddingX-default);
@@ -200,7 +216,8 @@
 
         font-size: var(--Table-thead-fontSize);
         color: var(--Table-thead-color);
-        font-weight: var(--fontWeightNormal);
+        font-weight: var(--table-header-fontWeight);
+        line-height: var(--table-header-lineHeight);
         white-space: nowrap;
 
         .#{$ns}Remark {
@@ -232,7 +249,8 @@
       > th {
         background: var(--Table-thead-bg);
         color: var(--Table-thead-color);
-        font-weight: var(--fontWeightNormal);
+        font-weight: var(--table-header-fontWeight);
+        line-height: var(--table-header-lineHeight);
         white-space: nowrap;
         border-right: var(--Table-thead-borderWidth) solid
           var(--Table-thead-borderColor);
@@ -240,7 +258,8 @@
 
       > td,
       > th {
-        padding: var(--TableCell-paddingY-default) var(--TableCell-paddingX);
+        padding: var(--table-paddingTop) var(--table-paddingRight)
+          var(--table-paddingBottom) var(--table-paddingLeft);
 
         &:first-child {
           padding-left: var(--TableCell--edge-paddingX-default);
@@ -272,7 +291,7 @@
       }
 
       @if var(--Table-strip-bg) !=transparent {
-        background: transparent;
+        background: var(--table-body-bg-color);
 
         &.#{$ns}Table-tr--odd {
           background: var(--Table-strip-bg);
@@ -318,7 +337,8 @@
       &.is-summary {
         background: var(--Table-thead-bg);
         color: var(--Table-thead-color);
-        font-weight: var(--fontWeightNormal);
+        font-weight: var(--table-header-fontWeight);
+        line-height: var(--table-header-lineHeight);
       }
 
       &.bg-light {
@@ -562,7 +582,8 @@
       border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
 
       > td {
-        padding: var(--TableCell-paddingY-default) var(--TableCell-paddingX);
+        padding: var(--table-paddingTop) var(--table-paddingRight)
+          var(--table-paddingBottom) var(--table-paddingLeft);
         background: var(--Table-thead-bg);
       }
     }
@@ -671,7 +692,8 @@
   .#{$ns}TableCell-sortBtn {
     cursor: pointer;
     width: var(--TableCell-sortBtn-width);
-    height: var(--gap-md);
+    height: 100%;
+    vertical-align: middle;
     position: static;
     display: inline-block;
     transform: none;
@@ -682,9 +704,9 @@
       color: var(--icon-onHover-color);
     }
 
-    &--up > svg,
-    &--down > svg,
-    &--default > svg {
+    &--up svg,
+    &--down svg,
+    &--default svg {
       color: inherit;
       width: 13px;
       height: 13px;
@@ -704,9 +726,9 @@
 
     &--default {
       &.is-active {
-        color: var(--text--muted-color);
+        color: var(--table-icon-color);
         &:hover {
-          color: var(--text-color);
+          color: var(--table-icon-hover-color);
         }
       }
     }
@@ -720,16 +742,16 @@
 
   .#{$ns}TableCell-searchBtn {
     cursor: pointer;
-    color: var(--text--muted-color);
+    color: var(--table-icon-color);
     margin-left: var(--TableCell-icon-gap);
 
-    svg.icon {
+    svg {
       width: 12px;
       height: 12px;
     }
 
     &:hover {
-      color: var(--text-color);
+      color: var(--table-icon-hover-color);
     }
     &.is-active {
       color: var(--TableCell-searchBtn--onActive-color);
@@ -749,19 +771,21 @@
   .#{$ns}TableCell-filterBtn {
     cursor: pointer;
     width: var(--TableCell-filterBtn-width);
+    height: 100%;
+    vertical-align: middle;
     position: static;
     display: inline-block;
     transform: none;
-    color: var(--text--muted-color);
+    color: var(--table-icon-color);
     margin-left: var(--TableCell-icon-gap);
 
-    svg.icon {
+    svg {
       width: 13px;
       height: 13px;
     }
 
     &:hover {
-      color: var(--text-color);
+      color: var(--table-icon-hover-color);
     }
 
     &.is-active {
@@ -886,6 +910,26 @@
     top: 0;
     left: 0;
   }
+
+  .table-sort-default {
+    content: var(--table-sort-icon);
+  }
+
+  .table-sort-up {
+    content: var(--table-sort-up-icon);
+  }
+
+  .table-sort-down {
+    content: var(--table-sort-down-icon);
+  }
+
+  .table-filter-icon {
+    content: var(--table-filter-icon);
+  }
+
+  .table-search-icon {
+    content: var(--table-search-icon);
+  }
 }
 
 .#{$ns}InputTable-toolbar {

package/scss/components/_tag.scss

@@ -1,11 +1,12 @@
 .#{$ns}Tag {
   display: inline-flex;
   height: var(--Tag-height);
-  padding: 0 var(--gap-sm);
+  padding: var(--Tag-base-padding);
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
   font-size: var(--Tag-content-fontSize);
+  font-weight: var(--Tag-base-fontWeight);
   max-width: 160px;
   transition: all 0.3;
   border-radius: var(--Tag-borderRadius);
@@ -28,79 +29,85 @@
     &--hasColor {
       color: var(--white);
     }
-    border-radius: var(--Tag-borderRadius);
+
+    border-width: var(--Tag-normal-borderWidth);
+    border-radius: var(--Tag-normal-borderRadius);
+    border-color: var(--Tag-normal-borderColor);
+
     &--inactive {
-      background: var(--Tag-inactive-color);
+      color: var(--Tag-inactive-color);
+      background: var(--Tag-inactive-bg-color);
     }
     &--active {
-      background: var(--Tag-active-color);
+      color: var(--Tag-active-color);
+      background: var(--Tag-active-bg-color);
     }
     &--processing {
-      background: var(--Tag-processing-color);
+      color: var(--Tag-processing-color);
+      background: var(--Tag-processing-bg-color);
     }
     &--success {
-      background: var(--Tag-success-color);
+      color: var(--Tag-success-color);
+      background: var(--Tag-success-bg-color);
     }
     &--error {
-      background: var(--Tag-error-color);
+      color: var(--Tag-error-color);
+      background: var(--Tag-error-bg-color);
     }
     &--warning {
-      background: var(--Tag-warning-color);
+      color: var(--Tag-warning-color);
+      background: var(--Tag-warning-bg-color);
     }
   }
 
   &--rounded {
     background-color: var(--white);
-    border-radius: calc((var(--Tag-height) + 2px) / 2);
-    border: 1px solid var(--Tag-default-color);
+    border-style: var(--Tag-rounded-borderStyle);
+    border-width: var(--Tag-rounded-borderWidth);
+    border-radius: var(--Tag-rounded-borderRadius);
+    border-color: var(--Tag-rounded-borderColor);
     color: var(--Tag-default-color);
     line-height: 22px;
 
     &--inactive {
-      border-color: var(--Tag-inactive-color);
-      color: var(--Tag-inactive-color);
+      color: var(--Tag-inactive-bg-color);
     }
     &--active {
-      border-color: var(--Tag-active-color);
-      color: var(--Tag-active-color);
+      color: var(--Tag-active-bg-color);
     }
     &--processing {
-      border-color: var(--Tag-processing-color);
-      color: var(--Tag-processing-color);
+      color: var(--Tag-processing-bg-color);
     }
     &--success {
-      border-color: var(--Tag-success-color);
-      color: var(--Tag-success-color);
+      color: var(--Tag-success-bg-color);
     }
     &--error {
-      border-color: var(--Tag-error-color);
-      color: var(--Tag-error-color);
+      color: var(--Tag-error-bg-color);
     }
     &--warning {
-      border-color: var(--Tag-warning-color);
-      color: var(--Tag-warning-color);
+      color: var(--Tag-warning-bg-color);
     }
   }
 
   &--status {
     background-color: var(--white);
     &--inactive .#{$ns}Tag--prev {
-      color: var(--Tag-inactive-color);
+      color: var(--Tag-inactive-bg-color);
     }
     &--active .#{$ns}Tag--prev {
-      color: var(--Tag-active-color);
+      color: var(--Tag-active-bg-color);
     }
     &--processing .#{$ns}Tag--prev {
-      color: var(--Tag-processing-color);
+      color: var(--Tag-processing-bg-color);
     }
     &--success .#{$ns}Tag--prev {
-      color: var(--Tag-success-color);
+      color: var(--Tag-success-bg-color);
     }
     &--error .#{$ns}Tag--prev {
-      color: var(--Tag-error-color);
+      color: var(--Tag-error-bg-color);
     }
     &--warning .#{$ns}Tag--prev {
-      color: var(--Tag-warning-color);
+      color: var(--Tag-warning-bg-color);
     }
 
     &:not(&--processing):not(&--active) {
@@ -114,26 +121,25 @@
 
   &--prev {
     color: var(--Tag-default-color);
-    margin-right: var(--gap-sm);
+    margin-right: var(--Tag-status-margin);
     i {
       font-size: #{px2rem(8px)};
     }
-    .icon {
-      width: #{px2rem(8px)};
-      height: #{px2rem(8px)};
+    .#{$ns}Tag-default-icon {
+      width: var(--Tag-status-size);
+      height: var(--Tag-status-size);
       top: 0;
     }
   }
 
   &--close {
-    margin-left: var(--gap-sm);
-    margin-right: var(--gap-xs);
+    margin-left: var(--Tag-close-margin);
     i {
       font-size: #{px2rem(8px)};
     }
     .icon {
-      width: #{px2rem(8px)};
-      height: #{px2rem(8px)};
+      width: var(--Tag-close-size);
+      height: var(--Tag-close-size);
       position: inherit;
     }
     cursor: pointer;