amis-ui 3.5.2 → 3.5.3

package/scss/_components.scss

@@ -786,6 +786,7 @@
   --transfer-base-header-paddingBottom: var(--sizes-size-5);
   --transfer-base-header-paddingLeft: var(--sizes-size-8);
   --transfer-base-header-paddingRight: var(--sizes-size-8);
+  --transfer-base-footer-border-color: var(--colors-neutral-line-8);
   --transfer-base-body-paddingTop: var(--sizes-size-0);
   --transfer-base-body-paddingBottom: var(--sizes-size-0);
   --transfer-base-body-paddingLeft: var(--sizes-size-0);
@@ -1659,8 +1660,8 @@
   --Form--horizontal-label-widthBase: var(--sizes-base-49);
   --Form--horizontal-label-widthXs: var(--sizes-base-25);
   --Form--horizontal-label-widthSm: var(--sizes-base-35);
-  --Form--horizontal-label-widthMd: 8.5rem;
-  --Form--horizontal-label-widthLg: 12.5rem;
+  --Form--horizontal-label-widthMd: #{px2rem(136px)};
+  --Form--horizontal-label-widthLg: #{px2rem(200px)};
   --Form--horizontal-value-marginTop: var(--sizes-size-0);
   --Form--horizontal-value-marginBottom: var(--sizes-size-0);
   --Form--horizontal-value-marginLeft: var(--sizes-size-5);
@@ -1682,7 +1683,7 @@
   --InputRange-handle-mobile-width: var(--sizes-base-10);
   --InputRange-handle-bg: var(--colors-neutral-fill-11);
   --InputRange-handle-top-border-color: var(--colors-brand-5);
-  --InputRange-handle-top-border-width: 0.0625rem;
+  --InputRange-handle-top-border-width: #{px2rem(1px)};
   --InputRange-handle-top-border-style: var(--borders-style-2);
   --InputRange-handle-top-right-border-radius: var(--borders-radius-7);
   --InputRange-handle-border: var(--InputRange-handle-top-border-width)
@@ -1773,9 +1774,9 @@
   --dialog-content-color: var(--colors-neutral-text-2);
   --dialog-footer-height: var(--sizes-size-1);
   --dialog-footer-margin-left: var(--sizes-size-5);
-  --dialog-size-sm-width: 21.875rem;
-  --dialog-size-normal-width: 31.25rem;
-  --dialog-size-lg-width: 68.75rem;
+  --dialog-size-sm-width: #{px2rem(350px)};
+  --dialog-size-normal-width: #{px2rem(500px)};
+  --dialog-size-lg-width: #{px2rem(1100px)};
   --dialog-size-xl-width: 90%;
 
   --Modal-bg: var(--background);
@@ -1828,10 +1829,10 @@
   --drawer-content-paddingRight: var(--sizes-base-12);
   --drawer-footer-height: var(--sizes-size-1);
   --drawer-footer-margin-left: var(--sizes-size-9);
-  --drawer-size-xs-width: 12.5rem;
-  --drawer-size-sm-width: 18.75rem;
-  --drawer-size-md-width: 31.25rem;
-  --drawer-size-lg-width: 50rem;
+  --drawer-size-xs-width: #{px2rem(200px)};
+  --drawer-size-sm-width: #{px2rem(300px)};
+  --drawer-size-md-width: #{px2rem(500px)};
+  --drawer-size-lg-width: #{px2rem(800px)};
   --drawer-size-xl-width: 90%;
 
   --Drawer-bg: var(--background);
@@ -2052,6 +2053,7 @@
   --Tabs-onActive-bg: var(--background);
   --Tabs-onActive-borderColor: var(--borderColor);
   --Tabs-onActive-color: var(--colors-neutral-text-2);
+  --Tabs-onError-color: var(--colors-error-5);
   --Tabs-onDisabled-color: var(--colors-neutral-text-7);
   --Tabs-onHover-borderColor: var(--colors-neutral-line-8);
   --Tabs-add-icon-size: #{px2rem(15px)};
