@qsxy/element-plus-react 1.0.0-next.12 → 1.0.0-next.15

package/dist/theme-chalk/tag/index.scss

@@ -1,360 +0,0 @@
-// @use 'sass:map';
-
-// @use '../../Common/styles/mixins/mixins' as *;
-// @use '../../Common/styles/mixins/var' as *;
-// @use '../../Common/styles/common/var' as *;
-
-// @include b(tag) {
-//     @include set-component-css-var('tag', $tag);
-// }
-
-// $tag-border-width: 1px;
-
-// $tag-icon-span-gap: () !default;
-// $tag-icon-span-gap: map.merge(
-//     (
-//         'large': 8px,
-//         'default': 6px,
-//         'small': 4px,
-//     ),
-//     $tag-icon-span-gap
-// );
-
-// @function returnVarList($var, $type: 'primary') {
-//     $list: ('fill-color', 'blank');
-//     @if $var != false {
-//         $list: ('color', $type, $var);
-//     }
-//     @return $list;
-// }
-// // false mean --#{$namespace}-color-white
-// @mixin genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight) {
-//     @include css-var-from-global(('tag', 'bg-color'), returnVarList($backgroundColorWeight));
-//     @include css-var-from-global(('tag', 'border-color'), returnVarList($borderColorWeight));
-//     @include css-var-from-global(('tag', 'hover-color'), returnVarList($hoverColorWeight));
-
-//     @each $type in $types {
-//         &.#{bem('tag', '', $type)} {
-//             @include css-var-from-global(('tag', 'bg-color'), returnVarList($backgroundColorWeight, $type));
-//             @include css-var-from-global(('tag', 'border-color'), returnVarList($borderColorWeight, $type));
-//             @include css-var-from-global(('tag', 'hover-color'), returnVarList($hoverColorWeight, $type));
-//         }
-//     }
-// }
-
-// @include b(tag) {
-//     @include genTheme('light-9', 'light-8', '');
-
-//     @each $type in $types {
-//         &.#{bem('tag', '', $type)} {
-//             @include css-var-from-global(('tag', 'text-color'), ('color', $type));
-//         }
-//     }
-
-//     @include when(hit) {
-//         border-color: getCssVar('color', 'primary');
-//     }
-//     @include when(round) {
-//         border-radius: getCssVar('tag', 'border-radius-rounded');
-//     }
-
-//     .#{$namespace}-tag__close {
-//         flex-shrink: 0;
-//         color: getCssVar('tag', 'text-color');
-//         &:hover {
-//             color: getCssVar('color-white');
-//             background-color: getCssVar('tag-hover-color');
-//         }
-//     }
-
-//     background-color: getCssVar('tag-bg-color');
-//     border-color: getCssVar('tag-border-color');
-//     color: getCssVar('tag-text-color');
-
-//     display: inline-flex;
-//     justify-content: center;
-//     align-items: center;
-//     vertical-align: middle;
-//     height: map.get($tag-height, 'default');
-//     padding: 0 map.get($tag-padding, 'default') - $border-width;
-
-//     font-size: getCssVar('tag-font-size');
-//     line-height: 1;
-//     border-width: $tag-border-width;
-//     border-style: solid;
-//     border-radius: getCssVar('tag-border-radius');
-//     box-sizing: border-box;
-//     white-space: nowrap;
-
-//     @include set-css-var-value('icon-size', 14px);
-
-//     $svg-margin-size: 1px;
-//     .#{$namespace}-icon {
-//         border-radius: 50%;
-//         cursor: pointer;
-
-//         font-size: calc(#{getCssVar('icon-size')} - #{$svg-margin-size * 2});
-//         height: getCssVar('icon-size');
-//         width: getCssVar('icon-size');
-//     }
-
-//     .#{$namespace}-tag__close {
-//         margin-left: map.get($tag-icon-span-gap, 'default');
-//     }
-
-//     @include m(dark) {
-//         @include genTheme('', '', 'light-3');
-//         @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
-
-//         @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
-//         @each $type in $types {
-//             &.#{bem('tag', '', $type)} {
-//                 @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
-//             }
-//         }
-//     }
-
-//     @include m(plain) {
-//         @include genTheme(false, 'light-5', '');
-//         @include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
-//     }
-
-//     &.is-closable {
-//         padding-right: map.get($tag-icon-span-gap, 'default') - $border-width;
-//     }
-
-//     @each $size in (large, small) {
-//         @include m($size) {
-//             padding: 0 map.get($tag-padding, $size) - $tag-border-width;
-//             height: map.get($tag-height, $size);
-
-//             @include set-css-var-value('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) - $border-width;
-//             }
-//         }
-//     }
-
-//     @include m(small) {
-//         .#{$namespace}-icon-close {
-//             transform: scale(0.8);
-//         }
-//     }
-
-//     @each $type in $types {
-//         &.#{bem('tag', '', $type)} {
-//             @include when(hit) {
-//                 border-color: getCssVar('color', $type);
-//             }
-//         }
-//     }
-// }
-
-@use 'sass:map';
-@use '../common/var';
-
-@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, 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, 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, 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, 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, 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/dist/theme-chalk/time-line/_timeline-item.scss

