@qsxy/element-plus-react 1.0.0-next.11 → 1.0.0-next.13

package/dist/theme-chalk/radio/radio.scss

@@ -1,171 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-radio {
-    --#{$namespace}-radio-text-color: var(--#{$namespace}-text-color-regular);
-    --#{$namespace}-radio-input-height: 14px;
-    --#{$namespace}-radio-input-width: 14px;
-    --#{$namespace}-radio-input-bg-color: var(--#{$namespace}-fill-color-blank);
-    --#{$namespace}-radio-input-border-color: var(--#{$namespace}-border-color);
-    --#{$namespace}-radio-input-border-color-hover: var(--#{$namespace}-color-primary);
-}
-
-.#{$namespace}-radio {
-    box-sizing: border-box;
-    margin-right: 20px;
-    padding: 0;
-    color: var(--#{$namespace}-radio-text-color);
-    font-size: 14px;
-    font-variant: tabular-nums;
-    list-style: none;
-    font-feature-settings: 'tnum';
-    position: relative;
-    display: inline-flex;
-    align-items: baseline;
-    cursor: pointer;
-    // height: 32px;
-    line-height: 32px;
-
-    &.is-disabled {
-        cursor: not-allowed;
-
-        .#{$namespace}-radio__label {
-            cursor: not-allowed;
-        }
-    }
-
-    &::after {
-        display: inline-block;
-        width: 0;
-        overflow: hidden;
-        // content: "\a0";
-    }
-
-    &.is-checked > .#{$namespace}-radio__label {
-        color: var(--#{$namespace}-color-primary);
-    }
-
-    &.is-disabled > .#{$namespace}-radio__label {
-        color: var(--#{$namespace}-text-color-placeholder);
-    }
-
-    &.#{$namespace}-radio--large {
-        height: var(--#{$namespace}-component-size-large);
-
-        .#{$namespace}-radio__label {
-            line-height: var(--#{$namespace}-component-size-large);
-        }
-    }
-
-    &.#{$namespace}-radio--small {
-        height: var(--#{$namespace}-component-size-small);
-
-        .#{$namespace}-radio__label {
-            line-height: var(--#{$namespace}-component-size-small);
-        }
-    }
-}
-
-.#{$namespace}-radio__input {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-size: 14px;
-    font-variant: tabular-nums;
-    line-height: 1.5715;
-    list-style: none;
-    font-feature-settings: 'tnum';
-    position: relative;
-    top: 0.2em;
-    display: inline-block;
-    outline: none;
-    cursor: pointer;
-
-    &.is-checked {
-        &::after {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border: 1px solid var(--#{$namespace}-color-primary);
-            border-radius: 50%;
-            visibility: hidden;
-            -webkit-animation: antRadioEffect 0.36s ease-in-out;
-            animation: antRadioEffect 0.36s ease-in-out;
-            -webkit-animation-fill-mode: both;
-            animation-fill-mode: both;
-            content: '';
-        }
-
-        .#{$namespace}-radio__inner {
-            border-color: var(--#{$namespace}-color-primary);
-
-            &::after {
-                background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary));
-                transform: scale(0.5);
-                opacity: 1;
-                transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-            }
-        }
-    }
-
-    &.is-disabled {
-        .#{$namespace}-radio__inner {
-            background-color: var(--#{$namespace}-disabled-bg-color);
-            border-color: var(--#{$namespace}-disabled-border-color);
-            cursor: not-allowed;
-
-            &::after {
-                background: #c0c4cc;
-            }
-        }
-    }
-}
-.#{$namespace}-radio__inner {
-    position: relative;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 16px;
-    height: 16px;
-    background: var(--#{$namespace}-radio-input-bg-color);
-    border-color: var(--#{$namespace}-radio-input-border-color);
-    border-style: solid;
-    border-width: 1px;
-    border-radius: 50%;
-    transition: all 0.3s;
-
-    &::after {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: block;
-        width: 16px;
-        height: 16px;
-        margin-top: -8px;
-        margin-left: -8px;
-        border-top: 0;
-        border-left: 0;
-        border-radius: 16px;
-        transform: scale(0);
-        opacity: 0;
-        transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-        content: ' ';
-    }
-}
-.#{$namespace}-radio__label {
-    cursor: pointer;
-    user-select: none;
-    box-sizing: border-box;
-    list-style: none;
-    outline: none;
-    padding-left: 8px;
-    position: relative;
-    white-space: nowrap;
-    font-weight: normal;
-    transition: all 0.3s;
-}
-
-.#{$namespace}-radio__hidden {
-    display: none;
-}

