amis-ui 2.6.0 → 2.7.0

package/scss/components/_nav.scss

@@ -1,5 +1,10 @@
 .#{$ns}Nav {
   position: relative;
+
+  .#{$ns}Nav-itemIcon {
+    margin-right: var(--gap-sm);
+  }
+
   .#{$ns}Nav-list {
     list-style: none;
     user-select: none;
@@ -7,15 +12,28 @@
     padding: 0;
     position: relative;
 
-    .#{$ns}Nav-itemIcon {
-      margin-right: var(--gap-sm);
-    }
-
     img.#{$ns}Nav-itemIcon {
       height: var(--Tabs-linkFontSize);
       vertical-align: middle;
     }
 
+    .#{$ns}Nav-itemToggler {
+      margin-right: px2rem(10px);
+      height: px2rem(24px);
+      text-align: center;
+      line-height: px2rem(24px);
+      vertical-align: middle;
+      cursor: pointer;
+      transform: scale(0.8);
+      transition: transform var(--animation-duration);
+
+      > svg {
+        width: 10px;
+        height: 10px;
+        top: 0;
+      }
+    }
+
     &-overflow {
       min-height: var(--Nav-Item-height) !important;
       max-height: calc(var(--Nav-Item-height) * 5);
@@ -47,6 +65,57 @@
     &--tabs {
       border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
 
+      &.nav-simple {
+        display: flex;
+
+        .#{$ns}Nav-item {
+          margin-bottom: 0;
+          vertical-align: text-top;
+
+          > a {
+            border: none;
+            margin: 0;
+            padding: var(--gap-md) 0;
+          }
+
+          &:hover {
+            > a,
+            > a:focus {
+              border: none;
+              color: var(--Tabs-onActive-color);
+              text-decoration: none;
+            }
+          }
+
+          &.active > a,
+          &.is-active > a {
+            border: none;
+            background: none;
+          }
+
+          &.is-active {
+            position: relative;
+
+            &:after {
+              position: absolute;
+              content: '';
+              bottom: 0;
+              width: 100%;
+              height: px2rem(2px);
+              background-color: var(--Tabs-onActive-color);
+            }
+          }
+
+          .#{$ns}Nav-subItems {
+            display: none;
+          }
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
       .#{$ns}Nav-item {
         margin-bottom: calc(var(--Tabs-borderWidth) * -1);
         display: inline-block;
@@ -70,11 +139,14 @@
           white-space: nowrap;
         }
 
-        &:hover > a,
-        > a:focus {
-          border-color: var(--Tabs-onHover-borderColor);
-          border-bottom: none; // 外层已经有border-bottom了
-          text-decoration: none;
+        &:hover {
+          > a,
+          > a:focus {
+            border-color: var(--Tabs-onHover-borderColor);
+            border-bottom: none; // 外层已经有border-bottom了
+            color: var(--Tabs-onActive-color);
+            text-decoration: none;
+          }
         }
 
         &.disabled > a,
@@ -94,6 +166,10 @@
         }
       }
 
+      > .#{$ns}Nav-item {
+        margin-left: px2rem(40px);
+      }
+
       .#{$ns}Nav-item-overflow {
         &:hover > a,
         > a:focus,
@@ -136,23 +212,8 @@
           }
         }
 
-        > .#{$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}Badge-ribbon-out {
+          z-index: 3;
         }
 
         > .#{$ns}Nav-item-atcions {
@@ -173,19 +234,6 @@
           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);
-          // }
         }
 
         > a:hover,
@@ -227,10 +275,6 @@
           color: var(--Nav-item-onActive-color);
           position: relative;
           background: var(--Nav-item-onActive-bg) !important;
-
-          &::after {
-            transform: scaleY(1);
-          }
         }
 
         &.is-unfolded >,
@@ -241,7 +285,50 @@
 
           .#{$ns}Nav-subItems {
             display: block;
