iov-design 2.15.57 → 2.15.59

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

@@ -261,6 +261,78 @@
       border-color: transparent;
     }
   }
+  @include m(text-info) {
+    color: $--color-text-5;
+    &:hover {
+      color: $--color-text-5;
+      border-color: $--color-fill-1;
+      background-color: $--color-fill-1;
+    }
+    &:active {
+      color: $--color-text-5;
+      border-color: $--color-fill-2;
+      background-color: $--color-fill-2;
+    }
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      color: $--color-text-2;
+    }
+  }
+  @include m(text-success) {
+    color: $--color-success-6;
+    &:hover {
+      color: $--color-success-6;
+      border-color: $--color-success-1;
+      background-color: $--color-success-1;
+    }
+    &:active {
+      color: $--color-success-6;
+      border-color: $--color-success-2;
+      background-color: $--color-success-2;
+    }
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      color: $--color-success-3;
+    }
+  }
+  @include m(text-warning) {
+    color: $--color-warning-6;
+    &:hover {
+      color: $--color-warning-6;
+      border-color: $--color-warning-1;
+      background-color: $--color-warning-1;
+    }
+    &:active {
+      color: $--color-warning-6;
+      border-color: $--color-warning-2;
+      background-color: $--color-warning-2;
+    }
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      color: $--color-warning-3;
+    }
+  }
+  @include m(text-danger) {
+    color: $--color-danger-6;
+    &:hover {
+      color: $--color-danger-6;
+      border-color: $--color-danger-1;
+      background-color: $--color-danger-1;
+    }
+    &:active {
+      color: $--color-danger-6;
+      border-color: $--color-danger-2;
+      background-color: $--color-danger-2;
+    }
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      color: $--color-danger-3;
+    }
+  }
 }
 
 @include b(button-group) {

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

@@ -125,7 +125,11 @@
     }
   }
   > .el-radio {
-    margin-right: 8px;
+    opacity: 0;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
     .el-radio__input {
       margin-right: 0;
     }

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

@@ -66,6 +66,9 @@
     .el-tag--medium {
       height: $--input-medium-height - 8px;
       line-height: $--input-medium-height - 8px;
+      &.el-cascader__tags-count-fixed {
+        min-width: $--input-medium-height - 8px;
+      }
     }
   }
 
@@ -75,6 +78,9 @@
     .el-tag--small {
       height: $--input-small-height - 8px;
       line-height: $--input-small-height - 8px;
+      &.el-cascader__tags-count-fixed {
+        min-width: $--input-small-height - 8px;
+      }
     }
   }
 
@@ -84,6 +90,9 @@
     .el-tag--mini {
       height: $--input-mini-height - 8px;
       line-height: $--input-mini-height - 8px;
+      &.el-cascader__tags-count-fixed {
+        min-width: $--input-mini-height - 8px;
+      }
     }
   }
 
@@ -121,33 +130,63 @@
     align-items: center;
     // pointer-events: none;
 
