amis-ui 2.0.2 → 2.1.0

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

@@ -10,14 +10,19 @@
 @keyframes modalIn {
   from {
     opacity: 0;
-    transform: translate3d(0, -300px, 0) scale(0.2);
+    width: 0;
+    height: 0;
+    bottom: -999px;
   }
 }
 
 @keyframes modalOut {
   to {
     opacity: 0;
-    transform: translate3d(0, -300px, 0) scale(0.2);
+    opacity: 0;
+    width: 0;
+    height: 0;
+    bottom: -999px;
   }
 }
 
@@ -51,8 +56,6 @@
 
     &.in,
     &.out {
-      // opacity: 1;
-      // transform: translateY(0) scale(1);
       animation-duration: var(--animation-duration);
       animation-fill-mode: both;
     }
@@ -88,7 +91,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 +140,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/_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

@@ -29,9 +29,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);
       }
@@ -95,10 +92,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 +153,7 @@
       cursor: pointer;
       margin-left: px2rem(10px);
       color: var(--ResultBox-icon-color);
+
       &:hover {
         color: var(--ResultBox-icon--onHover-color);
       }
@@ -162,6 +161,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 {

package/scss/components/_table.scss

@@ -74,7 +74,16 @@
     background: var(--Table-bg);
     z-index: -1;
     opacity: 0;
-    box-shadow: var(--Table-fixedTop-boxShadow);
+
+    &-shadow {
+      position: absolute;
+      box-shadow: var(--Table-fixedTop-boxShadow);
+      z-index: -1;
+      height: 10px;
+      margin-top: -10px;
+      background-color: transparent;
+      opacity: 0;
+    }
 
     // box-sizing: content-box;
     // padding: var(--gap-base) var(--gap-base) 0 var(--gap-base);
@@ -84,7 +93,8 @@
     //   box-sizing: border-box;
     // }
 
-    &.in {
+    &.in,
+    &.in + .#{$ns}Table-fixedTop-shadow {
       position: fixed;
       opacity: 1;
       z-index: $zindex-affix;
@@ -232,6 +242,7 @@
     user-select: none;
     opacity: 0.5;
     z-index: $zindex-top;
+
     &:hover {
       background: var(--primary);
     }
@@ -265,6 +276,10 @@
       text-align: right;
     }
 
+    & td .#{$ns}SwitchControl {
+      padding-top: 0;
+    }
+
     &--withCombine {
       > thead > tr > th,
       > tbody > tr > td {
@@ -309,13 +324,19 @@
       > th {
         background: var(--Table-thead-bg);
         padding: var(--TableCell-paddingY) var(--TableCell-paddingX);
+        text-align: left;
 
         &:first-child {
-          padding-left: var(--TableCell--edge-paddingX);
+          padding-left: px2rem(12px);
+
+          &.#{$ns}Table-checkCell {
+            padding-left: var(--TableCell--edge-paddingX);
+          }
         }
 
         &:last-child {
-          padding-right: var(--TableCell--edge-paddingX);
+          padding-right: px2rem(12px);
+
           .#{$ns}Table-content-colDragLine {
             // 避免出现横向滚动条
             width: 4px;
@@ -327,6 +348,7 @@
           border-right: var(--Table-thead-borderWidth) solid
             var(--Table-thead-borderColor);
         }
+
         border-bottom: var(--Table-thead-borderWidth) solid
           var(--Table-thead-borderColor);
 
@@ -345,6 +367,14 @@
       }
     }
 
+    > thead > tr > th:first-child {
+      border-top-left-radius: 4px;
+    }
+
+    > thead > tr > th:last-child {
+      border-top-right-radius: 4px;
+    }
+
     > thead > tr + tr {
       border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
     }
@@ -358,6 +388,7 @@
 
       & + tr {
         border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
+
         > th {
           border-top: var(--Table-thead-borderWidth) solid
             var(--Table-thead-borderColor);
@@ -410,6 +441,14 @@
         }
       }
 
+      &:active {
+        background: transparent;
+      }
+
+      &:hover.#{$ns}Table-placeholder {
+        color: var(--text--muted-color);
+      }
+
       &.is-checked {
         background: var(--Table-onChecked-bg);
         border-color: var(--Table-onChecked-borderColor);
@@ -539,7 +578,6 @@
 
     > thead > tr > th.#{$ns}Table-checkCell,
     > tbody > tr > td.#{$ns}Table-checkCell {
-      border-right: 0;
       width: px2rem(1px);
       padding-right: var(--TableCell-paddingX);
       white-space: nowrap;
@@ -549,6 +587,10 @@
       }
     }
 
+    > tbody > tr > td.#{$ns}Table-checkCell {
+      border-right: 0;
+    }
+
     > thead > tr > th.#{$ns}Table-expandCell,
     > tbody > tr > td.#{$ns}Table-expandCell {
       border-right: 0;
@@ -562,6 +604,7 @@
       width: px2rem(1px);
       padding-right: 0;
       cursor: move;
