iov-design 2.15.60 → 2.15.61

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

@@ -1,270 +1,270 @@
-@import "mixins/mixins";
-@import "mixins/utils";
-@import "common/var";
-@import "select-dropdown";
-@import "input";
-@import "tag";
-@import "option";
-@import "option-group";
-@import "scrollbar";
-
-@include b(select) {
-  display: block;
-  position: relative;
-
-  .el-select__tags
-    >span {
-      display: contents;
-    }
-
-  &:hover {
-    .el-input__inner {
-      border-color: $--select-border-color-hover;
-    }
-  }
-
-  &.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;
-
-    // &:focus {
-    //   border-color: $--select-input-focus-border-color;
-    // }
-  }
-
-  .el-input {
-    .el-input__suffix {
-      right: 8px;
-      .el-input__validateIcon {
-        margin-left: 4px;
-        padding-right: 0;
-      }
-    }
-    & .el-select__caret {
-      padding-right: 0;
-      color: $--color-fill-5;
-      font-size: $--select-icon-size;
-      transition: transform .3s;
-      transform: rotateZ(180deg);
-      cursor: pointer;
-
-      @include when(reverse) {
-        transform: rotateZ(0deg);
-      }
-
-      @include when(show-close) {
-        font-size: $--select-font-size;
-        text-align: center;
-        transform: rotateZ(180deg);
-        border-radius: $--border-radius-circle;
-        color:  $--select-close-color;
-        background-color: $--select-close-background-color;
-        transition: $--color-transition-base;
-
-        &:hover {
-          color: $--select-close-hover-color;
-          background-color: $--select-close-hover-background-color;
-        }
-      }
-    }
-
-    &.is-disabled {
-      & .el-input__inner {
-        cursor: not-allowed;
-
-        // &:hover {
-        //   border-color: $--select-disabled-border;
-        // }
-      }
-    }
-
-    &.is-focus .el-input__inner {
-      outline: none;
-      border-color: $--input-focus-border;
-      box-shadow: $--input-box-shadow;
-    }
-  }
-
-  > .el-input {
-    display: block;
-  }
-  > .el-input-group {
-    display: flex;
-    .el-input__inner {
-      border-radius: $--input-border-radius;
-    }
-    &.is-focus .el-input__inner {
-      box-shadow: none;
-    }
-  }
-
-  @include e(input) {
-    border: none;
-    outline: none;
-    padding: 0;
-    margin-left: 15px;
-    color: $--select-multiple-input-color;
-    font-size: $--select-font-size;
-    appearance: none;
-    height: 28px;
-    background-color: transparent;
-    @include when(mini) {
-      height: 14px;
-    }
-  }
-
-  @include e(close) {
-    cursor: pointer;
-    position: absolute;
-    top: 8px;
-    z-index: $--index-top;
-    right: 25px;
-    color: $--select-close-color;
-    background-color: $--select-close-background-color;
-    line-height: 18px;
-    font-size: $--select-icon-size;
-
-    &:hover {
-      color: $--select-close-hover-color;
-      background-color: $--select-close-hover-background-color;
-    }
-  }
-
-  @include e(tags) {
-    position: absolute;
-    line-height: normal;
-    white-space: normal;
-    z-index: 3;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    pointer-events: none;
-    .el-select__tags-count-fixed {
-      border-radius: 50%;
-      text-align: center;
-      position: absolute;
-      right: 0;
-      justify-content: center;
-    }
-  }
-
-  @include e(tags-text) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &.is-disabled {
-    .el-tag {
-      &.el-tag--info {
-        background: $--color-fill-3;
-        color: $--color-text-3;
-      }
-    }
-  }
-  .el-tag {
-    box-sizing: border-box;
-    border-color: transparent;
-    margin: 2px 0 2px 4px;
-    padding: 0 6px;
-    border-radius: 2px;
-    display: flex;
-    max-width: 100%;
-    align-items: center;
-    pointer-events: auto;
-    height: $--input-height - 8px;
-    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;
-      color: $--color-text-6;
-      border: 0 none;
-    }
-  }
-
-  @include m(medium) {
-    .el-tag--medium {
-      height: $--input-medium-height - 8px;
-      line-height: $--input-medium-height - 8px;
-      &.el-select__tags-count-fixed {
-        min-width: $--input-medium-height - 8px;
-      }
-    }
-  }
-  @include m(small) {
-    .el-tag--small {
-      height: $--input-small-height - 8px;
-      line-height: $--input-small-height - 8px;
-      &.el-select__tags-count-fixed {
-        min-width: $--input-small-height - 8px;
-      }
-    }
-  }
-  @include m(mini) {
-    .el-tag--mini {
-      height: $--input-mini-height - 8px;
-      line-height: $--input-mini-height - 8px;
-      &.el-select__tags-count-fixed {
-        min-width: $--input-mini-height - 8px;
-      }
-    }
-  }
-}
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "select-dropdown";
+@import "input";
+@import "tag";
+@import "option";
+@import "option-group";
+@import "scrollbar";
+
+@include b(select) {
+  display: block;
+  position: relative;
+
+  .el-select__tags
+    >span {
+      display: contents;
+    }
+
+  &:hover {
+    .el-input__inner {
+      border-color: $--select-border-color-hover;
+    }
+  }
+
+  &.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;
+
+    // &:focus {
+    //   border-color: $--select-input-focus-border-color;
+    // }
+  }
+
+  .el-input {
+    .el-input__suffix {
+      right: 8px;
+      .el-input__validateIcon {
+        margin-left: 4px;
+        padding-right: 0;
+      }
+    }
+    & .el-select__caret {
+      padding-right: 0;
+      color: $--color-fill-5;
+      font-size: $--select-icon-size;
+      transition: transform .3s;
+      transform: rotateZ(180deg);
+      cursor: pointer;
+
+      @include when(reverse) {
+        transform: rotateZ(0deg);
+      }
+
+      @include when(show-close) {
+        font-size: $--select-font-size;
+        text-align: center;
+        transform: rotateZ(180deg);
+        border-radius: $--border-radius-circle;
+        color:  $--select-close-color;
+        background-color: $--select-close-background-color;
+        transition: $--color-transition-base;
+
+        &:hover {
+          color: $--select-close-hover-color;
+          background-color: $--select-close-hover-background-color;
+        }
+      }
+    }
+
+    &.is-disabled {
+      & .el-input__inner {
+        cursor: not-allowed;
+
+        // &:hover {
+        //   border-color: $--select-disabled-border;
+        // }
+      }
+    }
+
+    &.is-focus .el-input__inner {
+      outline: none;
+      border-color: $--input-focus-border;
+      box-shadow: $--input-box-shadow;
+    }
+  }
+
+  > .el-input {
+    display: block;
+  }
+  > .el-input-group {
+    display: flex;
+    .el-input__inner {
+      border-radius: $--input-border-radius;
+    }
+    &.is-focus .el-input__inner {
+      box-shadow: none;
+    }
+  }
+
+  @include e(input) {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin-left: 15px;
+    color: $--select-multiple-input-color;
+    font-size: $--select-font-size;
+    appearance: none;
+    height: 28px;
+    background-color: transparent;
+    @include when(mini) {
+      height: 14px;
+    }
+  }
+
+  @include e(close) {
+    cursor: pointer;
+    position: absolute;
+    top: 8px;
+    z-index: $--index-top;
+    right: 25px;
+    color: $--select-close-color;
+    background-color: $--select-close-background-color;
+    line-height: 18px;
+    font-size: $--select-icon-size;
+
+    &:hover {
+      color: $--select-close-hover-color;
+      background-color: $--select-close-hover-background-color;
+    }
+  }
+
+  @include e(tags) {
+    position: absolute;
+    line-height: normal;
+    white-space: normal;
+    z-index: 3;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    pointer-events: none;
+    .el-select__tags-count-fixed {
+      border-radius: 50%;
+      text-align: center;
+      position: absolute;
+      right: 0;
+      justify-content: center;
+    }
+  }
+
+  @include e(tags-text) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.is-disabled {
+    .el-tag {
+      &.el-tag--info {
+        background: $--color-fill-3;
+        color: $--color-text-3;
+      }
+    }
+  }
+  .el-tag {
+    box-sizing: border-box;
+    border-color: transparent;
+    margin: 2px 0 2px 4px;
+    padding: 0 6px;
+    border-radius: 2px;
+    display: flex;
+    max-width: 100%;
+    align-items: center;
+    pointer-events: auto;
+    height: $--input-height - 8px;
+    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;
+      color: $--color-text-6;
+      border: 0 none;
+    }
+  }
+
+  @include m(medium) {
+    .el-tag--medium {
+      height: $--input-medium-height - 8px;
+      line-height: $--input-medium-height - 8px;
+      &.el-select__tags-count-fixed {
+        min-width: $--input-medium-height - 8px;
+      }
+    }
+  }
+  @include m(small) {
+    .el-tag--small {
+      height: $--input-small-height - 8px;
+      line-height: $--input-small-height - 8px;
+      &.el-select__tags-count-fixed {
+        min-width: $--input-small-height - 8px;
+      }
+    }
+  }
+  @include m(mini) {
+    .el-tag--mini {
+      height: $--input-mini-height - 8px;
+      line-height: $--input-mini-height - 8px;
+      &.el-select__tags-count-fixed {
+        min-width: $--input-mini-height - 8px;
+      }
+    }
+  }
+}