+    .el-cascader__tags-count-fixed {
+      min-width: $--input-height - 8px;
+      border-radius: 50%;
+      text-align: center;
+      position: absolute;
+      right: 0;
+      justify-content: center;
+    }
     .el-tag {
-      display: inline-flex;
-      align-items: center;
+      box-sizing: border-box;
+      border-color: transparent;
+      margin: 2px 0 2px 4px;
+      padding: 0 6px;
+      border-radius: 2px;
+      display: flex;
       max-width: 100%;
-      margin: 2px 6px 2px 0;
-      text-overflow: ellipsis;
-      color: $--color-text-6;
+      align-items: center;
       pointer-events: auto;
-
-      &.is-disabled {
-        color: $--color-text-3;
-        background: $--color-fill-3;
-      }
-
-      &:not(.is-hit) {
-        border-color: transparent;
+      &.el-cascader__tags-count-fixed {
+        border-radius: 50%;
       }
-
-      > span {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .iov-icon-close {
-        flex: none;
+      &.el-tag--info {
+        background: $--color-fill-2;
+        color: $--color-text-6;
+        border: 0 none;
+        &.is-disabled {
+          background: $--color-fill-3;
+        }
       }
+      // display: inline-flex;
+      // align-items: center;
+      // max-width: 100%;
+      // padding: 0 6px;
+      // margin: 2px 4px 2px 0;
+      // border-radius: 2px;
+      // text-overflow: ellipsis;
+      // color: $--color-text-6;
+      // pointer-events: auto;
+
+      // &.is-disabled {
+      //   color: $--color-text-3;
+      //   background: $--color-fill-3;
+      // }
+
+      // &:not(.is-hit) {
+      //   border-color: transparent;
+      // }
+
+      // > span {
+      //   flex: 1;
+      //   overflow: hidden;
+      //   text-overflow: ellipsis;
+      // }
+
+      // .iov-icon-close {
+      //   flex: none;
+      // }
     }
   }
 

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

@@ -31,8 +31,8 @@
   top: 0;
   width: 100%;
   height: 100%;
-  opacity: $--popup-modal-opacity;
-  background: $--popup-modal-background-color;
+  opacity: 0.6;
+  background: #000;
 }
 
 @include b(popup-parent) {

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

@@ -505,44 +505,6 @@ $--pagination-button-disabled-color: $--color-fill-4 !default;
 $--pagination-button-disabled-background-color: $--color-white !default;
 $--pagination-hover-color: $--color-primary-6 !default;
 
-/* Popup
--------------------------- */
-/// color||Color|0
-$--popup-modal-background-color: $--color-black !default;
-/// opacity||Other|1
-$--popup-modal-opacity: 0.6 !default;
-
-/* Popover
--------------------------- */
-/// color||Color|0
-$--popover-background-color: $--color-white !default;
-/// fontSize||Font|1
-$--popover-font-size: $--font-size-base !default;
-/// color||Color|0
-$--popover-border-color: $--border-color-lighter !default;
-$--popover-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--popover-padding: 12px !default;
-$--popover-padding-large: 18px 20px !default;
-/// fontSize||Font|1
-$--popover-title-font-size: 16px !default;
-/// color||Color|0
-$--popover-title-font-color: $--color-text-primary !default;
-
-/* Tooltip
--------------------------- */
-/// color|1|Color|0
-$--tooltip-fill: $--color-text-primary !default;
-/// color|1|Color|0
-$--tooltip-color: $--color-white !default;
-/// fontSize||Font|1
-$--tooltip-font-size: 12px !default;
-/// color||Color|0
-$--tooltip-border-color: $--color-text-primary !default;
-$--tooltip-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--tooltip-padding: 10px !default;
-
 /* Tag
 -------------------------- */
 $--tag-font-size: 13px !default;

package/packages/theme-chalk/src/date-picker/picker.scss

@@ -94,7 +94,7 @@
     text-align: center;
     font-size: $--input-font-size;
     align-items: center;
-    color: $--input-font-color;
+    color: $--color-fill-5;
   }
 }
 

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