@@ -2394,7 +2396,7 @@
   --Tabs--vertical-paddingLeft: var(--sizes-size-7);
   --Tabs--vertical-paddingRight: var(--sizes-size-7);
   --Tabs--vertical-bg: var(--colors-neutral-fill-10);
-  --Tabs--vertical-width: 8.75rem;
+  --Tabs--vertical-width: #{px2rem(140px)};
   --Tabs--vertical-active-color: var(--colors-brand-5);
   --Tabs--vertical-active-fontSize: var(--fonts-size-7);
   --Tabs--vertical-active-fontWeight: var(--fonts-weight-6);
@@ -2554,7 +2556,7 @@
   --Divider-text-marginRight: var(--sizes-size-9);
   --Divider-text-marginBottom: var(--sizes-size-0);
 
-  --inputFile-base-des-color: var(--colors-neutral-text-2);
+  --inputFile-base-des-color: var(--Form-description-color);
   --inputFile-base-des-fontSize: var(--fonts-size-7);
   --inputFile-base-des-fontWeight: var(--fonts-weight-6);
   --inputFile-base-des-margin: var(--sizes-base-5);
@@ -3280,6 +3282,7 @@
   --Alert-fontColor: var(--colors-neutral-text-4);
   --Alert-title-fontColor: var(--colors-neutral-text-2);
   --Alert-height: var(--sizes-base-20);
+  --Alert-actions-marginRight: var(--sizes-base-4);
 
   --spinner-base-color: var(--colors-link-5);
   --spinner-base-fontSize: var(--fonts-size-8);
@@ -3319,7 +3322,7 @@
   --image-images-item-marginBottom: var(--sizes-size-3);
   --image-images-item-marginLeft: var(--sizes-size-3);
   --image-images-item-marginRight: var(--sizes-size-3);
-  --image-images-item-size: 3rem;
+  --image-images-item-size: #{px2rem(48px)};
   --image-images-item-color: var(--colors-neutral-text-5);
   --image-images-preview-radius: var(--sizes-size-3);
   --image-images-preview-bgColor: var(--colors-neutral-text-11);
@@ -4130,6 +4133,7 @@
     var(--combo-vertical-right-border-color)
     var(--combo-vertical-bottom-border-color)
     var(--combo-vertical-left-border-color);
+  --Combo--vertical-item--onError-borderColor: var(--colors-error-5);
   --Combo--vertical-item-borderRadius: var(
       --combo-vertical-top-left-border-radius
     )

package/scss/_properties.scss

@@ -274,22 +274,18 @@ $Table-strip-bg: transparent;
   --DropDown-menu-borderColor: var(--borderColor);
   --DropDown-menu-borderRadius: var(--borderRadius);
   --DropDown-menu-borderWidth: var(--borderWidth);
-  --DropDown-menu-boxShadow: var(--shadows-shadow-normal);
-  --DropDown-menu-height: #{px2rem(34px)};
+  --DropDown-menu-boxShadow: var(--Form-select-outer-boxShadow);
+  --DropDown-menu-height: #{px2rem(32px)};
   --DropDown-menu-minWidth: #{px2rem(160px)};
   --DropDown-menu-paddingX: 0;
   --DropDown-menu-paddingY: var(--gap-xs);
-  --DropDown-menuItem-onHover-bg: var(--ListMenu-item--onHover-bg);
+  --DropDown-menuItem-onHover-bg: var(--Form-select-menu-onHover-bg);
   --DropDown-group-color: #848b99;
   --DropDown-menuItem-color: #151a26;
-  --DropDown-menuItem-onHover-color: var(--colors-brand-5);
+  --DropDown-menuItem-onHover-color: var(--Form-select-menu-onHover-color);
   --DropDown-menuItem-onActive-color: var(--colors-brand-5);
   --DropDown-menuItem-onDisabled-color: #b4b6ba;
