devextreme/less/sources/widgets/common/fileUploader.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/fileUploader.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./button.less";
@import (once) "./progressBar.less";

.dx-fileuploader {
    &.dx-state-disabled .dx-fileuploader-input {
        display: none;
    }
}

.dx-fileuploader-wrapper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.dx-fileuploader-container {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}

.dx-fileuploader-input-wrapper {
    .dx-clearfix-mixin();

    &:before,
    &:after {
        width: 100%;
    }

    &:before {
        padding-top: 1em;
        margin-top: -1em;
    }

    &:after {
        padding-bottom: 1em;
        margin-bottom: -1em;
    }

    .dx-button {
        float: left;
    }

    .dx-button + .dx-button {
        margin-left: 12px;
    }
}

.dx-fileuploader-button {
    position: relative;

    .dx-fileuploader-input {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        cursor: pointer;

        &::-webkit-file-upload-button,
        &::-ms-browse {
            cursor: pointer;
        }
    }
}

.dx-fileuploader-content {
    display: table-row-group;
    vertical-align: middle;

    & > .dx-fileuploader-upload-button {
        margin-top: 10px;
    }
}

.dx-fileuploader-empty .dx-fileuploader-content > .dx-fileuploader-upload-button {
    display: none;
}

.dx-fileuploader-input-content {
    width: 100%;
    display: table;
}

.dx-fileuploader-files-container {
    padding-top: 0;
    width: 100%;

    .dx-fileuploader-show-file-list & {
        padding-top: 22px;
    }
}

.dx-fileuploader-file-container {
    width: 100%;
    padding: 4px 0 4px;

    .dx-button {
        width: 28px;
        height: 28px;
        margin-right: 10px;

        &.dx-state-invisible {
            margin-right: 0;
        }
    }
}

.dx-fileuploader-button-container,
.dx-fileuploader-input-container {
    display: table-cell;
    vertical-align: middle;
}

.dx-fileuploader-input-container {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.dx-fileuploader-input {
    opacity: 0;
    width: 100%;
    margin: 0;
    cursor: default;
}

.dx-fileuploader-input-label {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    cursor: default;

    &:before {
        content: '';
        position: absolute;
        top: -50%;
        overflow: hidden;
        cursor: default;
    }
}

.dx-fileuploader-button-container {
    display: table-cell;
    vertical-align: middle;
}

.dx-fileuploader-file {
    display: table-cell;
    width: 100%;
    white-space: nowrap;
}

.dx-fileuploader-file-info {
    float: left;
    width: 100%;
}

.dx-fileuploader-file-status-message {
    float: left;
    font-size: 12px;
    height: 16px;
}

.dx-fileuploader .dx-progressbar {
    float: left;
    width: 100%;
    height: 22px;
    margin-top: -6px;
}

.dx-fileuploader-file-name {
    float: left;
    max-width: 100%;
    .dx-overflow();
}

.dx-fileuploader-file-size {
    margin-left: 4px;
    float: left;
    vertical-align: super;
    font-size: 10px;
}

.dx-rtl {
    .dx-fileuploader,
    &.dx-fileuploader {
        .dx-fileuploader-button {
            float: right;
        }

        .dx-fileuploader-file-container .dx-fileuploader-button {
            margin-left: 10px;
            margin-right: 0;
        }

        .dx-fileuploader-file-name,
        .dx-fileuploader-file-size,
        .dx-fileuploader-file-status-message {
            float: right;
        }

        .dx-fileuploader-file-size {
            margin-right: 4px;
        }
    }
}

.dx-fileuploader-invalid {
    .dx-fileuploader-file-status-message {
        height: auto;

        span {
            display: block;
            margin-bottom: 2px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .dx-fileuploader-button-container {
        vertical-align: top;
    }

    .dx-fileuploader-cancel-button {
        margin-top: 5px;
    }
}