package/dist/theme-chalk/radio-group/index.scss

@@ -1,31 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-radio-group {
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    font-size: 0;
-    // position: relative;
-    // min-height: 32px;
-    // flex-direction: column;
-    // align-items: flex-start;
-
-    // &.#{$namespace}-radio-group-inline {
-    //     flex-direction: row;
-    //     line-height: 32px;
-    // }
-
-    &.#{$namespace}-radio-group--large {
-        min-height: var(--#{$namespace}-component-size-large);
-        &.#{$namespace}-radio-group-inline {
-            line-height: var(--#{$namespace}-component-size-large);
-        }
-    }
-
-    &.#{$namespace}-radio-group--small {
-        min-height: var(--#{$namespace}-component-size-small);
-        &.#{$namespace}-radio-group-inline {
-            line-height: var(--#{$namespace}-component-size-small);
-        }
-    }
-}

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

@@ -1,30 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-row {
-    display: flex;
-    flex-wrap: wrap;
-    position: relative;
-    box-sizing: border-box;
-
-    &.is-justify-center {
-        justify-content: center;
-    }
-    &.is-justify-end {
-        justify-content: flex-end;
-    }
-    &.is-justify-space-between {
-        justify-content: space-between;
-    }
-    &.is-justify-space-around {
-        justify-content: space-around;
-    }
-    &.is-justify-space-evenly {
-        justify-content: space-evenly;
-    }
-    &.is-align-middle {
-        align-items: center;
-    }
-    &.is-align-bottom {
-        align-items: flex-end;
-    }
-}

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