-  --DropDown-menuItem-paddingX: var(--gap-sm);
-  --DropDown-menuItem-paddingY: calc(
-    (var(--DropDown-menu-height) - var(--fontSizeBase) * var(--lineHeightBase)) /
-      2
-  );
+  --DropDown-menuItem-paddingX: var(--select-base-default-option-paddingRight);
 
   --Fieldset-legend-bgColor: var(--colors-neutral-fill-11);
 
@@ -708,9 +704,9 @@ $Table-strip-bg: transparent;
   --Tooltip--attr-transition: all var(--animation-duration) ease-in-out;
   --Tooltip-arrow-color: var(--Tooltip-bg);
   --Tooltip-arrow-color--dark: rgba(7, 12, 20, 0.85);
-  --Tooltip-arrow-height: 0.25rem;
+  --Tooltip-arrow-height: #{px2rem(4px)};
   --Tooltip-arrow-outerColor: #{fade-in($borderColor, 0.05)};
-  --Tooltip-arrow-width: 0.5rem;
+  --Tooltip-arrow-width: #{px2rem(8px)};
   --Tooltip-bg: var(--background);
   --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-body-color: var(--text-color);

package/scss/components/_alert.scss

@@ -52,6 +52,10 @@
     }
   }
 
+  &-actions {
+    margin-right: var(--Alert-actions-marginRight);
+  }
+
   &-close {
     outline: none;
     padding: 0;

package/scss/components/_audio.scss

@@ -125,7 +125,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    width: var(--Audio-volumeControl-width);
+    min-width: var(--Audio-volumeControl-width);
     height: var(--Audio-volume-height);
     line-height: var(--Audio-volume-lineHeight);
     margin-right: var(--Audio-item-margin);

package/scss/components/_card.scss

@@ -162,6 +162,7 @@
 
       &.is-disabled {
         color: var(--text--muted-color);
+        cursor: not-allowed;
 
         &:hover {
           text-decoration: none;
@@ -238,7 +239,7 @@
     margin: 0 var(--gap-sm) !important;
   }
   &-secondary {
-    max-width: 12.5rem;
+    max-width: px2rem(200px);
     color: var(--Card-secondary-color);
     padding: 0 var(--gap-md);
     font-size: var(--fontSizeMd);

package/scss/components/_dropdown.scss

@@ -57,6 +57,7 @@
       overflow-y: auto;
       overflow-x: hidden;
       max-height: px2rem(300px);
+      margin-top: px2rem(4px);
     }
   }
 
@@ -67,10 +68,11 @@
 
   &-menuItem,
   &-menu > li {
-    padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
+    padding: 0 var(--DropDown-menuItem-paddingX);
     white-space: nowrap;
     box-sizing: border-box;
     height: var(--DropDown-menu-height);
+    line-height: var(--DropDown-menu-height);
     vertical-align: middle;
     user-select: none;
     color: var(--DropDown-menuItem-color);
@@ -95,7 +97,7 @@
 
     &.#{$ns}DropDown-divider {
       height: px2rem(1px);
-      margin: px2rem(9px) 0;
+      margin: px2rem(4px) 0;
       overflow: hidden;
       background: var(--DropDown-menu-borderColor);
       padding: 0;

package/scss/components/_menu.scss

@@ -485,6 +485,12 @@
       .#{$ns}Nav-Menu-overflowedIcon {
         margin-right: 0;
         line-height: inherit; // 到了saas中 会被fortawesome的样式影响 因此需要覆盖一下
+
+        i,
+        svg,
+        img {
+          float: none;
+        }
       }
     }
 
@@ -519,14 +525,13 @@
     .#{$ns}Nav-Menu-submenu-arrow {
       display: inline-block;
       font-size: px2rem(9px);
-      vertical-align: middle;
       text-transform: none;
       text-rendering: auto;
       line-height: px2rem(20px);
       margin-left: px2rem(5px);
 
       & > svg {
-        top: auto;
+        top: 0;
       }
     }
 

package/scss/components/_modal.scss

@@ -65,6 +65,10 @@
     }
   }
 
