amis-ui 2.7.2 → 2.8.0

package/scss/_properties.scss

@@ -210,75 +210,6 @@ $remFactor: 16px;
   );
   --Breadcrumb-item-disabled-color: var(--colors-neutral-text-6);
 
-  --Calendar-btn-bg: var(--info);
-  --Calendar-btn-border: var(--Calendar-btn-bg);
-  --Calendar-btn-borderRadius: var(--Button-borderRadius);
-  --Calendar-btn-color: var(--colors-neutral-fill-11);
-  --Calendar-btn-fontSize: var(--fontSizeSm);
-  --Calendar-btn-height: #{px2rem(30px)};
-  --Calendar-btn-lineHeight: var(--lineHeightBase);
-  --Calendar-btn-onActive-bg: var(--colors-brand-4);
-  --Calendar-btn-onActive-border: var(--colors-brand-3);
-  --Calendar-btn-onActive-color: var(--Calendar-btn-color);
-  --Calendar-btn-onHover-bg: var(--colors-brand-4);
-  --Calendar-btn-onHover-border: var(--colors-brand-3);
-  --Calendar-btn-onHover-color: var(--Calendar-btn-color);
-  --Calendar-btn-paddingX: #{px2rem(10px)};
-  --Calendar-btn-paddingY: calc(
-    (
-        var(--Calendar-btn-height) - var(--Calendar-btn-lineHeight) *
-          var(--Calendar-btn-fontSize)
-      ) / 2
-  );
-  --Calendar-btnCancel-bg: var(--light);
-  --Calendar-btnCancel-border: var(--colors-neutral-line-7);
-  --Calendar-btnCancel-borderRadius: var(--borders-radius-3);
-  --Calendar-btnCancel-color: var(--text-color);
-  --Calendar-btnCancel-onActive-bg: var(--colors-neutral-fill-11);
-  --Calendar-btnCancel-onActive-border: var(--colors-brand-4);
-  --Calendar-btnCancel-onActive-color: var(--colors-brand-4);
-  --Calendar-btnCancel-onHover-bg: var(--colors-neutral-fill-11);
-  --Calendar-btnCancel-onHover-border: var(--colors-brand-6);
-  --Calendar-btnCancel-onHover-color: var(--colors-brand-6);
-  --Calendar-cell-bg: var(--colors-neutral-fill-11);
-  --Calendar-cell-onActive-bg: var(--info);
-  --Calendar-cell-onBetween-bg: #{rgba($info, 0.1)};
-  --Calendar-cell-onDisabled-bg: #f7f7f9;
-  --Calendar-cell-onHover-bg: #f7f7f9;
-  --Calendar-color: #151b26;
-  --Calendar-fontSize: var(--fontSizeSm);
-  --Calendar-input-borderColor: var(--borderColor);
-  --Calendar-input-borderRadius: var(--borders-radius-3);
-  --Calendar-input-color: var(--info);
-  --Calendar-input-fontSize: var(--fontSizeBase);
-  --Calendar-input-height: #{px2rem(40px)};
-  --Calendar-input-lineHeight: var(--lineHeightBase);
-  --Calendar-input-onFocused-borderColor: var(--info);
-  --Calendar-input-paddingX: #{px2rem(10px)};
-  --Calendar-input-paddingY: calc(
-    (
-        var(--Calendar-input-height) - var(--Calendar-input-lineHeight) *
-          var(--Calendar-input-fontSize)
-      ) / 2
-  );
-  --Calendar-shortcut-color: #151b26;
-  --Calendar-shortcut-decoration: none;
-  --Calendar-shortcut-onHover-color: var(--colors-brand-6);
-  --Calendar-shortcut-onHover-decoration: none;
-  --Calendar-shortcuts-bg: var(--colors-neutral-text-9);
-  --Calendar-shortcuts-height: var(--sizes-size-9);
-  --Calendar-wLabel-color: var(--colors-neutral-text-6);
-
-  --Calendar-icon-bottom: #{px2rem(-4px)};
-  --Calendar-icon-width: var(--sizes-size-6);
-  --Calendar-icon-height: var(--sizes-size-6);
-  --Calendar-borderWidth: var(--borders-width-2);
-  --Calendar-borderColor: var(--colors-brand-5);
-  --Calendar-rdt-day: var(--sizes-base-49);
-  --Calendar-schedule-content-padding: 0 var(--sizes-size-3);
-  --Calendar-schedule-content-height: var(--sizes-base-10);
-  --Calendar-schedule-content-color: var(--colors-neutral-text-11);
-
   --Card-actions-borderColor: var(--colors-neutral-line-10);
   --Card-actions-fontSize: var(--fonts-size-8);
   --Card-actions-onChecked-onHover-bg: var(--colors-neutral-fill-11);
