amis-ui 2.8.0 → 3.0.0

package/scss/components/_modal.scss

@@ -45,10 +45,10 @@
     margin-right: auto;
     margin-top: var(--Modal-content-startMarginTop);
     margin-bottom: var(--gap-md);
-    padding: var(--Modal-body-paddingY) var(--Modal-body-paddingX);
+    padding: var(--dialog-default-padding-y) var(--Modal-body-paddingX);
     border: var(--Modal-content-borderWidth) solid
       var(--Modal-content-borderColor);
-    border-radius: var(--Modal-content-borderRadius);
+    border-radius: var(--dialog-default-border-radius);
 
     &.in,
     &.out {
@@ -93,13 +93,17 @@
     border-bottom: var(--Modal-body-borderTop);
     border-top-left-radius: var(--Modal-content-borderRadius);
     border-top-right-radius: var(--Modal-content-borderRadius);
-    z-index: 150; // 高于 Spinner 的 overlay
+
+    .Dialog-close {
+      content: var(--dialog-icon-icon);
+    }
   }
 
   &-title {
-    font-size: var(--Modal-title-fontSize);
-    color: var(--Modal-title-color);
-    font-weight: var(--Modal-title-fontWeight);
+    font-size: var(--dialog-header-fontSize);
+    color: var(--dialog-header-color);
+    font-weight: var(--dialog-header-fontWeight);
+    height: var(--dialog-header-height);
   }
 
   &-close {
@@ -108,11 +112,13 @@
     line-height: inherit;
     text-decoration: none;
     vertical-align: middle;
+    z-index: calc($zindex-spinner-overlay + 1);
 
     svg {
-      width: var(--Modal-close-width);
-      height: var(--Modal-close-width);
+      width: var(--dialog-icon-size);
+      height: var(--dialog-icon-size);
       fill: var(--Modal-close-color);
+      color: var(--dialog-icon-color);
     }
 
     &:not(.is-disabled) {
@@ -142,11 +148,14 @@
     height: auto;
     // overflow-y: auto;
     padding: 0 #{px2rem(24px)};
+    font-size: var(--dialog-content-fontSize);
+    color: var(--dialog-content-color);
   }
 
   &-footer {
     // @include clearfix();
 
+    height: var(--dialog-footer-height);
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -158,7 +167,7 @@
 
     .#{$ns}Button {
       min-width: var(--Modal-footer-button-width);
-      margin-left: var(--gap-sm);
+      margin-left: var(--dialog-footer-margin-left);
     }
   }
 }
@@ -177,11 +186,12 @@
 
 @include media-breakpoint-up(sm) {
   .#{$ns}Modal-content {
-    max-width: var(--Modal-widthBase);
+    max-width: var(--dialog-size-normal-width);
+    border-width: var(--dialog-default-border-width);
   }
 
   .#{$ns}Modal--sm .#{$ns}Modal-content {
-    max-width: var(--Modal-widthSm);
+    max-width: var(--dialog-size-sm-width);
   }
 
   .#{$ns}Modal--base .#{$ns}Modal-content {
@@ -193,11 +203,11 @@
   }
 
   .#{$ns}Modal--lg .#{$ns}Modal-content {
-    max-width: var(--Modal-widthLg);
+    max-width: var(--dialog-size-lg-width);
   }
 
   .#{$ns}Modal--xl .#{$ns}Modal-content {
-    max-width: var(--Modal-widthXl);
+    max-width: var(--dialog-size-xl-width);
   }
 }
 

package/scss/components/_nav.scss

@@ -1,365 +1,17 @@
 .#{$ns}Nav {
   position: relative;
+  cursor: pointer;
+  background-color: var(--Layout-light-backgroundColor);
+  font-size: var(--Nav-item-fontSize);
+  line-height: var(--Nav-Item-height);
 
