amis 1.4.1 → 1.4.2-beta.13

package/scss/_mixins.scss

@@ -249,9 +249,7 @@
 @mixin button-loading-icon() {
   transition: --Button-transition;
   svg {
-    @include animation-svg(
-      var(--Button-animation-spin)
-    );
+    @include animation-svg(var(--Button-animation-spin));
   }
 }
 

package/scss/_properties.scss

@@ -5,8 +5,8 @@
   --white: #{$white};
   // 因为运行不支持颜色计算，所以用 css 变量的方式需要多定义几个变量
   --primary: #{$primary};
-  --primary-onHover: #4F86F4;
-  --primary-onActive:#1C53C1;
+  --primary-onHover: #4f86f4;
+  --primary-onActive: #1c53c1;
   --secondary: #{$secondary};
   --secondary-onHover: #{darken($secondary, 7.5%)};
   --secondary-onActive: #{darken($secondary, 10%)};
@@ -324,6 +324,7 @@
   --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)};
@@ -522,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);
@@ -549,6 +569,8 @@
   );
   --DatePicker-placeholderColor: var(--Form-input-placeholderColor);
 
+  --LocationPicker-borderRadius: var(--Form-input-borderWidth);
+
   --Divider-borderStyle: dashed;
 
   --Drawer-bg: var(--background);
@@ -584,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(
@@ -655,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);
 
@@ -724,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%)};
@@ -736,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);
@@ -856,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);
@@ -1044,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;
@@ -1051,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);
@@ -1154,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);
@@ -1352,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/_common.scss

@@ -0,0 +1,3 @@
+.has-popover {
+  position: relative;
+}

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

@@ -49,8 +49,8 @@
     cursor: not-allowed;
     color: var(--text--muted-color);
     pointer-events: auto;
-    border: none;
-    background: #F2F3F3;
+    border: var(--Button-borderWidth) solid var(--Button-onDisabled-borderColor);
+    background: var(--Button-onDisabled-bg);
   }
 
   &:not(:disabled):not(.is-disabled) {
@@ -59,6 +59,7 @@
 
   &.cxd-Button--link.is-disabled {
     background: transparent;
+    border: none;
   }
 
   > .pull-left,
@@ -134,8 +135,6 @@ fieldset:disabled a.#{$ns}Button {
   );
 }
 
-
-
 .#{$ns}Button--info {
   @include button-variant(
     var(--Button--info-bg),
@@ -336,7 +335,7 @@ fieldset:disabled a.#{$ns}Button {
   &.is-disabled {
     color: var(--text--muted-color);
     pointer-events: none;
-    background: #F2F3F3;
+    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);

package/scss/components/_collapse.scss

@@ -1,21 +1,36 @@
 .#{$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);
+
+    &-wrapper {
+      display: inline-flex;
+      flex-direction: var(--Collapse-header-wrapper-direction);
+    }
+
+    &-tpl {
+      margin-right: px2rem(8px);
+    }
+
+    &: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 +48,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-border);
+  }
 
   &--collapsable &-header {
     cursor: pointer;
@@ -49,6 +71,12 @@
     color: var(--link-color);
     border-left: none;
     font-size: var(--fontSizeBase);
+    border-top: var(--Collapse-header-collapsed-borderTop);
+    border-bottom: var(--Collapse-header-collapsed-borderBottom);
+  }
+
+  &--title-bottom.is-collapsed &-header {
+    border-top: none;
   }
 
   &--title-bottom &-arrow:before {
@@ -63,13 +91,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);
+  }
 }