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

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

@@ -1,155 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-notification {
-    --#{$namespace}-notification-shadow: var(--#{$namespace}-box-shadow-light);
-    --#{$namespace}-notification-border-color: var(--#{$namespace}-border-color);
-    --#{$namespace}-notification-content-font-size: var(--#{$namespace}-font-size-base);
-    --#{$namespace}-notification-content-color: var(--#{$namespace}-text-color-regular);
-    --#{$namespace}-notification-title-color: var(--#{$namespace}-text-color-primary);
-    --#{$namespace}-notification-close-color: var(--#{$namespace}-text-color-secondary);
-    --#{$namespace}-notification-close-hover-color: var(--#{$namespace}-text-color-regular);
-}
-
-.#{$namespace}-notification {
-    display: flex;
-    width: 330px;
-    padding: 14px 26px 14px 13px;
-    border-radius: 8px;
-    box-sizing: border-box;
-    border: 1px solid var(--#{$namespace}-notification-border-color);
-    position: fixed;
-    background-color: var(--#{$namespace}-bg-color-overlay);
-    box-shadow: var(--#{$namespace}-notification-shadow);
-    transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
-    overflow-wrap: anywhere;
-    overflow: hidden;
-    z-index: 9999;
-
-    &.right {
-        right: 16px;
-    }
-
-    &.left {
-        left: 16px;
-    }
-
-    &__group {
-        margin-left: 13px;
-        margin-right: 8px;
-    }
-
-    &__title {
-        font-weight: bold;
-        font-size: 16px;
-        line-height: 24px;
-        color: var(--#{$namespace}-notification-title-color);
-        margin: 0;
-    }
-
-    &__content {
-        font-size: var(--#{$namespace}-notification-content-font-size);
-        line-height: 24px;
-        margin: 6px 0 0 0;
-        color: var(--#{$namespace}-notification-content-color);
-        text-align: justify;
-
-        p {
-            margin: 0;
-        }
-    }
-
-    &__icon {
-        height: 24px;
-        width: 24px;
-        font-size: 24px;
-    }
-
-    &__closeBtn {
-        position: absolute;
-        top: 18px;
-        right: 15px;
-        cursor: pointer;
-        color: var(--#{$namespace}-notification-close-color);
-        font-size: 16px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f00d';
-            font-weight: 400;
-        }
-
-        &:hover {
-            color: var(--#{$namespace}-notification-close-hover-color);
-        }
-    }
-
-    .#{$namespace}-icon-success {
-        --#{$namespace}-notification-icon-color: var(--#{$namespace}-color-success);
-        color: var(--#{$namespace}-notification-icon-color);
-        margin-top: -4px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f058';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    .#{$namespace}-icon-error {
-        --#{$namespace}-notification-icon-color: var(--#{$namespace}-color-error);
-        color: var(--#{$namespace}-notification-icon-color);
-        margin-top: -4px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f057';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    .#{$namespace}-icon-info {
-        --#{$namespace}-notification-icon-color: var(--#{$namespace}-color-info);
-        color: var(--#{$namespace}-notification-icon-color);
-        margin-top: -4px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f05a';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-
-    .#{$namespace}-icon-warning {
-        --#{$namespace}-notification-icon-color: var(--#{$namespace}-color-warning);
-        color: var(--#{$namespace}-notification-icon-color);
-        margin-top: -4px;
-
-        &::before {
-            font-family: $fa-font-family;
-            content: '\f06a';
-            font-style: normal;
-            font-weight: bold;
-        }
-    }
-}
-
-.#{$namespace}-notification-fade-enter-from {
-    opacity: 0;
-
-    &.right {
-        right: 0;
-        transform: translateX(100%);
-    }
-
-    &.left {
-        left: 0;
-        transform: translateX(-100%);
-    }
-}
-
-.#{$namespace}-notification-fade-leave-to {
-    opacity: 0;
-}

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

@@ -1,515 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-pagination {
-    --#{$namespace}-pagination-bg-color: var(--#{$namespace}-fill-color-blank);
-    --#{$namespace}-pagination-text-color: var(--#{$namespace}-text-color-primary);
-    --#{$namespace}-pagination-border-radius: 3px;
-    --#{$namespace}-pagination-button-color: var(--#{$namespace}-text-color-primary);
-    --#{$namespace}-pagination-button-width: 32px;
-    --#{$namespace}-pagination-button-height: 32px;
-    --#{$namespace}-pagination-button-disabled-color: var(--#{$namespace}-text-color-placeholder);
-    --#{$namespace}-pagination-button-disabled-bg-color: var(--#{$namespace}-disabled-bg-color);
-    --#{$namespace}-pagination-button-bg-color: var(--#{$namespace}-fill-color);
-    --#{$namespace}-pagination-hover-color: var(--#{$namespace}-color-primary);
-    --#{$namespace}-pagination-height-extra-small: 24px;
-    --#{$namespace}-pagination-line-height-extra-small: var(--#{$namespace}-pagination-height-extra-small);
-    --#{$namespace}-input-hover-border-color: var(--#{$namespace}-border-color-hover);
-    --#{$namespace}-input-border-color: var(--#{$namespace}-border-color);
-    --#{$namespace}-input-bg-color: var(--#{$namespace}-fill-color-blank);
-    --#{$namespace}-input-text-color: var(--#{$namespace}-text-color-regular);
-    color: var(--#{$namespace}-pagination-text-color);
-    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';
-
-    ul,
-    ol {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-
-    &::after {
-        display: block;
-        clear: both;
-        height: 0;
-        overflow: hidden;
-        visibility: hidden;
-        content: ' ';
-    }
-
-    &-total-text {
-        display: inline-block;
-        height: 32px;
-        margin-right: 8px;
-        line-height: 32px - 2px;
-        vertical-align: middle;
-    }
-
-    &-item {
-        background-color: var(--#{$namespace}-pagination-bg-color);
-        display: inline-block;
-        min-width: 32px;
-        height: 32px;
-        margin-right: 8px;
-        font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol,
-            noto color emoji;
-        line-height: 32px - 2px;
-        text-align: center;
-        vertical-align: middle;
-        list-style: none;
-        border: 1px solid;
-        border-color: var(--#{$namespace}-border-color);
-        border-radius: 2px;
-        outline: 0;
-        cursor: pointer;
-        user-select: none;
-
-        a {
-            color: var(--#{$namespace}-text-color-regular);
-            display: block;
-            padding: 0 6px;
-            transition: none;
-
-            &:hover {
-                text-decoration: none;
-            }
-        }
-
-        &:focus-visible,
-        &:hover {
-            border-color: var(--btn-border-color);
-            transition: all 0.3s;
-
-            a {
-                color: var(--#{$namespace}-color-primary);
-            }
-        }
-
-        &-active {
-            font-weight: 500;
-            background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary));
-            border-color: var(--btn-border-color);
-
-            a {
-                color: #ffffff;
-            }
-
-            &:focus-visible,
-            &:hover {
-                border-color: var(--btn-border-color);
-            }
-
-            &:focus-visible a,
-            &:hover a {
-                color: #ffffff;
-            }
-        }
-    }
-
-    &-jump-prev,
-    &-jump-next {
-        outline: 0;
-
-        .#{$namespace}-pagination-item-container {
-            position: relative;
-
-            .#{$namespace}-pagination-item-link-icon {
-                color: var(--#{$namespace}-color-primary);
-                font-size: 12px;
-                letter-spacing: -1px;
-                opacity: 0;
-                transition: all 0.2s;
-
-                &-svg {
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    margin: auto;
-                }
-            }
-
-            .#{$namespace}-pagination-item-ellipsis {
-                color: #c0c4cc;
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                display: block;
-                margin: auto;
-                font-family: Arial, Helvetica, sans-serif;
-                letter-spacing: 2px;
-                text-align: center;
-                text-indent: 0.13em;
-                opacity: 1;
-                transition: all 0.2s;
-            }
-        }
-
-        &:focus-visible,
-        &:hover {
-            .#{$namespace}-pagination-item-link-icon {
-                opacity: 1;
-                color: var(--#{$namespace}-color-primary);
-            }
-            .#{$namespace}-pagination-item-ellipsis {
-                opacity: 0;
-            }
-        }
-    }
-
-    &-prev,
-    &-jump-prev,
-    &-jump-next {
-        margin-right: 8px;
-    }
-
-    &-prev,
-    &-next,
-    &-jump-prev,
-    &-jump-next {
-        color: var(--#{$namespace}-text-color-regular);
-        display: inline-block;
-        min-width: 32px;
-        height: 32px;
-        font-family: $fa-font-family;
-        line-height: 32px;
-        text-align: center;
-        vertical-align: middle;
-        list-style: none;
-        border-radius: 2px;
-        cursor: pointer;
-        transition: all 0.3s;
-    }
-
-    &-prev,
-    &-next {
-        font-family: Arial, Helvetica, sans-serif;
-        outline: 0;
-
-        button {
-            color: var(--#{$namespace}-text-color-regular);
-            cursor: pointer;
-            user-select: none;
-        }
-
-        &:hover button {
-            border-color: var(--#{$namespace}-color-primary);
-        }
-
-        .#{$namespace}-pagination-item-link {
-            background-color: var(--#{$namespace}-pagination-bg-color);
-            display: block;
-            width: 100%;
-            height: 100%;
-            padding: 0;
-            font-size: 12px;
-            text-align: center;
-            border: 1px solid;
-            border-color: var(--#{$namespace}-border-color);
-            border-radius: 2px;
-            outline: none;
-            transition: all 0.3s;
-
-            i {
-                font-size: 20px;
-            }
-        }
-
-        &:focus-visible .#{$namespace}-pagination-item-link,
-        &:hover .#{$namespace}-pagination-item-link {
-            color: var(--#{$namespace}-color-primary);
-            border-color: var(--#{$namespace}-color-primary);
-        }
-    }
-
-    // &-prev button:after {
-    //     content: '‹';
-    //     display: block;
-    // }
-
-    // &-next button:after {
-    //     content: '›';
-    //     display: block;
-    // }
-
-    &-disabled {
-        &,
-        &:hover,
-        &:focus-visible {
-            cursor: not-allowed;
-
-            .#{$namespace}-pagination-item-link {
-                color: var(--#{$namespace}-pagination-button-disabled-color);
-                border-color: var(--#{$namespace}-border-color-light);
-                cursor: not-allowed;
-                background: var(--#{$namespace}-pagination-button-disabled-bg-color);
-            }
-        }
-    }
-
-    &-slash {
-        margin: 0 10px 0 5px;
-    }
-
-    &-options {
-        display: inline-block;
-        margin-left: 16px;
-        vertical-align: middle;
-
-        // IE11 css hack. `*::-ms-backdrop,` is a must have
-        @media all and (-ms-high-contrast: none) {
-            *::-ms-backdrop,
-            & {
-                vertical-align: top;
-            }
-        }
-
-        &-size-changer.#{$namespace}-select {
-            display: inline-block;
-            width: 110px;
-        }
-
-        &-quick-jumper {
-            display: inline-block;
-            height: 28px;
-            margin-left: 8px;
-            line-height: 28px;
-            vertical-align: top;
-
-            input {
-                width: 50px;
-                height: 28px;
-                margin: 0 8px;
-                font-family: 'PingFang-SC-Regular', 'PingFang SC', sans-serif;
-                background-color: var(--#{$namespace}-input-bg-color, var(--#{$namespace}-fill-color-blank));
-                background-image: none;
-                border-radius: 4px;
-                box-sizing: border-box;
-                color: var(--#{$namespace}-input-text-color, var(--#{$namespace}-text-color-regular));
-                display: inline-block;
-                height: 32px;
-                line-height: 32px;
-                font-size: inherit;
-                outline: none;
-                padding: 0 10px;
-                transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-                box-shadow: 0 0 0 1px var(--#{$namespace}-input-border-color, var(--#{$namespace}-border-color)) inset;
-                border: none;
-
-                &:hover {
-                    box-shadow: 0 0 0 1px var(--#{$namespace}-input-hover-border-color) inset;
-                }
-
-                &:focus {
-                    outline: none;
-                    box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
-                }
-
-                &:disabled {
-                    color: var(--#{$namespace}-disabled-text-color);
-                    background: var(--#{$namespace}-disabled-bg-color);
-                    box-shadow: 0 0 0 1px var(--#{$namespace}-border-color-light) inset;
-                    cursor: not-allowed;
-                }
-            }
-        }
-    }
-
-    &-simple &-prev,
-    &-simple &-next {
-        height: 24px;
-        line-height: 24px;
-        vertical-align: top;
-
-        .#{$namespace}-pagination-item-link {
-            height: 24px;
-            line-height: 24px;
-            background-color: transparent;
-            border: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            &::after {
-                height: 24px;
-                line-height: 24px;
-            }
-        }
-    }
-
-    &-simple {
-        .#{$namespace}-pagination-simple-pager {
-            display: inline-block;
-            height: 24px;
-            margin-right: 8px;
-
-            input {
-                background-color: var(--#{$namespace}-input-bg-color, var(--#{$namespace}-fill-color-blank));
-                box-sizing: border-box;
-                height: 100%;
-                margin-right: 8px;
-                padding: 0 6px;
-                text-align: center;
-                border: 1px solid;
-                border-color: var(--#{$namespace}-input-border-color, var(--#{$namespace}-border-color));
-                border-radius: 2px;
-                outline: none;
-                transition: border-color 0.3s;
-
-                &:hover {
-                    border-color: var(--#{$namespace}-color-primary);
-                }
-
-                &:focus {
-                    border-color: var(--#{$namespace}-color-primary);
-                    // box-shadow: 0 0 0 2px var(--#{$namespace}-color-primary);
-                }
-
-                &[disabled] {
-                    color: var(--#{$namespace}-disabled-text-color);
-                    background: var(--#{$namespace}-disabled-bg-color);
-                    border-color: var(--#{$namespace}-border-color-light);
-                    cursor: not-allowed;
-                }
-            }
-        }
-    }
-
-    &.mini &-total-text,
-    &.mini &-simple-pager {
-        height: 24px;
-        line-height: 24px;
-    }
-
-    &.mini &-item {
-        min-width: 24px;
-        height: 24px;
-        margin: 0;
-        line-height: 24px - 2px;
-    }
-
-    &.mini &-item:not(&-item-active) {
-        background: transparent;
-        border-color: transparent;
-    }
-
-    &.mini &-prev,
-    &.mini &-next {
-        min-width: 24px;
-        height: 24px;
-        margin: 0;
-        line-height: 24px;
-    }
-
-    &.mini &-prev &-item-link,
-    &.mini &-next &-item-link {
-        background: transparent;
-        border-color: transparent;
-
-        &::after {
-            height: 24px;
-            line-height: 24px;
-        }
-    }
-
-    &.mini &-jump-prev,
-    &.mini &-jump-next {
-        height: 24px;
-        margin-right: 0;
-        line-height: 24px;
-    }
-
-    &.mini &-options {
-        margin-left: 2px;
-
-        &-size-changer {
-            top: 0px;
-        }
-
-        &-quick-jumper {
-            height: 24px;
-            line-height: 24px;
-
-            input {
-                // .input-small();
-
-                width: 44px;
-                height: 24px;
-            }
-        }
-    }
-
-    // ============================ Disabled ============================
-    &.#{$namespace}-pagination-disabled {
-        cursor: not-allowed;
-
-        .#{$namespace}-pagination-item {
-            background: var(--#{$namespace}-disabled-bg-color);
-            border-color: var(--#{$namespace}-border-color-light);
-            cursor: not-allowed;
-
-            a {
-                background: transparent;
-                color: var(--#{$namespace}-disabled-text-color);
-                border: none;
-                cursor: not-allowed;
-            }
-
-            &-active {
-                background: var(--#{$namespace}-bg-color-primary, var(--#{$namespace}-color-primary));
-                border-color: var(--#{$namespace}-border-color-light);
-                opacity: 0.5;
-
-                a {
-                    color: #ffffff;
-                }
-            }
-        }
-
-        .#{$namespace}-pagination-item-link {
-            color: var(--#{$namespace}-disabled-text-color);
-            background: var(--#{$namespace}-disabled-bg-color);
-            border-color: var(--#{$namespace}-border-color-light);
-            cursor: not-allowed;
-
-            .#{$namespace}-pagination-simple {
-                background: transparent;
-            }
-        }
-
-        .#{$namespace}-pagination-simple-pager {
-            color: #c0c4cc;
-        }
-
-        .#{$namespace}-pagination-item-link-icon {
-            opacity: 0;
-        }
-
-        .#{$namespace}-pagination-item-ellipsis {
-            opacity: 1;
-        }
-    }
-}
-
-@media only screen and (max-width: 992px) {
-    .#{$namespace}-pagination-item {
-        &-after-jump-prev,
-        &-before-jump-next {
-            display: none;
-        }
-    }
-}
-
-@media only screen and (max-width: 576px) {
-    .#{$namespace}-pagination-options {
-        display: none;
-    }
-}