-  .#{$ns}Nav-itemIcon {
-    margin-right: var(--gap-sm);
+  &-horizontal {
+    line-height: var(--Nav-Item-height--horizontal);
   }
 
-  .#{$ns}Nav-list {
-    list-style: none;
-    user-select: none;
-    margin: 0;
-    padding: 0;
-    position: relative;
-
-    img.#{$ns}Nav-itemIcon {
-      height: var(--Tabs-linkFontSize);
-      vertical-align: middle;
-    }
-
-    .#{$ns}Nav-itemToggler {
-      margin-right: px2rem(10px);
-      height: px2rem(24px);
-      text-align: center;
-      line-height: px2rem(24px);
-      vertical-align: middle;
-      cursor: pointer;
-      transform: scale(0.8);
-      transition: transform var(--animation-duration);
-
-      > svg {
-        width: 10px;
-        height: 10px;
-        top: 0;
-      }
-    }
-
-    &-overflow {
-      min-height: var(--Nav-Item-height) !important;
-      max-height: calc(var(--Nav-Item-height) * 5);
-      max-width: var(--Nav-Item-maxWidth--tabs);
-      font-size: var(--Nav-subItem-fontSize);
-      overflow-x: hidden;
-      overflow-y: auto;
-
-      .#{$ns}Nav-subItems {
-        margin-block-start: 0;
-        margin-block-end: 0;
-      }
-
-      .#{$ns}Nav-item {
-        max-width: var(--Nav-Item-maxWidth--tabs);
-        height: var(--Nav-Item-height);
-
-        > a {
-          border: none !important;
-          display: block !important;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          user-select: none;
-        }
-      }
-    }
-
-    &--tabs {
-      border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
-
-      &.nav-simple {
-        display: flex;
-
-        .#{$ns}Nav-item {
-          margin-bottom: 0;
-          vertical-align: text-top;
-
-          > a {
-            border: none;
-            margin: 0;
-            padding: var(--gap-md) 0;
-          }
-
-          &:hover {
-            > a,
-            > a:focus {
-              border: none;
-              color: var(--Tabs-onActive-color);
-              text-decoration: none;
-            }
-          }
-
-          &.active > a,
-          &.is-active > a {
-            border: none;
-            background: none;
-          }
-
-          &.is-active {
-            position: relative;
-
-            &:after {
-              position: absolute;
-              content: '';
-              bottom: 0;
-              width: 100%;
-              height: px2rem(2px);
-              background-color: var(--Tabs-onActive-color);
-            }
-          }
-
-          .#{$ns}Nav-subItems {
-            display: none;
-          }
-        }
-
-        &:first-child {
-          margin-left: 0;
-        }
-      }
-
-      .#{$ns}Nav-item {
-        margin-bottom: calc(var(--Tabs-borderWidth) * -1);
-        display: inline-block;
-        position: relative;
-        max-width: var(--Nav-Item-maxWidth--tabs);
-
-        > a {
-          font-size: var(--Tabs-linkFontSize);
-          display: block;
-          outline: none;
-          border: var(--Tabs-borderWidth) solid transparent;
-          border-top-left-radius: var(--Tabs-borderRadius);
-          border-top-right-radius: var(--Tabs-borderRadius);
-          color: var(--Tabs-color);
-          text-decoration: none;
-          margin-right: px2rem(2px);
-          padding: var(--gap-sm) var(--gap-xl);
-          cursor: pointer;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-
-        &:hover {
-          > a,
-          > a:focus {
-            border-color: var(--Tabs-onHover-borderColor);
-            border-bottom: none; // 外层已经有border-bottom了
-            color: var(--Tabs-onActive-color);
-            text-decoration: none;
-          }
-        }
-
-        &.disabled > a,
-        &.is-disabled > a {
-          color: var(--Tabs-onDisabled-color);
-          background: transparent;
-          border-color: transparent;
-          pointer-events: none;
-        }
-
-        &.active > a,
-        &.is-active > a {
-          color: var(--Tabs-onActive-color);
-          background: var(--Tabs-onActive-bg);
-          border-color: var(--Tabs-onActive-borderColor);
-          border-bottom-color: var(--Tabs-content-bg);
-        }
-      }
-
-      > .#{$ns}Nav-item {
-        margin-left: px2rem(40px);
-      }
-
-      .#{$ns}Nav-item-overflow {
-        &:hover > a,
-        > a:focus,
-        &.is-overflow-opened > a {
-          color: var(--primary);
-          border-color: transparent;
-        }
-      }
-    }
-
-    &--stacked {
-      min-height: px2rem(50px);
-
-      .#{$ns}Nav-item,
-      .#{$ns}Badge {
-        position: relative;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: stretch;
-        width: 100%;
-
-        .#{$ns}Nav-itemDrager {
-          cursor: move;
-          position: absolute;
-          left: 0;
-          display: none;
-          line-height: 0;
-          > .icon,
-          > .#{$ns}Badge > .icon {
-            color: var(--icon-color);
-
-            &:hover {
-              color: var(--icon-onHover-color);
-            }
-          }
-
-          svg {
-            width: px2rem(16px);
-            height: px2rem(16px);
-          }
-        }
-
-        > .#{$ns}Badge-ribbon-out {
-          z-index: 3;
-        }
-
-        > .#{$ns}Nav-item-atcions {
-          display: flex;
-          align-items: center;
-        }
-
-        > a,
-        > .#{$ns}Badge > a {
-          display: flex;
-          align-items: center;
-          outline: none;
-          color: var(--Nav-item-color);
-          text-decoration: none;
-          padding: var(--gap-sm) var(--gap-sm);
-          cursor: pointer;
-          background: var(--Nav-item-bg);
-          border-radius: var(--Nav-item-borderRadius);
-          text-overflow: ellipsis;
-          flex: 1;
-        }
-
-        > a:hover,
-        > a:focus,
-        > a:hover + .#{$ns}Nav-item-atcions,
-        > a:focus + .#{$ns}Nav-item-atcions,
-        > .#{$ns}Badge > a:hover,
-        > .#{$ns}Badge > a:focus,
-        > .#{$ns}Badge > a:hover + .#{$ns}Nav-item-atcions,
-        > .#{$ns}Badge > a:focus + .#{$ns}Nav-item-atcions {
-          border-color: var(--Nav-item-onHover-color);
-          text-decoration: none;
-          background: var(--Nav-item-onHover-bg);
-          z-index: 1;
-        }
-
-        > a:hover > .#{$ns}Nav-itemDrager,
-        > a:focus > .#{$ns}Nav-itemDrager,
-        > .#{$ns}Badge > a:hover > .#{$ns}Nav-itemDrager,
-        > .#{$ns}Badge > a:focus > .#{$ns}Nav-itemDrager {
-          display: block;
-        }
-
-        &.disabled > a,
-        &.is-disabled > a,
-        &.disabled > .#{$ns}Badge > a,
-        &.is-disabled > .#{$ns}Badge > a {
-          color: var(--Nav-item-onDisabled-color);
-          background: transparent;
-          pointer-events: none;
-        }
-
-        &.active > a,
-        &.is-active > .#{$ns}Nav-item-atcions,
-        &.is-active > a,
-        &.active > .#{$ns}Badge > a,
-        &.is-active > .#{$ns}Badge > .#{$ns}Nav-item-atcions,
-        &.is-active > .#{$ns}Badge > a {
-          color: var(--Nav-item-onActive-color);
-          position: relative;
-          background: var(--Nav-item-onActive-bg) !important;
-        }
-
-        &.is-unfolded >,
-        &.is-unfolded > .#{$ns}Badge > {
-          a .#{$ns}Nav-itemToggler {
-            transform: rotate(180deg) scale(0.8);
-          }
-
-          .#{$ns}Nav-subItems {
-            display: block;
-          }
-        }
-
-        &.is-after {
-          .#{$ns}Nav-itemToggler {
-            margin-left: auto;
-          }
-
-          > a,
-          > .#{$ns}Badge > a {
-            font-size: var(--Nav-item-fontSize);
-            padding: 0;
-            height: px2rem(40px);
-            border-radius: 0;
-          }
-
-          > a:hover,
-          > a:focus,
-          > a:hover + .#{$ns}Nav-item-atcions,
-          > a:focus + .#{$ns}Nav-item-atcions,
-          > .#{$ns}Badge > a:hover,
-          > .#{$ns}Badge > a:focus,
-          > .#{$ns}Badge > a:hover + .#{$ns}Nav-item-atcions,
-          > .#{$ns}Badge > a:focus + .#{$ns}Nav-item-atcions {
-            background: none;
-            color: var(--Nav-item-onActive-color);
-          }
-
-          &.is-active {
-            > .#{$ns}Badge > a {
-              background-color: var(
-                --Nav-item-onActive-backgroundColor
-              ) !important;
-            }
-
-            &::after {
-              position: absolute;
-              left: 0;
-              content: '';
-              width: 3px;
-              height: 100%;
-              background-color: var(--Nav-item-onActive-borderColor);
-              z-index: 2;
-            }
-          }
-        }
-
-        .#{$ns}Nav-spinner {
-          position: absolute;
-          right: px2rem(10px);
-          top: px2rem(8px);
-        }
-
-        .#{$ns}Nav-subItems {
-          display: none;
-          padding-left: 0;
-          list-style: none;
-          width: 100%;
-        }
-
-        .#{$ns}Nav-item {
-          font-size: var(--Nav-subItem-fontSize);
-        }
-      }
-    }
-  }
   .#{$ns}Nav-dropIndicator {
     position: absolute;
     background: var(--Nav-item-onActive-color);
     height: 2px;
   }
 }