@@ -393,43 +324,6 @@ $remFactor: 16px;
   --Crud-toolbar-height: #{px2rem(30px)};
   --Crud-toolbar-lineHeight: var(--lineHeightBase);
 
-  --DatePicker-bg: var(--colors-neutral-fill-11);
-  --DatePicker-borderColor: var(--Form-input-borderColor);
-  --DatePicker-borderRadius: var(--borders-radius-3);
-  --DatePicker-borderWidth: var(--borders-width-2);
-  --DatePicker-color: var(--colors-neutral-text-2);
-  --DatePicker-header-onHover-color: var(--colors-brand-6);
-  --DatePicker-arrow-color: #84868c;
-  --DatePicker-fontSize: var(--fontSizeSm);
-  --DatePicker-header-select-borderColor: #fff;
-  --DatePicker-height: var(--Form-input-height);
-  --DatePicker-iconColor: var(--icon-color);
-  --DatePicker-lineHeight: var(--Form-input-lineHeight);
-  --DatePicker-onFocused-borderColor: var(--colors-brand-4);
-  --DatePicker-onHover-bg: var(--colors-neutral-fill-11);
-  --DatePicker-onHover-borderColor: var(--colors-brand-5);
-  --DatePicker-onDisabled-bg: var(--colors-neutral-text-9);
-  --DatePicker-onDisabled-color: var(--colors-neutral-text-6);
-  --DatePicker-onHover-iconColor: var(--colors-brand-5);
-  --DatePicker-paddingX: #{px2rem(12px)};
-  --DatePicker-paddingY: calc(
-    (
-        var(--DatePicker-height) - var(--DatePicker-lineHeight) *
-          var(--DatePicker-fontSize)
-      ) / 2 - var(--DatePicker-borderWidth)
-  );
-  --DatePicker-placeholderColor: var(--colors-neutral-text-6);
-  --DatePicker-minWidth: calc(
-    var(--fontSizeLg) * 5 + var(--DatePicker-paddingX) * 2 +
-      var(--Form-input-clearBtn-size) * 2
-  );
-  --DateRangePicker-minWidth: calc(
-    var(--fontSizeLg) * 8 + var(--DatePicker-paddingX) * 2 +
-      var(--Form-input-clearBtn-size) * 2
-  );
-  --DateRangePicker-activeCursor-color: var(--colors-brand-4);
-  --DateRangePicker-activeCursor-height: 2px;
-
   --LocationPicker-borderRadius: var(--borders-radius-3);
 
   --Drawer-bg: var(--background);
@@ -555,66 +449,6 @@ $remFactor: 16px;
   );
   --Form-row-gutterWidth: #{px2rem(10px)};
 
