amis 1.4.2-beta.13 → 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/_anchor-nav.scss

@@ -104,6 +104,7 @@
     border: none;
     flex-grow: 1;
     overflow: auto;
+    scroll-behavior: smooth;
     background: var(--Tabs-content-bg);
 
     > .#{$ns}AnchorNav-section {

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

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

package/scss/components/_collapse.scss

@@ -1,7 +1,7 @@
 .#{$ns}Collapse {
   border: var(--Collapse-border);
   padding: 0;
-  margin-bottom: var(--Form-item-gap);
+  line-height: px2rem(20px);
 
   &-header {
     font-size: var(--Collapse-header-fontSize);
@@ -9,7 +9,7 @@
     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);
 
     &-wrapper {
@@ -30,8 +30,7 @@
     display: inline-block;
     width: px2rem(16px);
     text-align: center;
-    margin-right: px2rem(8px);
-    cursor: pointer;
+    margin-right: var(--gap-sm);
 
     &:before {
       content: '';
@@ -39,37 +38,50 @@
       display: inline-block;
       width: px2rem(6px);
       height: px2rem(6px);
-      top: px2rem(-4px);
+      top: px2rem(-2px);
       border-color: var(--text-color);
       border-style: solid;
       border-width: px2rem(1px) px2rem(1px) 0 0;
-      transform: rotate(135deg);
+      transform: rotate(45deg);
       transform-origin: 50% 50%;
     }
   }
 
-  &-TplField {
+  &-icon-tranform {
     display: inline-block;
+    width: px2rem(16px);
+    text-align: center;
+    margin-right: var(--gap-xs);
   }
 
-  &.is-collapsed &-arrow:before {
-    transform: rotate(45deg);
-    transform-origin: 0% 50%;
+  .#{$ns}TplField {
+    display: inline-block;
   }
-  &.is-collapsed &-header {
-    border-bottom: var(--Collapse-header-collapsed-border);
+
+  &.is-active &-arrow:before {
+    transform: rotate(135deg);
+    transform-origin: 50% 30%;
+  }
+  &.is-active &-icon-tranform {
+    transform: rotate(90deg);
   }
 
-  &--collapsable &-header {
-    cursor: pointer;
+  &--disabled &-header {
+    cursor: not-allowed;
     user-select: none;
+    color: var(--text--muted-color);
+    &:hover {
+      background-color: var(--Collapse-header-bg-disabled-color);
+    }
+  }
+
+  &--disabled &-arrow:before {
+    border-color: var(--text--muted-color);
   }
 
   // title 显示在底部的模式
   &--title-bottom &-header {
     text-align: center;
-    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);
@@ -80,15 +92,13 @@
   }
 
   &--title-bottom &-arrow:before {
-    top: px2rem(2px);
-    transform: rotate(-45deg);
-    transform-origin: 0% 50%;
+    top: px2rem(-4px);
+    transform: rotate(135deg);
   }
 
-  &--title-bottom.is-collapsed &-arrow:before {
-    top: px2rem(-6px);
-    transform: rotate(135deg);
-    transform-origin: 0% 50%;
+  &--title-bottom.is-active &-arrow:before {
+    top: 0;
+    transform: rotate(-45deg);
   }
 
   &-contentWrapper {

package/scss/components/_grid-nav.scss

@@ -0,0 +1,128 @@
+.u-hairline::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid var(--borderColorLight);
+  z-index: 1;
+  transform: scale(0.5);
+}
+
+.#{$ns}GridNav {
+  display: flex;
+  flex-wrap: wrap;
+
+  &-top {
+    position: relative;
+
+    &::after {
+      border-top-width: px2rem(1px);
+    }
+  }
+}
+
+.#{$ns}GridNavItem {
+  position: relative;
+  box-sizing: border-box;
+
+  &--square {
+    height: 0;
+    position: relative;
+  }
+
+  &-icon {
+    width: var(--rv-grid-item-icon-size);
+  }
+
+  &-text {
+    color: var(--text-color);
+    font-size: var(--fontSizeSm);
+    line-height: 1.5;
+    word-break: break-all;
+    flex-shrink: 0;
+  }
+
+  &-icon + &-text {
+    margin-top: px2rem(8px);
+  }
+
+  &-image {
+    display: inline-block;
+
+    svg,
+    img {
+      max-width: 100%;
+      display: block;
+      width: 60%;
+      margin: 0 auto;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    padding: var(--gap-md) var(--gap-sm);
+    background-color: var(--white);
+    position: relative;
+
+    .#{$ns}Badge-text {
+      z-index: 10;
+    }
+
+    &--border::after {
+      border-width: 0 var(--borderWidth) var(--borderWidth) 0;
+    }
+
+    &--square {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+
+    &--center {
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--horizontal {
+      flex-direction: row;
+
+      .#{$ns}GridNavItem-text {
+        margin: 0 0 0 var(--gap-sm);
+      }
+    }
+
+    &--reverse {
+      flex-direction: column-reverse;
+
+      .#{$ns}GridNavItem-text {
+        margin: 0 0 var(--gap-sm);
+      }
+    }
+
+    &--horizontal &--reverse {
+      flex-direction: row-reverse;
+
+      .#{$ns}GridNavItem-text {
+        margin: 0 var(--gap-sm) 0 0;
+      }
+    }
+
+    &--surround {
+      &::after {
+        border-width: var(--borderWidth);
+      }
+    }
+
+    &--clickable {
+      cursor: pointer;
+    }
+  }
+}

package/scss/components/_nav.scss

@@ -75,8 +75,8 @@
           cursor: move;
           position: absolute;
           left: 0;
-          top: px2rem(11px);
           display: none;
+          line-height: 0;
           > .icon, > .#{$ns}Badge > .icon {
             color: var(--icon-color);
 
@@ -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/_spinner.scss

@@ -62,11 +62,12 @@
   &--icon {
     background: transparent;
     animation: spin 2s linear infinite;
-    width: var(--fontSizeLg);
-    height: var(--fontSizeLg);
+    width: 16px; // reload 那个 icon 必须用这个高宽
+    height: 16px;
     svg.icon {
-      width: var(--fontSizeLg);
-      height: var(--fontSizeLg);
+      width: 16px;
+      height: 16px;
+      top: 0;
     }
   }
 }

package/scss/components/_table.scss

@@ -549,6 +549,9 @@
       width: px2rem(1px);
       padding-right: 0;
       cursor: move;
+      > svg {
+        vertical-align: middle;
+      }
     }
 
     > tbody > tr > td.#{$ns}Table-expandCell {
@@ -879,6 +882,9 @@
       text-decoration: none;
       color: var(--icon-onHover-color);
     }
+    > svg {
+      vertical-align: -2px;
+    }
   }
 
   &-table > tbody > tr:hover .#{$ns}Table-dragBtn,

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

@@ -159,6 +159,8 @@
 
     .#{$ns}Combo-itemDrager {
       padding: var(--Combo--horizontal-dragger-top) px2rem(6px) 0 0;
+      display: flex;
+      align-items: center;
     }
   }
 
@@ -224,6 +226,8 @@
       position: absolute;
       top: var(--Combo--horizontal-dragger-top);
       left: px2rem(-30px);
+      display: flex;
+      align-items: center;
     }
 
     &.is-draggable {

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 {