amis 1.4.0 → 1.4.1

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%)};
@@ -192,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);
@@ -230,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);
@@ -245,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);
@@ -279,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);
@@ -309,12 +318,15 @@
   --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-onFocus-boxShadow: none;
   --Button-paddingX: #{px2rem(12px)};
+  --Button-paddingX-right: #{px2rem(10px)};
   --Button-paddingY: calc(
     (
         var(--Button-height) - var(--Button-borderWidth) * 2 -

package/scss/components/_badge.scss

@@ -3,7 +3,8 @@
   position: relative;
 
   &-text,
-  &-dot {
+  &-dot,
+  &-ribbon {
     background: var(--danger);
     position: absolute;
     top: 0;
@@ -70,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,24 @@
 
   &.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: none;
+    background: #F2F3F3;
   }
 
   &:not(:disabled):not(.is-disabled) {
     cursor: pointer;
   }
 
+  &.cxd-Button--link.is-disabled {
+    background: transparent;
+  }
+
   > .pull-left,
   > .pull-right {
     line-height: inherit;
@@ -112,6 +120,22 @@ 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 +309,10 @@ fieldset:disabled a.#{$ns}Button {
   }
 }
 
+.#{$ns}Button--loading {
+  @include button-loading-icon();
+}
+
 .#{$ns}Button--link {
   width: auto;
   min-width: auto;
@@ -296,7 +324,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 +336,7 @@ fieldset:disabled a.#{$ns}Button {
   &.is-disabled {
     color: var(--text--muted-color);
     pointer-events: none;
-    background: transparent;
+    background: #F2F3F3;
   }
 }
 

package/scss/components/_image-gallery.scss

@@ -196,7 +196,7 @@
     }
 
     &.is-active {
-      border: 1px solid #108cee;
+      border: 1px solid var(--primary);
       &:after {
         display: none;
       }

package/scss/components/_nav.scss

@@ -20,7 +20,7 @@
     .#{$ns}Nav-item {
       margin-bottom: calc(var(--Tabs-borderWidth) * -1);
       display: inline-block;
-
+      position: relative;
       > a {
         font-size: var(--Tabs-linkFontSize);
         display: block;
@@ -31,7 +31,7 @@
         color: var(--Tabs-color);
         text-decoration: none;
         margin-right: px2rem(2px);
-        padding: var(--gap-sm) var(--gap-base);
+        padding: var(--gap-sm) var(--gap-xl);
         cursor: pointer;
       }
 
@@ -62,57 +62,129 @@
   &--stacked {
     min-height: px2rem(50px);
 
-    .#{$ns}Nav-item {
+    .#{$ns}Nav-item, .#{$ns}Badge {
       position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: stretch;
+      width: 100%;
 
-      > a {
-        display: block;
+      .#{$ns}Nav-itemDrager {
+        cursor: move;
+        position: absolute;
+        left: 0;
+        top: px2rem(11px);
+        display: none;
+        > a, > .#{$ns}Badge > a {
+          color: var(--icon-color);
+
+          &:hover {
+            color: var(--icon-onHover-color);
+          }
+        }
+
+        svg {
+          width: px2rem(16px);
+          height: px2rem(16px);
+        }
+      }
+
+      > .#{$ns}Nav-item-badgeText {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: px2rem(35px);
+        overflow: hidden;
+        > span {
+          position: absolute;
+          top: px2rem(2px);
+          left: px2rem(-13px);
+          transform: rotate(-45deg);
+          width: px2rem(50px);
+          font-size: 12px;
+          text-align: center;
+          color: var(--white);
+          background: var(--success)
+        }
+      }
+
+      > .#{$ns}Nav-item-atcions {
+        display: flex;
+        align-items: center;
+      }
+
+      > a,
+      > .#{$ns}Badge > a {
+        display: flex;
+        align-items: center;
         outline: none;
         color: var(--Nav-item-color);
         text-decoration: none;
-        padding: var(--gap-sm) var(--gap-base);
+        padding: var(--gap-sm) var(--gap-sm);
         cursor: pointer;
         background: var(--Nav-item-bg);
         border-radius: var(--Nav-item-borderRadius);
         text-overflow: ellipsis;