@@ -1,103 +0,0 @@
-@use 'sass:map';
-@use '../common/var';
-
-.#{$namespace}-scrollbar {
-    --#{$namespace}-scrollbar-opacity: 0.3;
-    --#{$namespace}-scrollbar-bg-color: var(--#{$namespace}-text-color-secondary);
-    --#{$namespace}-scrollbar-hover-opacity: 0.5;
-    --#{$namespace}-scrollbar-hover-bg-color: var(--#{$namespace}-text-color-secondary);
-    --#{$namespace}-scrollbar-width: 6px;
-}
-
-.#{$namespace}-scrollbar {
-    overflow: hidden;
-    position: relative;
-    height: 100%;
-
-    &:hover,
-    &:active,
-    &:focus {
-        & > .#{$namespace}-scrollbar__bar {
-            opacity: 1;
-            transition: opacity 340ms ease-out;
-        }
-    }
-
-    &__wrap {
-        overflow: auto;
-        height: 100%;
-
-        &--hidden-default {
-            scrollbar-width: none;
-
-            &::-webkit-scrollbar {
-                display: none;
-            }
-        }
-    }
-
-    &__thumb {
-        position: relative;
-        display: block;
-        width: 0;
-        height: 0;
-        cursor: pointer;
-        border-radius: inherit;
-        background-color: var(--#{$namespace}-scrollbar-bg-color, var(--#{$namespace}-text-color-secondary));
-        transition: 0.3s background-color;
-        opacity: var(--#{$namespace}-scrollbar-opacity, 0.3);
-
-        &:hover,
-        &.is-hover {
-            background-color: var(--#{$namespace}-scrollbar-hover-bg-color, var(--#{$namespace}-text-color-secondary));
-            opacity: var(--#{$namespace}-scrollbar-hover-opacity, 0.5);
-        }
-    }
-
-    &__bar {
-        position: absolute;
-        right: 2px;
-        bottom: 2px;
-        z-index: 1;
-        border-radius: 4px;
-        opacity: 0;
-        transition: opacity 120ms ease-out;
-
-        &.is-vertical {
-            width: var(--#{$namespace}-scrollbar-width);
-            top: 2px;
-
-            & > div {
-                width: 100%;
-            }
-        }
-
-        &.is-horizontal {
-            height: var(--#{$namespace}-scrollbar-width);
-            left: 2px;
-
-            & > div {
-                height: 100%;
-            }
-        }
-
-        &.is-always {
-            opacity: 1;
-        }
-    }
-}
-
-.#{$namespace}-scrollbar-fade {
-    &-enter-active {
-        transition: opacity 340ms ease-out;
-    }
-
-    &-leave-active {
-        transition: opacity 120ms ease-out;
-    }
-
-    &-enter-from,
-    &-leave-from {
-        opacity: 0;
-    }
-}

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

@@ -1,244 +0,0 @@
-@use '../common/var';
-
-.#{$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;
-    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 {
-    line-height: var(--#{$namespace}-component-size-large);
-}
-
-.#{$namespace}-select--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/dist/theme-chalk/select/option-group.scss

@@ -1,54 +0,0 @@
-@use 'sass:map';
-
-@use '../../Common/styles/mixins/mixins' as *;
-@use '../../Common/styles/common/var' as *;
-
-@include b(select-group) {
-    $gap: 20px;
-
-    margin: 0;
-    padding: 0;
-
-    @include e(wrap) {
-        position: relative;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-
-        &:not(:last-of-type) {
-            padding-bottom: 24px;
-
-            &::after {
-                content: '';
-                position: absolute;
-                display: block;
-                left: $gap;
-                right: $gap;
-                bottom: 12px;
-                height: 1px;
-                background: getCssVar('border-color-light');
-            }
-        }
-    }
-
-    @include e(split) {
-        &-dash {
-            position: absolute;
-            left: $gap;
-            right: $gap;
-            height: 1px;
-            background: getCssVar('border-color-light');
-        }
-    }
-
-    @include e(title) {
-        padding-left: $gap;
-        font-size: map.get($select-group, 'font-size');
-        color: map.get($select-group, 'text-color');
-        line-height: map.get($select-group, 'height');
-    }
-
-    & .#{$namespace}-select-dropdown__item {
-        padding-left: $gap;
-    }
-}

package/dist/theme-chalk/select/option.scss

@@ -1,63 +0,0 @@
-@use 'sass:map';
-
-@use '../../Common/styles/mixins/mixins' as *;
-@use '../../Common/styles/common/var' as *;
-
-$checked-icon: "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";
-
-@mixin checked-icon {
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    border-top: none;
-    border-right: none;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-color: map.get($select-option, 'selected-text-color');
-    mask: url('#{$checked-icon}') no-repeat;
-    mask-size: 100% 100%;
-    -webkit-mask: url('#{$checked-icon}') no-repeat;
-    -webkit-mask-size: 100% 100%;
-    transform: translateY(-50%);
-    width: 16px;
-    height: 16px;
-}
-
-@include b(select-dropdown) {
-    @include e(item) {
-        font-size: map.get($select, 'font-size');
-        // 20 as the padding of option item, 12 as the size of ✓ icon size
-        padding: 0 #{20 + 12}px 0 20px;
-        position: relative;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: map.get($select-option, 'text-color');
-        height: map.get($select-option, 'height');
-        line-height: map.get($select-option, 'height');
-        box-sizing: border-box;
-        cursor: pointer;
-
-        @include when(hovering) {
-            background-color: map.get($select-option, 'hover-background');
-        }
-
-        @include when(selected) {
-            color: map.get($select-option, 'selected-text-color');
-            font-weight: bold;
-        }
-
-        @include when(disabled) {
-            color: map.get($select-option, 'disabled-color');
-            cursor: not-allowed;
-            background-color: unset;
-        }
-    }
-}
-
-.el-select-dorpdown {
-    &.is-multiple .el-select-dropdown__item.is-selected:after {
-        @include checked-icon();
-    }
-}