-
-// 悬浮菜单是挂在body下面的
-.#{$ns}Nav-itemIconAfter {
-  margin-right: 0;
-  margin-left: var(--gap-sm);
-}

package/scss/components/_progress.scss

@@ -22,7 +22,7 @@
 
     &-inter {
       height: 100%;
-      background-color: var(--Progress-bar-backgroundColor);
+      background-color: var(--Progress-line-bg);
       overflow: hidden;
       border-radius: var(--Progress-borderRadius);
     }
@@ -34,6 +34,8 @@
       white-space: nowrap;
       text-align: left;
       word-break: normal;
+      color: var(--Progress-line-color);
+      font-size: var(--Progress-line-fontSize);
       .icon {
         font-size: 15px;
       }
@@ -43,10 +45,15 @@
       float: left;
       width: 0;
       height: 8px;
-      background: var(--primary);
+      background: var(--Progress-line-theme-color);
       transition: width var(--animation-duration) ease;
       border-radius: var(--Progress-borderRadius);
 
+      
+      &.bg-info {
+        background: var(--Progress-line-theme-color);
+      }
+
       &--stripe {
         background-image: linear-gradient(
           45deg,
@@ -97,6 +104,8 @@
       white-space: normal;
       text-align: center;
       transform: translate(-50%, -50%);
+      color: var(--Progress-circle-color);
+      font-size: var(--Progress-circle-fontSize);
       .icon {
         font-size: 1.2em;
       }

package/scss/components/_result-box.scss

@@ -145,6 +145,7 @@
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    word-break: break-all; // 避免超长单词撑开
   }
 
   &-pc-arrow {

package/scss/components/_spinner.scss

@@ -100,14 +100,16 @@
     margin: px2rem(12px) 0 0 0;
     word-break: keep-all;
     white-space: nowrap;
+    font-size: var(--spinner-base-fontSize);
     color: var(--Spinner-color);
+    font-weight: var(--spinner-base-fontWeight);
   }
 
   &.#{$ns}Spinner-tip--top {
     flex-direction: column-reverse;
 
     .#{$ns}Spinner-tip {
-      margin: 0 0 px2rem(12px) 0;
+      margin: 0 0 var(--spinner-base-tip-size) 0;
     }
   }
 