@@ -1,90 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-timeline-item {
-    position: relative;
-    padding-bottom: 20px;
-
-    & .#{$namespace}-timeline-item__icon {
-        color: var(--#{$namespace}-color-white);
-        font-size: var(--#{$namespace}-timeline-content-font-size-small);
-    }
-}
-
-.#{$namespace}-timeline-item__wrapper {
-    position: relative;
-    padding-left: 28px;
-    top: -3px;
-}
-
-.#{$namespace}-timeline-item__tail {
-    position: absolute;
-    left: 4px;
-    height: 100%;
-    border-left: 2px solid var(--#{$namespace}-timeline-node-color);
-}
-
-.#{$namespace}-timeline-item__node {
-    position: absolute;
-    background-color: var(--#{$namespace}-timeline-node-color);
-    border-color: var(--#{$namespace}-timeline-node-color);
-    border-radius: 50%;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.is-hollow {
-        background: var(--#{$namespace}-color-white);
-        border-style: solid;
-        border-width: 2px;
-    }
-}
-
-.#{$namespace}-timeline-item__node--normal {
-    left: -1px;
-    width: var(--#{$namespace}-timeline-node-size-normal);
-    height: var(--#{$namespace}-timeline-node-size-normal);
-}
-.#{$namespace}-timeline-item__node--large {
-    left: -2px;
-    width: var(--#{$namespace}-timeline-node-size-large);
-    height: var(--#{$namespace}-timeline-node-size-large);
-}
-
-.#{$namespace}-timeline-item__node--primary {
-    background-color: var(--#{$namespace}-color-primary);
-    border-color: var(--#{$namespace}-color-primary);
-}
-
-@each $type in (success, warning, danger, info) {
-    .#{$namespace}-timeline-item__node--#{$type} {
-        background-color: var(--#{$namespace}-color-#{$type});
-        border-color: var(--#{$namespace}-color#{$type});
-    }
-}
-
-.#{$namespace}-timeline-item__dot {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.#{$namespace}-timeline-item__content {
-    color: var(--#{$namespace}-timeline-content-color);
-    font-size: var(--#{$namespace}-timeline-content-font-size-large);
-}
-
-.#{$namespace}-timeline-item__timestamp {
-    color: var(--#{$namespace}-timeline-timestamp-color);
-    line-height: 1;
-    font-size: var(--#{$namespace}-timeline-content-font-size-small);
-
-    &.is-top {
-        margin-bottom: 8px;
-        padding-top: 4px;
-    }
-    &.is-bottom {
-        margin-top: 8px;
-    }
-}

package/dist/theme-chalk/time-line/_timeline.scss

@@ -1,50 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-timeline {
-    --#{$namespace}-timeline-node-size-normal: 12px;
-    --#{$namespace}-timeline-node-size-large: 14px;
-    --#{$namespace}-timeline-timestamp-color: var(--#{$namespace}-text-color-secondary);
-    --#{$namespace}-timeline-content-color: var(--#{$namespace}-text-color-primary);
-    --#{$namespace}-timeline-content-font-size-small: 13px;
-    --#{$namespace}-timeline-content-font-size-large: 14px;
-    --#{$namespace}-timeline-node-color: var(--#{$namespace}-border-color-light);
-}
-
-.#{$namespace}-timeline {
-    margin: 0;
-    font-size: 14px;
-    list-style: none;
-
-    .#{$namespace}-timeline-item:last-child {
-        .#{$namespace}-timeline-item__tail {
-            display: none;
-        }
-    }
-
-    .#{$namespace}-timeline-item__center {
-        display: flex;
-        align-items: center;
-
-        .#{$namespace}-timeline-item__wrapper {
-            width: 100%;
-        }
-
-        .#{$namespace}-timeline-item__tail {
-            top: 0;
-        }
-    }
-
-    .#{$namespace}-timeline-item__center:first-child {
-        .#{$namespace}-timeline-item__tail {
-            height: calc(50% + 10px);
-            top: calc(50% - 10px);
-        }
-    }
-
-    .#{$namespace}-timeline-item__center:last-child {
-        .#{$namespace}-timeline-item__tail {
-            display: block;
-            height: calc(50% - 10px);
-        }
-    }
-}

