amis 1.3.5-beta.6 → 1.4.2-beta.1

package/scss/_mixins.scss

@@ -228,6 +228,17 @@
     margin-left: $padding-x;
   }
 
+  .#{$ns}Button--loading:first-child:not(:last-child):not(.pull-right),
+  > svg.icon:not(:last-child):not(.pull-right),
+  > .pull-left {
+    margin-right: $padding-x;
+  }
+
+  .#{$ns}Button--loading:last-child:not(:first-child):not(.pull-left),
+  > .pull-right {
+    margin-left: $padding-x;
+  }
+
   // img 需要加一下高度限制
   img.#{$ns}Button-icon {
     height: var(--Button-fontSize);
@@ -235,6 +246,19 @@
   }
 }
 
+@mixin button-loading-icon() {
+  transition: --Button-transition;
+  svg {
+    @include animation-svg(
+      var(--Button-animation-spin)
+    );
+  }
+}
+
+@mixin animation-svg($animation) {
+  animation: $animation;
+}
+
 @mixin button-variant(
   $background,
   $border: $background,
@@ -258,6 +282,11 @@
       background: $hover-background;
       border-color: $hover-border;
     }
+    @include hover-active {
+      color: $active-color;
+      background: $active-background;
+      border-color: $active-border;
+    }
   }
 
   // @include focus {

package/scss/_properties.scss

@@ -5,8 +5,8 @@
   --white: #{$white};
   // 因为运行不支持颜色计算，所以用 css 变量的方式需要多定义几个变量
   --primary: #{$primary};
-  --primary-onHover: #{darken($primary, 7.5%)};
-  --primary-onActive: #{darken($primary, 10%)};
+  --primary-onHover: #4f86f4;
+  --primary-onActive: #1c53c1;
   --secondary: #{$secondary};
   --secondary-onHover: #{darken($secondary, 7.5%)};
   --secondary-onActive: #{darken($secondary, 10%)};
@@ -166,6 +166,10 @@
 
   --Badge-size: var(--gap-md);
   --Badge-color: var(--white);
+  --Badge--success-bg: var(--success);
+  --Badge--info-bg: var(--info);
+  --Badge--warning-bg: var(--warning);
+  --Badge--danger-bg: var(--danger);
 
   --Button--danger-bg: var(--danger);
   --Button--danger-border: var(--Button--danger-bg);
@@ -188,12 +192,12 @@
   --Button--default-bg: var(--white);
   --Button--default-border: var(--borderColor);
   --Button--default-color: var(--text-color);
-  --Button--default-onActive-bg: #{darken($white, 10%)};
-  --Button--default-onActive-border: #{darken($borderColor, 12.5%)};
-  --Button--default-onActive-color: var(--Button--default-color);
-  --Button--default-onHover-bg: #{darken($white, 7.5%)};
-  --Button--default-onHover-border: #{darken($borderColor, 10%)};
-  --Button--default-onHover-color: var(--Button--default-color);
+  --Button--default-onActive-bg: var(--white);
+  --Button--default-onActive-border: var(--primary-onActive);
+  --Button--default-onActive-color: var(--primary-onActive);
+  --Button--default-onHover-bg: var(--white);
+  --Button--default-onHover-border: var(--primary);
+  --Button--default-onHover-color: var(--primary);
   --Button--iconOnly-minWidthRate: 4 / 3;
   --Button--info-bg: var(--info);
   --Button--info-border: var(--Button--info-bg);
@@ -226,7 +230,8 @@
   --Button--light-onHover-color: var(--Button--light-color);
   --Button--link-color: var(--primary);
   --Button--link-onDisabled-color: #{$gray600};
-  --Button--link-onHover-color: var(--text--loud-color);
+  --Button--link-onHover-color: var(--primary-onHover);
+  --Button--link-onActive-color: var(--primary-onActive);
   --Button--md-fontSize: var(--Button-fontSize);
   --Button--md-height: var(--Button-height);
   --Button--md-lineHeight: var(--Button-lineHeight);
@@ -241,10 +246,10 @@
   --Button--primary-border: var(--Button--primary-bg);
   --Button--primary-color: var(--button-color);
   --Button--primary-onActive-bg: var(--primary-onActive);
-  --Button--primary-onActive-border: #{darken($primary, 12.5%)};
+  --Button--primary-onActive-border: var(--primary-onActive);
   --Button--primary-onActive-color: var(--Button--primary-color);
   --Button--primary-onHover-bg: var(--primary-onHover);
-  --Button--primary-onHover-border: var(--primary-onActive);
+  --Button--primary-onHover-border: var(--primary-onHover);
   --Button--primary-onHover-color: var(--Button--primary-color);
   --Button--secondary-bg: var(--secondary);
   --Button--secondary-border: var(--Button--secondary-bg);