+  &-draggable > &-header {
+    cursor: move;
+  }
+
   &-overlay {
     transition: ease-in-out opacity var(--animation-duration);
     position: fixed;

package/scss/components/_page.scss

@@ -71,18 +71,18 @@
 
   &-asideResizor {
     position: absolute;
-    right: -0.375rem;
+    right: px2rem(-6px);
     top: 50%;
     cursor: ew-resize;
     writing-mode: vertical-lr;
-    width: 0.75rem;
-    height: 1.5rem;
-    margin-top: -0.75rem;
+    width: px2rem(12px);
+    height: px2rem(24px);
+    margin-top: px2rem(-12px);
     border: 0.0625rem solid #dee2e6;
     background-color: #fff;
-    border-radius: 0.142rem;
+    border-radius: px2rem(2px);
     font-size: 12px;
-    line-height: 0.625rem;
+    line-height: px2rem(10px);
     text-align: center;
     user-select: none;
     color: #666;

package/scss/components/_pagination.scss

@@ -74,7 +74,7 @@
     }
   }
   &-simple {
-    >ul >li {
+    > ul > li {
       &:hover,
       &:focus {
         outline: none;
@@ -94,8 +94,6 @@
     }
   }
 
-
-
   &-next {
     > span {
       cursor: pointer;
@@ -113,47 +111,47 @@
     align-items: center;
     height: var(--Pagination-height);
 
-      &-left {
-        color: var(--Pagination-light-color);
-      }
-      input {
-        min-width: px2rem(50px);
-        width: px2rem(50px);
-        height: var(--Pagination-height);
-        line-height: var(--Pagination-height);
-        // height: var(--Pagination-height);
-        border: none;
-        border: var(--borderWidth) solid var(--borderColor);
-        border-radius: var(--borderRadius) 0 0 var(--borderRadius);
-        padding: var(--Pagination-padding);
-        margin-left: px2rem(8px);
-        text-align: center;
-
-        &:focus,
-        &:hover {
-          outline: none;
-          // border: var(--borderWidth) solid var(--primary);
-          border-color: var(--primary);
-        }
+    &-left {
+      color: var(--Pagination-light-color);
+    }
+    input {
+      min-width: px2rem(50px);
+      width: px2rem(50px);
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      // height: var(--Pagination-height);
+      border: none;
+      border: var(--borderWidth) solid var(--borderColor);
+      border-radius: var(--borderRadius) 0 0 var(--borderRadius);
+      padding: var(--Pagination-padding);
+      margin-left: px2rem(8px);
+      text-align: center;
+
+      &:focus,
+      &:hover {
+        outline: none;
+        // border: var(--borderWidth) solid var(--primary);
+        border-color: var(--primary);
       }
-      &-right {
-        display: inline-block;
-        width: px2rem(32px);
-        cursor: pointer;
-        text-align: center;
-        height: var(--Pagination-height);
-        line-height: var(--Pagination-height);
-        border: var(--borderWidth) solid var(--borderColor);
-        border-left: none;
-        border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
-        font-size: var(--fontSizeSm);
-        &:hover {
-          color: var(--primary);
-          border-color: var(--primary);
-          border-left: var(--borderWidth) solid var(--primary);
-          margin-left: -1px;
-        }
+    }
+    &-right {
+      display: inline-block;
+      width: px2rem(32px);
+      cursor: pointer;
+      text-align: center;
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      border: var(--borderWidth) solid var(--borderColor);
+      border-left: none;
+      border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+      font-size: var(--fontSizeSm);
+      &:hover {
+        color: var(--primary);
+        border-color: var(--primary);
+        border-left: var(--borderWidth) solid var(--primary);
+        margin-left: -1px;
       }
+    }
   }
 }
 
@@ -161,7 +159,6 @@
   line-height: px2rem(30px);
 
   .#{$ns}Pagination-item {
-    margin-left: px2rem(8px);
     &:nth-child(1) {
       margin-left: 0;
     }
@@ -198,4 +195,4 @@
   }
 
   text-align: right;
-}
+}

package/scss/components/_progress.scss

@@ -65,7 +65,7 @@
           transparent 75%,
           transparent
         );