@@ -115,7 +117,7 @@
     flex-direction: row;
 
     .#{$ns}Spinner-tip {
-      margin: 0 0 0 px2rem(12px);
+      margin: 0 0 0 var(--spinner-base-tip-size);
     }
   }
 
@@ -123,7 +125,7 @@
     flex-direction: column;
 
     .#{$ns}Spinner-tip {
-      margin: px2rem(12px) 0 0 0;
+      margin: var(--spinner-base-tip-size) 0 0 0;
     }
   }
 
@@ -131,13 +133,13 @@
     flex-direction: row-reverse;
 
     .#{$ns}Spinner-tip {
-      margin: 0 px2rem(12px) 0 0;
+      margin: 0 var(--spinner-base-tip-size) 0 0;
     }
   }
 
   &--overlay {
     position: absolute;
-    z-index: 11;
+    z-index: $zindex-spinner-overlay;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);
@@ -146,7 +148,7 @@
 
 .#{$ns}Spinner-overlay {
   position: absolute;
-  z-index: 10;
+  z-index: calc($zindex-spinner-overlay - 1);
   top: 0;
   left: 0;
   right: 0;
@@ -168,7 +170,7 @@
 
   .#{$ns}Spinner {
     position: absolute;
-    z-index: 11;
+    z-index: $zindex-spinner-overlay;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);

