amis-ui 2.6.0 → 2.7.0

package/scss/components/_anchor-nav.scss

@@ -83,7 +83,7 @@
           font-size: var(--Tabs-linkFontSize);
           outline: 0;
           border: var(--Tabs-borderWidth) solid transparent;
-          border-width: 0 0 var(--Tabs--line-borderWidth) 0;
+          border-width: 0 0 2px 0;
           border-top-left-radius: var(--Tabs-borderRadius);
           border-top-right-radius: var(--Tabs-borderRadius);
           color: var(--Tabs-color);
@@ -112,9 +112,9 @@
           > a:first-child:hover,
           > a:first-child:focus {
             font-size: var(--Tabs-linkFontSize);
-            border-width: 0 0 var(--Tabs--line-borderWidth) 0;
+            border-width: 0 0 2px 0;
             border-color: var(--Tabs--line-onHover-borderColor);
-            color: var(--Tabs--line-onHover-color);
+            color: var(--primary);
             background: transparent;
           }
         }

package/scss/components/_array-input.scss

@@ -14,6 +14,7 @@
 
     @include button-size(
       var(--Combo-addBtn-fontSize),
+      var(--Combo-addBtn-fontWeight),
       var(--Combo-addBtn-lineHeight),
       var(--Combo-addBtn-borderRadius),
       var(--Combo-addBtn-borderRadius),

package/scss/components/_button.scss

@@ -605,6 +605,7 @@
   &--size-default {
     @include button-size(
       var(--button-size-default-fontSize),
+      var(--button-size-default-fontWeight),
       var(--button-size-default-lineHeight),
       var(--button-size-default-top-right-border-radius),
       var(--button-size-default-top-left-border-radius),
@@ -628,6 +629,7 @@
   &--size-xs {
     @include button-size(
       var(--button-size-xs-fontSize),
+      var(--button-size-xs-fontWeight),
       var(--button-size-xs-lineHeight),
       var(--button-size-xs-top-right-border-radius),
       var(--button-size-xs-top-left-border-radius),
@@ -657,6 +659,7 @@
   &--size-sm {
     @include button-size(
       var(--button-size-sm-fontSize),
+      var(--button-size-sm-fontWeight),
       var(--button-size-sm-lineHeight),
       var(--button-size-sm-top-right-border-radius),
       var(--button-size-sm-top-left-border-radius),
@@ -686,6 +689,7 @@
   &--size-md {
     @include button-size(
       var(--button-size-md-fontSize),
+      var(--button-size-md-fontWeight),
       var(--button-size-md-lineHeight),
       var(--button-size-md-top-right-border-radius),
       var(--button-size-md-top-left-border-radius),
@@ -715,6 +719,7 @@
   &--size-lg {
     @include button-size(
       var(--button-size-lg-fontSize),
+      var(--button-size-lg-fontWeight),
       var(--button-size-lg-lineHeight),
       var(--button-size-lg-top-right-border-radius),
       var(--button-size-lg-top-left-border-radius),

package/scss/components/_collapse-group.scss

@@ -30,8 +30,9 @@
 
   &.icon-position-right {
     .#{$ns}Collapse-header {
-      .#{$ns}Collapse-arrow {
+      .#{$ns}Collapse-arrow-wrap {
         float: right;
+        margin-right: 0;
       }
 
       .#{$ns}Collapse-icon-tranform {

package/scss/components/_collapse.scss

@@ -1,14 +1,29 @@
 .#{$ns}Collapse {
-  border: var(--Collapse-border);
+  border-width: var(--collapse-default-top-border-width)
+    var(--collapse-default-right-border-width)
+    var(--collapse-default-bottom-border-width)
+    var(--collapse-default-left-border-width);
+  border-style: var(--collapse-default-top-border-style)
+    var(--collapse-default-right-border-style)
+    var(--collapse-default-bottom-border-style)
+    var(--collapse-default-left-border-style);
+  border-color: var(--collapse-default-top-border-color)
+    var(--collapse-default-right-border-color)
+    var(--collapse-default-bottom-border-color)
+    var(--collapse-default-left-border-color);
+  border-radius: var(--collapse-default-top-left-border-radius)
+    var(--collapse-default-top-right-border-radius)
+    var(--collapse-default-bottom-right-border-radius)
+    var(--collapse-default-bottom-left-border-radius);
   padding: 0;
   line-height: px2rem(20px);
-  border-radius: 4px;
   // overflow: hidden;
 
   &-header {
     font-size: var(--Collapse-header-fontSize);
     font-weight: var(--Collapse-header-fontWeight);
-    color: var(--text--loud-color);
+    color: var(--collapse-default-header-color);
+    line-height: var(--collapse-default-header-lineHeight);
     padding: var(--Collapse-header-padding);
     margin: 0;
     cursor: pointer;
@@ -25,28 +40,27 @@
 
     &:hover {
       background: var(--Collapse-header-onHover-bg);
+      color: var(--collapse-default-header-hover-color);
     }
   }
 
-  &-arrow {
-    display: inline-block;
+  .Collapse-arrow {
+    content: var(--collapse-icon-icon);
+  }
+
+  &-arrow-wrap {
     width: px2rem(16px);
     height: px2rem(16px);
-    text-align: center;
-    margin-right: var(--gap-sm);
-
-    &:before {
-      content: '';
-      position: relative;
-      display: inline-block;
-      width: px2rem(6px);
-      height: px2rem(6px);
-      top: px2rem(-2px);
-      border-color: #84868c;
-      border-style: solid;
-      border-width: px2rem(1px) px2rem(1px) 0 0;
-      transform: rotate(45deg);
-      transform-origin: 50% 50%;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: var(--collapse-icon-margin);
+
+    svg {
+      width: var(--collapse-icon-size);
+      height: var(--collapse-icon-size);
+      color: var(--collapse-icon-color);
+      top: 0;
     }
   }
 
@@ -62,25 +76,23 @@
   //   display: inline-block;
   // }
 
-  &.is-active > * > &-arrow:before {
-    transform: rotate(135deg);
-    transform-origin: 50% 30%;
+  &.is-active &-arrow {
+    transform: rotate(var(--collapse-icon-rotate));
+    transform-origin: 50% 50%;
   }
   &.is-active > * > &-icon-tranform {
-    transform: rotate(90deg);
+    transform: rotate(var(--collapse-icon-rotate));
   }
 
   &--disabled > &-header {
     cursor: not-allowed;
     user-select: none;
-    color: var(--text--muted-color);
-    &:hover {
-      background-color: var(--Collapse-header-bg-disabled-color);
-    }
+    color: var(--collapse-default-disabled-color);
+    background: var(--collapse-default-disabled-header-bg-color);
   }
 
-  &--disabled > * > &-arrow:before {
-    border-color: var(--text--muted-color);
+  &--disabled &-arrow-wrap svg {
+    color: var(--collapse-default-disabled-color);
   }
 
   // title 显示在底部的模式
@@ -95,14 +107,14 @@
     border-top: none;
   }
 
-  &--title-bottom &-arrow:before {
+  &--title-bottom &-arrow {
     top: px2rem(-4px);
-    transform: rotate(135deg);
+    transform: rotate(var(--collapse-icon-rotate));
   }
 
-  &--title-bottom.is-active &-arrow:before {
+  &--title-bottom.is-active &-arrow {
     top: 0;
-    transform: rotate(-45deg);
+    transform: rotate(calc(-1 * var(--collapse-icon-rotate)));
   }
 
   &-contentWrapper {
@@ -115,9 +127,11 @@
   }
   &-content {
     padding: var(--Collapse-content-padding);
-    color: var(--body-color);
+    color: var(--Collapse-content-color);
     font-size: var(--Collapse-content-fontSize);
     font-weight: var(--Collapse-content-fontWeight);
+    line-height: var(--collapse-default-content-lineHeight);
+    background: var(--collapse-default-bg-color);
   }
 }
 

package/scss/components/_divider.scss

@@ -1,7 +1,7 @@
 .#{$ns}Divider {
-  margin: var(--gap-base) calc(var(--gap-base) * -1);
-  border-bottom: var(--borderWidth) var(--Divider-borderStyle)
-    var(--borderColor);
+  margin: var(--Divider-marginTop) var(--Divider-marginRight)
+    var(--Divider-marginBottom) var(--Divider-marginLeft);
+  border-bottom: var(--Divider-width) var(--Divider-style) var(--Divider-color);
   height: px2rem(2px);
   font-size: 0;
 

package/scss/components/_formula.scss

@@ -143,7 +143,15 @@
     }
 
     &-tabs {
-      --Tabs-linkFontSize: var(--fontSizeSm);
+      --Tabs--line-fontSize: var(--fontSizeSm);
+      --Tabs--line-active-fontSize: var(--fontSizeSm);
+      --Tabs--line-hover-fontSize: var(--fontSizeSm);
+      --Tabs--line-lineHeight: 30px;
+      --Tabs--line-active-lineHeight: 30px;
+      --Tabs--line-hover-lineHeight: 30px;
+      --Tabs--line-fontWeight: 500;
+      --Tabs--line-active-fontWeight: 500;
+      --Tabs--line-hover-fontWeight: 500;
       --Tabs--card-linkPadding: #{px2rem(5px)};
 
       max-height: 100%;

package/scss/components/_link.scss

@@ -1,6 +1,20 @@
 .#{$ns}Link {
   &.is-disabled {
     cursor: not-allowed;
-    color: var(--text--muted-color);
+    color: var(--link-disabled-color);
+    font-size: var(--link-disabled-fontSize);
+    font-weight: var(--link-disabled-fontWeight);
+    text-decoration: var(--link-disabled-text-decoration);
+    font-style: var(--link-disabled-font-style);
+    background-color: var(--link-disabled-bg-color);
+  }
+  i {
+    font-size: var(--link-icon-size);
+    margin: 0 var(--link-icon-margin);
+  }
+  svg {
+    height: var(--link-icon-size);
+    width: var(--link-icon-size);
+    margin: 0 var(--link-icon-margin);
   }
 }