package/dist/theme-chalk/time-line/index.scss

@@ -1,2 +0,0 @@
-@import './timeline';
-@import './timeline-item';

package/dist/theme-chalk/time-picker/index.scss

@@ -1,109 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-time-spinner {
-    &.has-seconds {
-        .#{$namespace}-time-spinner__wrapper {
-            width: 33.3%;
-        }
-    }
-}
-.#{$namespace}-time-spinner__wrapper {
-    max-height: 192px;
-    overflow: auto;
-    display: inline-block;
-    width: 50%;
-    vertical-align: top;
-    position: relative;
-
-    .#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
-        padding-bottom: 15px;
-    }
-
-    // &.is-arrow {
-    //     box-sizing: border-box;
-    //     text-align: center;
-    //     overflow: hidden;
-
-    //     .#{$namespace}-time-spinner__list {
-    //         transform: translateY(-32px);
-    //     }
-
-    //     .#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
-    //         background: #ffffff;
-    //         cursor: default;
-    //     }
-    // }
-}
-
-// .#{$namespace}-time-spinner__arrow {
-//     font-size: 12px;
-//     color: #909399;
-//     position: absolute;
-//     left: 0;
-//     width: 100%;
-//     z-index: 1;
-//     text-align: center;
-//     height: 30px;
-//     line-height: 30px;
-//     cursor: pointer;
-
-//     &:hover {
-//         color: var(--#{$namespace}-color-primary);
-//     }
-
-//     &.arrow-up {
-//         top: 10px;
-//     }
-
-//     &.arrow-down {
-//         bottom: 10px;
-//     }
-// }
-
-.#{$namespace}-time-spinner__input {
-    &.#{$namespace}-input {
-        width: 70%;
-
-        .#{$namespace}-input__inner {
-            padding: 0;
-            text-align: center;
-        }
-    }
-}
-
-.#{$namespace}-time-spinner__list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    text-align: center;
-
-    &::after,
-    &::before {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 80px;
-    }
-}
-
-.#{$namespace}-time-spinner__item {
-    height: 32px;
-    line-height: 32px;
-    font-size: 12px;
-    color: var(--#{$namespace}-text-color-regular);
-
-    &:hover:not(.is-disabled):not(.is-active) {
-        background: var(--#{$namespace}-fill-color-light);
-        cursor: pointer;
-    }
-
-    &.is-active:not(.is-disabled) {
-        color: var(--#{$namespace}-text-color-primary);
-        font-weight: bold;
-    }
-
-    &.is-disabled {
-        color: var(--#{$namespace}-text-color-placeholder);
-        cursor: not-allowed;
-    }
-}

package/dist/theme-chalk/tooltip/index.scss

@@ -1,13 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-tooltip__popper {
-    position: absolute;
-    border-radius: 4px;
-    padding: 10px;
-    z-index: 2000;
-    font-size: 12px;
-    line-height: 1.2;
-    min-width: 10px;
-    word-wrap: break-word;
-    cursor: text !important;
-}