amis-ui 3.1.1 → 3.3.0

package/scss/components/_nav.scss

@@ -4,6 +4,7 @@
   background-color: var(--Layout-light-backgroundColor);
   font-size: var(--Nav-item-fontSize);
   line-height: var(--Nav-Item-height);
+  min-height: 10px;
 
   &-horizontal {
     line-height: var(--Nav-Item-height--horizontal);

package/scss/components/_panel.scss

@@ -220,7 +220,7 @@
       calc(var(--Panel-marginBottom) / 2);
 
     .#{$ns}Panel-body {
-      padding: 0 var(--gap-md) var(--gap-md);
+      // padding: 0 var(--gap-md) var(--gap-md);
     }
 
     > .#{$ns}Panel-heading {

package/scss/components/_picker-columns.scss

@@ -35,11 +35,11 @@
   }
 
   &-confirm {
-    color: var(--PickerColumns-confirmAction-color) !important;
+    color: var(--PickerColumns-confirmAction-color);
   }
 
   &-cancel {
-    color: var(--PickerColumns-cancelAction-color) !important;
+    color: var(--PickerColumns-cancelAction-color);
   }
 
   &-title {
@@ -94,8 +94,6 @@
     }
   }
 
-  
-
   &-mask {
     position: absolute;
     top: 0;

package/scss/components/_popup.scss

@@ -120,7 +120,9 @@
   }
 
   &-confirm {
+    color: var(--PopUp-confirmAction-color);
     margin-right: var(--gap-sm);
+    border: none;
   }
 
   &-content {
@@ -128,6 +130,10 @@
     height: 100%;
     display: flex;
     flex: 1;
+
+    > div {
+      flex: 1;
+    }
   }
 
   & > * {
@@ -155,6 +161,7 @@
     margin-top: px2rem(-4px);
   }
   &-safearea {
-    height: px2rem(16px);
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }

package/scss/components/_progress.scss

@@ -3,6 +3,7 @@
   align-items: center;
   color: var(--text-color);
   font-size: var(--fontSizeXs);
