amis 1.3.5-beta.7 → 1.4.2-beta.11

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,17 @@
   }
 }
 
+@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 +280,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,25 @@
   --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-border: var(--borderWidth) solid
+    var(--Collapse-border-color);
+  --Collapse-header-collapsed-borderTop: none;
+  --Collapse-header-collapsed-borderBottom: var(
+    --Collapse-header-collapsed-border
+  );
+  --Collapse-header-wrapper-direction: row;
+  --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 +569,8 @@
   );
   --DatePicker-placeholderColor: var(--Form-input-placeholderColor);
 
+  --LocationPicker-borderRadius: var(--Form-input-borderWidth);
+
   --Divider-borderStyle: dashed;
 
   --Drawer-bg: var(--background);
@@ -568,8 +606,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 +678,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 +748,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 +761,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 +884,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);
@@ -1028,6 +1073,20 @@
   --Picker-iconColor: var(--icon-color);
   --Picker-onHover-iconColor: var(--icon-onHover-color);
 
+  --PickerColumns-bg: white;
+  --PickerColumns-toolbar-height: #{px2rem(50px)};
+  --PickerColumns-title-fontSize: var(--fontSizeLg);
+  --PickerColumns-title-lineHeight: 1.5;
+  --PickerColumns-action-padding: 0 var(--gap-sm);
+  --PickerColumns-action-fontSize: var(--fontSizeMd);
+  --PickerColumns-confirmAction-color: var(--Button--info-bg);
+  --PickerColumns-cancelAction-color: var(--Button--light-bg);
+  --PickerColumns-option-fontSize: var(--fontSizeLg);
+  --PickerColumns-optionText-color: var(--text-color);
+  --PickerColumns-optionDisabled-opacity: 0.3;
+  --PickerColumns-loadingIcon-color: var(--icon-color);
+  --PickerColumns-loadingMask-Color: rgba(255, 255, 255, 0.9);
+
   --PopOver-bg: white;
   --PopOverAble-iconColor: inherit;
   --PopOverAble-onHover-iconColor: inherit;
@@ -1035,6 +1094,11 @@
   --Property-title-bg: #f2f2f2;
   --Property-label-bg: #f7f7f7;
 
+  --Portlet-borderColor: var(--borderColor);
+  --Portlet-borderStyle: solid;
+  --Portlet-borderWidth: var(--borderWidth);
+  --Portlet-borderRadius: var(--borderRadius);
+
   --QuickEdit-iconColor: inherit;
   --QuickEdit-onFocus-borderColor: var(--info);
   --QuickEdit-onFocus-borderWidth: var(--borderWidth);
@@ -1138,6 +1202,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 +1402,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/base/_normalize.scss

