iov-design 2.15.54 → 2.15.56

package/packages/tabs/src/tabs.vue

@@ -21,7 +21,11 @@
         default: 'top'
       },
       beforeLeave: Function,
-      stretch: Boolean
+      stretch: Boolean,
+      primary: {
+        type: Boolean,
+        default: false
+      }
     },
 
     provide() {
@@ -167,6 +171,7 @@
           'el-tabs': true,
           'el-tabs--normal': !type,
           'el-tabs--card': type === 'card',
+          'el-tabs--card-primary': type === 'card' && this.primary,
           'el-tabs--capsule': type === 'capsule',
           [`el-tabs--${size}`]: size,
           [`el-tabs--${tabPosition}`]: true,

package/packages/theme-chalk/src/button.scss

@@ -6,7 +6,6 @@
 
 @include b(button) {
   display: inline-block;
-  line-height: 1;
   white-space: nowrap;
   cursor: pointer;
   background: $--button-default-background-color;
@@ -201,7 +200,7 @@
     &.el-button--text {
       padding: 0 8px;
       height: $--button-small-height;
-      line-height: calc(#{$--button-small-height} - 2px);
+      line-height: $--button-small-height - 2px;
     }
     @include when(icon-only) {
       font-size: $--button-icon-only-size;
@@ -216,7 +215,7 @@
     &.el-button--text {
       padding: 0 4px;
       height: $--button-mini-height;
-      line-height: calc(#{$--button-mini-height }- 2px);
+      line-height: $--button-mini-height - 2px;
     }
     @include when(icon-only) {
       font-size: $--button-icon-only-size;

package/packages/theme-chalk/src/cascader.scss

@@ -34,7 +34,7 @@
 
     .iov-icon-arrow-up {
       padding-right: 0;
-      color: $--select-input-color;
+      color: $--color-fill-5;
       font-size: $--select-icon-size;
       transition: transform .3s;
       transform: rotateZ(180deg);

package/packages/theme-chalk/src/input.scss

@@ -244,6 +244,7 @@
 
     .el-input__icon {
       cursor: not-allowed;
+      color: $--color-fill-4;
     }
     .el-input__prefix,
     .el-input__suffix,

package/packages/theme-chalk/src/iovfont.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'iovfont';  /* Project id 4466910 */
-  src: url('//at.alicdn.com/t/c/font_4466910_8y5kjsv7pqg.woff2?t=1750820266142') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4466910_8y5kjsv7pqg.woff?t=1750820266142') format('woff'),
-       url('//at.alicdn.com/t/c/font_4466910_8y5kjsv7pqg.ttf?t=1750820266142') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4466910_qnw5e0xxy7.woff2?t=1753354243540') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4466910_qnw5e0xxy7.woff?t=1753354243540') format('woff'),
+       url('//at.alicdn.com/t/c/font_4466910_qnw5e0xxy7.ttf?t=1753354243540') format('truetype');
 }
 
 [class^="iov-icon-"], [class*=" iov-icon-"] {
@@ -36,6 +36,39 @@
   }
 }
 
+.iov-icon-bottle:before {
+  content: "\e6fe";
+}
+
+.iov-icon-line-github:before {
+  content: "\e6f8";
+}
+
+
+.iov-icon-sun:before {
+  content: "\e6f9";
+}
+
+.iov-icon-panel:before {
+  content: "\e6fa";
+}
+
+.iov-icon-cube:before {
+  content: "\e6fb";
+}
+
+.iov-icon-github:before {
+  content: "\e6fc";
+}
+
+.iov-icon-menu-fold-right:before {
+  content: "\e6fd";
+}
+
+.iov-icon-cdkey:before {
+  content: "\e6f7";
+}
+
 .iov-icon-circle-minus:before {
   content: "\e6f6";
 }
@@ -632,7 +665,7 @@
   content: "\e66a";
 }
 
-.iov-icon-menu-fold:before {
+.iov-icon-menu-fold-left:before {
   content: "\e66b";
 }
 

package/packages/theme-chalk/src/mixins/_button.scss

@@ -64,7 +64,7 @@
 @mixin button-size($height, $padding-horizontal, $font-size, $border-radius) {
   padding: 0 $padding-horizontal;
   height: $height;
-  line-height: calc(#{$height} - 2px);
+  line-height: $height - 2px;
   font-size: $font-size;
   border-radius: $border-radius;
   &.is-round {

package/packages/theme-chalk/src/switch.scss

@@ -5,41 +5,167 @@
   display: inline-flex;
   align-items: center;
   position: relative;
-  font-size: $--switch-font-size;
-  line-height: $--switch-height;
-  height: $--switch-height;
+  line-height: 18px;
+  height: 18px;
   vertical-align: middle;
+  @include m(rect) {
+    .el-switch__core {
+      border-radius: 2px;
+      &:after {
+        border-radius: 1px;
+      }
+    }
+  }
+  @include m(medium) {
+    height: 16px;
+    line-height: 16px;
+    &.el-switch--rect {
+      .el-switch__core:after {
+        width: 12px;
+        height: 12px;
+        top: 2px;
+        left: 2px;
+      }
+    }
+    .el-switch__core {
+      width: 28px;
+      height: 16px;
+      &:after {
+        top: 1px;
+        left: 1px;
+      }
+    }
+    .el-switch__label {
+      i {
+        font-size: 8px;
+      }
+    }
+    .el-switch__label--left-icon {
+      margin-right: -12px;
+    }
+    .el-switch__label--right-icon {
+      margin-left: -12px;
+    }
+    .el-switch__label--left-text {
+      margin-right: -12px;
+    }
+    .el-switch__label--right-text {
+      margin-left: -12px;
+    }
+  }
+  @include m(small) {
+    height: 14px;
+    line-height: 14px;
+    &.el-switch--rect {
+      .el-switch__core:after {
+        width: 10px;
+        height: 10px;
+        top: 2px;
+        left: 2px;
+      }
+    }
+    .el-switch__core {
+      width: 24px;
+      height: 14px;
+      &:after {
+        width: 12px;
+        height: 12px;
+        top: 1px;
+        left: 1px;
+      }
+    }
+    .el-switch__label {
+      i {
+        font-size: 6px;
+      }
+      span {
+        font-size: 8px;
+      }
+    }
+    .el-switch__label--left-icon {
+      margin-right: -10px;
+    }
+    .el-switch__label--right-icon {
+      margin-left: -10px;
+    }
+    .el-switch__label--left-text {
+      margin-right: -11px;
+    }
+    .el-switch__label--right-text {
+      margin-left: -11px;
+    }
+  }
+  @include m(mini) {
+    height: 10px;
+    line-height: 10px;
+    .el-switch__core {
+      width: 18px;
+      height: 10px;
+      &:after {
+        width: 8px;
+        height: 8px;
+        top: 1px;
+        left: 1px;
+      }
+    }
+    .el-switch__label {
+      i {
+        font-size: 6px;
+      }
+      span {
+        font-size: 6px;
+      }
+    }
+    .el-switch__label--left-icon {
+      margin-right: -8px;
+    }
+    .el-switch__label--right-icon {
+      margin-left: -8px;
+    }
+    .el-switch__label--left-text {
+      margin-right: -8px;
+    }
+    .el-switch__label--right-text {
+      margin-left: -8px;
+    }
+  }
   @include when(disabled) {
-    & .el-switch__core,
-    & .el-switch__label {
+    .el-switch__core,
+    .el-switch__label {
       cursor: not-allowed;
     }
   }
 
   @include e(label) {
     transition: .2s;
-    height: $--switch-height;
-    display: inline-block;
-    font-size: $--switch-font-size;
-    font-weight: 500;
+    // height: 18px;
+    // display: inline-block;
+    // font-size: 13px;
+    // font-weight: 500;
+    // vertical-align: middle;
+    display: flex;
+    align-items: center;
     cursor: pointer;
-    vertical-align: middle;
-    color: $--color-text-primary;
-
-    @include when(active) {
-      color: $--color-primary;
+    z-index: 1;
+    color: #fff;
+    i {
+      font-size: 10px;
     }
-
-    @include m(left) {
-      margin-right: 10px;
+    span {
+      font-size: 9px;
+      font-weight: 500;
+    }
+    @include m(left-icon) {
+      margin-right: -14px;
+    }
+    @include m(right-icon) {
+      margin-left: -14px;
     }
-    @include m(right) {
-      margin-left: 10px;
+    @include m(left-text) {
+      margin-right: -14px;
     }
-    & * {
-      line-height: 1;
-      font-size: $--switch-font-size;
-      display: inline-block;
+    @include m(right-text) {
+      margin-left: -14px;
     }
   }
 
@@ -55,43 +181,88 @@
     margin: 0;
     display: inline-block;
     position: relative;
-    width: $--switch-width;
-    height: $--switch-height;
-    border: 1px solid $--switch-off-color;
+    width: 32px;
+    height: 18px;
     outline: none;
-    border-radius: $--switch-core-border-radius;
+    border-radius: 10px;
     box-sizing: border-box;
-    background: $--switch-off-color;
+    background: $--color-fill-4;
     cursor: pointer;
     transition: border-color .3s, background-color .3s;
     vertical-align: middle;
 
+    &:hover {
+      background: $--color-fill-5;
+    }
+
     &:after {
-      content: "";
+      content: '';
       position: absolute;
-      top: 1px;
-      left: 1px;
-      border-radius: $--border-radius-circle;
+      top: 2px;
+      left: 2px;
+      border-radius: 100%;
       transition: all .3s;
-      width: $--switch-button-size;
-      height: $--switch-button-size;
-      background-color: $--color-white;
+      width: 14px;
+      height: 14px;
+      background: #fff;
     }
   }
 
   @include when(checked) {
+    &:hover {
+      .el-switch__core {
+        background: $--color-primary-5;
+      }
+    }
     .el-switch__core {
-      border-color: $--switch-on-color;
-      background-color: $--switch-on-color;
+      background: $--color-primary-6;
       &::after {
         left: 100%;
-        margin-left: -$--switch-button-size - 1px;
+        margin-left: -16px;
+      }
+    }
+    &.el-switch--medium {
+      &.el-switch--rect {
+        .el-switch__core:after {
+          margin-left: -14px;
+        }
+      }
+      .el-switch__core {
+        &:after {
+          margin-left: -15px;
+        }
+      }
+    }
+    &.el-switch--small {
+      &.el-switch--rect {
+        .el-switch__core:after {
+          margin-left: -12px;
+        }
+      }
+      .el-switch__core {
+        &:after {
+          margin-left: -13px;
+        }
+      }
+    }
+    &.el-switch--mini {
+      .el-switch__core {
+        &:after {
+          margin-left: -9px;
+        }
       }
     }
   }
 
   @include when(disabled) {
-    opacity: 0.6;
+    .el-switch__core {
+      background: $--color-fill-3;
+    }
+    &.is-checked {
+      .el-switch__core {
+        background: $--color-primary-3;
+      }
+    }
   }
 
   @include m(wide) {

package/packages/theme-chalk/src/table.scss

@@ -40,7 +40,7 @@
   // 跨页选择
   @include e(cross-page-selection) {
     .iov-icon-arrow-down {
-      color: $--color-fill-6;
+      color: $--color-fill-4;
       cursor: pointer;
       transition: all ease .2s;
       &.show-selection-dropdown {

package/packages/theme-chalk/src/tabs.scss

@@ -176,26 +176,69 @@
     }
   }
   @include m(card) {
+    &.el-tabs--card-primary {
+      .el-tabs__item {
+        &.is-active {
+          position: relative;
+          color: $--color-primary-6;
+          border-top-color: transparent;
+          &:before {
+            content: '';
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABIBAMAAAANAGjIAAAAKlBMVEUAAAA/Vv8/V/8/V/8/V/8/V/8/V/9BWf89Vf9AVf8qVf8/Vv8+Wf8/V//3fmOTAAAADXRSTlMAkm3589XUKyoMBr1CxUdJxQAAAD9JREFUKM9jYGAoDLkLBAwMC4EkiMG1F8pgvAtl1N5N6mQAAVkjBggIPgBlODFAQQKMoQBjNMAYExhGwSjADwC0VhuDywNOfgAAAABJRU5ErkJggg==), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABIBAMAAAANAGjIAAAALVBMVEUAAAA/V/8/V/8/V/9AVv8+V/9AV/8+WP9BWf89Vf9AVf8qVf8/Vv8+Wf8/V/9Mw9oEAAAADnRSTlMA89XUlI9waysqDAa9QkOQHV4AAAA/SURBVCjPY3gHBEIRDAxABgh4wxhvNkAZ7xwYQGBl8rsXDBBQ+BTK4BVigAnBGMwwBhuMwQljcDGMglGAAwAASmoc2AEfAyMAAAAASUVORK5CYII=);
+            background-repeat: no-repeat, no-repeat;
+            background-position: 0, 100%;
+            background-size: 8px 100%, 8px 100%;
+            position: absolute;
+            top: 0;
+            left: -1px;
+            right: -1px;
+            height: 36px;
+          }
+          &:after {
+            content: '';
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABIAQMAAADF4Oe4AAAABlBMVEUAAAA/V/9SqD98AAAAAXRSTlMAQObYZgAAAA9JREFUCNdj+P8fgYYRAACKogf5+x8cIAAAAABJRU5ErkJggg==);
+            background-repeat: repeat-x;
+            background-position: 0 0;
+            background-size: 8px 36px;
+            left: 6px;
+            right: 6px;
+            position: absolute;
+            top: 0;
+            height: 36px;
+          }
+        }
+      }
+    }
     .el-tabs__item {
       height: 36px;
       line-height: 36px;
+      font-size: 14px;
+      font-weight: 400;
+      color: $--color-text-3;
+      transition: all ease .25s;
+      &:hover {
+        background: $--color-line-1;
+      }
     }
     &.el-tabs--medium {
       .el-tabs__item {
         height: 32px;
         line-height: 32px;
+        font-size: 14px;
       }
     }
     &.el-tabs--small {
       .el-tabs__item {
         height: 30px;
         line-height: 30px;
+        font-size: 13px;
       }
     }
     &.el-tabs--mini {
       .el-tabs__item {
         height: 28px;
         line-height: 28px;
+        font-size: 13px;
       }
     }
     .el-tabs__header {
@@ -233,8 +276,10 @@
         }
       }
       &.is-active {
-        border-bottom-color: $--color-white;
-        background: $--color-white;
+        border-bottom-color: #fff;
+        background: #fff;
+        font-weight: 500;
+        color: $--color-text-7;
 
         &.is-closable {
           padding-left: 20px;
@@ -257,18 +302,32 @@
       padding: 0 14px;
       color: $--color-text-3;
       transition: all ease .2s;
+      border: 0.5px solid transparent;
       &:hover {
         background: $--color-white;
+        border: 0.5px solid $--color-line-2;
+      }
+      &.is-disabled {
+        &:hover {
+          background: none;
+          border-color: transparent;
+        }
       }
     }
     &.el-tabs--medium {
+      .el-tabs__header {
+        height: 32px;
+      }
       .el-tabs__item {
-        height: 30px;
-        line-height: 30px;
+        height: 28px;
+        line-height: 28px;
         font-size: 13px;
       }
     }
     &.el-tabs--small {
+      .el-tabs__header {
+        height: 30px;
+      }
       .el-tabs__item {
         height: 26px;
         line-height: 26px;
@@ -276,6 +335,9 @@
       }
     }
     &.el-tabs--mini {
+      .el-tabs__header {
+        height: 28px;
+      }
       .el-tabs__item {
         height: 24px;
         line-height: 24px;
@@ -284,6 +346,7 @@
     }
     .el-tabs__header {
       padding: 2px;
+      height: 34px;
       display: inline-block;
       background: $--color-fill-2;
       border-radius: 4px;
@@ -318,6 +381,7 @@
       &.is-active {
         background: $--color-white;
         color: $--color-primary-6;
+        border: 0.5px solid $--color-line-2;
 
         &.is-closable {
           padding-left: 20px;

package/packages/theme-chalk/src/tag.scss

@@ -6,7 +6,8 @@
   color: $color;
   border-color: $plainBorderColor;
   @include when(hit) {
-    border-color: $borderColor;
+    border: 1px solid $borderColor;
+    line-height: 30px;
   }
   @include when(dot) {
     .el-tag__text:before {
@@ -196,9 +197,6 @@
   padding: $--tag-padding;
   font-size: $--tag-font-size;
   color: $--color-darkblue-6;
-  border-width: 1px;
-  border-style: solid;
-  border-color: transparent;
   border-radius: $--tag-border-radius;
   box-sizing: border-box;
   white-space: nowrap;
@@ -220,7 +218,7 @@
     color: $--color-text-6;
     font-size: 14px;
     height: auto;
-    line-height: 1;
+    line-height: normal;
     .el-tag__text {
       display: flex;
       align-items: center;
@@ -278,6 +276,9 @@
   }
 
   @include m(plain) {
+    border-width: 1px;
+    border-style: solid;
+    line-height: 30px;
     @include genTheme($--color-white, $--color-darkblue-2, $--color-darkblue-6, $--color-darkblue-7, $--color-darkblue-6);
     @include genThemeInfo($--color-white, $--color-line-2, $--color-text-3, $--color-text-4, $--color-text-3);
     @include genThemeSuccess($--color-white, $--color-success-2, $--color-success-6, $--color-success-7, $--color-success-6);
@@ -297,6 +298,10 @@
     &.is-dot {
       font-size: 14px;
     }
+    &.is-hit,
+    &.el-tag--plain {
+      line-height: 28px;
+    }
 
     .el-tag-icon {
       font-size: 16px;
@@ -314,6 +319,10 @@
     &.is-dot {
       font-size: 13px;
     }
+    &.is-hit,
+    &.el-tag--plain {
+      line-height: 24px;
+    }
 
     .el-tag-icon {
       font-size: 12px;
@@ -328,10 +337,14 @@
     font-size: $--tag-small-font-size;
     height: 22px;
     border-radius: 4px;
-    line-height: 20px;
+    line-height: 22px;
     &.is-dot {
       font-size: 12px;
     }
+    &.is-hit,
+    &.el-tag--plain {
+      line-height: 20px;
+    }
 
     .el-tag-icon {
       font-size: 12px;

package/src/index.js

@@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.54',
+  version: '2.15.56',
   locale: locale.use,
   i18n: locale.i18n,
   install,