@qsxy/element-plus-react 1.0.2 → 2.0.0

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);
-    }
-}

package/theme-chalk/tree/_directory.scss

@@ -1,73 +0,0 @@
-@use '../mixins/config' as *;
-
-.#{$namespace}-tree.#{$namespace}-tree-directory {
-    // ================== TreeNode ==================
-    .#{$namespace}-tree-treenode {
-        position: relative;
-
-        // Hover color
-        &::before {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 4px;
-            left: 0;
-            transition: background-color 0.3s;
-            content: '';
-            pointer-events: none;
-        }
-
-        &:hover {
-            background: var(--#{$namespace}-tree-node-hover-bg-color);
-        }
-
-        // Elements
-        > * {
-            z-index: 1;
-        }
-
-        // >>> Switcher
-        .#{$namespace}-tree-switcher {
-            transition: color 0.3s;
-        }
-
-        // >>> Title
-        .#{$namespace}-tree-node-content-wrapper {
-            border-radius: 0;
-            user-select: none;
-            white-space: nowrap;
-
-            &:hover {
-                background: transparent;
-            }
-
-            &.#{$namespace}-tree-node-selected {
-                color: var(--#{$namespace}-tree-text-color);
-                background: transparent;
-            }
-        }
-
-        // ============= Selected =============
-        &-selected {
-            &:hover,
-            & {
-                background: var(--#{$namespace}-tree-node-hover-bg-color);
-            }
-
-            // >>> Switcher
-            // .#{$namespace}-tree-switcher {
-            //     color: #fff;
-
-            //     .#{$namespace}-tree-switcher-icon {
-            //         color: #fff;
-            //     }
-            // }
-
-            // >>> Title
-            .#{$namespace}-tree-node-content-wrapper {
-                color: var(--#{$namespace}-tree-text-color);
-                background: transparent;
-            }
-        }
-    }
-}