package/scss/components/_status.scss

@@ -7,8 +7,8 @@
   align-items: center;
 
   &-label {
-    font-size: var(--fontSizeSm);
-    margin-left: var(--gap-xs);
+    font-size: var(--Status-font-size);
+    margin-left: var(--Status-font-margin);
   }
 
   @keyframes animation-rolling_red {
@@ -40,8 +40,8 @@
   }
 
   svg.#{$ns}Status-icon {
-    width: var(--Satus-icon-width);
-    height: var(--Satus-icon-height);
+    width: var(--Status-icon-width);
+    height: var(--Status-icon-height);
     top: 0;
   }
 
@@ -56,7 +56,7 @@
       &::before {
         content: '';
         display: inline-block;
-        border: 5px solid var(--danger);
+        border: 5px solid var(--Status-pending-beforeColor);
         border-radius: 500px;
         position: absolute;
         top: 0;
@@ -68,7 +68,7 @@
       &::after {
         content: '';
         display: inline-block;
-        border: 5px solid var(--primary);
+        border: 5px solid var(--Status-pending-afterColor);
         border-radius: 500px;
         position: absolute;
         top: 0;
@@ -80,23 +80,39 @@
     }
 
     &.icon-warning {
-      color: var(--warning);
+      color: var(--Status-warning-color);
+    }
+
+    &.icon-fail {
+      color: var(--Status-fail-color)
+    }
+  
+    &.icon-success {
+      color: var(--Status-success-color)
+    }
+  
+    &.icon-schedule {
+      color: var(--Status-schedule-color)
     }
   }
 
   .#{$ns}Status-icon.rolling + &-label {
-    color: var(--warning);
+    color: var(--Status-warning-color);
   }
 
   .#{$ns}Status-icon.icon-success + &-label {
-    color: var(--success);
+    color: var(--Status-success-color);
   }
 
   .#{$ns}Status-icon.icon-fail + &-label {
-    color: var(--danger);
+    color: var(--Status-fail-color);
   }
 
   .#{$ns}Status-icon.icon-warning + &-label {
-    color: var(--warning);
+    color: var(--Status-warning-color);
+  }
+
+  .#{$ns}Status-icon.icon-schedule + &-label {
+    color: var(--Status-schedule-color);
   }
 }