@qsxy/element-plus-react 1.0.3 → 2.0.0

package/theme-chalk/select/index.scss--bak

@@ -1,247 +0,0 @@
-@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);
-}
-
-.#{$namespace}-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;
-    }
-
-    .#{$namespace}-input__inner {
-        cursor: pointer;
-        display: inline-flex;
-    }
-
-    &.is-disabled {
-        .#{$namespace}-input__inner {
-            cursor: not-allowed;
-        }
-
-        .#{$namespace}-select__tags .#{$namespace}-tag--info {
-            background-color: var(--#{$namespace}-fill-color-darker);
-        }
-    }
-
-    .#{$namespace}-select__tags {
-        & > span {
-            display: inline-block;
-        }
-
-        .#{$namespace}-tag {
-            box-sizing: border-box;
-            border-color: transparent;
-            margin: 2px 6px 2px 0;
-        }
-    }
-
-    .#{$namespace}-select-tags-wrapper.has-prefix {
-        margin-left: 6px;
-    }
-}
-
-// .#{$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;
-}
-
-.#{$namespace}-select .#{$namespace}-select__tags .#{$namespace}-tag--info {
-    background-color: var(--#{$namespace}-fill-color);
-}
-
-.#{$namespace}-select-dorpdown {
-    .#{$namespace}-select-dropdown__wrap {
-        max-height: 274px;
-    }
-
-    .#{$namespace}-select-dropdown__list {
-        // box-sizing: border-box;
-        // width: 100%;
-        // border-radius: 4px;
-        // background-clip: padding-box;
-
-        position: relative;
-        // overflow-x: hidden;
-        // overflow-y: auto;
-        margin: 4px 0;
-        padding: 0;
-        max-height: 240px;
-        -webkit-overflow-scrolling: touch;
-        font-size: 14px;
-
-        .#{$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;
-
-            &.selected {
-                color: var(--#{$namespace}-color-primary);
-            }
-
-            &.hover {
-                background-color: var(--#{$namespace}-fill-color-light);
-            }
-
-            &.is-disabled {
-                color: var(--#{$namespace}-text-color-placeholder);
-                cursor: not-allowed;
-
-                &.hover {
-                    background-color: transparent;
-                    color: var(--#{$namespace}-text-color-placeholder);
-                }
-            }
-
-            &.no-data,
-            &.loading {
-                text-align: center;
-                margin: -4px 0;
-            }
-        }
-    }
-
-    .#{$namespace}-select__search {
-        position: relative;
-        z-index: 1010;
-        margin: 0;
-        padding: 3px 4px;
-        white-space: nowrap;
-
-        .#{$namespace}-clear {
-            cursor: pointer;
-            pointer-events: unset;
-        }
-    }
-
-    &.is-multiple .#{$namespace}-select-dropdown__item.selected:after {
-        content: '';
-        position: absolute;
-        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;
-
-    & .#{$namespace}-select-dropdown__item {
-        padding-left: 20px;
-    }
-}
-
-.#{$namespace}-select-group__wrap {
-    position: relative;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    &:not(:last-of-type) {
-        padding-bottom: 24px;
-
-        &::after {
-            content: '';
-            position: absolute;
-            display: block;
-            left: 20px;
-            right: 20px;
-            bottom: 12px;
-            height: 1px;
-            background: var(--#{$namespace}-border-color-light);
-        }
-    }
-}
-
-.#{$namespace}-select-group__split {
-    .#{$namespace}-select-group__split-dash {
-        position: absolute;
-        left: 20px;
-        right: 20px;
-        height: 1px;
-        background: #e4e7ed;
-    }
-}
-
-.#{$namespace}-select-group__title {
-    padding-left: 20px;
-    font-size: 12px;
-    color: var(--#{$namespace}-color-info);
-    line-height: 30px;
-}
-
-.#{$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;
-}
-
-.#{$namespace}-select__tooltip {
-    .#{$namespace}-tag {
-        margin: 5px;
-    }
-}

package/theme-chalk/switch.scss--bak

