iov-design 2.15.58 → 2.15.60

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

@@ -62,31 +62,40 @@
   @include e(expand-icon) {
     position: relative;
     cursor: pointer;
-    color: #666;
-    font-size: 12px;
-    transition: transform 0.2s ease-in-out;
-    height: 20px;
-
+    width: 16px;
+    height: 16px;
+    background-size: contain;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    .el-icon:before {
+      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzU1MTM5NTUyMTQ4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY3MjAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc2LjggNzYuOG0xMDguOCAwbDY1Mi44IDBxMTA4LjggMCAxMDguOCAxMDguOGwwIDY1Mi44cTAgMTA4LjgtMTA4LjggMTA4LjhsLTY1Mi44IDBxLTEwOC44IDAtMTA4LjgtMTA4LjhsMC02NTIuOHEwLTEwOC44IDEwOC44LTEwOC44WiIgZmlsbD0iIzQ5NEI1MyIgcC1pZD0iNjcyMSI+PC9wYXRoPjxwYXRoIGQ9Ik04OTYgMGExMjggMTI4IDAgMCAxIDEyOCAxMjh2NzY4YTEyOCAxMjggMCAwIDEtMTI4IDEyOEgxMjhhMTI4IDEyOCAwIDAgMS0xMjgtMTI4VjEyOGExMjggMTI4IDAgMCAxIDEyOC0xMjhoNzY4ek01NTYuOCAzMjBoLTg5LjZ2MTQ3LjJIMzIwdjg5LjZoMTQ3LjJ2MTQ3LjJoODkuNnYtMTQ3LjJoMTQ3LjJ2LTg5LjZoLTE0Ny4yVjMyMHoiIGZpbGw9IiNGRkZGRkYiIHAtaWQ9IjY3MjIiPjwvcGF0aD48cGF0aCBkPSJNODk2IDBhMTI4IDEyOCAwIDAgMSAxMjggMTI4djc2OGExMjggMTI4IDAgMCAxLTEyOCAxMjhIMTI4YTEyOCAxMjggMCAwIDEtMTI4LTEyOFYxMjhhMTI4IDEyOCAwIDAgMSAxMjgtMTI4aDc2OHogbTAgNjRIMTI4QTY0IDY0IDAgMCAwIDY0IDEyOHY3NjhBNjQgNjQgMCAwIDAgMTI4IDk2MGg3NjhhNjQgNjQgMCAwIDAgNjQtNjRWMTI4QTY0IDY0IDAgMCAwIDg5NiA2NHoiIGZpbGw9IiNEMkQ1REYiIHAtaWQ9IjY3MjMiPjwvcGF0aD48L3N2Zz4=);
+    }
     @include m(expanded) {
-      transform: rotate(90deg);
+      .el-icon:before {
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzU1MTM5NTYxODQ0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY4NjQiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc2LjggNzYuOGg4NzAuNHY4NzAuNEg3Ni44eiIgZmlsbD0iIzQ5NEI1MyIgcC1pZD0iNjg2NSI+PC9wYXRoPjxwYXRoIGQ9Ik04OTYgMGExMjggMTI4IDAgMCAxIDEyOCAxMjh2NzY4YTEyOCAxMjggMCAwIDEtMTI4IDEyOEgxMjhhMTI4IDEyOCAwIDAgMS0xMjgtMTI4VjEyOGExMjggMTI4IDAgMCAxIDEyOC0xMjhoNzY4eiBtLTE5MiA0NjcuMmgtMzg0djg5LjZoMzg0di04OS42eiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNjg2NiI+PC9wYXRoPjxwYXRoIGQ9Ik04OTYgMGExMjggMTI4IDAgMCAxIDEyOCAxMjh2NzY4YTEyOCAxMjggMCAwIDEtMTI4IDEyOEgxMjhhMTI4IDEyOCAwIDAgMS0xMjgtMTI4VjEyOGExMjggMTI4IDAgMCAxIDEyOC0xMjhoNzY4eiBtMCA2NEgxMjhBNjQgNjQgMCAwIDAgNjQgMTI4djc2OEE2NCA2NCAwIDAgMCAxMjggOTYwaDc2OGE2NCA2NCAwIDAgMCA2NC02NFYxMjhBNjQgNjQgMCAwIDAgODk2IDY0eiIgZmlsbD0iI0QyRDVERiIgcC1pZD0iNjg2NyI+PC9wYXRoPjwvc3ZnPg==);
+      }
     }
