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

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

@@ -0,0 +1,515 @@
+@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: 'R Icons';
+        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;
+    }
+}

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

@@ -0,0 +1,135 @@
+@use '../common/var';
+
+.#{$namespace}-placeholder {
+    --#{$namespace}-skeleton-color: var(--#{$namespace}-fill-color);
+    --#{$namespace}-skeleton-to-color: var(--#{$namespace}-fill-color-darker);
+}
+
+.is-dark {
+    .#{$namespace}-placeholder {
+        --#{$namespace}-skeleton-color: #3c3f43;
+        --#{$namespace}-skeleton-to-color: #484c50;
+    }
+}
+
+.#{$namespace}-placeholder {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    justify-content: flex-start;
+    display: flex;
+
+    &-paragraph {
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        &-graph {
+            flex: 0 0 auto;
+            width: 60px;
+            height: 60px;
+            border-radius: 2px;
+            margin-right: 20px;
+            background-color: var(--#{$namespace}-skeleton-color);
+
+            &-circle {
+                border-radius: 50%;
+            }
+
+            &-image {
+                width: 80px;
+                height: 60px;
+                position: relative;
+                overflow: hidden;
+
+                &::after {
+                    content: '';
+                    width: 0;
+                    height: 0;
+                    left: 10px;
+                    bottom: 10px;
+                    position: absolute;
+                    border-bottom: 36px solid;
+                    border-left: 20px solid transparent;
+                    border-right: 30px solid transparent;
+                }
+
+                &::before {
+                    content: '';
+                    width: 0;
+                    height: 0;
+                    left: 40px;
+                    bottom: 10px;
+                    position: absolute;
+                    border-bottom: 22px solid;
+                    border-left: 16px solid transparent;
+                    border-right: 16px solid transparent;
+                }
+            }
+
+            &-image &-inner {
+                width: 12px;
+                height: 12px;
+                right: 18px;
+                top: 10px;
+                border-radius: 50%;
+                position: absolute;
+            }
+        }
+
+        &-rows {
+            width: 100%;
+
+            & > p {
+                background-color: var(--#{$namespace}-skeleton-color);
+                border-radius: 4px;
+            }
+        }
+    }
+
+    &-grid {
+        &-col {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+
+            & > p {
+                background-color: var(--#{$namespace}-skeleton-color);
+                border-radius: 4px;
+            }
+
+            &:first-child {
+                align-items: flex-start; //first col align left
+            }
+        }
+    }
+
+    &-graph {
+        display: inline-block;
+        width: 100%;
+        background-color: var(--#{$namespace}-skeleton-color);
+    }
+
+    &-active {
+        &.#{$namespace}-placeholder-graph,
+        .#{$namespace}-placeholder-paragraph-graph-image,
+        .#{$namespace}-placeholder-grid-col > p,
+        .#{$namespace}-placeholder-paragraph-rows > p {
+            background: linear-gradient(-45deg, var(--#{$namespace}-skeleton-color) 25%, var(--#{$namespace}-skeleton-to-color) 37%, var(--#{$namespace}-skeleton-color) 63%);
+            background-size: 400% 100% !important;
+            animation: placeholder-active 1.4s ease infinite;
+        }
+    }
+
+    @keyframes placeholder-active {
+        0% {
+            background-position: 100% 50%;
+        }
+
+        100% {
+            background-position: 0 50%;
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+@use '../common/var';
+
+// .#{$namespace}-popconfirm {
+//     background-clip: padding-box;
+//     border-radius: 2px;
+
+//     .#{$namespace}-popconfirm__body {
+//         padding: 12px 16px;
+//         color: #000000d9;
+//         font-size: 16px;
+
+//         .fad {
+//             margin-right: 3px;
+//             color: #f90;
+//         }
+
+//         .btngroup {
+//             text-align: center;
+//             margin-top: 15px;
+//         }
+//     }
+
+// }
+
+.#{$namespace}-popconfirm__main {
+    display: flex;
+    align-items: center;
+}
+.#{$namespace}-popconfirm__icon {
+    margin-right: 5px;
+}
+.#{$namespace}-popconfirm__action {
+    text-align: right;
+    margin-top: 8px;
+}