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

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

@@ -1,631 +0,0 @@
-@use '../common/var';
-
-@mixin upload-success($color: null) {
-    right: -15px;
-    top: -6px;
-    width: 40px;
-    height: 24px;
-    background: var(--#{$namespace}-color-success);
-    text-align: center;
-    transform: rotate(45deg);
-
-    i {
-        font-size: 12px;
-        margin-top: 11px;
-        transform: rotate(-45deg);
-        color: $color;
-    }
-}
-
-.#{$namespace}-upload {
-    --#{$namespace}-upload-dragger-padding-horizontal: 40px;
-    --#{$namespace}-upload-dragger-padding-vertical: 10px;
-}
-
-.#{$namespace}-upload {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    outline: none;
-
-    iframe {
-        position: absolute;
-        z-index: -1;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        filter: alpha(opacity=0);
-    }
-
-    &.is-drag {
-        display: block;
-    }
-
-    &:focus {
-        border-color: var(--#{$namespace}-color-primary);
-        color: var(--#{$namespace}-color-primary);
-
-        .#{$namespace}-upload-dragger {
-            border-color: var(--#{$namespace}-color-primary);
-        }
-    }
-}
-
-/* Picture Card for Wall */
-.#{$namespace}-upload--picture-card {
-    --#{$namespace}-upload-picture-card-size: 148px;
-    background-color: var(--#{$namespace}-fill-color-lighter);
-    border: 1px dashed var(--#{$namespace}-border-color-darker);
-    border-radius: 6px;
-    box-sizing: border-box;
-    width: var(--#{$namespace}-upload-picture-card-size);
-    height: var(--#{$namespace}-upload-picture-card-size);
-    cursor: pointer;
-    vertical-align: top;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-
-    i {
-        font-size: 28px;
-        color: var(--#{$namespace}-text-color-secondary);
-    }
-
-    &:hover {
-        border-color: var(--#{$namespace}-color-primary);
-        color: var(--#{$namespace}-color-primary);
-    }
-}
-
-.#{$namespace}-upload__input {
-    display: none;
-}
-
-.#{$namespace}-upload__tip {
-    font-size: 12px;
-    color: var(--#{$namespace}-text-color-regular);
-    margin-top: 7px;
-}
-
-.#{$namespace}-upload-dragger {
-    padding: var(--#{$namespace}-upload-dragger-padding-horizontal) var(--#{$namespace}-upload-dragger-padding-vertical);
-    background-color: var(--#{$namespace}-fill-color-blank);
-    border: 1px dashed var(--#{$namespace}-border-color);
-    border-radius: 6px;
-    box-sizing: border-box;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-
-    .#{$namespace}-icon--upload {
-        font-size: 67px;
-        color: var(--#{$namespace}-text-color-placeholder);
-        margin-bottom: 16px;
-        line-height: 50px;
-    }
-
-    & + .#{$namespace}-upload__tip {
-        text-align: center;
-    }
-
-    & ~ .#{$namespace}-upload__files {
-        border-top: var(--#{$namespace}-border);
-        margin-top: 7px;
-        padding-top: 5px;
-    }
-
-    .#{$namespace}-upload__text {
-        color: var(--#{$namespace}-text-color-regular);
-        font-size: 14px;
-        text-align: center;
-
-        em {
-            color: var(--#{$namespace}-color-primary);
-            font-style: normal;
-        }
-    }
-
-    &:hover {
-        border-color: var(--#{$namespace}-color-primary);
-    }
-
-    &.is-dragover {
-        padding: calc(#{var(--#{$namespace}-upload-dragger-padding-horizontal)} - 1px) calc(#{var(--#{$namespace}-upload-dragger-padding-vertical)} - 1px);
-        background-color: getCssVar('color', 'primary', 'light-9');
-        border: 2px dashed var(--#{$namespace}-color-primary);
-    }
-}
-
-.#{$namespace}-upload-list {
-    margin: 10px 0 0;
-    padding: 0;
-    list-style: none;
-    position: relative;
-
-    &.is-disabled {
-        .#{$namespace}-upload-list__item:hover,
-        .#{$namespace}-upload-list__item-status-label {
-            display: block;
-        }
-    }
-}
-
-// upload-list
-.#{$namespace}-upload-list--picture-card {
-    --#{$namespace}-upload-list-picture-card-size: 148px;
-
-    display: inline-flex;
-    flex-wrap: wrap;
-    margin: 0;
-
-    .#{$namespace}-upload-list__item {
-        overflow: hidden;
-        background-color: var(--#{$namespace}-fill-color-blank);
-        border: 1px solid var(--#{$namespace}-border-color);
-        border-radius: 6px;
-        box-sizing: border-box;
-        width: var(--#{$namespace}-upload-list-picture-card-size);
-        height: var(--#{$namespace}-upload-list-picture-card-size);
-        margin: 0 8px 8px 0;
-        padding: 0;
-
-        display: inline-flex;
-
-        .#{$namespace}-icon--check,
-        .#{$namespace}-icon--circle-check {
-            color: var(--#{$namespace}-color-white);
-        }
-
-        .#{$namespace}-icon--close {
-            display: none;
-        }
-        &:hover {
-            .#{$namespace}-upload-list__item-status-label {
-                opacity: 0;
-                // for fade out
-                display: block;
-            }
-
-            .#{$namespace}-progress__text {
-                display: block;
-            }
-        }
-    }
-
-    .#{$namespace}-upload-list__item {
-        .#{$namespace}-upload-list__item-name {
-            display: none;
-        }
-    }
-
-    .#{$namespace}-upload-list__item-thumbnail {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-    }
-
-    .#{$namespace}-upload-list__item-status-label {
-        @include upload-success();
-    }
-
-    .#{$namespace}-upload-list__item-actions {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        cursor: default;
-
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-
-        color: #fff;
-        opacity: 0;
-        font-size: 20px;
-        background-color: var(--#{$namespace}-overlay-color-lighter);
-        transition: opacity 0.3s;
-
-        span {
-            display: none;
-            cursor: pointer;
-        }
-
-        span + span {
-            margin-left: 1rem;
-        }
-
-        .#{$namespace}-upload-list__item-delete {
-            position: static;
-            font-size: inherit;
-            color: inherit;
-        }
-
-        &:hover {
-            opacity: 1;
-            span {
-                display: inline-flex;
-            }
-        }
-    }
-
-    .#{$namespace}-progress {
-        top: 50% !important;
-        left: 56%;
-        transform: translate(-50%, -50%);
-        bottom: auto;
-        width: 126px;
-
-        .#{$namespace}-progress__text {
-            top: 50%;
-        }
-    }
-}
-
-.#{$namespace}-upload-list--picture {
-    .#{$namespace}-upload-list__item {
-        overflow: hidden;
-        z-index: 0;
-        background-color: var(--#{$namespace}-fill-color-blank);
-        border: 1px solid var(--#{$namespace}-border-color);
-        border-radius: 6px;
-        box-sizing: border-box;
-        margin-top: 10px;
-        padding: 10px;
-        display: flex;
-        align-items: center;
-
-        .#{$namespace}-icon--check,
-        .#{$namespace}-icon--circle-check {
-            color: var(--#{$namespace}-color-white);
-        }
-
-        &:hover {
-            .#{$namespace}-upload-list__item-status-label {
-                opacity: 0;
-                display: block;
-            }
-
-            .#{$namespace}-progress__text {
-                display: block;
-            }
-        }
-
-        &.is-success {
-            .#{$namespace}-upload-list__item-name {
-                i {
-                    display: none;
-                }
-            }
-        }
-
-        & .#{$namespace}-icon--close {
-            top: 5px;
-            transform: translateY(0);
-        }
-    }
-
-    .#{$namespace}-upload-list__item-thumbnail {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-
-        width: 70px;
-        height: 70px;
-        object-fit: contain;
-
-        position: relative;
-        z-index: 1;
-        background-color: var(--#{$namespace}-color-white);
-    }
-
-    .#{$namespace}-upload-list__item-status-label {
-        position: absolute;
-        right: -17px;
-        top: -7px;
-        width: 46px;
-        height: 26px;
-        background: var(--#{$namespace}-color-success);
-        text-align: center;
-        transform: rotate(45deg);
-
-        i {
-            font-size: 12px;
-            margin-top: 12px;
-            transform: rotate(-45deg);
-        }
-    }
-
-    .#{$namespace}-progress {
-        position: relative;
-        top: -7px;
-    }
-}
-
-.#{$namespace}-upload-list__item {
-    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-    font-size: 14px;
-    color: var(--#{$namespace}-text-color-regular);
-    margin-bottom: 5px;
-    position: relative;
-    box-sizing: border-box;
-    border-radius: 4px;
-    width: 100%;
-
-    .#{$namespace}-progress {
-        position: absolute;
-        top: 20px;
-        width: 100%;
-    }
-
-    .#{$namespace}-progress__text {
-        position: absolute;
-        right: 0;
-        top: -13px;
-    }
-
-    .#{$namespace}-progress-bar {
-        margin-right: 0;
-        padding-right: 0;
-    }
-
-    & .#{$namespace}-icon--upload-success {
-        color: var(--#{$namespace}-color-success);
-    }
-
-    .#{$namespace}-icon--close {
-        display: none;
-        position: absolute;
-        right: 5px;
-        top: 50%;
-        cursor: pointer;
-        opacity: 0.75;
-        color: var(--#{$namespace}-text-color-regular);
-        transition: opacity 0.3s;
-        transform: translateY(-50%);
-
-        &:hover {
-            opacity: 1;
-            color: var(--#{$namespace}-color-primary);
-        }
-    }
-
-    & .#{$namespace}-icon--close-tip {
-        display: none;
-        position: absolute;
-        top: 1px;
-        right: 5px;
-        font-size: 12px;
-        cursor: pointer;
-        opacity: 1;
-        color: var(--#{$namespace}-color-primary);
-        font-style: normal;
-    }
-
-    &:hover {
-        background-color: var(--#{$namespace}-fill-color-light);
-
-        .#{$namespace}-icon--close {
-            display: inline-flex;
-        }
-
-        .#{$namespace}-progress__text {
-            display: none;
-        }
-    }
-
-    .#{$namespace}-upload-list__item-info {
-        display: inline-flex;
-        justify-content: center;
-        flex-direction: column;
-        width: calc(100% - 30px);
-        margin-left: 4px;
-    }
-
-    &.is-success {
-        .#{$namespace}-upload-list__item-status-label {
-            display: inline-flex;
-        }
-
-        .#{$namespace}-upload-list__item-name:hover,
-        .#{$namespace}-upload-list__item-name:focus {
-            color: var(--#{$namespace}-color-primary);
-            cursor: pointer;
-        }
-
-        &:focus:not(:hover) {
-            /* 键盘focus */
-            .#{$namespace}-icon--close-tip {
-                display: inline-block;
-            }
-        }
-
-        &:not(.focusing):focus,
-        &:active {
-            /* click时 */
-            outline-width: 0;
-            .#{$namespace}-icon--close-tip {
-                display: none;
-            }
-        }
-
-        &:hover,
-        &:focus {
-            .#{$namespace}-upload-list__item-status-label {
-                display: none;
-                opacity: 0;
-            }
-        }
-    }
-}
-
-.#{$namespace}-upload-list__item-name {
-    color: var(--#{$namespace}-text-color-regular);
-    display: inline-flex;
-    text-align: center;
-    align-items: center;
-    padding: 4px;
-    transition: color 0.3s;
-    font-size: 14px;
-
-    .#{$namespace}-icon {
-        margin-right: 6px;
-        color: var(--#{$namespace}-text-color-secondary);
-    }
-}
-
-.#{$namespace}-upload-list__item-file-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.#{$namespace}-upload-list__item-status-label {
-    position: absolute;
-    right: 5px;
-    top: 0;
-    line-height: inherit;
-    display: none;
-
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-
-    transition: opacity 0.3s;
-}
-
-.#{$namespace}-upload-list__item-delete {
-    position: absolute;
-    right: 10px;
-    top: 0;
-    font-size: 12px;
-    color: var(--#{$namespace}-text-color-regular);
-    display: none;
-
-    &:hover {
-        color: var(--#{$namespace}-color-primary);
-    }
-}
-
-.#{$namespace}-upload-cover {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 10;
-    cursor: default;
-
-    &::after {
-        display: inline-block;
-        content: '';
-        height: 100%;
-        vertical-align: middle;
-    }
-
-    img {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
-
-    & + .#{$namespace}-upload__inner {
-        opacity: 0;
-        position: relative;
-        z-index: 1;
-    }
-}
-
-.#{$namespace}-upload-cover__label {
-    @include upload-success(#fff);
-}
-
-.#{$namespace}-upload-cover__progress {
-    display: inline-block;
-    vertical-align: middle;
-    position: static;
-    width: 243px;
-
-    & + .#{$namespace}-upload__inner {
-        opacity: 0;
-    }
-}
-
-.#{$namespace}-upload-cover__content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.#{$namespace}-upload-cover__interact {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--#{$namespace}-overlay-color-light);
-    text-align: center;
-
-    .btn {
-        display: inline-block;
-        color: var(--#{$namespace}-color-white);
-        font-size: 14px;
-        cursor: pointer;
-        vertical-align: middle;
-        transition: var(--#{$namespace}-transition-md-fade);
-        margin-top: 60px;
-
-        i {
-            margin-top: 0;
-        }
-
-        span {
-            opacity: 0;
-            transition: opacity 0.15s linear;
-        }
-
-        &:not(:first-child) {
-            margin-left: 35px;
-        }
-
-        &:hover {
-            transform: translateY(-13px);
-
-            span {
-                opacity: 1;
-            }
-        }
-
-        i {
-            color: var(--#{$namespace}-color-white);
-            display: block;
-            font-size: 24px;
-            line-height: inherit;
-            margin: 0 auto 5px;
-        }
-    }
-}
-
-.#{$namespace}-upload-cover__title {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background-color: var(--#{$namespace}-color-white);
-    height: 36px;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: normal;
-    text-align: left;
-    padding: 0 10px;
-    margin: 0;
-    line-height: 36px;
-    font-size: 14px;
-    color: var(--#{$namespace}-text-color-primary);
-}