+  min-width: 50px;
   &-line {
     display: inline-block;
     width: 100%;
@@ -49,7 +50,6 @@
       transition: width var(--animation-duration) ease;
       border-radius: var(--Progress-borderRadius);
 
-      
       &.bg-info {
         background: var(--Progress-line-theme-color);
       }

package/scss/components/_result-box.scss

@@ -324,6 +324,11 @@
     border: none;
     justify-content: flex-end;
 
+    &.is-focused,
+    &:hover {
+      border: none !important;
+    }
+
     .#{$ns}ResultBox-clear {
       @include input-clear();
       width: px2rem(26px);

package/scss/components/_search-box.scss

@@ -53,6 +53,9 @@
   &-cancelBtn {
     cursor: pointer;
     color: var(--SearchBox-search-icon-color);
+    svg {
+      top: 1px;
+    }
 
     &:hover {
       color: var(--icon-onHover-color);
@@ -118,6 +121,9 @@
     height: 100%;
     color: var(--SearchBox-enhonce-icon-color);
     background: var(--SearchBox-hover-color);
+    svg {
+      top: 0;
+    }
 
     &:hover {
       background: var(--button-primary-hover-bg-color);
@@ -132,6 +138,12 @@
     background: var(--SearchBox-enhonce-disabled-color);
     color: var(--SearchBox-enhonce-disabled-search-color);
   }
+
+  &.is-mobile {
+    border-radius: 0;
+    border: none;
+    border-bottom: var(--borderWidth) solid var(--borderColor);
+  }
 }
 
 .#{$ns}SearchBox-history {

package/scss/components/_steps.scss

@@ -24,8 +24,8 @@
           font-size: var(--Steps-icon-fontsize);
           text-align: center;
           .icon {
-            width: px2rem(9px);
-            height: px2rem(9px);
+            width: px2rem(12px);
+            height: px2rem(12px);
             position: relative;
             top: 0;
           }
@@ -388,7 +388,9 @@
 
   .#{$ns}StepsItem.is-clickable {
     .#{$ns}StepsItem-container {
-      &ProgressDot, &Icon, &Wrapper {
+      &ProgressDot,
+      &Icon,
+      &Wrapper {
         cursor: pointer;
       }
     }

package/scss/components/_table.scss

@@ -8,82 +8,24 @@
     margin-bottom: var(--gap-sm);
   }
 
-  &-fixedLeft,
-  &-fixedRight {
-    position: absolute;
-    background: var(--Table-bg);
-    z-index: var(--Table-fixed-zIndex);
-    top: auto;
-    box-shadow: none;
-
-    &--autoFillHeight {
-      & > table thead {
-        position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
-        top: 0;
-        z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
-      }
-    }
-  }
-
-  &-fixedLeft {
-    // 还是改成默认不显示，footable 展示的时候，配置 固定列还没修复
-    left: 0;
-    top: -999999px;
-
-    &.in {
-      box-shadow: var(--Table-fixedLeft-boxShadow);
-      top: auto;
-    }
-
-    & > .#{$ns}Table-table {
-      > thead > tr > th:last-child,
-      > tbody > tr > td:last-child {
-        padding-right: var(--TableCell-paddingX);
-      }
-
-      // > thead > tr > th:last-child {
-      //   border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor);
-      // }
-    }
-  }
-
-  &-fixedRight {
-    // 还是改成默认不显示，footable 展示的时候，配置 固定列还没修复
-    right: 0;
-    top: -999999px;
-
-    &.in {
-      box-shadow: var(--Table-fixedRight-boxShadow);
-      top: auto;
-    }
-
-    & > .#{$ns}Table-table {
-      > thead > tr > th:first-child,
-      > tbody > tr > td:first-child {
-        padding-left: var(--TableCell-paddingX);
-      }
-
-      // > thead > tr > th:first-child {
-      //   border-left: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor);
-      // }
-    }
-  }
-
   &-fixedTop {
-    position: absolute;
+    position: sticky;
     background: var(--Table-bg);
-    z-index: -1;
-    opacity: 0;
+    display: block;
+    opacity: 1;
+    z-index: $zindex-sticky;
 
     &:after {
       content: '';
       position: absolute;
       width: 100%;
       box-shadow: var(--Table-fixedTop-boxShadow);
-      z-index: 10;
-      height: 1px;
-      margin-top: -3px;
+      z-index: 30;
+      height: 30px;
+      top: 100%;
+      pointer-events: none;
       background-color: transparent;
+      margin-top: -2px;
     }
 
     // box-sizing: content-box;
@@ -94,22 +36,11 @@
     //   box-sizing: border-box;
     // }
 
-    &.in {
-      position: fixed;
-      opacity: 1;
-      z-index: $zindex-affix;
-    }
-
-    > .#{$ns}Table-fixedLeft,
-    > .#{$ns}Table-fixedRight {
-      z-index: $zindex-affix + 10;
-      // box-shadow: none;
-      background: transparent;
-    }
+    // &.in {
+    //   // position: fixed;
+    // }
 
     &.is-fakeHide {
-      > .#{$ns}Table-fixedLeft,
-      > .#{$ns}Table-fixedRight,
       > .#{$ns}Table-wrapper {
         visibility: hidden;
         position: absolute;
@@ -207,6 +138,14 @@
     }
   }
 
+  &.is-mobile {
+    .#{$ns}Table-toolbar {
+      .#{$ns}Form-item {
+        padding: 0;
+      }
+    }
+  }
+
   &-header + &-toolbar {
     padding-top: 0;
   }
@@ -228,10 +167,6 @@
     min-height: 0.01%;
     overflow-x: auto;
     transform: translateZ(0);
-
-    th {
-      position: relative;
-    }
   }
 
   &-content-colDragLine {
@@ -243,9 +178,10 @@
     cursor: col-resize;
     user-select: none;
     opacity: 0.5;
-    z-index: $zindex-top;
+    z-index: 15;
 
-    &:hover {
+    &:hover,
+    &.is-resizing {
       background: var(--primary);
     }
   }
@@ -258,12 +194,54 @@
     color: var(--Table-color);
     background: var(--Table-bg);
     border-spacing: 0;
-    border-collapse: collapse;
-    border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
+    border-collapse: separate;
 
     & th,
     & td {
       text-align: left;
+      border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
+
+      &.is-sticky {
+        position: sticky !important;
+        z-index: 20;
+        background: inherit;
+      }
+
+      &.is-sticky-last-left:after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: -1px;
+        width: 30px;
+        transform: translateX(100%);
+        transition: box-shadow 0.3s;
+        content: '';
+        pointer-events: none;
+      }
+
+      &.is-sticky-first-right:after {
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        left: 0;
+        width: 30px;
+        transform: translateX(-100%);
+        transition: box-shadow 0.3s;
+        content: '';
+        pointer-events: none;
+      }
+    }
+
+    &.table-fixed-left .is-sticky-last-left:after {
+      box-shadow: var(--Table-fixedLeft-boxShadow);
+    }
+
+    &.table-fixed-right .is-sticky-first-right:after {
+      box-shadow: var(--Table-fixedRight-boxShadow);
+    }
+
+    & th {
+      position: relative;
     }
 
     & th.text-center,
