@qsxy/element-plus-react 1.0.1 → 1.0.3

package/theme-chalk/select/index.scss

@@ -1,247 +1,278 @@
-@use '../mixins/config' as *;
-
-.#{$namespace}-select {
-    --#{$namespace}-select-border-color-hover: var(--#{$namespace}-border-color-hover);
-    --#{$namespace}-select-disabled-border: var(--#{$namespace}-disabled-border-color);
-    --#{$namespace}-select-close-hover-color: var(--#{$namespace}-text-color-secondary);
-    --#{$namespace}-select-input-color: var(--#{$namespace}-text-color-placeholder);
-    --#{$namespace}-select-multiple-input-color: var(--#{$namespace}-text-color-regular);
-    --#{$namespace}-select-input-focus-border-color: var(--#{$namespace}-color-primary);
+@use 'sass:map';
+
+@use '../mixins/mixins' as *;
+@use '../mixins/utils' as *;
+@use '../mixins/var' as *;
+@use '../common/var' as *;
+@use './select-dropdown.scss';
+@use './option.scss';
+@use './option-group.scss';
+
+@mixin mixed-input-border($color) {
+    box-shadow: 0 0 0 1px $color inset;
 }
 
-.#{$namespace}-select {
+@include b(select) {
+    @include set-component-css-var('select', $select);
+}
+
+@include b(select) {
     display: inline-block;
     position: relative;
-    // height: 32px;
-    // line-height: 32px;
-    font-size: 14px;
-    zoom: 1;
-    *display: inline;
-    width: 100%;
-
-    .#{$namespace}-select__trigger {
-        cursor: pointer;
-    }
+    vertical-align: middle;
+    width: getCssVar('select-width');
 
