@alifd/next/es/upload/main.scss

@charset "UTF-8";

@import "../core/index-noreset.scss";
@import "scss/variable";
@import "./rtl.scss";


#{$upload-prefix} {
    @include box-sizing;

    &-inner {
        &.#{$css-prefix}hidden {
            display: none;
        }
        outline: 0;
        display: inline-block;
    }

    &-list {
        overflow: hidden;
        @include box-sizing;
    }

    &-list-item {
        position: relative;
        &.#{$css-prefix}hidden {
            display: none;
        }
    }

    &-list-item-name {
        text-decoration: none;
    }

    &.#{$css-prefix}disabled {
        border-color: $upload-disable-border-color !important;
        color: $upload-disable-text-color !important;

        .#{$css-prefix}icon-close {
            cursor: not-allowed !important;
        }

        #{$upload-prefix}-inner * {
            color: $upload-disable-text-color !important;
            border-color: $upload-disable-border-color !important;
            cursor: not-allowed !important;
        }
    }
}

#{$upload-prefix}-list-text {
    #{$upload-prefix}-list-item {
        background-color: $upload-text-list-bg-color;
        // top-bottom s-1  left $upload-text-list-padding-left-right
        padding: $s-1 $upload-text-list-padding-left-right;
        // righrt: icon size + icon paddinng left-right
        padding-right: calc(#{$upload-text-list-close-icon-right} * 2 + #{$upload-text-list-close-icon-size});
        height: $upload-text-list-height;
        // line-height = height - padding-top-bottom
        line-height: calc(#{$upload-text-list-height} - #{$s-2});
        font-size: $upload-text-list-font-size;
        overflow: hidden;
        transition: all $motion-duration-immediately $motion-linear;
        border-radius: $upload-text-list-corner;

        &:not(:last-child) {
            margin-bottom: 4px;
        }

        &-op {
            position: absolute;
            top: 0;
            right: $upload-text-list-close-icon-right;
        }

        .#{$css-prefix}icon-close {
            color: $upload-text-list-close-icon-color;
            cursor: pointer;
            text-align: center;
            transition: all $motion-duration-immediately $motion-linear;
            line-height: $upload-text-list-height;
            @include icon-size($upload-text-list-close-icon-size);
        }

        &:hover {
            background-color: $upload-text-list-bg-color-hover;
            .#{$css-prefix}icon {
                color: $upload-text-list-close-icon-color-hover;
            }
        }
        &-name-wrap {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            margin-right: 4px;
        }
        &-name {
            color: $upload-text-list-name-font-color;
            transition: all $motion-duration-immediately $motion-linear;
        }

        &-size {
            color: $upload-text-list-size-font-color;
            margin-left: 8px;
        }
        &-uploading {
            // uploading state, two line display
            //  so  line-height = height / 2  - padding-top;
            line-height: calc(#{$upload-text-list-height} / 2 - #{$s-1});
            .#{$css-prefix}upload-list-item-progress {
                line-height: 0;
                padding-top: calc((#{$upload-text-list-height} / 2 - #{$s-1} - #{$upload-text-list-progressbar-height}) / 2);
                padding-bottom: calc((#{$upload-text-list-height} / 2 - #{$s-1} - #{$upload-text-list-progressbar-height}) / 2);
                .#{$css-prefix}progress-line-underlay {
                    height: $upload-text-list-progressbar-height;
                }
                .#{$css-prefix}progress-line-overlay {
                    height: $upload-text-list-progressbar-height;
                    margin-top: calc(0px - (#{$upload-text-list-progressbar-height} / 2));
                }
            }
        }
        &-done {
            // 行高 = 高度 - 上下padding
            line-height: calc(#{$upload-text-list-height} - #{$s-2});
        }
        &-done:hover .#{$css-prefix}upload-list-item-name {
            color: $upload-text-list-name-font-color-hover;
        }
        &-done:hover .#{$css-prefix}upload-list-item-size {
            color: $upload-text-list-size-font-color-hover;
        }
        &-error {
            /* stylelint-disable declaration-no-important */
            background-color: $upload-text-list-bg-color-error !important;
            &#{$upload-prefix}-list-item-error-with-msg {
                // error state with error msg, we need they are display at two line
                // so  line-height = height / 2  - padding-top;
                line-height: calc(#{$upload-text-list-height} / 2 - #{$s-1});
            }
            &-msg {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                color: $upload-text-list-error-text-color;
            }
        }
    }
}

#{$upload-prefix}-list-image {
    .#{$css-prefix}upload-list-item {
        box-sizing: content-box;
        border: $upload-image-list-item-border-width solid $upload-image-list-item-border-color;
        background-color: $upload-image-list-item-bg-color;
        padding: $upload-image-list-item-padding;
        height: $upload-image-list-item-picture-size;
        line-height: $upload-image-list-item-picture-size;
        font-size: $upload-image-list-item-font-size;
        transition: all $motion-duration-immediately $motion-linear;
        overflow: hidden;
        border-radius: $upload-card-list-corner;

        &:not(:last-child) {
            margin-bottom: 4px;
        }
        @include clearfix();

        &-op {
            float: right;
            margin-right: 4px;
        }

        .#{$css-prefix}icon-close {
            cursor: pointer;
            color: $upload-image-list-close-icon-color;
            text-align: center;

            @include icon-size($upload-image-list-close-icon-size);
        }

        &:hover {
            border-color: $upload-image-list-item-border-color-hover;

            .#{$css-prefix}icon-close {
                color: $upload-image-list-close-icon-color-hover;
            }
        }

        &-name {
            display: block;
            color: $upload-text-list-name-font-color;
            // leave spaces for thumbnail
            margin-left: calc(#{$upload-image-list-item-picture-size} + #{$upload-image-list-item-padding});
            // leave spaces for close icon
            margin-right: calc(#{$upload-image-list-close-icon-size} + #{$upload-image-list-close-icon-right} * 2);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            transition: all $motion-duration-immediately $motion-linear;
        }

        &-size {
            color: $upload-text-list-size-font-color;
            margin-left: 8px;
        }

        &-done:hover .#{$css-prefix}upload-list-item-name {
            color: $upload-text-list-name-font-color-hover;
        }
        &-done:hover .#{$css-prefix}upload-list-item-size {
            color: $upload-text-list-size-font-color-hover;
        }

        $thumbnail-margin-right: $s-2 !default;
        @if (get-compiling-value($upload-image-list-item-padding) > get-compiling-value($s-2)) {
            $thumbnail-margin-right: $upload-image-list-item-padding;
        }
        &-thumbnail {
            float: left;
            width: $upload-image-list-item-picture-size;
            height: $upload-image-list-item-picture-size;
            color: $upload-image-list-item-thumbnail-font-color;
            border: $upload-image-list-item-picture-border-width solid $upload-image-list-item-picture-border-color;
            border-radius: $upload-image-list-item-picture-corner;
            background-color: $upload-image-list-item-picture-background-color;
            margin-right: $thumbnail-margin-right;
            vertical-align: middle;
            text-align: center;
            overflow: hidden;
            box-sizing: border-box;

            img {
                width: 100%;
                height: 100%;
            }

            .#{$css-prefix}icon {
                display: block;
                margin: 0;
                line-height: $upload-image-list-item-picture-size;

                @include icon-size($upload-image-list-item-picture-icon-size);
            }
        }

        &-error {
            border-color: $upload-image-list-item-border-color-error !important;
            background-color: $upload-image-list-item-error-bg-color;
        }

        &-uploading {
            background-color: $upload-image-list-item-uploading-bg-color;
            #{$upload-prefix}-list-item-name {
                height: calc(#{$upload-image-list-item-picture-size} / 2);
                line-height: calc(#{$upload-image-list-item-picture-size} / 2);
            }
            #{$upload-prefix}-list-item-progress {
                // 左边 把 thumbnail 的空间空出来
                margin-left: calc(#{$upload-image-list-item-picture-size} + #{$thumbnail-margin-right});
                // 右边边 把 icon 的空间空出来
                margin-right: calc(#{$upload-image-list-close-icon-size} + #{$upload-image-list-close-icon-right} * 2);
                line-height: 0;
                padding-top: calc((#{$upload-image-list-item-picture-size} / 2  - #{$upload-image-list-progressbar-height}) / 2);
                padding-bottom: calc((#{$upload-image-list-item-picture-size} / 2  - #{$upload-image-list-progressbar-height}) / 2);

                .#{$css-prefix}progress-line-underlay {
                    height: $upload-image-list-progressbar-height;
                }
                .#{$css-prefix}progress-line-overlay {
                    height: $upload-image-list-progressbar-height;
                    margin-top: calc(0px - (#{$upload-image-list-progressbar-height} / 2));
                }
            }
        }
        &-error-with-msg {
            #{$upload-prefix}-list-item-name,
            #{$upload-prefix}-list-item-error-msg {
                height: calc(#{$upload-image-list-item-picture-size} / 2);
                line-height: calc(#{$upload-image-list-item-picture-size} / 2);
            }
            #{$upload-prefix}-list-item-error-msg {
                // 左边 把 thumbnail 的空间空出来
                margin-left: calc(#{$upload-image-list-item-picture-size} + #{$thumbnail-margin-right});
                // 右边边 把 icon 的空间空出来
                margin-right: calc(#{$upload-image-list-close-icon-size} + #{$upload-image-list-close-icon-right} * 2);
                color: $upload-text-list-error-text-color;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }
}

#{$upload-prefix}-list-card {
    display: inline-block;
    .#{$css-prefix}upload-list-item {
        vertical-align: middle;
        float: left;

        &:not(:last-child) {
            margin-right: $upload-card-list-margin-right;
        }

        &-wrapper {
            position: relative;
            border: 1px solid $upload-card-list-border-color;
            width: $upload-card-size;
            height: $upload-card-size;
            padding: $upload-card-list-padding;
            background-color: $upload-card-list-bg-color;
            border-radius: $upload-card-border-radius;
            overflow: hidden;
        }

        &-thumbnail {
            text-align: center;
            width: 100%;
            height: 100%;
            color: $upload-card-list-thumbnail-font-color;
            font-size: $upload-card-list-thumbnail-font-size;

            img {
                max-width: 100%;
                max-height: 100%;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;

                &:focus {
                    outline: 0;
                }
            }

            .#{$css-prefix}icon {
                width: 100%;
                @include icon-size($upload-card-list-thumbnail-icon-size);
            }
        }

        &-handler {
            margin-top: calc((#{$upload-card-size} - 74px) / 2);
            .#{$css-prefix}icon-cry {
                margin-top: 10px;
            }
        }

        &-name {
            display: block;
            width: $upload-card-size;
            text-align: center;
            margin-top: $upload-card-list-name-margin-top;
            font-size: $upload-card-list-name-font-size;
            color: $upload-card-list-name-font-color;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        &-progress {
            position: absolute;
            font-size: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            .#{$css-prefix}progress-line-underlay {
                border-radius: 0;
                height: $upload-card-list-progressbar-height;
            }
            .#{$css-prefix}progress-line-overlay {
                border-radius: 0;
                height: $upload-card-list-progressbar-height;
                margin-top: calc((0px - #{($upload-card-list-progressbar-height)} / 2));
            }
        }

        &-uploading .#{$css-prefix}upload-list-item-wrapper {
            background-color: $upload-card-list-uploading-bg-color;
        }

        &:hover {
            .#{$css-prefix}upload-tool {
                opacity: .8;
            }
        }

        .#{$css-prefix}upload-tool {
            position: absolute;
            z-index: 1;
            background-color: rgba(get-compiling-value($upload-select-card-tool-bg-color), $upload-select-card-tool-bg-opacity);
            transition: all $motion-duration-immediately $motion-linear;
            opacity: 0;
            width: 100%;
            height: $upload-select-card-tool-height;
            left: 0;
            bottom: 0;
            display: flex;

            .#{$css-prefix}icon {
                line-height: $upload-select-card-tool-height;
                color: $color-white;
                @include icon-size($upload-select-card-tool-icon-size);
                cursor: pointer;
            }

            &-item {
                width: 100%;
                text-align: center;

                &:not(:last-child) {
                    border-right: 1px solid $color-white;
                }
            }

            &-reupload {
                display: inline-block;
            }
        }

        #{$upload-prefix}-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        &-error .#{$css-prefix}upload-list-item-wrapper {
            border-color: $upload-card-list-border-color-error;
        }
    }

    &#{$upload-prefix}-ie9 .#{$css-prefix}upload-tool {
        display: table;
        &-item {
            display: table-cell;
            width: 1%;
        }
    }
    &#{$upload-prefix}-ie9 #{$upload-prefix}-card {
        display: table-cell;
    }
}