@@ -30,9 +30,15 @@
 }
 .iov-icon-loading {
   &:before {
-    content: "\e6cf";
-    animation: rotating 2s linear infinite;
+    content: "";
+    width: 14px;
+    height: 14px;
+    animation: rotating .45s linear infinite;
     display: inline-block;
+    background-size: contain;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+5aSa6Imy5Zu+5qCHL2xvYWRpbmc8L3RpdGxlPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9InBhdHRlcm4tMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcGF0dGVyblVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2ltYWdlLTIiPjwvdXNlPgogICAgICAgIDwvcGF0dGVybj4KICAgICAgICA8aW1hZ2UgaWQ9ImltYWdlLTIiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFBNEFBQUFPQ0FZQUFBQWZTQzNSQUFBQUFYTlNSMElBcnM0YzZRQUFBRVJsV0VsbVRVMEFLZ0FBQUFnQUFZZHBBQVFBQUFBQkFBQUFHZ0FBQUFBQUE2QUJBQU1BQUFBQkFBRUFBS0FDQUFRQUFBQUJBQUFBRHFBREFBUUFBQUFCQUFBQURnQUFBQUM5OERuNkFBQUJqa2xFUVZRb0ZWMlJUVTdjUUJDRlg5c05neERTYkFKU0Z0bGxpVGhOTmx3aVorTU9XYkNQSUNzV2lQQXpEQm1HOGNpRFBNWjJ2dGR5UzBESno5VlZYYS8rT3B5Y0RvTUtTU1d3anVQWitqMThuMEZjVkk4alMrQmcyd2tzdGczYm54RFY0UnlBeFdjSDJzNitUTWpWeHM0K0VvbFBSRjlhY3JYM3BBOUV0K2NLdVcxWDJRSFduK2NjTzRoNjQ5S1o4Mnladkl2UDJhME5KOGh0RSsvbHZGS3NETjI0TXlkcGdlVWJPQUJqZTZtQS9VaUVkRTlzeDZONE5hWnNRcXVuZnFHemNLZ3BJL3pBZDBUTVBzVFVCN0ZsRElQdUlUY2hwTW9yN01kKzBKOWhyYk5ocTRQQ29kSXh3VjlKTWswSnBJa3J6cmlvMFdzdS9rRzZaWlRMMytlcXZwK3EzZ3U2SUptbEFsL0FsQ0w3SG5kT0N6TklkMlM5eGY2NzNlb1JQVno5REExdHo2aHlROHdOdmp0eVBJQzVkN1dBVUVGY2NwNFhiMXFVVGNxT3liSjdyUW82Z2JnSC9Hd3RhQ0xucFlub1o0SmV1bDVWUGRFbXNmaTFyVFp4VjFYWmFSa0tsa2tnWHhlWnFTcUNWanpMbXJXdiswYjE5YS8wdW1reW5xbnBPOVd4NEM1b1FpNC9qdjREYjEyZlh5N0RpNzBBQUFBQVNVVk9SSzVDWUlJPSI+PC9pbWFnZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSLmlbDmja7lsZXnpLoiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmlbDmja7lsZXnpLot6KGo5qC8IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzA4LCAtNDUzMCkiPgogICAgICAgICAgICA8ZyBpZD0i57yW57uELTMz5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyOTQsIDQ0NzIpIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJsb2FkaW5nL+m7mOiupC/lj43nmb3lpIfku70tMTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0LCA1OCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJBcnRib2FyZCIgeD0iMCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjIzODgsIDEuMjM4OCkiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02Ljc2MTIyOTMxLDAgQzEwLjQ5NTM1MzIsMCAxMy41MjI0NTg2LDMuMDI3MTA1NDcgMTMuNTIyNDU4Niw2Ljc2MTIyOTMxIEMxMy41MjI0NTg2LDEwLjQ5NTM1MzIgMTAuNDk1MzUzMiwxMy41MjI0NTg2IDYuNzYxMjI5MzEsMTMuNTIyNDU4NiBDMy4wMjcxMDU0NywxMy41MjI0NTg2IDAsMTAuNDk1MzUzMiAwLDYuNzYxMjI5MzEgQzAsMy4wMjcxMDU0NyAzLjAyNzEwNTQ3LDAgNi43NjEyMjkzMSwwIFogTTYuNzYxMjI5MzEsMS45NjY5MDMwNyBDNC4xMTMzOTYwNSwxLjk2NjkwMzA3IDEuOTY2OTAzMDcsNC4xMTMzOTYwNSAxLjk2NjkwMzA3LDYuNzYxMjI5MzEgQzEuOTY2OTAzMDcsOS40MDkwNjI1OCA0LjExMzM5NjA1LDExLjU1NTU1NTYgNi43NjEyMjkzMSwxMS41NTU1NTU2IEM5LjQwOTA2MjU4LDExLjU1NTU1NTYgMTEuNTU1NTU1Niw5LjQwOTA2MjU4IDExLjU1NTU1NTYsNi43NjEyMjkzMSBDMTEuNTU1NTU1Niw0LjExMzM5NjA1IDkuNDA5MDYyNTgsMS45NjY5MDMwNyA2Ljc2MTIyOTMxLDEuOTY2OTAzMDcgWiIgaWQ9IuakreWchuW9oiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNi43NjEyMjkzMSwwIEMxMC40OTUzNTMyLDAgMTMuNTIyNDU4NiwzLjAyNzEwNTQ3IDEzLjUyMjQ1ODYsNi43NjEyMjkzMSBDMTMuNTIyNDU4Niw3LjMwNDM3NDYgMTMuMDgyMTUyNCw3Ljc0NDY4MDg1IDEyLjUzOTAwNzEsNy43NDQ2ODA4NSBDMTEuOTk1ODYxOCw3Ljc0NDY4MDg1IDExLjU1NTU1NTYsNy4zMDQzNzQ2IDExLjU1NTU1NTYsNi43NjEyMjkzMSBDMTEuNTU1NTU1Niw0LjExMzM5NjA1IDkuNDA5MDYyNTgsMS45NjY5MDMwNyA2Ljc2MTIyOTMxLDEuOTY2OTAzMDcgQzQuMTEzMzk2MDUsMS45NjY5MDMwNyAxLjk2NjkwMzA3LDQuMTEzMzk2MDUgMS45NjY5MDMwNyw2Ljc2MTIyOTMxIEMxLjk2NjkwMzA3LDkuNDA5MDYyNTggNC4xMTMzOTYwNSwxMS41NTU1NTU2IDYuNzYxMjI5MzEsMTEuNTU1NTU1NiBDNy4zMDQzNzQ2LDExLjU1NTU1NTYgNy43NDQ2ODA4NSwxMS45OTU4NjE4IDcuNzQ0NjgwODUsMTIuNTM5MDA3MSBDNy43NDQ2ODA4NSwxMy4wODIxNTI0IDcuMzA0Mzc0NiwxMy41MjI0NTg2IDYuNzYxMjI5MzEsMTMuNTIyNDU4NiBDMy4wMjcxMDU0NywxMy41MjI0NTg2IDAsMTAuNDk1MzUzMiAwLDYuNzYxMjI5MzEgQzAsMy4wMjcxMDU0NyAzLjAyNzEwNTQ3LDAgNi43NjEyMjkzMSwwIFoiIGlkPSLot6/lvoQiIGZpbGw9InVybCgjcGF0dGVybi0xKSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
   }
 }
 

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

