newsupernova/vendor/magento/theme-adminhtml-backend/web/css/source/components/_file-uploader.less

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Components -> Single File Uploader
//  _____________________________________________

//
//  Variables
//  ---------------------------------------------

@file-uploader-preview__border-color: @color-lighter-grayish;
@file-uploader-preview__background-color: @color-white;
@file-uploader-preview-focus__color: @color-blue2;

@file-uploader-document-icon__color: @color-gray80;
@file-uploader-document-icon__size: 7rem;
@file-uploader-document-icon__z-index: @data-grid-file-uploader-image__z-index + 1;

@file-uploader-video-icon__color: @color-gray80;
@file-uploader-video-icon__size: 4rem;
@file-uploader-video-icon__z-index: @data-grid-file-uploader-image__z-index + 1;

@file-uploader-placeholder-icon__color: @color-gray80;
@file-uploader-placeholder-icon__z-index: @data-grid-file-uploader-image__z-index + 1;

@file-uploader-delete-icon__color: @color-brownie;
@file-uploader-delete-icon__hover__color: @color-brownie-vanilla;
@file-uploader-delete-icon__font-size: 2rem;

@file-uploader-muted-text__color: @color-gray62;

@file-uploader-preview__width: 150px;
@file-uploader-preview__height: @file-uploader-preview__width;
@file-uploader-preview__opacity: .7;

@file-uploader-spinner-dimensions: 15px;

@file-uploader-dragover__background: @color-gray83;
@file-uploader-dragover-focus__color: @color-blue2;

//  Grid uploader

@data-grid-file-uploader-image__size: 5rem;
@data-grid-file-uploader-image__z-index: 1;

@data-grid-file-uploader-menu-button__width: 2rem;

@data-grid-file-uploader-upload-icon__color: @color-darker-gray;
@data-grid-file-uploader-upload-icon__hover__color: @color-very-dark-gray;
@data-grid-file-uploader-upload-icon__line-height: 48px;

@data-grid-file-uploader-wrapper__size: @data-grid-file-uploader-image__size + 2rem;

//
//  Single file uploader
//  ---------------------------------------------

.file-uploader-area {
    position: relative;

    input[type='file'] {
        cursor: pointer;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        visibility: hidden;
        width: 0;

        &:focus {
            + .file-uploader-button {
                box-shadow: 0 0 0 1px @file-uploader-preview-focus__color;
            }
        }

        &:disabled {
            + .file-uploader-button {
                cursor: default;
                opacity: .5;
                pointer-events: none;
            }
        }
    }
}

.file-uploader-summary {
    display: inline-block;
    vertical-align: top;
}

.file-uploader-button {
    cursor: pointer;
    display: inline-block;

    &._is-dragover {
        background: @file-uploader-dragover__background;
        border: 1px solid @file-uploader-preview-focus__color;
    }
}

.file-uploader-spinner {
    background-image: url('@{baseDir}images/loader-1.gif');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: @file-uploader-spinner-dimensions;
    display: none;
    height: 30px;
    margin-left: @indent__s;
    vertical-align: top;
    width: @file-uploader-spinner-dimensions;
}

.file-uploader-preview {
    .action-remove {
        &:extend(.abs-action-reset all);
        .lib-icon-font (
        @icon-delete__content,
        @_icon-font: @icons-admin__font-name,
        @_icon-font-size: @file-uploader-delete-icon__font-size,
        @_icon-font-color: @file-uploader-delete-icon__color,
        @_icon-font-color-hover: @file-uploader-delete-icon__hover__color,
        @_icon-font-text-hide: true,
        @_icon-font-display: block
        );
        bottom: 4px;
        cursor: pointer;
        display: block;
        height: 27px;
        left: 6px;
        position: absolute;
        text-decoration: none;
        width: 25px;
        z-index: 2;
    }

    &:hover {
        .preview-image img,
        .preview-link:before {
            opacity: @file-uploader-preview__opacity;
        }
    }

    .preview-link {
        display: block;
        height: 100%;
    }

    .preview-image img {
        bottom: 0;
        left: 0;
        margin: auto;
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
    }

    .preview-video {
        .lib-icon-font(
            @icon-video__content,
            @_icon-font: @icons-admin__font-name,
            @_icon-font-size: @file-uploader-video-icon__size,
            @_icon-font-color: @file-uploader-video-icon__color,
            @_icon-font-color-hover: @file-uploader-video-icon__color
        );

        &:before {
            left: 0;
            margin-top: -@file-uploader-video-icon__size / 2;
            position: absolute;
            right: 0;
            top: 50%;
            z-index: @file-uploader-video-icon__z-index;
        }
    }

    .preview-document {
        .lib-icon-font(
            @icon-document__content,
            @_icon-font: @icons-admin__font-name,
            @_icon-font-size: @file-uploader-document-icon__size,
            @_icon-font-color: @file-uploader-document-icon__color,
            @_icon-font-color-hover: @file-uploader-document-icon__color
        );

        &:before {
            left: 0;
            margin-top: -@file-uploader-document-icon__size / 2;
            position: absolute;
            right: 0;
            top: 50%;
            z-index: @file-uploader-document-icon__z-index;
        }
    }
}