@@ -1,273 +0,0 @@
-@use './mixins/config' as *;
-
-@use 'sass:map';
-
-$switch-height: () !default;
-$switch-height: map.merge(
-    (
-        'large': var(--#{$namespace}-component-size-large),
-        'default': 32px,
-        'small': var(--#{$namespace}-component-size-small),
-    ),
-    $switch-height
-);
-
-$switch-font-size: () !default;
-$switch-font-size: map.merge(
-    (
-        'large': 14px,
-        'default': 14px,
-        'small': 12px,
-    ),
-    $switch-font-size
-);
-
-$switch-core-border-radius: () !default;
-$switch-core-border-radius: map.merge(
-    (
-        'large': 12px,
-        'default': 10px,
-        'small': 8px,
-    ),
-    $switch-core-border-radius
-);
-
-$switch-core-width: () !default;
-$switch-core-width: map.merge(
-    (
-        'large': 50px,
-        'default': 40px,
-        'small': 30px,
-    ),
-    $switch-core-width
-);
-
-$switch-core-height: () !default;
-$switch-core-height: map.merge(
-    (
-        'large': 24px,
-        'default': 20px,
-        'small': 16px,
-    ),
-    $switch-core-height
-);
-
-$switch-button-size: () !default;
-$switch-button-size: map.merge(
-    (
-        'large': 20px,
-        'default': 16px,
-        'small': 12px,
-    ),
-    $switch-button-size
-);
-
-$switch-content-padding: () !default;
-$switch-content-padding: map.merge(
-    (
-        'large': 6px,
-        'default': 4px,
-        'small': 2px,
-    ),
-    $switch-content-padding
-);
-
-.#{$namespace}-switch {
-    --#{$namespace}-switch-on-color: var(--#{$namespace}-color-primary);
-    --#{$namespace}-switch-off-color: var(--#{$namespace}-border-color);
-}
-
-.#{$namespace}-switch {
-    display: inline-flex;
-    align-items: center;
-    position: relative;
-    font-size: 14px;
-    line-height: 20px;
-    height: 32px;
-    vertical-align: middle;
-
-    &.is-disabled {
-        .#{$namespace}-switch__core,
-        .#{$namespace}-switch__label {
-            cursor: not-allowed;
-        }
-    }
-
-    .#{$namespace}-switch__label {
-        transition: 0.2s;
-        height: 20px;
-        display: inline-block;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        vertical-align: middle;
-        color: var(--#{$namespace}-text-color-primary);
-
-        &.is-active {
-            color: var(--#{$namespace}-color-primary);
-        }
-
-        &.#{$namespace}-switch__label--left {
-            margin-right: 10px;
-        }
-        &.#{$namespace}-switch__label--right {
-            margin-left: 10px;
-        }
-        & * {
-            line-height: 1;
-            font-size: 14px;
-            display: inline-block;
-        }
-    }
-
-    .#{$namespace}-switch__input {
-        position: absolute;
-        width: 0;
-        height: 0;
-        opacity: 0;
-        margin: 0;
-    }
-
-    .#{$namespace}-switch__core {
-        display: inline-flex;
-        align-items: center;
-        position: relative;
-        min-width: 40px;
-        height: 20px;
-        border: 1px solid var(--#{$namespace}-switch-border-color, var(--#{$namespace}-switch-off-color));
-        outline: none;
-        border-radius: 10px;
-        box-sizing: border-box;
-        background: var(--#{$namespace}-switch-off-color);
-        cursor: pointer;
-        transition: border-color 0.3s, background-color 0.3s;
-
-        .#{$namespace}-switch__inner {
-            transition: all 0.3s;
-            height: 16px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            overflow: hidden;
-            padding: 0 4px 0 18px;
-
-            .is-text,
-            .is-icon {
-                font-size: 12px;
-                color: #ffffff;
-                user-select: none;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-
-            .is-show {
-                opacity: 1;
-            }
-
-            .is-hide {
-                opacity: 0;
-            }
-        }
-
-        .#{$namespace}-switch__action {
-            position: absolute;
-            top: 1px;
-            left: 1px;
-            border-radius: 100%;
-            transition: all 0.3s;
-            width: 16px;
-            height: 16px;
-            background-color: var(--#{$namespace}-color-white);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: var(--#{$namespace}-switch-off-color);
-        }
-    }
-
-    &.is-checked {
-        .#{$namespace}-switch__core {
-            border-color: var(--#{$namespace}-switch-border-color, var(--#{$namespace}-switch-on-color));
-            background: var(--#{$namespace}-switch-on-color);
-
-            .#{$namespace}-switch__inner {
-                padding: 0 18px 0 4px;
-            }
-
-            .#{$namespace}-switch__action {
-                left: calc(100% - 17px);
-                color: var(--#{$namespace}-switch-on-color);
-            }
-        }
-    }
-
-    &.is-disabled {
-        opacity: 0.6;
-    }
-
-    &.#{$namespace}-switch--wide {
-        .#{$namespace}-switch__label {
-            &.#{$namespace}-switch__label--left {
-                span {
-                    left: 10px;
-                }
-            }
-            &.#{$namespace}-switch__label--right {
-                span {
-                    right: 10px;
-                }
-            }
-        }
-    }
-
-    & .label-fade-enter-from,
-    & .label-fade-leave-active {
-        opacity: 0;
-    }
-}
-
-@each $size in (large, small) {
-    .#{$namespace}-switch--#{$size} {
-        font-size: map.get($switch-font-size, $size);
-        line-height: map.get($switch-core-height, $size);
-        height: map.get($switch-height, $size);
-
-        .#{$namespace}-switch__label {
-            height: map.get($switch-core-height, $size);
-            font-size: map.get($switch-font-size, $size);
-
-            & * {
-                font-size: map.get($switch-font-size, $size);
-            }
-        }
-
-        .#{$namespace}-switch__core {
-            min-width: map.get($switch-core-width, $size);
-            height: map.get($switch-core-height, $size);
-            border-radius: map.get($switch-core-border-radius, $size);
-
-            .#{$namespace}-switch__inner {
-                height: map.get($switch-button-size, $size);
-                padding: 0 #{map.get($switch-content-padding, $size)} 0 calc(#{map.get($switch-button-size, $size)} + 2px);
-            }
-
-            .#{$namespace}-switch__action {
-                width: map.get($switch-button-size, $size);
-                height: map.get($switch-button-size, $size);
-            }
-        }
-
-        &.is-checked {
-            .#{$namespace}-switch__core {
-                .#{$namespace}-switch__action {
-                    left: calc(100% - #{map.get($switch-button-size, $size) + 1px});
-                }
-
-                .#{$namespace}-switch__inner {
-                    padding: 0 calc(#{map.get($switch-button-size, $size)} + 2px) 0 #{map.get($switch-content-padding, $size)};
-                }
-            }
-        }
-    }
-}

