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

package/theme-chalk/radio/radio.scss

@@ -0,0 +1,171 @@
+@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/theme-chalk/radio-group/index.scss

@@ -0,0 +1,31 @@
+@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/theme-chalk/row/index.scss

@@ -0,0 +1,30 @@
+@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/theme-chalk/scrollbar/index.scss

@@ -0,0 +1,103 @@
+@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/theme-chalk/select/index.scss

@@ -0,0 +1,244 @@
+@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/theme-chalk/select/option-group.scss

@@ -0,0 +1,54 @@
+@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/theme-chalk/select/option.scss

@@ -0,0 +1,63 @@
+@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();
+    }
+}