@@ -282,6 +260,10 @@
       padding-top: 0;
     }
 
+    &--affixHeader thead {
+      visibility: collapse;
+    }
+
     &--withCombine {
       > thead > tr > th,
       > tbody > tr > td {
@@ -296,7 +278,7 @@
 
       // reset
       > tbody > tr {
-        @if $Table-strip-bg !=transparent {
+        @if $Table-strip-bg != transparent {
           &.#{$ns}Table-tr--odd {
             background: transparent;
           }
@@ -323,8 +305,9 @@
     }
 
     > thead > tr {
+      background: var(--Table-thead-bg);
       > th {
-        background: var(--Table-thead-bg);
+        background: inherit;
         padding: var(--TableCell-paddingY) var(--TableCell-paddingX);
         text-align: left;
 
@@ -391,6 +374,7 @@
 
     > tbody > tr {
       position: relative;
+      background: var(--Table-bg);
 
       & + tr {
         border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
@@ -407,6 +391,7 @@
         color: var(--Table-thead-color);
         font-weight: var(--fontWeightNormal);
         white-space: nowrap;
+
         border-right: var(--Table-thead-borderWidth) solid
           var(--Table-thead-borderColor);
       }
@@ -448,7 +433,7 @@
       }
 
       &:active {
-        background: transparent;
+        background: var(--Table-onHover-bg);
       }
 
       &:hover.#{$ns}Table-placeholder {
@@ -525,51 +510,48 @@
       }
     }
 
+    .#{$ns}Table-divider2 {
+      content: '';
+      position: absolute;
+      height: px2rem(1px);
+      top: 50%;
+      width: px2rem(10px);
+      background: var(--Table-tree-borderColor);
+    }
+
+    .#{$ns}Table-divider3 {
+      position: absolute;
+      width: px2rem(1px);
+      top: 0;
+      bottom: 0;
+      height: 100%;
+      background: var(--Table-tree-borderColor);
+    }
+
     @for $i from 2 through 10 {
       tr.#{$ns}Table-tr--#{$i}th.is-expanded {
         .#{$ns}Table-expandCell:before {
-          right: px2rem(7px) + px2rem(-18px) * ($i - 1);
+          left: px2rem(23px) + px2rem(18px) * ($i - 1);
         }
       }
 
       tr.#{$ns}Table-tr--#{$i}th {
         .#{$ns}Table-expandBtn {
           position: relative;
-          right: -(px2rem(18px)) * ($i - 1);
+          left: px2rem(1px) + (px2rem(18px)) * ($i - 1);
         }
 
-        .#{$ns}Table-expandCell + td {
-          position: relative;
-
-          &::before {
-            content: '';
-            position: absolute;
-            width: px2rem(1px);
-            top: 0;
-            bottom: 0;
-            left: px2rem(-8px) + px2rem(18px) * ($i - 2);
-            height: auto;
-            background: var(--Table-tree-borderColor);
-          }
-
-          &::after {
-            content: '';
-            position: absolute;
-            height: px2rem(1px);
-            top: 50%;
-            left: px2rem(-8px) + px2rem(18px) * ($i - 2);
-            width: px2rem(10px);
-            background: var(--Table-tree-borderColor);
-          }
+        .#{$ns}Table-divider2 {
+          left: px2rem(5px) + (px2rem(18px)) * ($i - 1);
+        }
 
-          padding-left: px2rem(18px) * $i - px2rem(18px);
+        .#{$ns}Table-divider3 {
+          left: px2rem(5px) + (px2rem(18px)) * ($i - 1);
         }
       }
 
-      tr.#{$ns}Table-tr--#{$i}th.is-expandable {
-        .#{$ns}Table-expandCell + td {
-          padding-left: px2rem(18px) * ($i - 1);
-        }
+      tr.#{$ns}Table-tr--#{$i}th.is-last .#{$ns}Table-divider3 {
+        height: 50%;
       }
 
       tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) {
@@ -628,7 +610,7 @@
           bottom: 0;
           height: 100%;
           background: var(--Table-tree-borderColor);
-          right: px2rem(7px) + px2rem(-18px) * ($i - 1);
+          left: px2rem(23px) + px2rem(18px) * ($i - 1);
         }
       }
     }
