devextreme/less/sources/widgets/material/colorBox.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/colorBox.material.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) "./colorView.material.less";
@import (once) "./dropDownEditor.material.less";

.dx-size-default() {
    @MATERIAL_COLORBOX_OVERLAY_PADDING: 20px;
    @MATERIAL_COLORBOX_PREVIEW_LEFT: 13px;
}
.dx-size-compact() {
    @MATERIAL_COLORBOX_OVERLAY_PADDING: 16px;
    @MATERIAL_COLORBOX_PREVIEW_LEFT: 8px;
}


.dx-colorbox {
    .dx-colorbox-input-container {
        .dx-dropdowneditor-input-wrapper .dx-colorbox-input {
            padding-left: @MATERIAL_COLORBOX_PREVIEW_LEFT + 27px;
        }

        &.dx-colorbox-color-is-not-defined {
            .dx-colorbox-color-result-preview {
                background: @colorbox-preview-empty-bg no-repeat 0 0;
            }
        }

        &:after {
            left: @MATERIAL_COLORBOX_PREVIEW_LEFT + 1;
        }
    }

    .dx-placeholder {
        left: 32px;
    }
}


.dx-colorbox-color-result-preview {
    border-color: @colorview-border-color;
    left: @MATERIAL_COLORBOX_PREVIEW_LEFT;
}

.dx-colorbox-overlay {
    &.dx-overlay-content {
        background-color: @colorbox-overlay-bg;
    }

    .dx-popup-content {
        padding: @MATERIAL_COLORBOX_OVERLAY_PADDING;
    }

    padding: 0;
}

.dx-rtl {
    &.dx-colorbox,
    .dx-colorbox {
        &.dx-state-focused .dx-colorbox-input {
            padding-right: @MATERIAL_COLORBOX_PREVIEW_LEFT + 27px;
        }
    }

    .dx-colorbox-overlay {
        .dx-toolbar-item:first-child {
            padding-left: 10px;
            padding-right: 0;
        }
    }
}