amis 1.4.2-beta.17 → 1.4.2-beta.18

package/scss/_properties.scss

@@ -481,6 +481,7 @@
       ) / 2 - var(--ColorPicker-borderWidth)
   );
   --ColorPicker-placeholderColor: var(--Form-input-placeholderColor);
+  --ColorPicker-boxShadow: var(--boxShadow);
 
   --Combo--horizontal-dragger-top: var(--Form-label-paddingTop);
   --Combo--horizontal-item-gap: var(--gap-xs);
@@ -1314,7 +1315,7 @@
 
   --Toast-opacity: 0.8;
   --Toast-paddingL: #{px2rem(40px)};
-  --Toast-paddingX: var(--gap-sm);
+  --Toast-paddingX: var(--gap-md);
   --Toast-paddingY: var(--gap-xs);
   --Toast-title-display: block;
   --Toast-width: #{px2rem(300px)};

package/scss/components/_alert.scss

@@ -6,23 +6,46 @@
   border-radius: var(--Alert-borderRadius);
   margin-bottom: var(--Alert-marginBottom);
   position: relative;
+  color: var(--Alert-fontColor);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  &-icon {
+    margin-right: #{px2rem(8px)};
+    font-size: var(--fontSizeLg);
+  }
+
+  &-content {
+    flex: 1;
+
+    .#{$ns}Alert-title {
+      color: var(--text-color);
+      font-size: var(--fontSizeBase);
+      font-weight: 500;
+      line-height: #{px2rem(24px)};
+      margin-bottom: #{px2rem(4px)};
+    }
+
+    .#{$ns}Alert-desc {
+      line-height: #{px2rem(24px)};
+    }
+  }
 
   &-close {
-    position: absolute;
     outline: none;
     padding: 0;
     cursor: pointer;
     background: transparent;
     border: 0;
-    float: right;
     line-height: 1;
     color: #000;
     text-shadow: 0 1px 0 #fff;
     filter: alpha(opacity=20);
     opacity: 0.2;
-    right: var(--Alert-paddingX);
-    top: 50%;
-    transform: translateY(-50%);
+    margin-left: #{px2rem(8px)};
+    line-height: #{px2rem(24px)};
 
     &:hover {
       color: #000;

package/scss/components/_button.scss

@@ -51,6 +51,11 @@
     pointer-events: auto;
     border: var(--Button-borderWidth) solid var(--Button-onDisabled-borderColor);
     background: var(--Button-onDisabled-bg);
+
+    & > svg,
+    & > svg path {
+      fill: currentColor;
+    }
   }
 
   &:not(:disabled):not(.is-disabled) {

package/scss/components/_card.scss

@@ -71,7 +71,7 @@
     float: left;
     margin-right: var(--gap-base);
     font-size: var(--fontSizeXl);
-    text-transform: uppercase();
+    text-transform: uppercase;
   }
 
   &-meta {

package/scss/components/_collapse-group.scss

@@ -1,5 +1,9 @@
 .#{$ns}CollapseGroup {
 
+  .#{$ns}Collapse:not(:last-child) {
+    border-bottom: none;
+  }
+
   &.icon-position-right {
     .#{$ns}Collapse-header {
       .#{$ns}Collapse-arrow {

package/scss/components/_collapse.scss

@@ -9,7 +9,6 @@
     color: var(--text--loud-color);
     padding: var(--Collapse-header-padding);
     margin: 0;
-    border-bottom: var(--borderWidth) solid var(--Collapse-border-color);
     cursor: pointer;
     background: var(--Collapse-header-bg);
 
@@ -31,7 +30,7 @@
     display: inline-block;
     width: px2rem(16px);
     text-align: center;
-    margin-right: var(--gap-xs);
+    margin-right: var(--gap-sm);
 
     &:before {
       content: '';

package/scss/components/_nav.scss

@@ -174,12 +174,6 @@
           pointer-events: none;
         }
 
-        &.active,
-        &.is-active {
-          background: var(--Nav-item-onActive-bg) !important;
-        }
-
-
         &.active > a,
         &.is-active > .#{$ns}Nav-item-atcions,
         &.is-active > a,
@@ -188,6 +182,7 @@
         &.is-active > .#{$ns}Badge > a {
           color: var(--Nav-item-onActive-color);
           position: relative;
+          background: var(--Nav-item-onActive-bg);
 
           &::after {
             transform: scaleY(1);

package/scss/components/_page.scss

@@ -68,6 +68,35 @@
   &-asideTplWrapper {
     padding: var(--gap-xs);
   }
+
+  &-asideResizor {
+    position: absolute;
+    right: -0.375rem;
+    top: 50%;
+    cursor: ew-resize;
+    writing-mode: vertical-lr;
+    width: 0.75rem;
+    height: 1.5rem;
+    margin-top: -0.75rem;
+    border: 0.0625rem solid #dee2e6;
+    background-color: #fff;
+    border-radius: 0.142rem;
+    font-size: 12px;
+    line-height: 0.625rem;
+    text-align: center;
+    user-select: none;
+    color: #666;
+
+    &:hover {
+      color: #000;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12),
+        0 2px 4px 0 rgba(0, 0, 0, 0.08);
+    }
+
+    &:after {
+      content: '···';
+    }
+  }
 }
 
 .#{$ns}Page-toolbar {
@@ -93,9 +122,13 @@
       border: inherit;
     }
 
-    min-width: var(--Page-aside-width);
-    max-width: var(--Page-aside-maxWidth);
+    width: var(--Page-aside-width);
     border-right: var(--borderWidth) solid var(--borderColor);
+
+    &--withWidth {
+      min-width: var(--Page-aside-width);
+      max-width: var(--Page-aside-maxWidth);
+    }
   }
 
   .#{$ns}Page--withSidebar {