-  --Form-select-bg: var(--colors-neutral-fill-11);
-  --Form-select-height: var(--Form-select-outer-top);
-  --Form-select-borderColor: var(--Form-input-borderColor);
-  --Form-select-borderRadius: var(--borders-radius-3);
-  --Form-select-borderWidth: var(--borders-width-2);
-  --Form-select-caret-iconColor: var(--colors-neutral-text-5);
-  --Form-select-caret-onHover-iconColor: var(--colors-neutral-text-5);
-  --Form-select-caret-fontSize: var(--fonts-size-8);
-  --Form-select-checkall-bottomBorder: #eceff8;
-  --Form-select-color: var(--colors-neutral-text-2);
-  --Form-select-input-fontSize: var(--fontSizeSm);
-  --Form-select-menu-bg: var(--colors-neutral-fill-11);
-  --Form-select-menu-color: var(--colors-neutral-text-2);
-  --Form-select-menu-height: var(--sizes-base-12);
-  --Form-select-menu-onActive-bg: transparent;
-  --Form-select-menu-onActive-color: var(--colors-brand-5);
-  --Form-select-menu-onDisabled-bg: transparent;
-  --Form-select-menu-onDisabled-color: var(--text--muted-color);
-  --Form-select-menu-onHover-bg: var(--colors-brand-10);
-  --Form-select-menu-onHover-color: var(--colors-neutral-text-2);
-  --Form-select-group-color: var(--Form-select-caret-iconColor);
-  --Form-select-onError-borderColor: var(--Form-input-onError-borderColor);
-  --Form-select-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
-  --Form-select-onFocused-color: var(--Form-select-color);
-  --Form-select-onHover-bg: var(--colors-neutral-fill-11);
-  --Form-select-onHover-borderColor: var(--colors-brand-5);
-  --Form-select-outer-borderWidth: var(--borders-width-1);
-  --Form-select-outer-top: var(--sizes-base-16);
-  --Form-select-outer-boxShadow: var(--shadows-shadow-normal);
-  --Form-select-paddingX: var(--Form-input-paddingX);
-  --Form-select-placeholderColor: var(--Form-input-placeholderColor);
-  --Form-select-popoverGap: var(--borders-radius-3);
-  --Form-select-icon-rigin: var(--sizes-size-9);
-  --Form-select-search-height: var(--sizes-base-15);
-  --Form-select-value-bgColor: var(--Form-input-onDisabled-bg);
-  --Form-select-value-bgColor--dark: var(--colors-neutral-fill-4);
-  --Form-select-value-borderColor: var(--colors-neutral-line-9);
-  --Form-select-valueIcon-color: var(--colors-neutral-text-4);
-  --Form-select-valueIcon-color--dark: var(--colors-neutral-text-8);
-  --Form-select-valueIcon-onHover-color: var(--Form-select-color);
-  --Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
-  --Form-selectOption-height: var(--Form-select-height);
-  --Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
-  --Form-selectValue-onHover-bgColor: var(--Form-select-borderColor);
-  --Form-selectValue-borderColor: var(--colors-brand-7);
-  --Form-selectValue-color: var(--colors-brand-5);
-  --Form-selectValue-fontSize: var(--fontSizeSm);
-  --Form-selectValue-onDisable-bg: #{lighten(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
-    )};
-  --Form-selectValue-onHover-bg: #{darken(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
-    )};
-  --Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
-  --Form-selectValue-onInvalid-color: var(--danger);
-  --Form-valueLabel-maxWidth: #{px2rem(120px)};
-  --Form-select-onFocus-boxShadow: none;
-
   --IconPicker-content-maxHeight: #{px2rem(350px)};
   --IconPicker-padding: var(--gap-xs);
   --IconPicker-selectedIcon-marginRight: var(--gap-xs);
@@ -647,10 +481,10 @@ $remFactor: 16px;
   );
   --InputGroup-select-arrowColor: var(--colors-neutral-text-5);
   --InputGroup-select-bg: var(--colors-neutral-fill-11);
-  --InputGroup-select-borderColor: var(--Form-select-borderColor);
-  --InputGroup-select-borderRadius: var(--Form-select-borderRadius);
+  --InputGroup-select-borderColor: var(--borderColor);
+  --InputGroup-select-borderRadius: var(--borders-radius-3);
   --InputGroup-select-borderWidth: var(--borders-width-2);
-  --InputGroup-select-color: var(--Form-select-color);
+  --InputGroup-select-color: var(--colors-neutral-text-2);
   --InputGroup-select-onFocused-arrowColor: var(--colors-brand-5);
   --InputGroup-select-onFocused-bg: var(--colors-brand-10);
   --InputGroup-select-onFocused-color: var(--colors-brand-5);
@@ -945,19 +779,6 @@ $remFactor: 16px;
   --Remark-onHover-iconColor: var(--colors-neutral-text-11);
   --Remark-width: var(--sizes-size-9);
 
-  --ResultBox-tag-height: #{px2rem(24px)};
-  --ResultBox-tag-marginBottom: #{px2rem(2px)};
-  --ResultBox-icon--onDisabled-color: #ebebeb;
-  --ResultBox-icon--onHover-color: #666666;
-  --ResultBox-icon-color: var(--colors-neutral-text-6);
-  --ResultBox-value--onDisabled-color: #cccccc;
-  --ResultBox-value--onHover-bg: rgba(0, 145, 255, 0.1);
-  --ResultBox-value--onHover-bg--dark: #b8babf;
-  --ResultBox-value-bg: var(--colors-neutral-fill-10);
-  --ResultBox-value-color: #000;
-  --ResultBox-value-clear-bg: var(--colors-neutral-fill-8);
-  --ResultBox-value-clear-hover-bg: var(--colors-neutral-fill-9);
-
   --Satus-icon-width: var(--sizes-size-8);
   --Satus-icon-height: var(--Satus-icon-width);
 