@@ -4,28 +4,34 @@
 
 @include b(popover) {
   position: absolute;
-  background: $--popover-background-color;
+  background: #fff;
   min-width: 150px;
   border-radius: 4px;
-  border: 1px solid $--popover-border-color;
-  padding: $--popover-padding;
-  z-index: $--index-popper;
-  color: $--color-text-regular;
-  line-height: 1.4;
+  border: 0.5px solid $--color-line-2;
+  padding: 12px;
+  z-index: 2000;
+  color: $--color-text-5;
   text-align: justify;
-  font-size: $--popover-font-size;
-  box-shadow: $--box-shadow-light;
+  font-size: 12px;
+  box-shadow: 0px 2px 8px 0px rgba(73,75,83,0.12);
   word-break: break-all;
 
   @include m(plain) {
-    padding: $--popover-padding-large;
+    padding: 12px;
   }
 
   @include e(title) {
-    color: $--popover-title-font-color;
-    font-size: $--popover-title-font-size;
+    font-weight: 500;
+    font-size: 13px;
+    color: $--color-text-6;
     line-height: 1;
-    margin-bottom: 12px;
+    margin-bottom: 5px;
+  }
+  @include e(content) {
+    font-weight: 400;
+    font-size: 12px;
+    color: $--color-text-5;
+    line-height: 18px;
   }
 
   @include e(reference) {

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

@@ -13,90 +13,89 @@
   }
 
   .popper__arrow {
-    display: none;
-    border-width: $--popover-arrow-size;
+    border-width: 6px;
     filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
   }
 
   .popper__arrow::after {
     content: " ";
-    border-width: $--popover-arrow-size;
+    border-width: 6px;
   }
 
   &[x-placement^="top"] {
-    margin-bottom: 4px;
+    margin-bottom: 10px;
   }
 
-  // &[x-placement^="top"] .popper__arrow {
-  //   bottom: -$--popover-arrow-size;
-  //   left: 50%;
-  //   margin-right: #{$--tooltip-arrow-size / 2};
-  //   border-top-color: $--popover-border-color;
-  //   border-bottom-width: 0;
+  &[x-placement^="top"] .popper__arrow {
+    bottom: -6px;
+    left: 50%;
+    margin-right: 3px;
+    border-top-color: $--color-line-2;
+    border-bottom-width: 0;
 
-  //   &::after {
-  //     bottom: 1px;
-  //     margin-left: -$--popover-arrow-size;
-  //     border-top-color: $--popover-background-color;
-  //     border-bottom-width: 0;
-  //   }
-  // }
+    &::after {
+      bottom: 0.5px;
+      margin-left: -6px;
+      border-top-color: #fff;
+      border-bottom-width: 0;
+    }
+  }
 
   &[x-placement^="bottom"] {
-    margin-top: 4px;
+    margin-top: 10px;
   }
 
-  // &[x-placement^="bottom"] .popper__arrow {
-  //   top: -$--popover-arrow-size;
-  //   left: 50%;
-  //   margin-right: #{$--tooltip-arrow-size / 2};
-  //   border-top-width: 0;
-  //   border-bottom-color: $--popover-border-color;
+  &[x-placement^="bottom"] .popper__arrow {
+    top: -6px;
+    left: 50%;
+    margin-right: 3px;
+    border-top-width: 0;
+    border-bottom-color: $--color-line-2;
 
-  //   &::after {
-  //     top: 1px;
-  //     margin-left: -$--popover-arrow-size;
-  //     border-top-width: 0;
-  //     border-bottom-color: $--popover-background-color;
-  //   }
-  // }
+    &::after {
+      top: 0.5px;
+      margin-left: -6px;
+      border-top-width: 0;
+      border-bottom-color: #fff;
+    }
+  }
 
   &[x-placement^="right"] {
-    margin-left: 4px;
+    margin-left: 10px;
   }
 
-  // &[x-placement^="right"] .popper__arrow {
-  //   top: 50%;
-  //   left: -$--popover-arrow-size;
-  //   margin-bottom: #{$--tooltip-arrow-size / 2};
-  //   border-right-color: $--popover-border-color;
-  //   border-left-width: 0;
+  &[x-placement^="right"] .popper__arrow {
+    top: 50%;
+    left: -6px;
+    margin-bottom: 3px;
+    border-right-color: $--color-line-2;
+    border-left-width: 0;
 
-  //   &::after {
-  //     bottom: -$--popover-arrow-size;
-  //     left: 1px;
-  //     border-right-color: $--popover-background-color;
-  //     border-left-width: 0;
-  //   }
-  // }
+    &::after {
+      bottom: -6px;
+      left: 0.5px;
+      border-right-color: #fff;
+      border-left-width: 0;
+    }
+  }
 
   &[x-placement^="left"] {
-    margin-right: 4px;
+    margin-right: 10px;
   }
 
-  // &[x-placement^="left"] .popper__arrow {
-  //   top: 50%;
-  //   right: -$--popover-arrow-size;
-  //   margin-bottom: #{$--tooltip-arrow-size / 2};
-  //   border-right-width: 0;
-  //   border-left-color: $--popover-border-color;
+  &[x-placement^="left"] .popper__arrow {
+    top: 50%;
+    right: -6px;
+    margin-bottom: 3px;
+    border-right-width: 0;
+    border-left-color: $--color-line-2;
 
-  //   &::after {
-  //     right: 1px;
-  //     bottom: -$--popover-arrow-size;
-  //     margin-left: -$--popover-arrow-size;
-  //     border-right-width: 0;
-  //     border-left-color: $--popover-background-color;
-  //   }
-  // }
+    &::after {
+      right: 0.5px;
+      bottom: -6px;
+      margin-left: -6px;
+      border-right-width: 0;
+      border-left-color: #fff;
+    }
+  }
 }

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

