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

package/dist/theme-chalk/input-number/index.scss

@@ -1,172 +0,0 @@
-@use '../common/var';
-
-@use 'sass:map';
-@use 'sass:math';
-
-$input-height: () !default;
-$input-height: map.merge(
-    (
-        'large': var(--#{$namespace}-component-size-large),
-        'default': 32px,
-        'small': var(--#{$namespace}-component-size-small),
-    ),
-    $input-height
-);
-
-.#{$namespace}-input-number {
-    --#{$namespace}-input-number-controls-height: 16px;
-    --el-input-inner-height: calc(var(--el-input-height, 32px) - 2px);
-
-    position: relative;
-    display: inline-flex;
-    width: 150px;
-    line-height: #{map.get($input-height, 'default')};
-    vertical-align: middle;
-
-    .#{$namespace}-input__wrapper {
-        padding-left: 42px;
-        padding-right: 42px;
-    }
-
-    .#{$namespace}-input__inner {
-        -webkit-appearance: none;
-        -moz-appearance: textfield;
-        text-align: center;
-        line-height: 1;
-    }
-
-    .#{$namespace}-input-number__increase,
-    .#{$namespace}-input-number__decrease {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: auto;
-
-        position: absolute;
-        z-index: 1;
-        top: 1px;
-        bottom: 1px;
-
-        width: 32px;
-        background: var(--#{$namespace}-fill-color-light);
-        color: var(--#{$namespace}-text-color-regular);
-        cursor: pointer;
-        font-size: 13px;
-        user-select: none;
-
-        &:hover {
-            color: var(--#{$namespace}-color-primary);
-
-            & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__wrapper {
-                box-shadow: 0 0 0 1px var(--#{$namespace}-input-focus-border-color) inset;
-            }
-        }
-
-        &.is-disabled {
-            color: var(--#{$namespace}-disabled-text-color);
-            cursor: not-allowed;
-            background-color: var(--#{$namespace}-disabled-bg-color);
-            border-color: var(--#{$namespace}-border-color-light);
-        }
-    }
-
-    .#{$namespace}-input-number__increase {
-        right: 1px;
-        border-radius: 0 4px 4px 0;
-        border-left: 1px solid var(--#{$namespace}-border-color);
-    }
-
-    .#{$namespace}-input-number__decrease {
-        left: 1px;
-        border-radius: 4px 0 0 4px;
-        border-right: 1px solid var(--#{$namespace}-border-color);
-    }
-
-    .is-disabled {
-        .#{$namespace}-input-number__increase,
-        .#{$namespace}-input-number__decrease {
-            border-color: var(--#{$namespace}-border-color-light);
-            color: var(--#{$namespace}-disabled-text-color);
-
-            &:hover {
-                color: var(--#{$namespace}-disabled-text-color);
-                cursor: not-allowed;
-            }
-        }
-    }
-
-    @each $size in (large, small) {
-        &.#{$namespace}-input-number--#{$size} {
-            line-height: #{map.get($input-height, $size) - 2};
-
-            .#{$namespace}-input-number__increase,
-            .#{$namespace}-input-number__decrease {
-                width: map.get($input-height, $size);
-                font-size: 14px;
-            }
-
-            .#{$namespace}-input__wrapper {
-                padding-left: #{map.get($input-height, $size) + 7};
-                padding-right: #{map.get($input-height, $size) + 7};
-            }
-        }
-    }
-
-    .#{$namespace}-input-number--small {
-        .#{$namespace}-input-number__increase,
-        .#{$namespace}-input-number__decrease {
-            [class*='#{$namespace}-icon'] {
-                transform: scale(0.9);
-            }
-        }
-    }
-
-    .is-without-controls {
-        .#{$namespace}-input__wrapper {
-            padding-left: 15px;
-            padding-right: 15px;
-        }
-    }
-
-    &.is-controls-right {
-        .#{$namespace}-input__wrapper {
-            padding-left: 15px;
-            padding-right: 42px;
-        }
-
-        .#{$namespace}-input-number__increase,
-        .#{$namespace}-input-number__decrease {
-            height: var(--#{$namespace}-input-number-controls-height);
-            line-height: var(--#{$namespace}-input-number-controls-height);
-
-            [class*='#{$namespace}-icon'] {
-                transform: scale(0.8);
-            }
-        }
-
-        .#{$namespace}-input-number__increase {
-            bottom: auto;
-            left: auto;
-            border-radius: 0 4px 0 0;
-            border-bottom: 1px solid var(--#{$namespace}-border-color);
-        }
-
-        .#{$namespace}-input-number__decrease {
-            right: 1px;
-            top: auto;
-            left: auto;
-            border-right: none;
-            border-left: 1px solid var(--#{$namespace}-border-color);
-            border-radius: 0 0 4px 0;
-        }
-
-        @each $size in (large, small) {
-            &[class*='#{$size}'] {
-                [class*='increase'],
-                [class*='decrease'] {
-                    --#{$namespace}-input-number-controls-height: #{calc(map.get($input-height, $size) / 2)};
-                }
-            }
-        }
-    }
-}

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

@@ -1,99 +0,0 @@
-@use '../common/var';
-.#{$namespace}-link {
-    --#{$namespace}-link-font-size: 14px;
-    --#{$namespace}-link-font-weight: 500;
-    --#{$namespace}-link-text-color: var(--#{$namespace}-text-color-regular, #555555);
-    --#{$namespace}-link-hover-text-color: var(--#{$namespace}-color-primary);
-    --#{$namespace}-link-disabled-text-color: var(--#{$namespace}-text-color-placeholder);
-}
-
-.#{$namespace}-link {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    position: relative;
-    text-decoration: none;
-    outline: none;
-    cursor: pointer;
-    padding: 0;
-    font-size: var(--#{$namespace}-link-font-size);
-    font-weight: var(--#{$namespace}-link-font-weight);
-
-    color: var(--#{$namespace}-link-text-color);
-
-    &:hover {
-        color: var(--#{$namespace}-link-hover-text-color);
-    }
-
-    &.is-underline {
-        &:hover:after {
-            content: '';
-            position: absolute;
-            left: 0;
-            right: 0;
-            height: 0;
-            bottom: 0;
-            border-bottom: 1px solid var(--#{$namespace}-link-hover-text-color);
-        }
-    }
-
-    &.is-disabled {
-        color: var(--#{$namespace}-link-disabled-text-color);
-        cursor: not-allowed;
-    }
-
-    & [class*='#{$namespace}-icon-'] {
-        & + span {
-            margin-left: 5px;
-        }
-    }
-
-    &.#{$namespace}-link--default {
-        &:after {
-            border-color: var(--#{$namespace}-link-hover-text-color);
-        }
-    }
-
-    .#{$namespace}-link__inner {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    @each $type in primary {
-        &.#{$namespace}-link--#{$type} {
-            --#{$namespace}-link-text-color: var(--#{$namespace}-color-primary);
-            --#{$namespace}-link-hover-text-color: var(--#{$namespace}-color-primary-light-3);
-            --#{$namespace}-link-disabled-text-color: var(--#{$namespace}-color-primary-light-5);
-
-            &:after {
-                border-color: var(--#{$namespace}-link-text-color);
-            }
-
-            &.is-underline {
-                &:hover:after {
-                    border-color: var(--#{$namespace}-link-text-color);
-                }
-            }
-        }
-    }
-    @each $type in success, warning, error, info {
-        &.#{$namespace}-link--#{$type} {
-            --#{$namespace}-link-text-color: var(--#{$namespace}-color-#{$type});
-            --#{$namespace}-link-hover-text-color: var(--#{$namespace}-color-#{$type}-light-3);
-            --#{$namespace}-link-disabled-text-color: var(--#{$namespace}-color-#{$type}-light-5);
-
-            &:after {
-                border-color: var(--#{$namespace}-link-text-color);
-            }
-
-            &.is-underline {
-                &:hover:after {
-                    border-color: var(--#{$namespace}-link-text-color);
-                }
-            }
-        }
-    }
-}

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

@@ -1,94 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-loading-parent--relative {
-    position: relative !important;
-}
-
-.#{$namespace}-loading-parent--hidden {
-    overflow: hidden !important;
-}
-
-.#{$namespace}-loading-mask {
-    position: absolute;
-    z-index: 2000;
-    background-color: rgba(0, 0, 0, 0.6);
-    margin: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transition: opacity 0.3s;
-
-    &.is-fullscreen {
-        position: fixed;
-
-        .#{$namespace}-loading-spinner {
-            margin-top: -21px;
-
-            .circular {
-                height: 50px;
-                width: 50px;
-            }
-        }
-    }
-}
-
-.#{$namespace}-loading-spinner {
-    top: 50%;
-    margin-top: -21px;
-    width: 100%;
-    text-align: center;
-    position: absolute;
-
-    .#{$namespace}-loading-text {
-        color: var(--#{$namespace}-color-primary);
-        margin: 3px 0;
-        font-size: 14px;
-    }
-
-    .circular {
-        display: inline;
-        height: 42px;
-        width: 42px;
-        animation: loading-rotate 2s linear infinite;
-    }
-
-    .path {
-        animation: loading-dash 1.5s ease-in-out infinite;
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: 0;
-        stroke-width: 2;
-        stroke: var(--#{$namespace}-color-primary);
-        stroke-linecap: round;
-    }
-
-    i {
-        color: var(--#{$namespace}-color-primary);
-    }
-}
-
-.#{$namespace}-loading-fade-enter-from,
-.#{$namespace}-loading-fade-leave-to {
-    opacity: 0;
-}
-
-@keyframes loading-rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes loading-dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -40px;
-    }
-    100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -120px;
-    }
-}

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