@@ -1184,23 +1005,6 @@ $remFactor: 16px;
   --TabsTransfer-title-bg: #f7f7f9;
   --TabsTransfer-border-color: #e8e9eb;
 
-  --Tree-indent: var(--gap-md);
-  --Tree-icon-gap: var(--sizes-size-5);
-  --Tree-icon-margin-right: #{px2rem(8px)};
-  --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
-  --Tree-item-onHover-bg: var(--colors-neutral-fill-10);
-  --Tree-item-onHover-bg-pure: var(--colors-neutral-fill-10);
-  --Tree-itemArrowWidth: #{px2rem(16px)};
-  --Tree-itemHeight: var(--sizes-base-12);
-  --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
-  --TreeSelect-popover-bg: var(--colors-neutral-fill-11);
-  --Tree-item-text-max-height: #{px2rem(250px)};
-  --Tree-item-text-top: #{px2rem(4px)};
-  --Tree-item-arrow-padding-left: #{px2rem(4px)};
-  --Tree-item-arrow-color: #84868c;
-  --Tree-item-onChekced-bg: var(--colors-brand-10);
-  --Tree-item-onChekced-bg-borderRadius: var(--borders-radius-2);
-
   --Wizard-badge-bg: var(--colors-neutral-fill-11);
   --Wizard-badge-border: var(--borders-width-2) var(--borders-style-2)
     var(--colors-neutral-fill-6);

package/scss/base/_normalize.scss

@@ -340,6 +340,17 @@ template {
   display: none;
 }
 
+/** Browser Compatibility
+    ========================================================================== */
+
+/* 兼容Safari浏览器input disbaled状态下文字颜色不显示 */
+input[disabled],
+input:disabled,
+input.disabled,
+input.is-disabled {
+  -webkit-text-fill-color: var(--text--muted-color);
+}
+
 svg.icon {
   width: 1em;
   height: 1em;

package/scss/components/_button.scss

@@ -624,6 +624,9 @@
       var(--button-size-default-icon-size),
       var(--button-size-default-icon-margin)
     );
+    &.#{$ns}Button--iconOnly {
+      min-width: var(--button-size-default-height);
+    }
   }
 
   &--size-xs {
@@ -650,9 +653,7 @@
     );
 
     &.#{$ns}Button--iconOnly {
-      min-width: calc(
-        var(--Button--xs-height) * var(--Button--iconOnly-minWidthRate)
-      );
+      min-width: var(--button-size-xs-height);
     }
   }
 
@@ -680,9 +681,7 @@
     );
 
     &.#{$ns}Button--iconOnly {
-      min-width: calc(
-        var(--Button--sm-height) * var(--Button--iconOnly-minWidthRate)
-      );
+      min-width: var(--button-size-sm-height);
     }
   }
 
@@ -710,9 +709,7 @@
     );
 
     &.#{$ns}Button--iconOnly {
-      min-width: calc(
-        var(--Button--md-height) * var(--Button--iconOnly-minWidthRate)
-      );
+      min-width: var(--button-size-md-height);
     }
   }
 
@@ -740,22 +737,16 @@
     );
 
     &.#{$ns}Button--iconOnly {
-      min-width: calc(
-        var(--Button--lg-height) * var(--Button--iconOnly-minWidthRate)
-      );
+      min-width: var(--button-size-lg-height);
     }
   }
 
   &--iconOnly {
-    min-width: calc(
-      var(--Button-height) * var(--Button--iconOnly-minWidthRate)
-    );
-
+    padding: 0;
     &:not(.#{$ns}Button--link) {
       > svg.icon {
         width: px2rem(14px);
         height: px2rem(14px);
-        top: px2rem(2px);
       }
 
       > .fa,

package/scss/components/_formula.scss

@@ -63,6 +63,10 @@
     justify-content: space-between;
     height: #{px2rem(250px)};
     margin-top: #{px2rem(10px)};
+
+    & > div {
+      width: 0;
+    }
   }
 
   &-settings.only-variable {
@@ -218,10 +222,16 @@
       display: flex;
       flex-flow: row nowrap;
       justify-content: space-between;
+      align-items: center;
       white-space: nowrap;
 
       & > label {
         white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        width: 0;
+        display: inline-block;
       }
 
       &-tag {
@@ -231,6 +241,9 @@
         border-radius: var(--borderRadius);
         background: #f5f5f5;
         color: var(--black);
+        font-size: var(--fontSizeSm);
+        line-height: #{px2rem(24px)};
+        height: #{px2rem(24px)};
       }
     }
     .#{$ns}GroupedSelection {