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

package/scss/_mixins.scss

@@ -228,6 +228,17 @@
     margin-left: $padding-x;
   }
 
+  .#{$ns}Button--loading:first-child:not(:last-child):not(.pull-right),
+  > svg.icon:not(:last-child):not(.pull-right),
+  > .pull-left {
+    margin-right: $padding-x;
+  }
+
+  .#{$ns}Button--loading:last-child:not(:first-child):not(.pull-left),
+  > .pull-right {
+    margin-left: $padding-x;
+  }
+
   // img 需要加一下高度限制
   img.#{$ns}Button-icon {
     height: var(--Button-fontSize);
@@ -235,6 +246,19 @@
   }
 }
 
+@mixin button-loading-icon() {
+  transition: --Button-transition;
+  svg {
+    @include animation-svg(
+      var(--Button-animation-spin)
+    );
+  }
+}
+
+@mixin animation-svg($animation) {
+  animation: $animation;
+}
+
 @mixin button-variant(
   $background,
   $border: $background,
@@ -258,6 +282,11 @@
       background: $hover-background;
       border-color: $hover-border;
     }
+    @include hover-active {
+      color: $active-color;
+      background: $active-background;
+      border-color: $active-border;
+    }
   }
 
   // @include focus {

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%)};
@@ -166,6 +166,10 @@
 
   --Badge-size: var(--gap-md);
   --Badge-color: var(--white);
+  --Badge--success-bg: var(--success);
+  --Badge--info-bg: var(--info);
+  --Badge--warning-bg: var(--warning);
+  --Badge--danger-bg: var(--danger);
 
   --Button--danger-bg: var(--danger);
   --Button--danger-border: var(--Button--danger-bg);
@@ -188,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);
@@ -226,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);
@@ -241,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);
@@ -275,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);
@@ -305,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;
@@ -12,7 +13,6 @@
     transform-origin: 100% 0;
     z-index: auto;
     border-radius: calc(var(--Badge-size) / 2);
-    box-shadow: 0 0 0 1px #fff;
   }
 
   &--top-left {
@@ -38,6 +38,21 @@
     transform: translate(50%, 50%);
   }
 
+  &--danger {
+    background: var(--Badge--danger-bg);
+  }
+
+  &--info {
+    background: var(--Badge--info-bg);
+  }
+
+  &--success {
+    background: var(--Badge--success-bg);
+  }
+
+  &--warning {
+    background: var(--Badge--warning-bg);
+  }
   // 显示文字
   &-text {
     color: var(--Badge-color);
@@ -56,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/_markdown.scss

@@ -0,0 +1,266 @@
+.#{$ns}Markdown {
+  strong {
+    font-weight: bolder;
+  }
+
+  img {
+    border-style: none;
+  }
+
+  svg:not(:root) {
+    overflow: hidden;
+  }
+
+  button:-moz-focusring,
+  [type='button']:-moz-focusring,
+  [type='reset']:-moz-focusring,
+  [type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  [type='checkbox'] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  table td,
+  table th {
+    padding: 0;
+  }
+
+  hr {
+    height: 0;
+    margin: 15px 0;
+    overflow: hidden;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid #ddd;
+  }
+
+  hr::before {
+    display: table;
+    content: '';
+  }
+
+  hr::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+
+  blockquote {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  ol ol,
+  ul ol {
+    list-style-type: lower-roman;
+  }
+
+  ul ul ol,
+  ul ol ol,
+  ol ul ol,
+  ol ol ol {
+    list-style-type: lower-alpha;
+  }
+
+  dd {
+    margin-left: 0;
+  }
+
+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table,
+  pre {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+
+  hr {
+    height: 4px;
+    padding: 0;
+    margin: 16px 0;
+    background-color: #e7e7e7;
+    border: 0 none;
+  }
+
+  ul:not(.dropdown-menu):not(.nav),
+  ol {
+    padding-left: 2em;
+  }
+
+  ul ul,
+  ul ol,
+  ol ol,
+  ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  li > p {
+    margin-top: 16px;
+  }
+
+  dl {
+    padding: 0;
+  }
+
+  dl dt {
+    padding: 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: bold;
+  }
+
+  dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+
+  blockquote {
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #ddd;
+  }
+
+  blockquote > :first-child {
+    margin-top: 0;
+  }
+
+  blockquote > :last-child {
+    margin-bottom: 0;
+  }
+
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+  }
+
+  table th {
+    font-weight: bold;
+  }
+
+  table th,
+  table td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+  }
+
+  table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+  }
+
+  table tr:nth-child(2n) {
+    background-color: #f8f8f8;
+  }
+
+  @media (min-width: 1200px) {
+    img {
+      max-width: 800px;
+    }
+  }
+
+  code {
+    padding: 0;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    margin: 0;
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 3px;
+  }
+
+  code:before,
+  code:after {
+    letter-spacing: -0.2em;
+    content: '\00a0';
+  }
+
+  pre > code {
+    padding: 0;
+    margin: 0;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+  }
+
+  .highlight {
+    margin-bottom: 16px;
+  }
+
+  .highlight pre,
+  pre {
+    padding: 16px;
+    overflow: auto;
+    line-height: 1.45;
+    background-color: #f7f7f7;
+    border-radius: 3px;
+  }
+
+  .highlight pre {
+    margin-bottom: 0;
+    word-break: normal;
+  }
+
+  pre {
+    word-wrap: normal;
+  }
+
+  pre code {
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+  }
+
+  pre code:before,
+  pre code:after {
+    content: normal;
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    line-height: 10px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
+  }
+
+  hr {
+    border-bottom-color: #eee;
+  }
+}