@@ -275,6 +280,14 @@
   --Button--success-onHover-bg: var(--success-onHover);
   --Button--success-onHover-border: var(--success-onActive);
   --Button--success-onHover-color: var(--Button--success-color);
+  --Button--enhance-border: var(--primary);
+  --Button--enhance-color: var(--primary);
+  --Button--enhance-onActive-bg: var(--white);
+  --Button--enhance-onActive-border: var(--primary-onActive);
+  --Button--enhance-onActive-color: var(--primary-onActive);
+  --Button--enhance-onHover-bg: var(--white);
+  --Button--enhance-onHover-border: var(--primary-onHover);
+  --Button--enhance-onHover-color: var(--primary-onHover);
   --Button--warning-bg: var(--warning);
   --Button--warning-border: var(--Button--warning-bg);
   --Button--warning-color: var(--button-color);
@@ -305,12 +318,16 @@
   --Button-lineHeight: var(--Form-input-lineHeight);
   --Button-mimWidth: auto;
   --Button-onActive-boxShadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --Button-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  --Button-animation-spin: spin 1s infinite linear;
   --Button-onActive-color: var(--primary);
   --Button-onActive-border: var(--primary);
   --Button-onDisabled-borderColor: #dee2e6;
   --Button-onDisabled-opacity: 0.65;
+  --Button-onDisabled-bg: #f2f3f3;
   --Button-onFocus-boxShadow: none;
   --Button-paddingX: #{px2rem(12px)};
+  --Button-paddingX-right: #{px2rem(10px)};
   --Button-paddingY: calc(
     (
         var(--Button-height) - var(--Button-borderWidth) * 2 -
@@ -506,6 +523,20 @@
   --Copyable-iconColor: var(--icon-color);
   --Copyable-onHover-iconColor: var(--icon-onHover-color);
 
+  --Collapse-border: none;
+  --Collapse-border-color: var(--borderColorLight);
+  --Collapse-header-fontSize: var(--fontSizeMd);
+  --Collapse-header-fontWeight: var(--fontWeightNormal);
+  --Collapse-header-padding: #{px2rem(18px)} 0 var(--gap-xs) 0;
+  --Collapse-header-bg: transparent;
+  --Collapse-header-onHover-bg: transparent;
+  --Collapse-header-collapsed-borderBottom: var(--borderWidth) solid
+    var(--Collapse-border-color);
+  --Collapse-content-padding: #{px2rem(18px)} 0;
+  --Collapse-content-color: var(--body-color);
+  --Collapse-content-fontSize: var(--body-size);
+  --Collapse-content-fontWeight: var(--body-weight);
+
   --Crud-toolbar-gap: var(--gap-xs);
   --Crud-toolbar-height: #{px2rem(30px)};
   --Crud-toolbar-lineHeight: var(--lineHeightBase);
@@ -533,6 +564,8 @@
   );
   --DatePicker-placeholderColor: var(--Form-input-placeholderColor);
 
+  --LocationPicker-borderRadius: var(--Form-input-borderWidth);
+
   --Divider-borderStyle: dashed;
 
   --Drawer-bg: var(--background);
@@ -568,8 +601,9 @@
   --DropDown-menu-paddingX: 0;
   --DropDown-menu-paddingY: var(--gap-xs);
   --DropDown-menuItem-onHover-bg: var(--ListMenu-item--onHover-bg);
-  --DropDown-menuItem-onHover-color: inherit;
-  --DropDown-menuItem-onActive-color: var(--info);
+  --DropDown-menuItem-color: var(--text-color);
+  --DropDown-menuItem-onHover-color: var(--primary);
+  --DropDown-menuItem-onActive-color: var(--primary);
   --DropDown-menuItem-onDisabled-color: var(--text--muted-color);
   --DropDown-menuItem-paddingX: var(--gap-sm);
   --DropDown-menuItem-paddingY: calc(
@@ -639,6 +673,7 @@
       ) / 2
   );
   --Form-input-placeholderColor: var(--text--muted-color);
+  --Form-input-onDisabled-color: var(--text--muted-color);
 
   --Form-item-gap: var(--gap-base);
 
@@ -708,6 +743,7 @@
 
   --ImageControl-addBtn-bg: var(--Button--default-bg);
   --ImageControl-addBtn-border: var(--Button--default-border);
+  --ImageControl-addBtn-borderRadius: 0;
   --ImageControl-addBtn-color: var(--Button--default-color);
   --ImageControl-addBtn-onActive-bg: #{darken($white, 10%)};
   --ImageControl-addBtn-onActive-border: #{darken($borderColor, 12.5%)};
