iov-design 2.15.22 → 2.15.24

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

@@ -6,9 +6,9 @@
 @import "./cascader-panel";
 
 @include b(cascader) {
-  display: inline-block;
+  display: block;
   position: relative;
-  font-size: $--font-size-base;
+  font-size: $--input-font-size;
   line-height: $--input-height;
 
   &:not(.is-disabled):hover {
@@ -21,6 +21,9 @@
   .el-input {
     cursor: pointer;
 
+    .el-input__suffix {
+      right: 8px;
+    }
     .el-input__inner {
       text-overflow: ellipsis;
 
@@ -29,12 +32,15 @@
       }
     }
 
-    .el-icon-arrow-down {
+    .iov-icon-arrow-up {
+      padding-right: 0;
+      color: $--select-input-color;
+      font-size: $--select-icon-size;
       transition: transform .3s;
-      font-size: 14px;
+      transform: rotateZ(180deg);
 
       @include when(reverse) {
-        transform: rotateZ(180deg);
+        transform: rotateZ(0deg);
       }
     }
 
@@ -72,12 +78,15 @@
   }
 
   @include e(dropdown) {
-    margin: 5px 0;
+    margin: 4px 0;
     font-size: $--cascader-menu-font-size;
     background: $--cascader-menu-fill;
     border: $--cascader-menu-border;
     border-radius: $--cascader-menu-radius;
     box-shadow: $--cascader-menu-shadow;
+    .popper__arrow {
+      display: none;
+    }
   }
 
   @include e(tags) {
@@ -98,7 +107,12 @@
       max-width: 100%;
       margin: 2px 0 2px 6px;
       text-overflow: ellipsis;
-      background: $--cascader-tag-background;
+      color: $--color-text-6;
+
+      &.is-disabled {
+        color: $--color-text-3;
+        background: $--color-fill-3;
+      }
 
       &:not(.is-hit) {
         border-color: transparent;
@@ -110,14 +124,8 @@
         text-overflow: ellipsis;
       }
 
-      .el-icon-close {
+      .iov-icon-close {
         flex: none;
-        background-color: $--color-text-placeholder;
-        color: $--color-white;
-
-        &:hover {
-          background-color: $--color-text-secondary;
-        }
       }
     }
   }
@@ -129,7 +137,7 @@
   @include e(suggestion-list) {
     max-height: 204px;
     margin: 0;
-    padding: 6px 0;
+    padding: 4px;
     font-size: $--font-size-base;
     color: $--cascader-menu-font-color;
     text-align: center;
@@ -139,11 +147,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 34px;
-    padding: 0 15px;
+    height: 32px;
+    padding: 0 12px;
     text-align: left;
     outline: none;
     cursor: pointer;
+    border-radius: 2px;
 
     &:hover, &:focus {
       background: $--cascader-node-background-hover;
@@ -151,7 +160,8 @@
 
     &.is-checked {
       color: $--cascader-menu-selected-font-color;
-      font-weight: bold;
+      font-weight: 500;
+      background: $--color-primary-1;
     }
 
     > span {
@@ -160,7 +170,7 @@
   }
 
   @include e(empty-text) {
-    margin: 10px 0;
+    margin: 8px 0;
     color: $--cascader-color-empty;
   }
 
@@ -168,7 +178,7 @@
     flex: 1;
     height: 24px;
     min-width: 60px;
-    margin: 2px 0 2px 15px;
+    margin: 2px 0 2px 12px;
     padding: 0;
     color: $--cascader-menu-font-color;
     border: none;

package/packages/theme-chalk/src/common/var.scss

@@ -413,19 +413,16 @@ $--input-mini-height: 26px !default;
 
 /* Cascader
 -------------------------- */
-/// color||Color|0
-$--cascader-menu-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--cascader-menu-selected-font-color: $--color-primary !default;
+$--cascader-menu-font-color: $--color-text-6 !default;
+$--cascader-menu-selected-font-color: $--color-text-6 !default;
 $--cascader-menu-fill: $--fill-base !default;
-$--cascader-menu-font-size: $--font-size-base !default;
+$--cascader-menu-font-size: $--font-size-small !default;
 $--cascader-menu-radius: $--border-radius-base !default;
-$--cascader-menu-border: solid 1px $--border-color-light !default;
-$--cascader-menu-shadow: $--box-shadow-light !default;
-$--cascader-node-background-hover: $--background-color-base !default;
-$--cascader-node-color-disabled:$--color-text-placeholder !default;
-$--cascader-color-empty:$--color-text-placeholder !default;
-$--cascader-tag-background: #f0f2f5;
+$--cascader-menu-border: solid 1px $--color-line-2 !default;
+$--cascader-menu-shadow: 0px 2px 8px 0px rgba(73, 75, 83, 0.12) !default;
+$--cascader-node-background-hover: $--color-fill-1 !default;
+$--cascader-node-color-disabled: $--color-text-2 !default;
+$--cascader-color-empty: $--color-text-placeholder !default;
 
 /* Group
 -------------------------- */

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

@@ -148,7 +148,6 @@
       &.el-input-group--prefix,
       &.el-input-group--suffix {
         border-color: $--color-danger-6;
-        z-index: 3;
         &.is-focus {
           border-color: $--color-danger-6;
           box-shadow: 0 0 0 2px rgba(245,63,63,0.1);
@@ -160,8 +159,8 @@
         }
       }
     }
-    & .el-input__inner,
-    & .el-textarea__inner {
+    .el-input__inner,
+    .el-textarea__inner {
       & {
         border-color: $--color-danger-6;
       }
@@ -170,13 +169,21 @@
         box-shadow: 0 0 0 2px rgba(245,63,63,0.1);
       }
     }
-    & .el-input-group__append,
-    & .el-input-group__prepend {
-      & .el-input__inner,
-      & .el-input__inner:focus {
+    .el-input-group__append,
+    .el-input-group__prepend {
+      .el-input__inner {
         border-color: $--color-line-2;
         box-shadow: none;
       }
+      .el-input__inner:focus {
+        border-color: $--input-focus-border;
+        box-shadow: $--input-box-shadow;
+      }
+      &:hover {
+        .el-input__inner {
+          border-color: $--input-hover-border;
+        }
+      }
     }
     .el-input__validateIcon {
       color: $--color-danger-6;

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

@@ -384,16 +384,14 @@
     display: block;
     // border-radius: 0;
   }
+  > .el-input-group__inner {
+    z-index: 1;
+  }
   .el-input-group__inner {
     flex: 1;
     display: flex;
     position: relative;
-    &:hover {
-      z-index: 2;
-    }
-    .el-input__inner:focus {
-      z-index: 2;
-    }
+    align-items: center;
   }
   @include m(append) {
     .el-input__inner,
@@ -417,6 +415,7 @@
     box-sizing: border-box;
     border-radius: $--input-border-radius;
     transition: $--border-transition-base;
+    z-index: 1;
     &:hover {
       border-color: $--input-hover-border;
       &.is-disabled {
@@ -518,20 +517,11 @@
       .el-input__suffix {
         background: none;
       }
-      // &:hover {
-      //   z-index: 2;
-      // }
-      // &:hover {
-      //   .el-input {
-      //     z-index: 2;
-      //   }
-      // }
-      // .el-input.is-focus {
-      //   z-index: 2;
-      // }
-      // .el-input__inner:focus {
-      //   z-index: 2;
-      // }
+      .el-input.is-focus,
+      .el-input:hover,
+      .el-input__inner:focus {
+        z-index: 2;
+      }
     }
     .is-focus {
       .el-input__inner {

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

@@ -136,6 +136,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
+    pointer-events: none;
   }
 
   @include e(tags-text) {
@@ -176,6 +177,7 @@
     display: flex;
     max-width: 100%;
     align-items: center;
+    pointer-events: auto;
     &.el-tag--info {
       background: $--color-fill-2;
       color: $--color-text-6;

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

@@ -55,12 +55,12 @@
     cursor: pointer;
     transition: all .15s;
 
-    .el-icon-plus {
+    .iov-icon-plus {
       transform: scale(0.8, 0.8);
     }
 
     &:hover {
-      color: $--color-primary;
+      color: $--color-primary-6;
     }
   }
   @include e(nav-wrap) {
@@ -128,15 +128,11 @@
     color: $--color-text-3;
     position: relative;
 
-    &:focus, &:focus:active {
+    &:focus,
+    &:focus:active {
       outline: none;
     }
 
-    // &:focus.is-active.is-focus:not(:active) {
-    //   box-shadow: 0 0 2px 2px $--color-primary inset;
-    //   border-radius: 3px;
-    // }
-
     & .iov-icon-close-mini {
       border-radius: 50%;
       text-align: center;
@@ -146,10 +142,6 @@
       &:before {
         display: inline-block;
       }
-
-      // &:hover {
-      //   color: $--color-white;
-      // }
     }
 
     @include when(active) {
@@ -170,6 +162,19 @@
     overflow: hidden;
     position: relative;
   }
+
+  @include m(normal) {
+    .el-tabs__item {
+      &.is-right {
+        &:nth-child(2) {
+          padding-left: 16px;
+        }
+      }
+      &:nth-child(2) {
+        padding-left: 0;
+      }
+    }
+  }
   @include m(card) {
     .el-tabs__item {
       height: 36px;
@@ -193,25 +198,25 @@
         line-height: 28px;
       }
     }
-    > .el-tabs__header {
+    .el-tabs__header {
       border-bottom: 1px solid $--color-line-1;
     }
-    > .el-tabs__header .el-tabs__nav-wrap::after {
+    .el-tabs__nav-wrap::after {
       content: none;
     }
-    > .el-tabs__header .el-tabs__nav {
+    .el-tabs__nav {
       box-sizing: border-box;
     }
-    > .el-tabs__header .el-tabs__active-bar {
+    .el-tabs__active-bar {
       display: none;
     }
-    > .el-tabs__header .el-tabs__item .iov-icon-close-mini {
+    .el-tabs__item .iov-icon-close-mini {
       position: relative;
       font-size: 10px;
       overflow: hidden;
       transform-origin: 100% 50%;
     }
-    > .el-tabs__header .el-tabs__item {
+    .el-tabs__item {
       margin-right: 5px;
       border-radius: 4px 4px 0 0;
       border: 1px solid $--color-line-1;
@@ -242,27 +247,114 @@
       }
     }
   }
+  @include m(capsule) {
+    .el-tabs__item {
+      height: 30px;
+      line-height: 30px;
+      font-size: 14px;
+      font-weight: normal;
+      border-radius: 4px;
+      padding: 0 14px;
+      color: $--color-text-3;
+      transition: all ease .2s;
+      &:hover {
+        background: $--color-white;
+      }
+    }
+    &.el-tabs--medium {
+      .el-tabs__item {
+        height: 30px;
+        line-height: 30px;
+        font-size: 13px;
+      }
+    }
+    &.el-tabs--small {
+      .el-tabs__item {
+        height: 26px;
+        line-height: 26px;
+        font-size: 13px;
+      }
+    }
+    &.el-tabs--mini {
+      .el-tabs__item {
+        height: 24px;
+        line-height: 24px;
+        font-size: 12px;
+      }
+    }
+    .el-tabs__header {
+      padding: 2px;
+      display: inline-block;
+      background: $--color-fill-2;
+      border-radius: 4px;
+      box-sizing: border-box;
+      margin: 0 auto;
+    }
+    .el-tabs__nav-wrap {
+      margin-bottom: 0;
+      content: none;
+    }
+    .el-tabs__nav {
+      box-sizing: border-box;
+    }
+    .el-tabs__item .iov-icon-close-mini {
+      position: relative;
+      font-size: 10px;
+      overflow: hidden;
+      transform-origin: 100% 50%;
+    }
+    .el-tabs__item {
+      transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
+      &.is-closable {
+        &:hover {
+          padding-left: 13px;
+          padding-right: 13px;
+
+          & .iov-icon-close-mini {
+            width: 10px;
+          }
+        }
+      }
+      &.is-active {
+        background: $--color-white;
+        color: $--color-primary-6;
+
+        &.is-closable {
+          padding-left: 20px;
+          padding-right: 20px;
+
+          .iov-icon-close-mini {
+            width: 10px;
+          }
+        }
+      }
+      &.is-disabled {
+        color: $--color-text-2;
+        background: none;
+      }
+    }
+  }
   @include m(border-card) {
     background: $--color-white;
     border: 1px solid $--border-color-base;
     box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
 
-    > .el-tabs__content {
+    .el-tabs__content {
       padding: 15px;
     }
-    > .el-tabs__header {
-      background-color: $--background-color-base;
-      border-bottom: 1px solid $--border-color-light;
+    .el-tabs__header {
+      background-color: $--color-fill-1;
+      border-bottom: 1px solid $--color-line-5;
       margin: 0;
     }
-    > .el-tabs__header .el-tabs__nav-wrap::after {
+    .el-tabs__nav-wrap::after {
       content: none;
     }
-    > .el-tabs__header .el-tabs__item {
+    .el-tabs__item {
       transition: all .3s cubic-bezier(.645,.045,.355,1);
       border: 1px solid transparent;
       margin-top: -1px;
-      color: $--color-text-secondary;
+      color: $--color-text-3;
 
       &:first-child {
         margin-left: -1px;
@@ -273,67 +365,23 @@
       }
 
       &.is-active {
-        color: $--color-primary;
+        color: $--color-primary-6;
         background-color: $--color-white;
-        border-right-color: $--border-color-base;
-        border-left-color: $--border-color-base;
+        border-right-color: $--color-line-5;
+        border-left-color: $--color-line-5;
       }
       &:not(.is-disabled):hover {
-        color: $--color-primary;
+        color: $--color-primary-6;
       }
       &.is-disabled {
-        color: $--disabled-color-base;
+        color: $--color-text-2;
       }
     }
 
-    > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
+    .is-scrollable .el-tabs__item:first-child {
       margin-left: 0;
     }
   }
-  @include m((top, bottom)) {
-    .el-tabs__item.is-top:nth-child(2),
-    .el-tabs__item.is-bottom:nth-child(2) {
-      padding-left: 0;
-    }
-    .el-tabs__item.is-top:last-child,
-    .el-tabs__item.is-bottom:last-child {
-      padding-right: 0;
-    }
-
-    &.el-tabs--border-card, &.el-tabs--card,
-    .el-tabs--left, .el-tabs--right {
-      > .el-tabs__header {
-        .el-tabs__item:nth-child(2) {
-          padding-left: 20px;
-        }
-        .el-tabs__item:last-child {
-          padding-right: 20px;
-        }
-      }
-    }
-  }
-  @include m(bottom) {
-    .el-tabs__header.is-bottom {
-      margin-bottom: 0;
-      margin-top: 10px;
-    }
-    &.el-tabs--border-card {
-      .el-tabs__header.is-bottom {
-        border-bottom: 0;
-        border-top: 1px solid $--border-color-base;
-      }
-      .el-tabs__nav-wrap.is-bottom {
-        margin-top: -1px;
-        margin-bottom: 0;
-      }
-      .el-tabs__item.is-bottom:not(.is-active) {
-        border: 1px solid transparent;
-      }
-      .el-tabs__item.is-bottom {
-        margin: 0 -1px -1px -1px;
-      }
-    }
-  }
   @include m((left, right)) {
     overflow: hidden;
 
@@ -426,17 +474,17 @@
       }
       .el-tabs__item.is-left {
         border-left: none;
-        border-right: 1px solid $--border-color-light;
+        border-right: 1px solid $--color-line-5;
         border-bottom: none;
-        border-top: 1px solid $--border-color-light;
+        border-top: 1px solid $--color-line-5;
         text-align: left;
       }
       .el-tabs__item.is-left:first-child {
-        border-right: 1px solid $--border-color-light;
+        border-right: 1px solid $--color-line-5;
         border-top: none;
       }
       .el-tabs__item.is-left.is-active {
-        border: 1px solid $--border-color-light;
+        border: 1px solid $--color-line-5;
         border-right-color: #fff;
         border-left: none;
         border-bottom: none;
@@ -451,7 +499,7 @@
 
       .el-tabs__nav {
         border-radius: 4px 0 0 4px;
-        border-bottom: 1px solid $--border-color-light;
+        border-bottom: 1px solid $--color-line-5;
         border-right: none;
       }
 
@@ -501,14 +549,14 @@
       }
       .el-tabs__item.is-right {
         border-bottom: none;
-        border-top: 1px solid $--border-color-light;
+        border-top: 1px solid $--color-line-5;
       }
       .el-tabs__item.is-right:first-child {
-        border-left: 1px solid $--border-color-light;
+        border-left: 1px solid $--color-line-5;
         border-top: none;
       }
       .el-tabs__item.is-right.is-active {
-        border: 1px solid $--border-color-light;
+        border: 1px solid $--color-line-5;
         border-left-color: #fff;
         border-right: none;
         border-bottom: none;
@@ -523,13 +571,13 @@
 
       .el-tabs__nav {
         border-radius: 0 4px 4px 0;
-        border-bottom: 1px solid $--border-color-light;
+        border-bottom: 1px solid $--color-line-5;
         border-left: none;
       }
     }
     &.el-tabs--border-card {
       .el-tabs__header.is-right {
-        border-left: 1px solid #dfe4ed;
+        border-left: 1px solid #f00;
       }
       .el-tabs__item.is-right {
         border: 1px solid transparent;

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

@@ -247,7 +247,7 @@
     font-size: 16px;
   }
 
-  .el-icon-close {
+  .iov-icon-close {
     margin-left: 4px;
     border-radius: 50%;
     text-align: center;
@@ -293,7 +293,7 @@
     .el-tag-icon {
       font-size: 16px;
     }
-    .el-icon-close {
+    .iov-icon-close {
       font-size: 12px;
     }
   }
@@ -301,14 +301,14 @@
   @include m(small) {
     font-size: $--tag-small-font-size;
     height: 26px;
-    border-radius: 2px;
+    border-radius: 4px;
     line-height: 24px;
 
     .el-tag-icon {
       font-size: 12px;
     }
 
-    .el-icon-close {
+    .iov-icon-close {
       font-size: 10px;
     }
   }
@@ -316,14 +316,14 @@
   @include m(mini) {
     font-size: $--tag-small-font-size;
     height: 22px;
-    border-radius: 2px;
+    border-radius: 4px;
     line-height: 20px;
 
     .el-tag-icon {
       font-size: 12px;
     }
 
-    .el-icon-close {
+    .iov-icon-close {
       font-size: 10px;
     }
   }

package/src/index.js

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