amis 1.3.5-beta.6 → 1.4.1-echarts-5.3.1

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/components/_spinner.scss

@@ -62,8 +62,12 @@
   &--icon {
     background: transparent;
     animation: spin 2s linear infinite;
-    width: auto;
-    height: auto;
+    width: var(--fontSizeLg);
+    height: var(--fontSizeLg);
+    svg.icon {
+      width: var(--fontSizeLg);
+      height: var(--fontSizeLg);
+    }
   }
 }
 

package/scss/components/form/_group.scss

@@ -8,6 +8,10 @@
   .#{$ns}Form-group {
     margin-bottom: var(--Form-item-gap);
 
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     .#{$ns}Form-value > & {
       margin-bottom: var(--Form-input-marginBottom);
     }

package/scss/themes/_common.scss

@@ -106,5 +106,6 @@
 @import '../components/form/icon-picker';
 @import '../components/form/form';
 @import '../components/anchor-nav';
+@import '../components/markdown';
 
 @import '../utilities';

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;