.file-uploader-preview,
.file-uploader-placeholder {
    background: @file-uploader-preview__background-color;
    border: 1px solid @file-uploader-preview__border-color;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: @file-uploader-preview__height;
    line-height: 1;
    margin: @indent__s @indent__m @indent__s 0;
    overflow: hidden;
    position: relative;
    width: @file-uploader-preview__width;
}

.file-uploader {
    &._loading {
        .file-uploader-spinner {
            display: inline-block;
        }
    }

    .admin__field-note,
    .admin__field-error {
        margin-bottom: @indent__s;
    }

    .file-uploader-filename {
        .lib-text-overflow();
        max-width: @file-uploader-preview__width;
        word-break: break-all;

        &:first-child {
            margin-bottom: @indent__s;
        }
    }

    .file-uploader-meta {
        color: @file-uploader-muted-text__color;
    }

    .admin__field-fallback-reset {
        margin-left: @indent__s;
    }

    ._keyfocus & .action-remove {
        &:focus {
            box-shadow: 0 0 0 1px @file-uploader-preview-focus__color;
        }
    }
}

//  Placeholder for multiple uploader
.file-uploader-placeholder {
    &.placeholder-document {
        .lib-icon-font(
            @icon-document__content,
            @_icon-font: @icons-admin__font-name,
            @_icon-font-size: 5rem,
            @_icon-font-color: @file-uploader-placeholder-icon__color,
            @_icon-font-color-hover: @file-uploader-placeholder-icon__color
        );

        &:before {
            left: 0;
            position: absolute;
            right: 0;
            top: 20px;
            z-index: @file-uploader-placeholder-icon__z-index;
        }
    }

    &.placeholder-image {
        .lib-icon-font(
            @icon-camera__content,
            @_icon-font: @icons-admin__font-name,
            @_icon-font-size: 5rem,
            @_icon-font-color: @file-uploader-placeholder-icon__color,
            @_icon-font-color-hover: @file-uploader-placeholder-icon__color
        );

        &:before {
            left: 0;
            position: absolute;
            right: 0;
            top: 20px;
            z-index: @file-uploader-placeholder-icon__z-index;
        }
    }

    &.placeholder-video {
        .lib-icon-font(
            @icon-video__content,
            @_icon-font: @icons-admin__font-name,
            @_icon-font-size: 3rem,
            @_icon-font-color: @file-uploader-placeholder-icon__color,
            @_icon-font-color-hover: @file-uploader-placeholder-icon__color
        );

        &:before {
            left: 0;
            position: absolute;
            right: 0;
            top: 30px;
            z-index: @file-uploader-placeholder-icon__z-index;
        }
    }
}

.file-uploader-placeholder-text {
    bottom: 0;
    color: @color-blue-dodger;
    font-size: 1.1rem;
    left: 0;
    line-height: @line-height__base;
    margin-bottom: 15%;
    padding: 0 @indent__base;
    position: absolute;
    right: 0;
    text-align: center;
}

//
//  Grid image uploader
//  ---------------------------------------------

.data-grid-file-uploader {
    min-width: @data-grid-file-uploader-wrapper__size;

    &._loading {
        .file-uploader-spinner {
            display: block;
        }

        .file-uploader-button {
            &:before {
                display: none;
            }
        }
    }

    .file-uploader-image {
        background: transparent;
        bottom: 0;
        left: 0;
        margin: auto;
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        z-index: @data-grid-file-uploader-image__z-index;

        + .file-uploader-area {
            .file-uploader-button {
                &:before {
                    display: none;
                }
            }
        }
    }

    .file-uploader-area {
        z-index: @data-grid-file-uploader-image__z-index + 1;
    }

    .file-uploader-spinner {
        height: 100%;
        margin: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .file-uploader-button {
        display: block;
        height: @data-grid-file-uploader-upload-icon__line-height;
        text-align: center;

        .lib-icon-font (
            @icon-plus__content,
            @_icon-font: @icons-admin__font-name,
            @_icon-font-size: 1.3rem,
            @_icon-font-line-height: @data-grid-file-uploader-upload-icon__line-height,
            @_icon-font-color: @data-grid-file-uploader-upload-icon__color,
            @_icon-font-color-hover: @data-grid-file-uploader-upload-icon__hover__color,
            @_icon-font-text-hide: true,
            @_icon-font-display: block
        );
    }

    .action-select-wrap {
        float: left;

        .action-select {
            border: 1px solid @file-uploader-preview__border-color;
            display: block;
            height: @data-grid-file-uploader-image__size;
            margin-left: -1px;
            padding: 0;
            width: @data-grid-file-uploader-menu-button__width;

            &:after {
                border-color: @data-grid-file-uploader-upload-icon__color transparent transparent transparent;
                left: 50%;
                margin: 0 0 0 -5px;
            }

            &:hover {
                &:after {
                    border-color: @data-grid-file-uploader-upload-icon__hover__color transparent transparent transparent;
                }
            }

            > span {
                display: none;
            }
        }

        .action-menu {
            left: 4rem;
            right: auto;
            z-index: @data-grid-file-uploader-image__z-index + 1;
        }
    }
}

.data-grid-file-uploader-inner {
    border: 1px solid @file-uploader-preview__border-color;
    float: left;
    height: @data-grid-file-uploader-image__size;
    position: relative;
    width: @data-grid-file-uploader-image__size;
}