+        flex: 1;
 
-        &::after {
-          border-left: var(--Nav-item-onActive-borderLeft);
-          position: absolute;
-          left: 0;
-          top: 0;
-          content: '';
-          width: 1px;
-          height: 100%;
-          transform: scaleY(0.0001);
-          transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
-            opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
-        }
-      }
-
-      &.has-sub > a {
-        padding-right: calc(var(--gap-base) + var(--gap-sm));
+        // &::after {
+        //   border-left: var(--Nav-item-onActive-borderLeft);
+        //   position: absolute;
+        //   left: 0;
+        //   top: 0;
+        //   content: '';
+        //   width: 1px;
+        //   height: 100%;
+        //   transform: scaleY(0.0001);
+        //   transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
+        //     opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+        // }
       }
 
       > a:hover,
-      > a:focus {
+      > a:focus,
+      > a:hover + .#{$ns}Nav-item-atcions,
+      > a:focus + .#{$ns}Nav-item-atcions,
+      > .#{$ns}Badge > a:hover,
+      > .#{$ns}Badge > a:focus,
+      > .#{$ns}Badge > a:hover + .#{$ns}Nav-item-atcions,
+      > .#{$ns}Badge > a:focus + .#{$ns}Nav-item-atcions
+       {
         border-color: var(--Nav-item-onHover-color);
         text-decoration: none;
         background: var(--Nav-item-onHover-bg);
+        z-index: 9999;
+      }
+
+      > a:hover > .#{$ns}Nav-itemDrager,
+      > a:focus > .#{$ns}Nav-itemDrager,
+      > .#{$ns}Badge > a:hover > .#{$ns}Nav-itemDrager,
+      > .#{$ns}Badge > a:focus > .#{$ns}Nav-itemDrager {
+        display: block;
       }
 
       &.disabled > a,
-      &.is-disabled > a {
+      &.is-disabled > a,
+      &.disabled > .#{$ns}Badge > a,
+      &.is-disabled > .#{$ns}Badge > a {
         color: var(--Nav-item-onDisabled-color);
         background: transparent;
         pointer-events: none;
       }
 
+      &.active,
+      &.is-active {
+        background: var(--Nav-item-onActive-bg) !important;
+      }
+
+
       &.active > a,
-      &.is-active > a {
+      &.is-active > .#{$ns}Nav-item-atcions,
+      &.is-active > a,
+      &.active > .#{$ns}Badge > a,
+      &.is-active > .#{$ns}Badge > .#{$ns}Nav-item-atcions,
+      &.is-active > .#{$ns}Badge > a {
         color: var(--Nav-item-onActive-color);
-        background: var(--Nav-item-onActive-bg);
-        padding-left: px2rem(12px);
         position: relative;
 
         &::after {
@@ -120,8 +192,8 @@
         }
       }
 
-      &.is-unfolded > {
-        .#{$ns}Nav-itemToggler {
+      &.is-unfolded > , &.is-unfolded > .#{$ns}Badge > {
+        a .#{$ns}Nav-itemToggler {
           transform: rotate(180deg) scale(0.8);
         }
 
@@ -138,13 +210,14 @@
       }
 
       .#{$ns}Nav-itemToggler {
-        position: absolute;
-        right: 0;
-        top: px2rem(3px);
-        width: px2rem(30px);
-        height: px2rem(30px);
+        // position: absolute;
+        // left: 0;
+        // top: px2rem(3px);
+        float: left;
+        width: px2rem(24px);
+        height: px2rem(24px);
         text-align: center;
-        line-height: px2rem(30px);
+        line-height: px2rem(24px);
         vertical-align: middle;
         cursor: pointer;
         transform: scale(0.8);
@@ -162,6 +235,7 @@
         display: none;
         padding-left: 0;
         list-style: none;
+        width: 100%;
       }
 
       .#{$ns}Nav-item {

package/scss/themes/_cxd-variables.scss