-
-    > .el-icon {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      margin-left: -5px;
-      margin-top: -5px;
+    .el-icon {
+      &:before {
+        content: '';
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -8px;
+        margin-top: -8px;
+        background-size: contain;
+        background-position: 0 0;
+        background-repeat: no-repeat;
+      }
     }
   }
 
   @include e(expanded-cell) {
     background-color: $--color-white;
 
-    // 纯属为了增加权重
-    &[class*=cell] {
-      padding: 20px 50px;
-    }
+    padding: 0 !important;
 
     &:hover {
       background-color: transparent !important;
@@ -95,7 +104,7 @@
 
   @include e(placeholder) {
     display: inline-block;
-    width: 20px;
+    width: 14px;
   }
 
   @include e(append-wrapper) {
@@ -401,8 +410,7 @@
     position: absolute;
     top: -1px;
     right: 0;
-    background-color: $--color-white;
-    border-bottom: $--table-border;
+    background-color: $--table-header-background-color;
   }
 
   @include e(fixed-right) {
@@ -647,11 +655,16 @@
   [class*=el-table__row--level] {
     .el-table__expand-icon {
       display: inline-block;
-      width: 20px;
-      line-height: 20px;
-      height: 20px;
+      width: 14px;
+      height: 14px;
       text-align: center;
-      margin-right: 3px;
+      margin-right: 8px;
+      margin-top: -2px;
+      vertical-align: middle;
+      .iov-icon-loading:before {
+        width: 14px;
+        height: 14px;
+      }
     }
   }
 }

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

@@ -124,7 +124,7 @@
     display: inline-block;
     list-style: none;
     font-size: 16px;
-    font-weight: 600;
+    font-weight: 500;
     color: $--color-text-3;
     position: relative;
 
@@ -146,6 +146,7 @@
 
     @include when(active) {
       color: $--color-text-7;
+      font-weight: 600;
     }
 
     &:hover {
@@ -293,6 +294,9 @@
     }
   }
   @include m(capsule) {
+    .el-tabs__nav-wrap:after {
+      display: none;
+    }
     .el-tabs__item {
       height: 30px;
       line-height: 30px;
@@ -382,6 +386,7 @@
         background: $--color-white;
         color: $--color-primary-6;
         border: 0.5px solid $--color-line-2;
+        font-weight: 500;
 
         &.is-closable {
           padding-left: 20px;

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

@@ -250,7 +250,7 @@
     font-size: 16px;
   }
 
-  .iov-icon-close {
+  .iov-icon-close-mini {
     margin-left: 4px;
     border-radius: 50%;
     text-align: center;
@@ -306,7 +306,7 @@
     .el-tag-icon {
       font-size: 16px;
     }
-    .iov-icon-close {
+    .iov-icon-close-mini {
       font-size: 12px;
     }
   }
@@ -328,7 +328,7 @@
       font-size: 12px;
     }
 
-    .iov-icon-close {
+    .iov-icon-close-mini {
       font-size: 10px;
     }
   }
@@ -350,7 +350,7 @@
       font-size: 12px;
     }
 
-    .iov-icon-close {
+    .iov-icon-close-mini {
       font-size: 10px;
     }
   }

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

@@ -8,12 +8,14 @@
   @include e(popper) {
     position: absolute;
     border-radius: 4px;
-    padding: $--tooltip-padding;
-    z-index: $--index-popper;
-    font-size: $--tooltip-font-size;
-    line-height: 1.2;
+    padding: 9px 12px;
+    z-index: 2000;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 18px;
     min-width: 10px;
     word-wrap: break-word;
+    box-shadow: 0px 2px 8px 0px rgba(73,75,83,0.12);
 
     .popper__arrow,
     .popper__arrow::after {
@@ -26,7 +28,7 @@
     }
 
     .popper__arrow {
-      border-width: $--tooltip-arrow-size;
+      border-width: 6px;
     }
 
     .popper__arrow::after {
@@ -35,105 +37,105 @@
     }
 
     &[x-placement^="top"] {
-      margin-bottom: #{$--tooltip-arrow-size + 6px};
+      margin-bottom: 12px;
     }
 
     &[x-placement^="top"] .popper__arrow {
-      bottom: -$--tooltip-arrow-size;
-      border-top-color: $--tooltip-border-color;
+      bottom: -6px;
+      border-top-color: $--color-fill-8;
       border-bottom-width: 0;
 
       &::after {
         bottom: 1px;
         margin-left: -5px;
-        border-top-color: $--tooltip-fill;
+        border-top-color: $--color-fill-8;
         border-bottom-width: 0;
       }
     }
 
     &[x-placement^="bottom"] {
-      margin-top: #{$--tooltip-arrow-size + 6px};
+      margin-top: 12px;
     }
 
     &[x-placement^="bottom"] .popper__arrow {
-      top: -$--tooltip-arrow-size;
+      top: -6px;
       border-top-width: 0;
-      border-bottom-color: $--tooltip-border-color;
+      border-bottom-color: $--color-fill-8;
 
       &::after {
         top: 1px;
         margin-left: -5px;
         border-top-width: 0;
-        border-bottom-color: $--tooltip-fill;
+        border-bottom-color: $--color-fill-8;
       }
     }
 
     &[x-placement^="right"] {
-      margin-left: #{$--tooltip-arrow-size + 6px};
+      margin-left: 12px;
     }
 
     &[x-placement^="right"] .popper__arrow {
-      left: -$--tooltip-arrow-size;
-      border-right-color: $--tooltip-border-color;
+      left: -6px;
+      border-right-color: $--color-fill-8;
       border-left-width: 0;
 
       &::after {
         bottom: -5px;
         left: 1px;
-        border-right-color: $--tooltip-fill;
+        border-right-color: $--color-fill-8;
         border-left-width: 0;
       }
     }
 
     &[x-placement^="left"] {
-      margin-right: #{$--tooltip-arrow-size + 6px};
+      margin-right: 12px;
     }
 
     &[x-placement^="left"] .popper__arrow {
-      right: -$--tooltip-arrow-size;
+      right: -6px;
       border-right-width: 0;
-      border-left-color: $--tooltip-border-color;
+      border-left-color: $--color-fill-8;
 
       &::after {
         right: 1px;
         bottom: -5px;
         margin-left: -5px;
         border-right-width: 0;
-        border-left-color: $--tooltip-fill;
+        border-left-color: $--color-fill-8;
       }
     }
 
     @include when(dark) {
-      background: $--tooltip-fill;
-      color: $--tooltip-color;
+      background: $--color-fill-8;
+      color: #fff;
     }
 
     @include when(light) {
-      background: $--tooltip-color;
-      border: 1px solid $--tooltip-fill;
+      background: #fff;
+      border: 0.5px solid $--color-line-2;
 
       &[x-placement^="top"] .popper__arrow {
-        border-top-color: $--tooltip-fill;
+        border-top-color: $--color-line-2;
         &::after {
-          border-top-color: $--tooltip-color;
+          border-top-color: #fff;
         }
       }
       &[x-placement^="bottom"] .popper__arrow {
-        border-bottom-color: $--tooltip-fill;
+        border-bottom-color: $--color-line-2;
         &::after {
-          border-bottom-color: $--tooltip-color;
+          border-bottom-color: #fff;
         }
       }
       &[x-placement^="left"] .popper__arrow {
-        border-left-color: $--tooltip-fill;
+        border-left-color: $--color-line-2;
         &::after {
-          border-left-color: $--tooltip-color;
+          border-left-color: #fff;
         }
       }
       &[x-placement^="right"] .popper__arrow {
-        border-right-color: $--tooltip-fill;
+        border-right-color: $--color-line-2;
         &::after {
-          border-right-color: $--tooltip-color;
+          border-right-color: #fff;
         }
       }
     }

package/src/index.js

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