@@ -642,7 +624,7 @@
         width: px2rem(1px);
         top: 50%;
         bottom: 0;
-        right: px2rem(7px);
+        left: px2rem(23px);
         height: auto;
         background: var(--Table-tree-borderColor);
       }
@@ -657,6 +639,21 @@
     }
   }
 
+  &.is-mobile {
+    .#{$ns}Table-table > tbody > tr {
+      &:hover,
+      &.is-hovered {
+        background: var(--Table-bg);
+        border-color: var(--Table-borderColor);
+        color: var(--Table-color);
+
+        & + tr {
+          border-color: var(--Table-borderColor);
+        }
+      }
+    }
+  }
+
   &Cell-sortBtn,
   &Cell-searchBtn,
   &Cell-filterBtn {
@@ -962,14 +959,10 @@
       > .#{$ns}Table-content table thead {
         position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
         top: 0;
-        z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
+        z-index: 21; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
       }
     }
 
-    > .#{$ns}Table-fixedTop {
-      display: none;
-    }
-
     > .#{$ns}Table-footToolbar {
       margin-bottom: 0;
     }
@@ -982,6 +975,11 @@
     display: inline-flex;
     cursor: pointer;
 
+    &:hover {
+      color: var(--link-color);
+      font-size: var(--Button--sm-fontSize);
+    }
+
     &-arrow {
       width: var(--gap-md);
       text-align: center;

package/scss/components/_tabs.scss

@@ -112,6 +112,18 @@
           height: 100%;
           overflow-x: hidden;
 
+          &.is-mobile {
+            overflow-x: auto;
+            -ms-overflow-style: none;
+            overflow: -moz-scrollbars-none;
+
+            &::-webkit-scrollbar {
+              display: none;
+              width: 0 !important;
+              height: 0 !important;
+            }
+          }
+
           .#{$ns}Tabs-links-drag {
             position: absolute;
             height: 100%;

package/scss/components/_timeline.scss

@@ -103,10 +103,11 @@
           color: var(--Timeline-detail-icon-color);
           width: var(--TimelineItem-detail-arrow-width);
           height: var(--TimelineItem-detail-arrow-width);
+          transition: transform var(--animation-duration);
         }
 
         .#{$ns}TimelineItem-detail-arrow-top {
-          transform: rotateX(180deg);
+          transform: rotate(180deg);
         }
 
         .#{$ns}TimelineItem-detail-visible {

package/scss/components/form/_checks.scss

@@ -64,6 +64,14 @@
     }
   }
 
+  &.is-mobile {
+    > i {
+      + span {
+        vertical-align: middle;
+      }
+    }
+  }
+
   &:hover > i + span > a {
     display: inline-block;
   }
@@ -354,7 +362,9 @@
     margin-right: 0;
     border-radius: calc(var(--Checkbox-borderRadius) * 2);
     min-width: var(--Checkbox-button-min-width);
-
+    > span {
+      line-height: var(--Checkbox-button-line-height);
+    }
     &:hover:not(:disabled) {
       color: var(--Checkbox-onHover-color);
       border-color: var(--Checkbox-onHover-color);

package/scss/components/form/_color.scss

@@ -9,10 +9,7 @@
   background: var(--ColorPicker-bg);
   color: var(--ColorPicker-color);
   border-radius: var(--borderRadius);
-
-  &-popup {
-    height: px2rem(400px);
-  }
+  height: var(--ColorPicker-height);
 
   &:not(.is-disabled) {
     cursor: pointer;
@@ -79,6 +76,9 @@
 
   &-clear {
     @include input-clear();
+    svg {
+      top: 0;
+    }
   }
 
   &-arrow {
@@ -98,11 +98,12 @@
       width: 10px;
       height: 10px;
       top: 0;
+      transform: rotate(90deg);
     }
   }
 
   &.is-opened &-arrow > svg {
-    transform: rotate(180deg);
+    transform: rotate(270deg);
   }
 }
 
@@ -122,3 +123,28 @@
   border-radius: var(--borderRadius) !important;
   box-shadow: var(--ColorPicker-boxShadow) !important;
 }
+
+.#{$ns}ColorPicker-popup {
+  height: px2rem(500px);
+
+  .sketch-picker {
+    width: 80% !important;
+    box-shadow: none !important;
+
+    input {
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .flexbox-fix {
+      &:last-child {
+        > div {
+          width: 18px !important;
+          height: 18px !important;
+          margin: 0px 16px 10px 0px !important;
+        }
+      }
+    }
+  }
+}