@@ -344,6 +344,8 @@ svg.icon {
   width: 1em;
   height: 1em;
   fill: currentColor;
+  position: relative;
+  top: 0.125em;
 }
 
 svg.r90 {

package/scss/components/_anchor-nav.scss

@@ -2,40 +2,99 @@
   display: flex;
   height: px2rem(400px);
 
-  &-link-wrap {
-    margin: 0;
-    padding: 0;
-    width: var(--Tabs--vertical-width);
-    border-right: var(--AnchorNav-links-container-borderRight);
-    padding-bottom: px2rem(60px);
-
-    > .#{$ns}AnchorNav-link {
-      position: relative;
-      display: block;
+  &--vertical {
+    .#{$ns}AnchorNav-link-wrap {
+      margin: 0;
+      padding: 0;
+      width: var(--Tabs--vertical-width);
+      border-right: var(--AnchorNav-links-container-borderRight);
+      padding-bottom: px2rem(60px);
 
-      > a {
+      > .#{$ns}AnchorNav-link {
+        position: relative;
         display: block;
-        border: var(--Tabs-borderWidth) solid transparent;
-        border-width: var(--AnchorNav-onActive-borderWidth);
-        color: var(--Tabs-color);
-        padding: var(--Tabs-linkPadding);
-        font-size: var(--Tabs-linkFontSize);
-        outline: none;
-        text-align: right;
-        text-decoration: none;
-        cursor: pointer;
-        margin: 0;
-
-        &:hover {
-          color: var(--primary);
+
+        > a {
+          display: block;
+          border: var(--Tabs-borderWidth) solid transparent;
+          border-width: var(--AnchorNav-onActive-borderWidth);
+          color: var(--Tabs-color);
+          padding: var(--Tabs-linkPadding);
+          font-size: var(--Tabs-linkFontSize);
+          outline: none;
+          text-align: right;
+          text-decoration: none;
+          cursor: pointer;
+          margin: 0;
+
+          &:hover {
+            color: var(--primary);
+          }
+        }
+
+        &.is-active {
+          > a,
+          > a:hover {
+            color: var(--Tabs--vertical-onActive-color);
+            border-color: var(--Tabs--vertical-onActive-border);
+          }
         }
       }
+    }
+  }
+
+  &--horizontal {
+    flex-direction: column;
+    .#{$ns}AnchorNav-link-wrap {
+      user-select: none;
+      margin: 0px;
+      padding: 0px;
+      border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
+      list-style: none;
+
+      > .#{$ns}AnchorNav-link {
+        margin-bottom: calc(var(--Tabs-borderWidth) * -1);
+        display: inline-block;
+        position: relative;
+
+        > a:first-child {
+          font-size: var(--Tabs-linkFontSize);
+          outline: 0;
+          border: var(--Tabs-borderWidth) solid transparent;
+          border-width: 0 0 var(--Tabs--line-borderWidth) 0;
+          border-top-left-radius: var(--Tabs-borderRadius);
+          border-top-right-radius: var(--Tabs-borderRadius);
+          color: var(--Tabs-color);
+          margin: var(--Tabs-linkMargin);
+          padding: var(--Tabs-linkPadding);
+          text-decoration: none;
+          cursor: pointer;
+          display: block;
+
+          &:hover,
+          &:focus {
+            color: var(--primary);
+            background: transparent;
+            border-color: transparent;
+          }
+        }
+
+        &:last-child {
+          > a {
+            margin: 0;
+          }
+        }
 
-      &.is-active {
-        > a,
-        > a:hover {
-          color: var(--Tabs--vertical-onActive-color);
-          border-color: var(--Tabs--vertical-onActive-border);
+        &.is-active {
+          > a:first-child,
+          > a:first-child:hover,
+          > a:first-child:focus {
+            font-size: var(--Tabs-linkFontSize);
+            border-width: 0 0 var(--Tabs--line-borderWidth) 0;
+            border-color: var(--Tabs--line-onHover-borderColor);
+            color: var(--Tabs--line-onHover-color);
+            background: transparent;
+          }
         }
       }
     }

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/_card.scss

@@ -36,18 +36,6 @@
     margin-top: var(--gap-xs);
   }
 
-  &-checkBtn {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: var(--gap-sm);
-    z-index: 1;
-
-    .#{$ns}Checkbox {
-      margin-right: 0;
-    }
-  }
-
   &-dragBtn {
     cursor: pointer;
     float: right;
@@ -55,7 +43,8 @@
   }
 
   &-heading {
-    overflow: hidden;
+    display: flex;
+    flex-direction: row;
     padding: var(--gap-sm) var(--gap-base);
     flex: 1 0 auto;
   }
@@ -87,12 +76,17 @@
 
   &-meta {
     display: block;
+    flex-grow: 1;
     height: 100%;
-    overflow: hidden;
     position: relative;
     margin-right: var(--gap-md);
   }
 
+  &-toolbar {
+    margin-right: calc(-1 * var(--gap-base));
+    text-align: right;
+  }
+
   &-highlight {
     background: var(--success);
     width: px2rem(8px);