#{$upload-prefix}-card {
    border: 1px $upload-card-border-style $upload-card-border-color;
    width: $upload-card-size;
    height: $upload-card-size;
    background-color: $upload-card-bg-color;
    text-align: center;
    cursor: pointer;
    transition: border-color $motion-duration-immediately $motion-linear;
    display: table-cell;
    vertical-align: middle;
    border-radius: $upload-card-border-radius;

    .#{$css-prefix}icon {
        color: $upload-card-icon-color;
        @include icon-size($upload-card-add-icon-size);
    }

    .#{$css-prefix}upload-add-icon {
        &::before {
            content: $upload-card-add-icon;
        }
    }

    .#{$css-prefix}upload-text {
        font-size: $upload-card-add-text-size;
        margin-top: $upload-card-add-text-margin-top;
        color: $upload-card-font-color;
        outline: none;
    }

    &:hover {
        border-color: $upload-card-hover-border-color;
        .#{$css-prefix}icon {
            color: $upload-card-hover-font-color;
        }
        .#{$css-prefix}upload-text {
            color: $upload-card-hover-font-color;
        }
    }
}

#{$upload-prefix}-dragable {
    #{$upload-prefix}-inner {
        display: block;
    }

    #{$upload-prefix}-drag {
        border: 1px dashed $upload-drag-zone-border-color;
        transition: border-color $motion-duration-immediately $motion-linear;
        cursor: pointer;
        border-radius: $upload-drag-zone-corner;
        background-color: $upload-drag-zone-bg-color;
        text-align: center;
        margin-bottom: $s-1;

        &-icon {
            margin: $s-5 0 0;
            color: $upload-drag-zone-upload-icon-color;

            #{$upload-prefix}-drag-upload-icon::before {
                content: $upload-drag-zone-upload-icon;
                font-size: $upload-drag-zone-icon-size;
            }
        }

        &-text {
            margin: $s-3 0 0;
            font-size: $upload-drag-zone-font-size;
            color: $upload-drag-zone-upload-normal-title-color;
        }
        &-hint {
            margin: $s-1 0 $s-5;
            font-size: $upload-drag-zone-hint-font-size;
            color: $upload-drag-zone-upload-normal-hint-color;
        }
        &-over {
            border-color: $upload-drag-zone-over-border-color;
        }
    }
}