@@ -720,6 +756,9 @@
   --ImageControl-addBtn-onHover-bg: #{darken($white, 7.5%)};
   --ImageControl-addBtn-onHover-border: #{darken($borderColor, 10%)};
   --ImageControl-addBtn-onHover-color: var(--Button--default-color);
+  --ImageControl-progress-borderRadius: 0;
+
+  --FileControl-progress-borderRadius: 0;
 
   --InputGroup-addOn-bg: var(--Form-input-addOnBg);
   --InputGroup-addOn-borderColor: var(--Form-input-borderColor);
@@ -840,6 +879,7 @@
   --ListControl-item-bg: var(--white);
   --ListControl-item-borderColor: var(--borderColor);
   --ListControl-item-borderWidth: var(--borderWidth);
+  --ListControl-item-borderRadius: #{px2rem(3px)};
   --ListControl-item-color: var(--text-color);
   --ListControl-item-onActive-after-borderColor: var(--primary);
   --ListControl-item-onActive-before-bg: var(--white);
@@ -1138,6 +1178,8 @@
   --Table-toolbar-marginX: 0;
   --Table-toolbar-marginY: var(--gap-base);
   --Table-tree-borderColor: var(--Table-borderColor);
+  --Table-searchableForm-backgroundColor: #f6f7f8;
+  --Table-searchableForm-borderRadius: #{px2rem(4px)};
 
   --TableCell--edge-paddingX: var(--gap-md);
   --TableCell-filterBtn--onActive-color: var(--primary);
@@ -1336,4 +1378,13 @@
   --Steps-sub-title-color: var(--text-color);
   --Steps-line-bg: var(--Steps-bg);
   --Steps-line-success-bg: var(--Steps-status-success);
+
+  --Progress-borderRadius: var(--borderRadius);
+  --ColumnToggler-backgroundColor: var(--white);
+  --ColumnToggler-borderRadius: #{px2rem(4px)};
+  --ColumnToggler-lineHeight: #{px2rem(24px)};
+  --ColumnToggler-title-fontColor: #080e1a;
+  --ColumnToggler-fontColor: #151a26;
+  --ColumnToggler-item-backgroundColor: #f6f7f8;
+  --ColumnToggler-item-backgroundColor-onHover: rgba(36, 104, 242, 0.1);
 }

package/scss/_utilities.scss

@@ -53,6 +53,10 @@
   background: none !important;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 // text colors
 @include text-wariant($primary, primary);
 @include text-wariant($info, info);

package/scss/components/_badge.scss

@@ -3,7 +3,8 @@
   position: relative;
 
   &-text,
-  &-dot {
+  &-dot,
+  &-ribbon {
     background: var(--danger);
     position: absolute;
     top: 0;
@@ -12,7 +13,6 @@
     transform-origin: 100% 0;
     z-index: auto;
     border-radius: calc(var(--Badge-size) / 2);
-    box-shadow: 0 0 0 1px #fff;
   }
 
   &--top-left {
@@ -38,6 +38,21 @@
     transform: translate(50%, 50%);
   }
 
+  &--danger {
+    background: var(--Badge--danger-bg);
+  }
+
+  &--info {
+    background: var(--Badge--info-bg);
+  }
+
+  &--success {
+    background: var(--Badge--success-bg);
+  }
+
+  &--warning {
+    background: var(--Badge--warning-bg);
+  }
   // 显示文字
   &-text {
     color: var(--Badge-color);
@@ -56,6 +71,56 @@
     border-radius: 50%;
   }
 
+  // 横幅
+  &-ribbon-out {
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0
+  }
+
+  &-ribbon {
+    color: var(--Badge-color);
+    height: var(--Badge-size);
+    line-height: var(--Badge-size);
+    transform: translateX(calc(50% - 5px)) rotate(45deg) scale(.7);
+    transform-origin: 50% 0;
+    border-radius: 0;
+    text-align: center;
+    width: px2rem(1000px);
+    top: 5px;
+  }
+
+  &-ribbon-out--top-left, &-ribbon-out--bottom-left {
+    left: 0;
+    right: auto
+  }
+
+  &-ribbon--top-left {
+    transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(.7);
+    left: 0;
+    right: auto;
+  }
+
+  &-ribbon--bottom-left {
+    transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(.7);
+    transform-origin: 50% 100%;
+    left: 0;
+    right: auto;
+    bottom: 5px;
+    top: auto;
+  }
+
+  &-ribbon--bottom-right {
+    transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(.7);
+    transform-origin: 50% 100%;
+    left: auto;
+    right: 0;
+    bottom: 5px;
+    top: auto;
+  }
+
   // 小红点的动画
   @keyframes badgeDotAnimation {
     0% {

package/scss/components/_button.scss

@@ -43,16 +43,25 @@
 
   &.is-disabled,
   &:disabled {
-    opacity: var(--Button-onDisabled-opacity);
+    // opacity: var(--Button-onDisabled-opacity);
     filter: grayscale(100%);
     box-shadow: none;
     cursor: not-allowed;
+    color: var(--text--muted-color);
+    pointer-events: auto;
+    border: var(--Button-borderWidth) solid var(--Button-onDisabled-borderColor);
+    background: var(--Button-onDisabled-bg);
   }
 
   &:not(:disabled):not(.is-disabled) {
     cursor: pointer;
   }
 
+  &.cxd-Button--link.is-disabled {
+    background: transparent;
+    border: none;
+  }
+
   > .pull-left,
   > .pull-right {
     line-height: inherit;
@@ -112,6 +121,20 @@ fieldset:disabled a.#{$ns}Button {
   );
 }
 
+.#{$ns}Button--enhance {
+  @include button-variant(
+    var(--Button--enhance-bg),
+    var(--Button--enhance-border),
+    var(--Button--enhance-color),
+    var(--Button--enhance-onHover-bg),
+    var(--Button--enhance-onHover-border),
+    var(--Button--enhance-onHover-color),
+    var(--Button--enhance-onActive-bg),
+    var(--Button--enhance-onActive-border),
+    var(--Button--enhance-onActive-color)
+  );
+}
+
 .#{$ns}Button--info {
   @include button-variant(
     var(--Button--info-bg),
@@ -285,6 +308,10 @@ fieldset:disabled a.#{$ns}Button {
   }
 }
 