-        background-size: 2rem 2rem;
+        background-size: px2rem(32px) px2rem(32px);
       }
 
       &--animate {

package/scss/components/_steps.scss

@@ -13,16 +13,18 @@
       position: relative;
       &Icon {
         vertical-align: top;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         padding-right: var(--steps-base-icon-paddingRight);
+        height: px2rem(32px);
         .#{$ns}StepsItem-icon {
-          display: inline-block;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
           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);
-          text-align: center;
           .icon {
             width: px2rem(12px);
             height: px2rem(12px);
@@ -206,7 +208,7 @@
           content: '';
           position: absolute;
           display: inline-block;
-          top: 1rem;
+          top: px2rem(16px);
           height: 1px;
           left: px2rem(130px);
           width: calc(100% - 55px);

package/scss/components/_table.scss

@@ -1108,3 +1108,13 @@
     }
   }
 }
+
+.#{$ns}AutoFilterToolbar {
+  display: block;
+  text-align: right;
+  white-space: nowrap;
+
+  > .#{$ns}Button {
+    margin-top: 0;
+  }
+}

package/scss/components/_table2.scss

@@ -676,6 +676,13 @@
             background: var(--primary);
           }
         }
+
+        &:last-child {
+          .#{$ns}Table-thead-resizable {
+            width: 4px;
+            right: 0;
+          }
+        }
       }
     }
   }

package/scss/components/_tabs.scss

@@ -18,10 +18,10 @@
 
     .#{$ns}Tabs-addable {
       display: flex;
-      margin-left: var(--Tabs-add-margin);
       align-items: center;
-      justify-content: flex-start;
-      padding: var(--Tabs--line-addPadding);
+      margin-left: var(--Tabs-add-margin);
+      margin-bottom: px2rem(3px);
+      padding-bottom: px2rem(8px);
       white-space: nowrap;
       cursor: pointer;
 
@@ -60,16 +60,19 @@
       // }
 
       &-arrow {
-        margin: var(--Tabs--line-addPadding);
         width: 16px;
         height: 100%;
         display: flex;
         align-items: center;
         cursor: pointer;
         box-sizing: content-box;
+        margin-bottom: px2rem(3px);
+        padding-bottom: px2rem(8px);
 
-        .iconfont {
-          font-size: var(--Remark-icon-fontSize);
+        .icon {
+          top: 0;
+          width: var(--Remark-icon-fontSize);
+          height: var(--Remark-icon-fontSize);
         }
         &:hover {
           color: var(--icon-onHover-color);
@@ -77,6 +80,9 @@
 
         &--left {
           padding-right: 16px;
+          svg {
+            transform: rotate(180deg);
+          }
         }
 
         &--right {
@@ -242,6 +248,10 @@
         border-color: var(--Tabs-onActive-borderColor);
         border-bottom-color: transparent;
       }
+
+      &.has-error > a:first-child {
+        color: var(--Tabs-onError-color) !important;
+      }
     }
   }
 
@@ -672,6 +682,7 @@
       .#{$ns}Tabs-addable {
         padding: 0 var(--Tabs--tiled-add-gap);
         margin-left: 0;
+        margin-bottom: 0;
         white-space: nowrap;
         border-style: solid;
         border-color: var(--Tabs-borderColor);
@@ -1112,6 +1123,7 @@
       & > .#{$ns}Tabs-linksContainer {
         > .#{$ns}Tabs-linksContainer-arrow {
           margin-bottom: 0;
+          padding: 0;
         }
 
         > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
@@ -1224,21 +1236,6 @@
       > .#{$ns}Tabs-linksContainer {
         margin-bottom: calc(var(--Tabs-borderWidth) * -1);
 
