amis-ui 2.0.2 → 2.2.0

package/scss/components/_crud.scss

@@ -74,7 +74,11 @@
     display: inline-flex;
     align-items: center;
 
-    &:not(:first-child) {
+    &--left:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
+    &--right:not(:last-child) {
       margin-left: var(--Crud-toolbar-gap);
     }
 
@@ -133,7 +137,11 @@
       height: var(--Crud-toolbar-height);
       vertical-align: middle;
 
-      &:not(:first-child) {
+      &--left:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
+      &--right:not(:last-child) {
         margin-left: var(--Crud-toolbar-gap);
       }
 

package/scss/components/_crud2.scss

@@ -70,7 +70,11 @@
     display: inline-flex;
     align-items: center;
 
-    &:not(:first-child) {
+    &--left:not(:first-child) {
+      margin-left: var(--Crud-toolbar-gap);
+    }
+
+    &--right:not(:last-child) {
       margin-left: var(--Crud-toolbar-gap);
     }
 
@@ -125,7 +129,11 @@
       height: var(--Crud-toolbar-height);
       vertical-align: middle;
 
-      &:not(:first-child) {
+      &--left:not(:first-child) {
+        margin-left: var(--Crud-toolbar-gap);
+      }
+
+      &--right:not(:last-child) {
         margin-left: var(--Crud-toolbar-gap);
       }
 

package/scss/components/_drawer.scss

@@ -162,6 +162,64 @@
     width: var(--Drawer-widthXl);
     height: var(--Drawer-widthXl);
   }
+
+  // 从第二层弹框开始左右弹框的每层宽度或高度递减
+  @for $i from 2 through 6 {
+    $space-diff: 20;
+    .#{$ns}Drawer--right.#{$ns}Modal--#{$i}th,
+    .#{$ns}Drawer--left.#{$ns}Modal--#{$i}th {
+      &.#{$ns}Drawer .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthBase) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--xs .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthXs) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--sm .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthSm) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--md .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthMd) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--lg .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthLg) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--xl .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthXl) - #{($i - 1) * $space-diff}px);
+      }
+    }
+
+    .#{$ns}Drawer--top.#{$ns}Modal--#{$i}th,
+    .#{$ns}Drawer--bottom.#{$ns}Modal--#{$i}th {
+      &.#{$ns}Drawer .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthBase) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--xs .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthXs) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--sm .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthSm) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--md .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthMd) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--lg .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthLg) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--xl .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthXl) - #{($i - 1) * $space-diff}px);
+      }
+    }
+  }
 }
 
 // positons
@@ -173,7 +231,6 @@
 }
 
 .#{$ns}Drawer--top {
-
   .#{$ns}Drawer-close {
     top: var(--gap-base);
     right: var(--gap-base);
@@ -232,9 +289,7 @@
     .#{$ns}Drawer-info {
       flex-basis: 0;
       flex-grow: 1;
-      order: 10;
       align-self: center;
-      text-align: right;
     }
 
     .#{$ns}Drawer-error {
@@ -253,7 +308,6 @@
 }
 
 .#{$ns}Drawer--bottom {
-
   .#{$ns}Drawer-close {
     top: var(--gap-base);
     right: var(--gap-base);
@@ -283,7 +337,6 @@
 }
 
 .#{$ns}Drawer--left {
-
   .#{$ns}Drawer-close {
     left: auto;
     right: var(--gap-base);

package/scss/components/_dropdown.scss

@@ -37,6 +37,7 @@
     background: var(--DropDown-menu-bg);
     list-style: none;
     padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
+    margin: 0;
     min-width: var(--DropDown-menu-minWidth);
     text-align: left;
     border: none;

package/scss/components/_image-gallery.scss

@@ -59,6 +59,7 @@
       display: block;
       max-width: 100%;
       max-height: 100%;
+      transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
     }
   }
 
@@ -203,3 +204,64 @@
     }
   }
 }