+.#{$ns}Button--loading {
+  @include button-loading-icon();
+}
+
 .#{$ns}Button--link {
   width: auto;
   min-width: auto;
@@ -296,7 +323,11 @@ fieldset:disabled a.#{$ns}Button {
 
   @include hover-focus {
     color: var(--Button--link-onHover-color);
-    text-decoration: var(--link-onHover-decoration);
+    box-shadow: none;
+  }
+
+  @include hover-active {
+    color: var(--Button--link-onActive-color);
     box-shadow: none;
   }
 
@@ -304,7 +335,7 @@ fieldset:disabled a.#{$ns}Button {
   &.is-disabled {
     color: var(--text--muted-color);
     pointer-events: none;
-    background: transparent;
+    background: var(--Button-onDisabled-bg);
   }
 }
 

package/scss/components/_collapse.scss

@@ -1,21 +1,27 @@
 .#{$ns}Collapse {
-  border: none;
+  border: var(--Collapse-border);
   padding: 0;
   margin-bottom: var(--Form-item-gap);
 
   &-header {
-    font-size: var(--fontSizeMd);
-    font-weight: var(--fontWeightNormal);
+    font-size: var(--Collapse-header-fontSize);
+    font-weight: var(--Collapse-header-fontWeight);
     color: var(--text--loud-color);
-    padding: var(--gap-xs) 0;
-    border-bottom: var(--borderWidth) solid var(--borderColorLight);
+    padding: var(--Collapse-header-padding);
+    margin: 0;
+    border-bottom: var(--borderWidth) solid var(--Collapse-border-color);
+    background: var(--Collapse-header-bg);
+
+    &:hover {
+      background: var(--Collapse-header-onHover-bg);
+    }
   }
 
   &-arrow {
     display: inline-block;
     width: px2rem(16px);
     text-align: center;
-    margin-left: var(--gap-xs);
+    margin-right: px2rem(8px);
     cursor: pointer;
 
     &:before {
@@ -33,10 +39,17 @@
     }
   }
 
+  &-TplField {
+    display: inline-block;
+  }
+
   &.is-collapsed &-arrow:before {
     transform: rotate(45deg);
     transform-origin: 0% 50%;
   }
+  &.is-collapsed &-header {
+    border-bottom: var(--Collapse-header-collapsed-borderBottom);
+  }
 
   &--collapsable &-header {
     cursor: pointer;
@@ -63,13 +76,18 @@
     transform-origin: 0% 50%;
   }
 
-  &-content {
+  &-contentWrapper {
     transition: height var(--animation-duration) ease;
-
     &.in,
     &.out {
       height: 0;
       overflow: hidden;
     }
   }
+  &-content {
+    padding: var(--Collapse-content-padding);
+    color: var(--body-color);
+    font-size: var(--Collapse-content-fontSize);
+    font-weight: var(--Collapse-content-fontWeight);
+  }
 }