-        &.#{$ns}Tabs-linksContainer--overflow
-          > .#{$ns}Tabs-linksContainer-main
-          > .#{$ns}Tabs-links
-          > .#{$ns}Tabs-link {
-          &:first-of-type {
-            border-left-width: 0;
-            border-top-left-radius: 0;
-          }
-
-          &:last-of-type {
-            border-right-width: 0;
-            border-top-right-radius: 0;
-          }
-        }
-
         .#{$ns}Tabs-linksContainer-arrow {
           width: var(--Tabs--strong-arrow-size);
           margin-bottom: 0;
@@ -1250,14 +1247,14 @@
 
           &--left {
             padding-right: 0;
-            border-right-width: 0;
             border-top-left-radius: var(--Tabs-borderRadius);
+            margin-right: px2rem(8px);
           }
 
           &--right {
             padding-left: 0;
-            border-left-width: 0;
-            border-top-right-radius: var(--Tabs-borderRadius);
+            border-top-left-radius: var(--Tabs-borderRadius);
+            margin-left: px2rem(8px);
           }
         }
 

package/scss/components/form/_combo.scss

@@ -258,6 +258,12 @@
         var(--combo-vertical-paddingRight) var(--combo-vertical-paddingBottom)
         var(--combo-vertical-paddingLeft);
       position: relative;
+
+      &.has-error {
+        border-color: var(
+          --Combo--vertical-item--onError-borderColor
+        ) !important; // 因为下面的规则权重更高 &:not(.is-disabled) > .#{$ns}Combo-items > .#{$ns}Combo-item:hover
+      }
     }
 
     > .#{$ns}Combo-items > .#{$ns}Combo-item {

package/scss/components/form/_date-range.scss

@@ -257,12 +257,9 @@
 }
 
 .#{$ns}DateRangePicker-popover {
-  margin: px2rem(2px) 0 0;
-
-  &.#{$ns}PopOver--leftTopLeftBottom,
-  &.#{$ns}PopOver--rightTopRightBottom {
-    margin: px2rem(-2px) 0 0;
-  }
+  border: var(--Form-select-outer-borderWidth) solid
+    var(--Form-input-onFocused-borderColor);
+  box-shadow: var(--Form-select-outer-boxShadow);
 }
 
 .#{$ns}DateRangePicker-popup {

package/scss/components/form/_date.scss

@@ -200,11 +200,9 @@
 
 .#{$ns}DatePicker-popover {
   margin: px2rem(2px) 0 0;
-
-  &.#{$ns}PopOver--leftTopLeftBottom,
-  &.#{$ns}PopOver--rightTopRightBottom {
-    margin: px2rem(-2px) 0 0;
-  }
+  border: var(--Form-select-outer-borderWidth) solid
+    var(--Form-input-onFocused-borderColor);
+  box-shadow: var(--Form-select-outer-boxShadow);
 }
 
 // 移动端输入框样式

package/scss/components/form/_excel.scss

@@ -9,11 +9,11 @@
   }
 
   &-container > p {
-    font-size: 1rem;
+    font-size: px2rem(16px);
   }
 
   &-container > em {
-    font-size: 0.8rem;
+    font-size: px2rem(12px);
   }
 
   &-dropzone {

package/scss/components/form/_fieldset.scss

@@ -47,11 +47,11 @@ fieldset.#{$ns}Collapse {
       var(--fieldSet-legend-paddingRight) var(--fieldSet-legend-paddingBottom)
       var(--fieldSet-legend-paddingLeft);
     cursor: pointer;
-    border-bottom: none !important;
     background: transparent;
     display: inline-flex !important;
     flex-direction: row-reverse;
     justify-content: flex-end;
+    box-sizing: content-box;
     // width: 100%;
 
     .#{$ns}TplField {

package/scss/components/form/_form.scss

@@ -61,6 +61,7 @@
 
   > span {
     position: relative;
+    display: inline-block;
   }
 }
 
@@ -666,6 +667,7 @@
       flex: 1;
       flex-wrap: wrap;
       font-size: var(--fontSizeLg);
+      min-width: 0;
 
       .#{$ns}ColorPicker {
         > input {