+
       > svg {
         vertical-align: middle;
         top: 0;
@@ -653,11 +696,13 @@
     &--default {
       &.is-active {
         color: var(--text--muted-color);
+
         &:hover {
           color: var(--TableCell-searchBtn--onActive-color);
         }
       }
     }
+
     &--up,
     &--down {
       &.is-active {
@@ -675,12 +720,13 @@
       height: 12px;
     }
 
-    &:hover {
-      color: var(--text-color);
-    }
     &.is-active {
       color: var(--TableCell-searchBtn--onActive-color);
     }
+
+    &.is-opened {
+      color: var(--Button--default-onActive-border);
+    }
   }
 
   &Cell-searchPopOver {
@@ -802,6 +848,10 @@
     color: var(--info);
   }
 
+  &-foot {
+    background: var(--Table-thead-bg);
+  }
+
   &-footTable {
     position: relative;
     width: 100%;
@@ -849,10 +899,11 @@
       width: px2rem(10px);
       height: px2rem(10px);
       top: 0;
+      transform: rotate(90deg);
     }
 
     &.is-active > svg {
-      transform: rotate(90deg);
+      transform: rotate(-90deg);
     }
 
     &:hover {
@@ -871,6 +922,7 @@
       text-decoration: none;
       color: var(--icon-onHover-color);
     }
+
     > svg {
       vertical-align: -2px;
     }
@@ -895,30 +947,55 @@
 
   &--autoFillHeight {
     margin-bottom: 0;
+
     > .#{$ns}Table-contentWrap {
       > .#{$ns}Table-content table {
         border-top: none; // 不然会导致拖动时顶部露出内容
       }
+
       > .#{$ns}Table-content table thead {
         position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
         top: 0;
         z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
       }
     }
+
     > .#{$ns}Table-fixedTop {
-      display: none;
+      .#{$ns}Table-fixedTop-shadow {
+        display: none;
+      }
     }
+
     > .#{$ns}Table-footToolbar {
       margin-bottom: 0;
     }
   }
 }
 
+.#{$ns}InputTable {
+  .#{$ns}Field--quickEditable svg {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-onHover);
+    }
+
+    &:active {
+      color: var(--primary-onActive);
+    }
+  }
+}
+
 .#{$ns}InputTable-toolbar {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
+
+  .#{$ns}Button {
+    border: none;
+    color: var(--Button--link-color);
+  }
 }
 
 .#{$ns}InputTable-pager {

package/scss/components/_tabs.scss

@@ -144,9 +144,17 @@
         outline: none;
       }
 
+      &:hover .#{$ns}Tabs-link-close {
+        width: var(--Tabs-close-size);
+        margin-left: var(--Tabs-close-margin);
+      }
+
       .#{$ns}Tabs-link-close {
-        margin: var(--Tabs-close-marginTop) 0 0 var(--Tabs-close-margin);
+        width: 0;
+        margin: var(--Tabs-close-marginTop) 0 0;
         fill: var(--Tabs-gray-color);
+        transition: all var(--Tabs-animation-duration) linear;
+        overflow: hidden;
         cursor: pointer;
 
         .#{$ns}Tabs-link-close-icon {
@@ -170,6 +178,16 @@
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+
+        > .#{$ns}Icon {
+          margin-right: var(--Tabs-icon-gap);
+          vertical-align: unset;
+        }
+
+        > img.#{$ns}Icon {
+          position: relative;
+          top: 0.125em;
+        }
       }
 
       > .#{$ns}Combo-toolbarBtn {
@@ -236,8 +254,16 @@
 
   &--line {
     > .#{$ns}Tabs-linksContainer-wrapper {
-      border-bottom: var(--Tabs-borderWidth) solid
-        var(--Tabs--simple-split-color);
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 0;
+        border-bottom: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color);
+      }
 
       &--toolbar {
         .#{$ns}Tabs-link {
@@ -292,6 +318,11 @@
           .#{$ns}Tabs-link-close {
             fill: var(--primary);
           }
+
+          > a:first-child:hover:active {
+            color: #144BCC;
+            border-color: #144BCC;
+          }
         }
 
         &:last-child {
@@ -676,6 +707,8 @@
             font-size: var(--Tabs--sidebar-iconSize);
             height: var(--Tabs--sidebar-iconSize);
             margin-bottom: var(--Tabs--sidebar-iconMargin);
+            margin-right: 0;
+            top: 0;
           }
         }
         &.is-active > a:first-child,
@@ -852,7 +885,6 @@
             }
 
             & > .#{$ns}Tabs-link-close {
-              padding-top: var(--Tabs--simple-split-width);
               cursor: pointer;
             }
 
@@ -868,6 +900,11 @@
                 color: var(--Tabs--line-onHover-color);
                 border: none;
               }
+
+              > a:first-child:hover:active {
+                color: #144BCC;
+                border-color: #144BCC;
+              }
             }
 
             &:not(.is-disabled):hover .#{$ns}Tabs-link-close {
@@ -987,6 +1024,11 @@
             > a:first-child:focus {
               color: var(--Tabs--line-onHover-color);
             }
+
+            > a:first-child:hover:active {
+              color: #144BCC;
+              border-color: #144BCC;
+            }
           }
 
           &:not(.is-disabled):hover .#{$ns}Tabs-link-close {