-            // margin-left: var(--gap-sm);
+          }
+        }
+
+        &.is-after {
+          .#{$ns}Nav-itemToggler {
+            margin-left: auto;
+          }
+
+          > a,
+          > .#{$ns}Badge > a {
+            font-size: var(--Nav-item-fontSize);
+            padding: 0;
+            height: px2rem(40px);
+            border-radius: 0;
+          }
+
+          > a:hover,
+          > 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 {
+            background: none;
+            color: var(--Nav-item-onActive-color);
+          }
+
+          &.is-active {
+            > .#{$ns}Badge > a {
+              background-color: var(
+                --Nav-item-onActive-backgroundColor
+              ) !important;
+            }
+
+            &::after {
+              position: absolute;
+              left: 0;
+              content: '';
+              width: 3px;
+              height: 100%;
+              background-color: var(--Nav-item-onActive-borderColor);
+              z-index: 2;
+            }
           }
         }
 
@@ -251,29 +338,7 @@
           top: px2rem(8px);
         }
 
-        .#{$ns}Nav-itemToggler {
-          // position: absolute;
-          // left: 0;
-          // top: px2rem(3px);
-          float: left;
-          margin-right: px2rem(10px);
-          height: px2rem(24px);
-          text-align: center;
-          line-height: px2rem(24px);
-          vertical-align: middle;
-          cursor: pointer;
-          transform: scale(0.8);
-          transition: transform var(--animation-duration);
-
-          > svg {
-            width: 10px;
-            height: 10px;
-            top: 0;
-          }
-        }
-
         .#{$ns}Nav-subItems {
-          // background: var(--Nav-subNav-bg);
           display: none;
           padding-left: 0;
           list-style: none;
@@ -282,22 +347,6 @@
 
         .#{$ns}Nav-item {
           font-size: var(--Nav-subItem-fontSize);
-
-          // a:before {
-          //   content: '';
-          //   display: inline-block;
-          //   width: px2rem(4px);
-          //   height: px2rem(4px);
-          //   background: #ccc;
-          //   border-radius: px2rem(500px);
-          //   margin-right: px2rem(8px);
-          //   vertical-align: middle;
-          // }
-
-          // &.active > a:before,
-          // &.is-active > a:before {
-          //   background: var(--Nav-subItem-onActiveBeforeBg);
-          // }
         }
       }
     }
@@ -308,3 +357,9 @@
     height: 2px;
   }
 }
+
+// 悬浮菜单是挂在body下面的
+.#{$ns}Nav-itemIconAfter {
+  margin-right: 0;
+  margin-left: var(--gap-sm);
+}

package/scss/components/_panel.scss

@@ -1,7 +1,12 @@
 .#{$ns}Panel {
-  margin-bottom: var(--Panel-marginBottom);
+  margin: var(--Panel-marginTop) var(--Panel-marginRight)
+    var(--Panel-marginBottom) var(--Panel-marginLeft);
   background: var(--Panel-bg);
-  border: var(--Panel-border);
+  border-color: var(--Panel-top-border-color) var(--Panel-right-border-color)
+    var(--Panel-bottom-border-color) var(--Panel-left-border-color);
+  border-style: var(--Panel-top-border-style) var(--Panel-right-border-style)
+    var(--Panel-bottom-border-style) var(--Panel-left-border-style);
+  border-width: var(--Panel-borderWidth);
   border-radius: var(--Panel-borderRadius);
   -webkit-box-shadow: var(--Panel-boxShadow);
   box-shadow: var(--Panel-boxShadow);
@@ -25,11 +30,12 @@
 
   /* 主题 */
   &--default {
-    border-color: var(--borderColor);
+    border-color: var(--Panel-top-border-color) var(--Panel-right-border-color)
+      var(--Panel-bottom-border-color) var(--Panel-left-border-color);
 
     > .#{$ns}Panel-heading {
-      background: var(--Panel--default-bg);
-      color: var(--Panel--default-color);
+      background: var(--Panel-heading-bg);
+      color: var(--Panel-heading-color);
 
       .badge {
         color: var(--Panel--default-badgeColor);
@@ -38,7 +44,10 @@
     }
 
     > .#{$ns}Panel-heading {
-      border-color: var(--Panel--default-headingBorderColor);
+      border-color: var(--Panel-heading-top-border-color)
+        var(--Panel-heading-right-border-color)
+        var(--Panel-heading-bottom-border-color)
+        var(--Panel-heading-left-border-color);
     }
   }
 