-    .#{$namespace}-input__inner {
+    @include e(wrapper) {
+        display: flex;
+        align-items: center;
+        position: relative;
+        box-sizing: border-box;
         cursor: pointer;
-        display: inline-flex;
-    }
+        text-align: left;
+        font-size: map.get($input-font-size, 'default');
+        padding: map.get($select-wrapper-padding, 'default');
+        gap: map.get($select-item-gap, 'default');
+        min-height: map.get($input-height, 'default');
+        line-height: map.get($select-item-height, 'default');
+        border-radius: getCssVar('border-radius-base');
+        background-color: getCssVar('fill-color', 'blank');
+        transition: getCssVar('transition', 'duration');
+        transform: translate3d(0, 0, 0);
+        @include mixed-input-border(#{getCssVar('border-color')});
+
+        @include when(filterable) {
+            cursor: text;
+        }
 
-    &.is-disabled {
-        .#{$namespace}-input__inner {
-            cursor: not-allowed;
+        @include when(focused) {
+            @include mixed-input-border(#{getCssVar('color-primary')});
         }
 
-        .#{$namespace}-select__tags .#{$namespace}-tag--info {
-            background-color: var(--#{$namespace}-fill-color-darker);
+        @include when(hovering) {
+            &:not(.is-focused) {
+                @include mixed-input-border(#{getCssVar('border-color-hover')});
+            }
         }
-    }
 
-    .#{$namespace}-select__tags {
-        & > span {
-            display: inline-block;
+        @include when(disabled) {
+            cursor: not-allowed;
+
+            background-color: getCssVar('fill-color', 'light');
+            color: getCssVar('text-color', 'placeholder');
+            @include mixed-input-border(#{getCssVar('select-disabled-border')});
+
+            &:hover {
+                @include mixed-input-border(#{getCssVar('select-disabled-border')});
+            }
+
+            &.is-focus {
+                @include mixed-input-border(#{getCssVar('input-focus-border-color')});
+            }
+
+            @include e(selected-item) {
+                color: getCssVar('select-disabled-color');
+            }
+
+            @include e(caret) {
+                cursor: not-allowed;
+            }
+
+            .#{$namespace}-tag {
+                cursor: not-allowed;
+            }
+
+            // When the native input tag is disabled, the cursor value is the 'default'.
+            input {
+                cursor: not-allowed;
+            }
+
+            .#{$namespace}-select__prefix,
+            .#{$namespace}-select__suffix {
+                pointer-events: none;
+            }
         }
 
-        .#{$namespace}-tag {
-            box-sizing: border-box;
-            border-color: transparent;
-            margin: 2px 6px 2px 0;
+        @include when(plain) {
+            box-shadow: none !important;
+            background: none !important;
+            padding: 0;
         }
     }
 
-    .#{$namespace}-select-tags-wrapper.has-prefix {
-        margin-left: 6px;
+    @include e(prefix) {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: map.get($select-item-gap, 'default');
+        color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
     }
-}
 
-// .#{$namespace}-select--large {
-//     height: var(--#{$namespace}-component-size-large);
-//     line-height: var(--#{$namespace}-component-size-large);
-// }
-
-// .#{$namespace}-select--small {
-//     height: var(--#{$namespace}-component-size-small);
-//     line-height: var(--#{$namespace}-component-size-small);
-// }
-
-.#{$namespace}-select__tags {
-    position: absolute;
-    line-height: normal;
-    white-space: normal;
-    z-index: 1;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-right: 30px;
-}
+    @include e(suffix) {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: map.get($select-item-gap, 'default');
+        color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
 
-.#{$namespace}-select .#{$namespace}-select__tags .#{$namespace}-tag--info {
-    background-color: var(--#{$namespace}-fill-color);
-}
+        @include when(hidden-clear) {
+            .#{$namespace}-select__clear {
+                display: none;
+            }
+        }
 
-.#{$namespace}-select-dorpdown {
-    .#{$namespace}-select-dropdown__wrap {
-        max-height: 274px;
+        @include when(hidden-arrow) {
+            .#{$namespace}-select__arrow {
+                display: none;
+            }
+        }
     }
 
-    .#{$namespace}-select-dropdown__list {
-        // box-sizing: border-box;
-        // width: 100%;
-        // border-radius: 4px;
-        // background-clip: padding-box;
+    @include e(caret) {
+        color: getCssVar('select-input-color');
+        font-size: getCssVar('select-input-font-size');
+        transition: getCssVar('transition', 'duration');
+        transform: rotateZ(0deg);
+        cursor: pointer;
 
-        position: relative;
-        // overflow-x: hidden;
-        // overflow-y: auto;
-        margin: 4px 0;
-        padding: 0;
-        max-height: 240px;
-        -webkit-overflow-scrolling: touch;
-        font-size: 14px;
+        @include when(reverse) {
+            transform: rotateZ(180deg);
+        }
+    }
 
-        .#{$namespace}-select-dropdown__item {
-            display: list-item;
-            cursor: pointer;
-            margin: 0;
-            padding: 0 15px;
-            list-style: none;
-            -webkit-touch-callout: none;
-            position: relative;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: var(--#{$namespace}-text-color-regular);
-            height: 34px;
-            line-height: 34px;
-            box-sizing: border-box;
-            cursor: pointer;
+    @include e(clear) {
+        cursor: pointer;
 
-            &.selected {
-                color: var(--#{$namespace}-color-primary);
-            }
+        &:hover {
+            color: getCssVar('select-close-hover-color');
+        }
+    }
 
-            &.hover {
-                background-color: var(--#{$namespace}-fill-color-light);
-            }
+    @include e(selection) {
+        position: relative;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+        gap: map.get($select-item-gap, 'default');
+
+        @include when(near) {
+            margin-left: map.get($select-near-margin-left, 'default');
+        }
 
-            &.is-disabled {
-                color: var(--#{$namespace}-text-color-placeholder);
-                cursor: not-allowed;
+        .#{$namespace}-tag {
+            cursor: pointer;
+            border-color: transparent;
 
-                &.hover {
-                    background-color: transparent;
-                    color: var(--#{$namespace}-text-color-placeholder);
-                }
+            &.#{$namespace}-tag--plain {
+                border-color: getCssVar('tag', 'border-color');
             }
 
-            &.no-data,
-            &.loading {
-                text-align: center;
-                margin: -4px 0;
+            .#{$namespace}-tag__content {
+                min-width: 0;
             }
         }
     }
 
-    .#{$namespace}-select__search {
-        position: relative;
-        z-index: 1010;
-        margin: 0;
-        padding: 3px 4px;
-        white-space: nowrap;
+    @include e(selected-item) {
+        display: flex;
+        flex-wrap: wrap;
+        user-select: none;
+    }
 
-        .#{$namespace}-clear {
-            cursor: pointer;
-            pointer-events: unset;
-        }
+    @include e(tags-text) {
+        display: block;
+        line-height: normal;
+        @include utils-ellipsis;
     }
 
-    &.is-multiple .#{$namespace}-select-dropdown__item.selected:after {
-        content: '';
+    @include e(placeholder) {
         position: absolute;
+        z-index: -1;
+        display: block;
         top: 50%;
-        right: 20px;
-        border-top: none;
-        border-right: none;
-        background-repeat: no-repeat;
-        background-position: center;
-        background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary));
-        mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
-            no-repeat;
-        mask-size: 100% 100%;
-        -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E")
-            no-repeat;
-        -webkit-mask-size: 100% 100%;
         transform: translateY(-50%);
-        width: 16px;
-        height: 16px;
-    }
-}
-
-.#{$namespace}-select-group {
-    margin: 0;
-    padding: 0;
+        width: 100%;
+        @include utils-ellipsis;
+        color: var(#{getCssVarName('input-text-color')}, map.get($input, 'text-color'));
 
-    & .#{$namespace}-select-dropdown__item {
-        padding-left: 20px;
+        @include when(transparent) {
+            user-select: none;
+            color: getCssVar('text-color', 'placeholder');
+        }
     }
-}
 