@@ -4,8 +4,8 @@ $remFactor: 16px;
 
 $ns: 'cxd-';
 
-$info: #108cee;
-$primary: #108cee;
+$info: #2468f2;
+$primary: #2468f2;
 $success: #5fb333;
 $warning: #f39000;
 $danger: #ea2e2e;
@@ -17,7 +17,7 @@ $success-bg: #f1fdeb;
 $warning-bg: #fcf7f1;
 $danger-bg: #fff5f5;
 
-$text-color: #666;
+$text-color: #151a26;
 
 $Number-handler-mode: 'horizontal';
 // css 变量似乎没法用 !important，所以这里用 sass 变量
@@ -29,9 +29,9 @@ $Wizard-steps-liAfterBorder: none !important;
 :root {
   --borderColor: #eceff8;
   --body-bg: #ffffff;
-  --text-color: #666;
+  --text-color: #151a26;
 
-  --text--muted-color: #999;
+  --text--muted-color: #b4b6ba;
   --text--loud-color: #333;
   --link-onHover-decoration: none;
 
@@ -47,10 +47,10 @@ $Wizard-steps-liAfterBorder: none !important;
   --Layout-brand-color: #fff;
   --Layout-asideLink-iconColor: rgba(255, 255, 255, 0.6);
   --Layout-asideLink-color: #fff;
-  --Layout-asideLink-onHover-color: #108cee;
-  --Layout-asideLink-onActive-color: #108cee;
+  --Layout-asideLink-onHover-color: var(--primary);
+  --Layout-asideLink-onActive-color: var(--primary);
   --Layout-asideLink-onHover-iconSize: #{px2rem(16px)};
-  --Layout-asideLink-onHover-iconColor: #108cee;
+  --Layout-asideLink-onHover-iconColor: var(--primary);
   --Layout-asideLink-fontSize: #{px2rem(12px)};
   --Layout-asideLink-arrowFontSize: #{px2rem(12px)};
   --Layout-asideLink-arrowColor: #8d99b0;
@@ -188,7 +188,7 @@ $Wizard-steps-liAfterBorder: none !important;
   --Button-borderWidth: #{px2rem(1px)};
   --Button-boxShadow: none;
   --Button-onActive-boxShadow: none;
-  --Button-borderRadius: 0;
+  // --Button-borderRadius: 0;
   --Button--lg-borderRadius: 0;
   --Button--sm-borderRadius: 0;
 
@@ -199,21 +199,21 @@ $Wizard-steps-liAfterBorder: none !important;
 
   --Button--default-bg: var(--white);
   --Button--default-border: #cccccc;
-  --Button--default-color: #000;
-  --Button--default-onHover-bg: var(--white);
-  --Button--default-onHover-border: var(--primary);
-  --Button--default-onHover-color: var(--primary);
-  --Button--default-onActive-bg: #f6fbff;
-  --Button--default-onActive-border: var(--primary);
-  --Button--default-onActive-color: var(--primary);
+  // --Button--default-color: #000;
+  // --Button--default-onHover-bg: var(--white);
+  // --Button--default-onHover-border: var(--primary);
+  // --Button--default-onHover-color: var(--primary);
+  // --Button--default-onActive-bg: var(--white);
+  // --Button--default-onActive-border: var(--primary);
+  // --Button--default-onActive-color: var(--primary);
 
   --Button--primary-bg: var(--primary);
   --Button--primary-border: var(--primary);
-  --Button--primary-onHover-bg: #209bfd;
-  --Button--primary-onHover-border: var(--primary);
+  // --Button--primary-onHover-bg: #4F86F4;
+  // --Button--primary-onHover-border: #4F86F4;
   --Button--primary-onHover-color: var(--white);
-  --Button--primary-onActive-bg: #047bdb;
-  --Button--primary-onActive-border: var(--primary);
+  // --Button--primary-onActive-bg: #1C53C1;
+  // --Button--primary-onActive-border: #1C53C1;
   --Button--primary-onActive-color: var(--white);
 
   --Button--danger-bg: #ea2e2e;