@@ -140,15 +149,27 @@
   /* 子组件 */
   &-heading {
     padding: var(--Panel-headingPadding);
-    border-bottom: var(--Panel-headingBorderBottom);
+    border-color: var(--Panel-heading-top-border-color)
+      var(--Panel-heading-right-border-color)
+      var(--Panel-heading-bottom-border-color)
+      var(--Panel-heading-left-border-color);
+    border-style: var(--Panel-heading-top-border-style)
+      var(--Panel-heading-right-border-style)
+      var(--Panel-heading-bottom-border-style)
+      var(--Panel-heading-left-border-style);
+    border-width: var(--Panel-heading-top-border-width)
+      var(--Panel-heading-right-border-width)
+      var(--Panel-heading-bottom-border-width)
+      var(--Panel-heading-left-border-width);
     border-radius: var(--Panel-headingBorderRadius);
   }
 
   &-title {
-    margin-top: var(--Panel-titleMarginTop);
-    margin-bottom: var(--Panel-titleMarginBottom);
-    font-size: var(--Panel-titleFontSize);
-    color: var(--Panel-titleColor);
+    margin: 0;
+    font-size: var(--Panel-heading-fontSize);
+    color: var(--Panel-heading-color);
+    font-weight: var(--Panel-heading-fontWeight);
+    line-height: var(--Panel-heading-lineHeight);
   }
 
   &-body {
@@ -160,8 +181,14 @@
     border-radius: var(--Panel-footerBorderRadius);
     background: var(--Panel-footerBg);
     padding: var(--Panel-footerPadding);
-    border-style: solid;
-    border-width: var(--Panel-borderWidth) 0 0 0;
+    border-style: var(--Panel-footer-top-border-style)
+      var(--Panel-footer-right-border-style)
+      var(--Panel-footer-bottom-border-style)
+      var(--Panel-footer-left-border-style);
+    border-width: var(--Panel-footer-top-border-width)
+      var(--Panel-footer-right-border-width)
+      var(--Panel-footer-bottom-border-width)
+      var(--Panel-footer-left-border-width);
     clear: both;
 
     .#{$ns}Button + .#{$ns}Button {
@@ -189,7 +216,7 @@
     border: none;
     box-shadow: none;
 
-    margin: 0 calc(var(--Panel-bodyPadding) * -1)
+    margin: 0 calc(var(--Panel-body-paddingTop) * -1)
       calc(var(--Panel-marginBottom) / 2);
 
     .#{$ns}Panel-body {
@@ -202,20 +229,20 @@
       border-radius: 0;
 
       .#{$ns}Panel-title {
-        padding-left: var(--Panel-bodyPadding);
+        padding-left: var(--Panel-body-paddingLeft);
         border-left: px2rem(3px) solid var(--primary);
         font-size: var(--fontSizeLg);
       }
     }
 
     .#{$ns}Panel-footerWrap {
-      padding-bottom: var(--Panel-bodyPadding);
+      padding-bottom: var(--Panel-body-paddingBottom);
     }
 
     .#{$ns}Panel-footer {
       border-top: none;
       display: flex;
-      padding: 0 var(--Panel-bodyPadding);
+      padding: 0 var(--Panel-body-paddingLeft);
 
       > .#{$ns}Button {
         flex: 1;

package/scss/components/_result-box.scss

@@ -179,6 +179,10 @@
         color: var(--ResultBox-icon--onDisabled-color);
       }
     }
+
+    &.is-invalid {
+      color: var(--Form-selectValue-onInvalid-color);
+    }
   }
 
   &-placeholder {