package/scss/components/_toast.scss

@@ -55,7 +55,9 @@
 
 .#{$ns}Toast {
   display: flex;
-  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
 
   &-wrap {
     pointer-events: none;
@@ -75,7 +77,6 @@
   color: var(--Toast-color);
   position: relative;
   opacity: var(--Toast-opacity);
-  cursor: pointer;
   opacity: 0;
   transform: translateZ(0);
 
@@ -95,22 +96,49 @@
   }
 
   &-close {
-    color: var(--Toast-close-color);
     display: inline-flex;
-    margin-left: var(--gap-xs);
+    font-size: var(--fontSizeLg);
+    line-height: var(--gap-xl);
+    height: var(--gap-xl);
+    color: var(--Toast-close-color);
+    margin-left: var(--gap-sm);
     opacity: 0.8;
+    align-items: center;
+    cursor: pointer;
 
     &:hover {
       color: var(--Toast-close--onHover-color);
       opacity: 1;
     }
+
+    & > svg {
+      top: 0;
+    }
   }
 
-  &-body {
-    display: inline-block;
-    vertical-align: middle;
-    white-space: pre-wrap;
-    flex-grow: 1;
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .#{$ns}Toast-title {
+      color: var(--text-color);
+      font-size: var(--fontSizeBase);
+      font-weight: 500;
+      line-height: var(--gap-xl);
+      margin-bottom: var(--gap-xs);
+    }
+
+    .#{$ns}Toast-body {
+      font-size: var(--fontSizeSm);
+      display: inline-block;
+      vertical-align: middle;
+      white-space: pre-wrap;
+      flex-grow: 1;
+      line-height: var(--gap-xl);
+    }
   }
 
   &-icon {
@@ -118,8 +146,10 @@
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     vertical-align: middle;
-
-    margin-right: var(--gap-xs);
+    margin-right: var(--gap-sm);
+    height: var(--gap-xl);
+    line-height: var(--gap-xl);
+    align-items: center;
 
     > svg {
       top: 0;

package/scss/components/form/_color.scss

@@ -57,7 +57,7 @@
   &-preview {
     display: flex;
     align-items: center;
-    margin-left: var(--gap-xs);
+    margin-right: var(--gap-sm);
     cursor: pointer;
   }
 
@@ -73,6 +73,35 @@
     display: inline-block;
     line-height: 1;
   }
+
+  &-arrow {
+    margin-right: var(--gap-xs);
+    // margin-left: var(--gap-xs);
+    width: var(--gap-md);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+
+    > svg {
+      transition: transform var(--animation-duration);
+      display: inline-block;
+      color: var(--Form-select-caret-iconColor);
+      width: 10px;
+      height: 10px;
+      top: 0;
+    }
+  }
+
+  &.is-opened &-arrow > svg {
+    transform: rotate(180deg);
+  }
+}
+
+.#{$ns}ColorPicker-popover {
+  border: none;
+  box-shadow: none;
 }
 
 .#{$ns}ColorControl:not(.is-inline) > .#{$ns}ColorPicker {