+
+.#{$ns}ImageGallery-toolbar {
+  background-color: var(--white);
+  border-radius: px2rem(4px);
+  display: flex;
+  align-items: flex-start;
+  padding: px2rem(4px) px2rem(16px);
+  position: absolute;
+  bottom: px2rem(20px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  &-action {
+    padding: px2rem(13px);
+    border-radius: px2rem(4px);
+    width: px2rem(40px);
+    height: px2rem(40px);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &-icon {
+      display: block;
+      color: var(--black);
+
+      & > svg {
+        fill: var(--black);
+      }
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      color: var(--icon-onDisabled-color);
+
+      .#{$ns}ImageGallery-toolbar-action-icon {
+        color: var(--icon-onDisabled-color);
+
+        & > svg {
+          color: var(--icon-onDisabled-color);
+        }
+      }
+    }
+
+    &:hover {
+      background-color: #f2f3f5;
+
+      .#{$ns}ImageGallery-toolbar-action-icon {
+        color: var(--primary);
+
+        & > svg {
+          fill: var(--primary);
+        }
+      }
+    }
+  }
+}

package/scss/components/_input-box.scss

@@ -46,6 +46,7 @@
     display: inline-block;
     width: 14px;
     color: var(--icon-color);
+    margin-top: px2rem(2px);
   }
 
   > a {

package/scss/components/_modal.scss

@@ -51,8 +51,6 @@
 
     &.in,
     &.out {
-      // opacity: 1;
-      // transform: translateY(0) scale(1);
       animation-duration: var(--animation-duration);
       animation-fill-mode: both;
     }
@@ -88,7 +86,7 @@
   }
 
   &-header {
-    padding: var(--Modal-header-paddingY) var(--Modal-header-paddingX);
+    padding: var(--Modal-header-paddingY) #{px2rem(24px)};
     background: var(--Modal-header-bg);
     @include clearfix();
     border-bottom: var(--Modal-body-borderTop);
@@ -137,21 +135,20 @@
   }
 
   &-body {
-    padding: var(--Modal-body--noHeader-paddingTop) var(--Modal-body-paddingX)
-      var(--Modal-body-paddingY);
+    margin: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
     flex-grow: 1;
-  }
-
-  &-header + &-body {
-    padding-top: var(--Modal-body-paddingY);
+    height: auto;
+    // overflow-y: auto;
+    padding: 0 #{px2rem(24px)};
   }
 
   &-footer {
     // @include clearfix();
+
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding: var(--Modal-footer-padding);
+    padding: var(--Modal-footer-padding) #{px2rem(24px)};
     border-top: var(--Modal-body-borderBottom);
     margin: var(--Modal-footer-marginY) var(--Modal-footer-marginX);
     border-bottom-left-radius: var(--Modal-content-borderRadius);

package/scss/components/_page.scss

@@ -137,7 +137,7 @@
     align-items: stretch;
 
     > .#{$ns}Page-content,
-    .#{$ns}PullRefresh {
+    > .#{$ns}PullRefresh {
       width: 0;
       flex-grow: 1;
     }

package/scss/components/_pagination.scss

@@ -1,7 +1,7 @@
 .#{$ns}Pagination {
   display: inline-block;
   padding: 0;
-  margin: 0 0 px2rem(-10px);
+  margin: 0 0 px2rem(-8px);
   border-radius: px2rem(4px);
 
   > li {
@@ -126,7 +126,7 @@
         border: var(--borderWidth) solid var(--borderColor);
         border-radius: var(--borderRadius) 0 0 var(--borderRadius);
         padding: var(--Pagination-padding);
-        margin-left: px2rem(10px);
+        margin-left: px2rem(8px);
         text-align: center;
 
         &:focus,
@@ -151,6 +151,7 @@
           color: var(--primary);
           border-color: var(--primary);
           border-left: var(--borderWidth) solid var(--primary);
+          margin-left: -1px;
         }
       }
   }
@@ -160,7 +161,7 @@
   line-height: px2rem(30px);
 
   .#{$ns}Pagination-item {
-    margin-left: px2rem(10px);
+    margin-left: px2rem(8px);
     &:nth-child(1) {
       margin-left: 0;
     }

package/scss/components/_progress.scss

