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

package/theme-chalk/notification/index.scss

@@ -0,0 +1,155 @@
+@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/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: $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;
+    }
+}