-.#{$namespace}-select-group__wrap {
-    position: relative;
-    list-style: none;
-    margin: 0;
-    padding: 0;
+    @include e(popper) {
+        @include picker-popper(map.get($select-dropdown, 'bg-color'), map.get($select-dropdown, 'border'), map.get($select-dropdown, 'shadow'));
+    }
 
-    &:not(:last-of-type) {
-        padding-bottom: 24px;
+    @include e(input-wrapper) {
+        flex: 1;
 
-        &::after {
-            content: '';
+        @include when(hidden) {
+            // Out of the document flow
             position: absolute;
-            display: block;
-            left: 20px;
-            right: 20px;
-            bottom: 12px;
-            height: 1px;
-            background: var(--#{$namespace}-border-color-light);
+            opacity: 0;
+            z-index: -1;
         }
     }
-}
 
-.#{$namespace}-select-group__split {
-    .#{$namespace}-select-group__split-dash {
+    @include e(input) {
+        border: none;
+        outline: none;
+        padding: 0;
+        color: getCssVar('select-multiple-input-color');
+        font-size: inherit;
+        font-family: inherit;
+        appearance: none;
+        height: map.get($select-item-height, 'default');
+        width: 100%;
+        background-color: transparent;
+
+        @include when(disabled) {
+            cursor: not-allowed;
+        }
+    }
+
+    @include e(input-calculator) {
         position: absolute;
-        left: 20px;
-        right: 20px;
-        height: 1px;
-        background: #e4e7ed;
+        left: 0;
+        top: 0;
+        max-width: 100%;
+        visibility: hidden;
+        white-space: pre;
+        overflow: hidden;
     }
-}
 
-.#{$namespace}-select-group__title {
-    padding-left: 20px;
-    font-size: 12px;
-    color: var(--#{$namespace}-color-info);
-    line-height: 30px;
-}
+    @each $size in (large, small) {
+        @include m($size) {
+            @include e(wrapper) {
+                gap: map.get($select-item-gap, $size);
+                padding: map.get($select-wrapper-padding, $size);
+                min-height: map.get($input-height, $size);
+                line-height: map.get($select-item-height, $size);
+                font-size: map.get($input-font-size, $size);
+            }
 
-.#{$namespace}-select__input {
-    border: none;
-    outline: none;
-    padding: 0;
-    margin-left: 15px;
-    color: var(--#{$namespace}-select-multiple-input-color);
-    font-size: 14px;
-    appearance: none;
-    height: 28px;
-    background-color: transparent;
-}
+            @include e(selection) {
+                gap: map.get($select-item-gap, $size);
+
+                @include when(near) {
+                    margin-left: map.get($select-near-margin-left, $size);
+                }
+            }
+
+            @include e(prefix) {
+                gap: map.get($select-item-gap, $size);
+            }
+
+            @include e(suffix) {
+                gap: map.get($select-item-gap, $size);
+            }
 
-.#{$namespace}-select__tooltip {
-    .#{$namespace}-tag {
-        margin: 5px;
+            @include e(input) {
+                height: map.get($select-item-height, $size);
+            }
+        }
     }
 }