@@ -23,6 +23,60 @@
     }
   }
 
+  &.is-fill {
+    background: $--color-fill-1;
+    border-radius: 4px;
+    .el-input-group--prefix,
+    .el-input-group--suffix {
+      background: $--color-fill-1;
+      border-color: $--color-fill-1;
+      &:hover,
+      &.is-focus {
+        border-color: $--input-focus-border;
+      }
+      &.is-disabled {
+        border-color: $--color-fill-1;
+      }
+    }
+    .el-input__inner {
+      background: $--color-fill-1;
+      border-color: $--color-fill-1;
+    }
+    .el-input {
+      &.is-focus {
+        .el-input__suffix,
+        .el-input__inner,
+        .el-input-group--prefix,
+        .el-input-group--suffix {
+          background: #fff;
+          border-color: $--input-focus-border;
+        }
+        .el-input-group--prefix,
+        .el-input-group--suffix {
+          box-shadow: $--input-box-shadow;
+        }
+      }
+    }
+    .el-input__suffix {
+      background: $--color-fill-1;
+    }
+    &:hover {
+      .el-input__inner {
+        border-color: $--select-border-color-hover;
+      }
+    }
+    .el-select__tags {
+      &.is-focus {
+        .el-tag.el-tag--info {
+          background: $--color-fill-2;
+        }
+      }
+    }
+    .el-tag.el-tag--info {
+      background: #fff;
+    }
+  }
+
   .el-input__inner {
     cursor: pointer;
     padding-right: 35px;
@@ -168,6 +222,7 @@
     border-color: transparent;
     margin: 2px 0 2px 4px;
     padding: 0 6px;
+    border-radius: 2px;
     display: flex;
     max-width: 100%;
     align-items: center;
@@ -176,6 +231,7 @@
     line-height: $--input-height - 8px;
     &.el-select__tags-count-fixed {
       min-width: $--input-height - 8px;
+      border-radius: 50%;
     }
     &.el-tag--info {
       background: $--color-fill-2;