package/theme-chalk/tag.scss--bak

@@ -1,203 +0,0 @@
-@use 'sass:map';
-@use './mixins/config' as *;
-
-@function joinVarName($list) {
-    $name: '';
-    @each $item in $list {
-        @if $item != '' {
-            $name: $name + '-' + $item;
-        }
-    }
-    @return $name;
-}
-
-$tag-border-width: 1px;
-
-$tag-height: () !default;
-$tag-height: map.merge(
-    (
-        'large': 32px,
-        'default': 24px,
-        'small': 20px,
-    ),
-    $tag-height
-);
-
-$tag-padding: () !default;
-$tag-padding: map.merge(
-    (
-        'large': 12px,
-        'default': 10px,
-        'small': 8px,
-    ),
-    $tag-padding
-);
-
-$tag-icon-size: () !default;
-$tag-icon-size: map.merge(
-    (
-        'large': 16px,
-        'default': 14px,
-        'small': 12px,
-    ),
-    $tag-icon-size
-);
-
-$tag-icon-span-gap: () !default;
-$tag-icon-span-gap: map.merge(
-    (
-        'large': 8px,
-        'default': 6px,
-        'small': 4px,
-    ),
-    $tag-icon-span-gap
-);
-
-@mixin genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight) {
-    --#{$namespace}-tag-bg-color: var(--#{$namespace}-color-primary#{joinVarName($backgroundColorWeight)});
-    --#{$namespace}-tag-border-color: var(--#{$namespace}-color-primary#{joinVarName($borderColorWeight)});
-    --#{$namespace}-tag-hover-color: var(--#{$namespace}-color-primary#{joinVarName($hoverColorWeight)});
-
-    @each $type in success, warning, error, danger, info {
-        &.#{$namespace}-tag--#{$type} {
-            --#{$namespace}-tag-bg-color: var(--#{$namespace}-color#{joinVarName(($type, $backgroundColorWeight))});
-            --#{$namespace}-tag-border-color: var(--#{$namespace}-color#{joinVarName(($type, $borderColorWeight))});
-            --#{$namespace}-tag-hover-color: var(--#{$namespace}-color#{joinVarName(($type, $hoverColorWeight))});
-        }
-    }
-}
-
-.#{$namespace}-tag {
-    --#{$namespace}-tag-font-size: 12px;
-    --#{$namespace}-tag-border-radius: 4px;
-    --#{$namespace}-tag-border-radius-rounded: 9999px;
-}
-
-.#{$namespace}-tag {
-    @include genTheme('light-9', 'light-8', '');
-    --#{$namespace}-tag-text-color: var(--#{$namespace}-color-primary);
-    @each $type in success, warning, error, danger, info {
-        &.#{$namespace}-tag--#{$type} {
-            --#{$namespace}-tag-text-color: var(--#{$namespace}-color-#{$type});
-        }
-    }
-
-    &.is-hit {
-        border-color: var(--#{$namespace}-color-primary);
-    }
-
-    &.is-round {
-        border-radius: var(--#{$namespace}-tag-border-radius-rounded);
-    }
-
-    .#{$namespace}-tag__close {
-        color: var(--#{$namespace}-tag-text-color);
-        &:hover {
-            color: var(--#{$namespace}-color-white);
-            background-color: var(--#{$namespace}-tag-hover-color);
-        }
-    }
-
-    background-color: var(--#{$namespace}-tag-bg-color);
-    border-color: var(--#{$namespace}-tag-border-color);
-    color: var(--#{$namespace}-tag-text-color);
-
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-
-    height: map.get($tag-height, 'default');
-    padding: 0 map.get($tag-padding, 'default') - 1px;
-    font-size: 12px;
-    line-height: 1;
-    border-width: $tag-border-width;
-    border-style: solid;
-    border-radius: var(--#{$namespace}-tag-border-radius);
-    box-sizing: border-box;
-    white-space: nowrap;
-    --#{$namespace}-icon-size: 14px;
-
-    $svg-margin-size: 1px;
-    .#{$namespace}-icon {
-        border-radius: 50%;
-        cursor: pointer;
-
-        font-size: calc(#{var(--#{$namespace}-icon-size)} - #{$svg-margin-size * 2});
-        height: var(--#{$namespace}-icon-size);
-        width: var(--#{$namespace}-icon-size);
-
-        text-align: center;
-        position: relative;
-        line-height: var(--#{$namespace}-icon-size);
-        vertical-align: middle;
-        right: -5px;
-
-        svg {
-            margin: 1px;
-        }
-    }
-
-    .#{$namespace}-tag__close {
-        margin-left: map.get($tag-icon-span-gap, 'default');
-    }
-
-    &.is-closable {
-        padding-right: map.get($tag-icon-span-gap, 'default') - 1px;
-    }
-
-    @each $type in success, warning, error, danger, info {
-        &.#{$namespace}-tag--#{$type} {
-            &.is-hit {
-                border-color: var(--#{$namespace}-color-#{$type});
-            }
-        }
-    }
-}
-
-.#{$namespace}-tag--dark {
-    @include genTheme('', '', 'light-3');
-    --#{$namespace}-tag-text-color: var(--#{$namespace}-color-white);
-
-    @each $type in success, warning, error, danger, info {
-        &.#{$namespace}-tag--#{$type} {
-            --#{$namespace}-tag-text-color: var(--#{$namespace}-color-white);
-        }
-    }
-}
-
-.#{$namespace}-tag--plain {
-    --#{$namespace}-tag-bg-color: var(--#{$namespace}-fill-color-blank);
-    --#{$namespace}-tag-border-color: var(--#{$namespace}-color-primary-light-5);
-    --#{$namespace}-tag-hover-color: var(--#{$namespace}-color-primary);
-
-    @each $type in success, warning, error, danger, info {
-        &.#{$namespace}-tag--#{$type} {
-            --#{$namespace}-tag-bg-color: var(--#{$namespace}-fill-color-blank);
-            --#{$namespace}-tag-border-color: var(--#{$namespace}-color#{joinVarName(($type, 'light-5'))});
-            --#{$namespace}-tag-hover-color: var(--#{$namespace}-color#{joinVarName(($type, 'light-5'))});
-        }
-    }
-}
-
-@each $size in (large, default, small) {
-    .#{$namespace}-tag--#{$size} {
-        padding: 0 map.get($tag-padding, $size) - $tag-border-width;
-        height: map.get($tag-height, $size);
-
-        --#{$namespace}-icon-size: #{map.get($tag-icon-size, $size)};
-
-        .#{$namespace}-tag__close {
-            margin-left: map.get($tag-icon-span-gap, $size);
-        }
-
-        &.is-closable {
-            padding-right: map.get($tag-icon-span-gap, $size) - 1px;
-        }
-    }
-}
-
-.#{$namespace}-tag--small {
-    .#{$namespace}-icon-close {
-        transform: scale(0.8);
-    }
-}