devextreme/less/sources/widgets/generic/fileUploader.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-size-default() {
    @GENERIC_FILEUPLOADER_VERTICAL_PADDING: 7px;
}
.dx-size-compact() {
    @GENERIC_FILEUPLOADER_VERTICAL_PADDING: 2px;
}
@GENERIC_FILEUPLOADER_FILE_WRAPPER_BORDER_SIZE: 3px;

.dx-fileuploader-wrapper {
    padding: @GENERIC_FILEUPLOADER_VERTICAL_PADDING;
}

.dx-fileuploader-content > .dx-fileuploader-upload-button {
    margin-left: 3px;
    margin-right: 3px;
}

.dx-fileuploader-input-wrapper {
    padding: @GENERIC_FILEUPLOADER_VERTICAL_PADDING 0 @GENERIC_FILEUPLOADER_VERTICAL_PADDING;
    border: @GENERIC_FILEUPLOADER_FILE_WRAPPER_BORDER_SIZE dashed transparent;
}

.dx-fileuploader.dx-state-disabled .dx-fileuploader-input-label {
    position: relative;
}

.dx-fileuploader-dragover {
    .dx-fileuploader-input-wrapper {
        border: none;
        padding: 0;

        .dx-fileuploader-button {
            display: none;
        }
    }

    .dx-fileuploader-input-label {
        text-align: center;
    }

    .dx-fileuploader-input-container {
        display: block;
        border: @GENERIC_FILEUPLOADER_FILE_WRAPPER_BORDER_SIZE dashed @fileuploader-border-color;
        width: 100%;
    }

    .dx-fileuploader-input {
        display: block;
        width: 100%;
        padding: @GENERIC_FILEUPLOADER_VERTICAL_PADDING*2 @GENERIC_FILEUPLOADER_FILE_WRAPPER_BORDER_SIZE;
        // NOTE: height of the widget should be the same in default and drag over states
        margin-bottom: 1px;
        box-sizing: content-box;
    }

    .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors
        padding: @GENERIC_FILEUPLOADER_VERTICAL_PADDING*2 @GENERIC_FILEUPLOADER_VERTICAL_PADDING + 2px;
    }
}

.dx-fileuploader-file-status-message,
.dx-fileuploader-file-size {
    color: @fileuploader-falename-status-color;
}

.dx-fileuploader-input {
    padding: @GENERIC_FILEUPLOADER_VERTICAL_PADDING 0;
}

.dx-fileuploader-input-label {
    padding: @GENERIC_FILEUPLOADER_VERTICAL_PADDING + (@GENERIC_BASE_FONT_SIZE/2 - @GENERIC_FILEUPLOADER_VERTICAL_PADDING)/2 + 1px @GENERIC_FILEUPLOADER_VERTICAL_PADDING + 2px;
    color: @fileuploader-filename-color;
    .dx-overflow();
}

.dx-fileuploader-files-container {
    padding: 12px 3px 0;

    .dx-fileuploader-empty & {
        padding: 0;
    }

    .dx-invalid & {
        padding-top: 50px;
    }

    .dx-fileuploader-button .dx-button-content {
        padding: 0;
    }
}

.dx-fileuploader-file {
    padding-top: 5px;
    line-height: 13px;
}

.dx-fileuploader-file-name {
    padding-bottom: @GENERIC_FILEUPLOADER_VERTICAL_PADDING/2;
    color: @fileuploader-filename-color;
}

.dx-fileuploader-file-size {
    padding-bottom: @GENERIC_FILEUPLOADER_VERTICAL_PADDING/2;
}

.dx-fileuploader-invalid .dx-fileuploader-file-status-message {
    color: @base-danger;
}