@@ -82,7 +111,7 @@
 // override
 
 .sketch-picker {
-  box-shadow: none !important;
-  border-radius: 0 !important;
   border: none !important;
+  border-radius: var(--borderRadius) !important;
+  box-shadow: var(--ColorPicker-boxShadow) !important;
 }

package/scss/components/form/_fieldset.scss

@@ -31,6 +31,7 @@
 }
 
 fieldset.#{$ns}Collapse {
+  margin-bottom: var(--Form-item-gap);
   > legend {
     font-weight: var(--fontWeightNormal);
     padding: var(--gap-xs) 0;

package/scss/components/form/_transfer.scss

@@ -122,6 +122,7 @@
 
   &-tab {
     padding: 0;
+    overflow: auto;
   }
 
   &-tabs {

package/scss/themes/_cxd-variables.scss

@@ -72,6 +72,8 @@ $R7: px2rem(16px);
 $R8: 50%;
 
 // yunshe4.0 box-shadow
+$L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
+  0px 1px 10px 0px rgba(8, 14, 26, 0.05), 0px 2px 4px -1px rgba(8, 14, 26, 0.04);
 
 :root {
   --borderColor: #eceff8;
@@ -81,7 +83,7 @@ $R8: 50%;
 
   --text--muted-color: #{$G6};
   --text--loud-color: #333;
-  --link-onHover-decoration: underline;
+  --link-onHover-decoration: none;
 
   --icon-color: #999;
   --icon-onHover-color: var(--primary);
@@ -228,15 +230,16 @@ $R8: 50%;
   --ColorPicker-placeholderColor: #999;
   --ColorPicker-onDisabled-bg: #f5f5f5;
   --ColorPicker-onDisabled-color: #999;
+  --ColorPicker-boxShadow: #{$L1};
 
-  --Collapse-border: #{px2rem(1px)} solid #EBEDF5;
-  --Collapse-border-color: #EBEDF5;
+  --Collapse-border: #{px2rem(1px)} solid #{$G8};
+  --Collapse-border-color: #{$G8};
   --Collapse-header-fontSize: #{$T3};
-  --Collapse-header-fontWeight: #{$W3};
-  --Collapse-header-padding: #{px2rem(14px)};
-  --Collapse-header-bg: #F6F7FA;
-  --Collapse-header-onHover-bg: #F3F9FE;
-  --Collapse-header-bg-disabled-color: #F6F7FA;
+  --Collapse-header-fontWeight: #{$W2};
+  --Collapse-header-padding: #{px2rem(16px)};
+  --Collapse-header-bg: #{$G10};
+  --Collapse-header-onHover-bg: #{$G9};
+  --Collapse-header-bg-disabled-color: #{$G10};
   --Collapse-header-collapsed-borderBottom: none;
   --Collapse-header-wrapper-direction: row-reverse;
   --Collapse-content-padding: #{px2rem(16px)};
@@ -500,6 +503,9 @@ $R8: 50%;
   --TransferSelect-heading-borderBottom: 0;
 
   // Alert
+  --Alert-fontColor: #{$G4};
+  --Alert-title-fontColor: #{$G2};
+
   --Alert-height: #{px2rem(40px)};
   --Alert-paddingX: #{px2rem(16px)};
   --Alert-fontSize: #{$T2};

package/scss/themes/cxd.scss

@@ -148,13 +148,6 @@
   }
 }
 
-.#{$ns}ColorPicker {
-  .#{$ns}PopOver {
-    border: none;
-    box-shadow: var(--boxShadow);
-  }
-}
-
 .#{$ns}IconPickerControl {
   .#{$ns}IconPickerControl-input--withAC {
     .#{$ns}IconPickerControl-sugsPanel {