@@ -1,169 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-message {
-    --#{$namespace}-message-bg-color: var(--#{$namespace}-color-info-light-9);
-    --#{$namespace}-message-border-color: var(--#{$namespace}-border-color-lighter);
-    --#{$namespace}-message-close-icon-color: var(--#{$namespace}-text-color-placeholder);
-    --#{$namespace}-message-close-hover-color: var(--#{$namespace}-text-color-secondary);
-}
-
-.#{$namespace}-message {
-    min-width: 380px;
-    box-sizing: border-box;
-    border-radius: 4px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--#{$namespace}-message-border-color);
-    position: fixed;
-    left: 50%;
-    top: 20px;
-    transform: translateX(-50%);
-    background-color: var(--#{$namespace}-message-bg-color);
-    color: var(--#{$namespace}-message-text-color);
-    transition: opacity 0.3s, transform 0.4s, top 0.4s;
-    overflow: hidden;
-    padding: 15px 15px 15px 20px;
-    display: flex;
-    align-items: center;
-
-    &.is-center {
-        justify-content: center;
-    }
-
-    &.is-closable {
-        .#{$namespace}-message__content {
-            padding-right: 16px;
-        }
-    }
-
-    p {
-        margin: 0;
-    }
-
-    &--info {
-        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-info-light-9);
-        --#{$namespace}-message-border-color: var(--#{$namespace}-color-info-light-8);
-        --#{$namespace}-message-text-color: var(--#{$namespace}-color-info);
-
-        .#{$namespace}-message__content {
-            color: var(--#{$namespace}-message-text-color);
-        }
-    }
-
-    &--success {
-        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-success-light-9);
-        --#{$namespace}-message-border-color: var(--#{$namespace}-color-success-light-8);
-        --#{$namespace}-message-text-color: var(--#{$namespace}-color-success);
-
-        .#{$namespace}-message__content {
-            color: var(--#{$namespace}-message-text-color);
-        }
-    }
-
-    &--warning {
-        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-warning-light-9);
-        --#{$namespace}-message-border-color: var(--#{$namespace}-color-warning-light-8);
-        --#{$namespace}-message-text-color: var(--#{$namespace}-color-warning);
-
-        .#{$namespace}-message__content {
-            color: var(--#{$namespace}-message-text-color);
-        }
-    }
-
-    &--error {
-        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-error-light-9);
-        --#{$namespace}-message-border-color: var(--#{$namespace}-color-error-light-8);
-        --#{$namespace}-message-text-color: var(--#{$namespace}-color-error);
-
-        .#{$namespace}-message__content {
-            color: var(--#{$namespace}-message-text-color);
-        }
-    }
-
-    &__icon {
-        margin-right: 10px;
-    }
-
-    &__content {
-        padding: 0;
-        font-size: 14px;
-        line-height: 1;
-        &:focus {
-            outline-width: 0;
-        }
-    }
-
-    &__closeBtn {
-        position: absolute;
-        top: 50%;
-        right: 15px;
-        transform: translateY(-50%);
-        cursor: pointer;
-        color: var(--#{$namespace}-message-close-icon-color);
-        font-size: 16px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f00d';
-            font-weight: 400;
-        }
-
-        &:focus {
-            outline-width: 0;
-        }
-        &:hover {
-            color: var(--#{$namespace}-message-close-hover-color);
-        }
-    }
-
-    & .#{$namespace}-icon-success {
-        color: var(--#{$namespace}-message-text-color);
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f058';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    & .#{$namespace}-icon-error {
-        color: var(--#{$namespace}-message-text-color);
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f057';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    & .#{$namespace}-icon-info {
-        color: var(--#{$namespace}-message-text-color);
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f05a';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    & .#{$namespace}-icon-warning {
-        color: var(--#{$namespace}-message-text-color);
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f06a';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-}
-
-.#{$namespace}-fade-enter-from,
-.#{$namespace}-message-fade-enter-from,
-.#{$namespace}-message-fade-leave-active {
-    opacity: 0;
-    transform: translate(-50%, -100%) !important;
-}

package/dist/theme-chalk/message-box/index.scss

@@ -1,184 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-message-box {
-    --#{$namespace}-messagebox-title-color: var(--#{$namespace}-text-color-primary);
-    --#{$namespace}-messagebox-width: 420px;
-    --#{$namespace}-messagebox-border-radius: 4px;
-    --#{$namespace}-messagebox-box-shadow: var(--#{$namespace}-box-shadow);
-    --#{$namespace}-messagebox-font-size: var(--#{$namespace}-font-size-large);
-    --#{$namespace}-messagebox-content-font-size: var(--#{$namespace}-font-size-base);
-    --#{$namespace}-messagebox-content-color: var(--#{$namespace}-text-color-regular);
-    --#{$namespace}-messagebox-error-font-size: 12px;
-    --#{$namespace}-messagebox-padding-primary: 12px;
-    --#{$namespace}-messagebox-font-line-height: var(--#{$namespace}-font-line-height-primary);
-}
-
-.#{$namespace}-message-box {
-    display: inline-block;
-    position: relative;
-    max-width: var(--#{$namespace}-messagebox-width);
-    width: 100%;
-    padding: var(--#{$namespace}-messagebox-padding-primary);
-    vertical-align: middle;
-    background-color: var(--#{$namespace}-bg-color);
-    border-radius: var(--#{$namespace}-messagebox-border-radius);
-    font-size: var(--#{$namespace}-messagebox-font-size);
-    box-shadow: var(--#{$namespace}-messagebox-box-shadow);
-    text-align: left;
-    overflow: hidden;
-    backface-visibility: hidden;
-    box-sizing: border-box;
-    overflow-wrap: break-word;
-
-    &:focus {
-        outline: none !important;
-    }
-
-    &.is-draggable .#{$namespace}-message-box__header {
-        cursor: move;
-        -webkit-user-select: none;
-        user-select: none;
-    }
-}
-
-.#{$namespace}-message-box__header {
-    padding-bottom: var(--#{$namespace}-messagebox-padding-primary);
-
-    &.show-close {
-        padding-right: calc(var(--#{$namespace}-messagebox-padding-primary) + var(--#{$namespace}-message-close-size, 16px));
-    }
-}
-
-.#{$namespace}-message-box__title {
-    font-size: var(--#{$namespace}-messagebox-font-size);
-    line-height: var(--#{$namespace}-messagebox-font-line-height);
-    color: var(--#{$namespace}-messagebox-title-color);
-}
-
-.#{$namespace}-message-box__headerbtn {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0;
-    width: 40px;
-    height: 40px;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: var(--#{$namespace}-message-close-size, 16px);
-    cursor: pointer;
-
-    .#{$namespace}-message-box__close {
-        color: var(--#{$namespace}-color-info);
-        font-size: inherit;
-    }
-
-    &:focus .#{$namespace}-message-box__close,
-    &:hover .#{$namespace}-message-box__close {
-        color: var(--#{$namespace}-color-primary);
-    }
-}
-
-.#{$namespace}-message-box__body {
-    color: var(--#{$namespace}-messagebox-content-color);
-    font-size: var(--#{$namespace}-messagebox-content-font-size);
-}
-
-.#{$namespace}-message-box__container {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.#{$namespace}-message-box__input {
-    padding-top: 12px;
-
-    div.invalid > input {
-        border-color: var(--#{$namespace}-color-error);
-    }
-
-    div.invalid > input:focus {
-        border-color: var(--#{$namespace}-color-error);
-    }
-}
-
-.#{$namespace}-message-box__status {
-    font-size: 24px;
-
-    // &::before {
-    //     // 防止图标切割
-    //     padding-left: 1px;
-    // }
-
-    // &.#{$namespace}-icon {
-    //     // 防止 #{$namespace}-icon 的position样式覆盖
-    //     position: absolute;
-    // }
-
-    // & + .#{$namespace}-message-box__message {
-    //     padding-left: 36px;
-    //     padding-right: 12px;
-    //     word-break: break-word;
-    // }
-
-    @each $type in (success, info, warning, error) {
-        &.#{$namespace}-message-box-icon--#{$type} {
-            --#{$namespace}-messagebox-color: var(--#{$namespace}-color-#{$type});
-            color: var(--#{$namespace}-messagebox-color);
-        }
-    }
-}
-
-.#{$namespace}-message-box__message {
-    margin: 0;
-
-    & p {
-        margin: 0;
-        line-height: var(--#{$namespace}-messagebox-font-line-height);
-    }
-}
-
-.#{$namespace}-message-box__errormsg {
-    color: var(--#{$namespace}-color-error);
-    font-size: var(--#{$namespace}-messagebox-error-font-size);
-    line-height: var(--#{$namespace}-messagebox-font-line-height);
-}
-
-.#{$namespace}-message-box__footer {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: center;
-    padding-top: var(--#{$namespace}-messagebox-padding-primary);
-}
-
-.#{$namespace}-message-box--cente {
-    .#{$namespace}-message-box__title {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-    }
-
-    .#{$namespace}-message-box__status {
-        font-size: inherit;
-    }
-
-    .#{$namespace}-message-box__btns,
-    .#{$namespace}-message-box__container {
-        justify-content: center;
-    }
-}
-
-// .#{$namespace}-message-box__container {
-//     position: relative;
-// }
-
-// .#{$namespace}-message-box__message {
-//     margin: 0;
-
-//     & p {
-//         margin: 0;
-//         line-height: 24px;
-//     }
-// }