@@ -6,6 +6,19 @@
   &-line {
     display: inline-block;
     width: 100%;
+    position: relative;
+    &-threshold {
+      position: absolute;
+      height: 100%;
+      border-left: 1px solid #007bff;
+      &-text {
+        position: absolute;
+        font-size: 12px;
+        bottom: -20px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
 
     &-inter {
       height: 100%;
@@ -29,9 +42,10 @@
     &-bar {
       float: left;
       width: 0;
-      height: 10px;
+      height: 8px;
       background: var(--primary);
       transition: width var(--animation-duration) ease;
+      border-radius: var(--Progress-borderRadius);
 
       &--stripe {
         background-image: linear-gradient(

package/scss/components/_result-box.scss

@@ -67,12 +67,9 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    padding-left: px2rem(5px);
 
     > * {
-      &:first-child {
-        margin-left: px2rem(5px);
-      }
-
       &:not(:last-child) {
         margin-right: px2rem(5px);
       }
@@ -80,7 +77,6 @@
   }
 
   &-singleValue {
-    padding: 0 calc(var(--Form-input-paddingX) - #{px2rem(3px)});
     flex-grow: 1;
     display: inline-block;
     max-width: 100%;
@@ -95,10 +91,11 @@
     align-items: center;
     transition: transform var(--animation-duration) ease;
     transform: rotate(90deg);
+
     > svg {
       width: px2rem(10px);
       height: px2rem(10px);
-      top: 0.125em;
+      top: 0;
       color: var(--default-icon-color);
     }
   }
@@ -155,6 +152,7 @@
       cursor: pointer;
       margin-left: px2rem(10px);
       color: var(--ResultBox-icon-color);
+
       &:hover {
         color: var(--ResultBox-icon--onHover-color);
       }
@@ -162,6 +160,7 @@
       > svg {
         width: px2rem(10px);
         height: px2rem(10px);
+
         &.icon {
           top: 0;
         }

package/scss/components/_search-box.scss

@@ -118,6 +118,10 @@
     height: 100%;
     color: var(--SearchBox-enhonce-icon-color);
     background: var(--SearchBox-hover-color);
+
+    &:hover {
+      background: var(--Button--primary-onHover-bg);
+    }
   }
 
   &--enhance &-clearable {

package/scss/components/_steps.scss

@@ -6,7 +6,7 @@
   .#{$ns}StepsItem {
     flex: 1;
     overflow: hidden;
-    padding: 0 px2rem(20px);
+    padding: 0 px2rem(8px);
     height: auto;
     line-height: px2rem(32px);
     &-container {
@@ -23,6 +23,10 @@
           border-radius: 50%;
           font-size: var(--Steps-icon-fontsize);
           text-align: center;
+          .icon {
+            width: px2rem(9px);
+            height: px2rem(9px);
+          }
         }
       }
       &Wrapper {
@@ -32,7 +36,7 @@
           .#{$ns}StepsItem-title {
             font-size: var(--Steps-title-fontsize);
             color: var(--Steps-title-color);
-            padding-right: px2rem(20px);
+            padding-right: px2rem(8px);
             position: relative;
             display: inline-block;
             > span {
@@ -70,7 +74,11 @@
             max-width: px2rem(140px);
             white-space: nowrap;
             position: relative;
-            bottom: px2rem(10px);
+            bottom: px2rem(20px);
+            >span {
+              color: var(--Steps-description-title-color);
+              font-size: var(--Steps-description-title-fontsize);
+            }
           }
         }
       }
@@ -96,7 +104,7 @@
           content: '';
           position: absolute;
           right: 0;
-          top: px2rem(32px);
+          top: px2rem(36px);
           height: 9999px;
           left: px2rem(11px);
           width: 1px;
@@ -204,17 +212,19 @@
             text-align: center;
             .#{$ns}StepsItem-title {
               padding: 0 px2rem(10px);
+              bottom: px2rem(9px);
               width: 100%;
               > span {
                 display: block;
                 position: relative;
-                left: px2rem(10px);
+                left: px2rem(12px);
               }
               .#{$ns}StepsItem-subTitle {
                 word-break: break-all;
                 padding: 0 px2rem(10px);
                 position: relative;
                 left: px2rem(10px);
+                bottom: px2rem(12px);
               }
             }
             .#{$ns}StepsItem-title:after {
@@ -223,7 +233,8 @@
             .#{$ns}StepsItem-description {
               min-width: px2rem(200px);
               word-break: break-all;
-              padding: 0 px2rem(10px);
+              padding: 0 px2rem(20px);
+              bottom: px2rem(44px);
             }
             .#{$ns}StepsItem-title.is-success {
               &:after {
@@ -307,18 +318,18 @@
       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.is-error {
     .#{$ns}StepsItem-icon {
-      background-color: var(--Steps-status-error);
+        background-color: var(--Steps-status-error);
       color: var(--white);
       border: 1px solid var(--Steps-status-error);
     }
-    .#{$ns}StepsItem-title,
-    .#{$ns}StepsItem-subTitle,
-    .#{$ns}StepsItem-description {
-      color: var(--Steps-status-error);
-    }
   }
   .#{$ns}StepsItem.is-finish,
   .#{$ns}StepsItem.is-process {