devextreme/less/sources/widgets/material/colorView.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-base-colorview-styles(@COLORVIEW_HANDLE_COLOR, @COLORVIEW_HANDLE_BORDER_COLOR);

.dx-size-default() {
    @MATERIAL_COLORVIEW_CONTAINER_WIDTH: 450px;
    @MATERIAL_COLORVIEW_PALETTE_WIDTH: 288px;
    @MATERIAL_COLORVIEW_PALETTE_HEIGHT: 299px;
    @MATERIAL_COLORVIEW_ALPHA_MARGIN: 10px;
    @MATERIAL_COLORVIEW_HUE_SCALE_WIDTH: 18px;
    @MATERIAL_COLORVIEW_HUE_SCALE_MARGIN: 19px;
    @MATERIAL_COLORVIEW_COLOR_PREVIEW_HEIGHT: 40px;
    @MATERIAL_COLORVIEW_PREVIEW_CONTAINER_MARGIN: 34px;

    @MATERIAL_COLORVIEW_CONTAINER_LINE_HEIGHT: normal;
    @MATERIAL_COLORVIEW_CONTAINER_HEX_MARGIN: 20px 0 0 0;
    @MATERIAL_COLORVIEW_CONTAINER_ALPHA_LABEL_WIDTH: 115px;
    @MATERIAL_COLORVIEW_CONTAINER_ALPHA_LABEL_MARGIN: 43px;
    @MATERIAL_COLORVIEW_CONTAINER_TEXTBOX_WIDTH: 69px;
    @MATERIAL_COLORVIEW_CONTAINER_TEXTBOX_MARGIN: 0 0 0 10px;

    @MATERIAL_COLORVIEW_CONTROLS_CONTAINER_WIDTH: 90px;
    @MATERIAL_COLORVIEW_CONTROLS_CONTAINER_MARGIN: 27px;
}

.dx-size-compact() {
    @MATERIAL_COLORVIEW_CONTAINER_WIDTH: 450px;
    @MATERIAL_COLORVIEW_PALETTE_WIDTH: 288px;
    @MATERIAL_COLORVIEW_PALETTE_HEIGHT: 299px;
    @MATERIAL_COLORVIEW_ALPHA_MARGIN: 10px;
    @MATERIAL_COLORVIEW_HUE_SCALE_WIDTH: 18px;
    @MATERIAL_COLORVIEW_HUE_SCALE_MARGIN: 19px;
    @MATERIAL_COLORVIEW_COLOR_PREVIEW_HEIGHT: 40px;
    @MATERIAL_COLORVIEW_PREVIEW_CONTAINER_MARGIN: 34px;

    @MATERIAL_COLORVIEW_CONTAINER_LINE_HEIGHT: normal;
    @MATERIAL_COLORVIEW_CONTAINER_HEX_MARGIN: 20px 0 0 0;
    @MATERIAL_COLORVIEW_CONTAINER_ALPHA_LABEL_WIDTH: 115px;
    @MATERIAL_COLORVIEW_CONTAINER_ALPHA_LABEL_MARGIN: 43px;
    @MATERIAL_COLORVIEW_CONTAINER_TEXTBOX_WIDTH: 69px;
    @MATERIAL_COLORVIEW_CONTAINER_TEXTBOX_MARGIN: 0 0 0 10px;

    @MATERIAL_COLORVIEW_CONTROLS_CONTAINER_WIDTH: 90px;
    @MATERIAL_COLORVIEW_CONTROLS_CONTAINER_MARGIN: 27px;
}

@MATERIAL_COLORVIEW_ALPHA_WIDTH: @MATERIAL_COLORVIEW_PALETTE_WIDTH + 4;
@MATERIAL_COLORVIEW_HUE_SCALE_HEIGHT: @MATERIAL_COLORVIEW_PALETTE_HEIGHT;

.dx-colorview-container {
    width: @MATERIAL_COLORVIEW_CONTAINER_WIDTH;

    label {
        line-height: @MATERIAL_COLORVIEW_CONTAINER_LINE_HEIGHT;
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        &.dx-colorview-label-hex {
            margin: @MATERIAL_COLORVIEW_CONTAINER_HEX_MARGIN;
        }

        &.dx-colorview-alpha-channel-label {
            margin: 0 0 0 @MATERIAL_COLORVIEW_CONTAINER_ALPHA_LABEL_MARGIN;
            width: @MATERIAL_COLORVIEW_CONTAINER_ALPHA_LABEL_WIDTH;
        }

        .dx-texteditor {
            width: @MATERIAL_COLORVIEW_CONTAINER_TEXTBOX_WIDTH;
            margin: @MATERIAL_COLORVIEW_CONTAINER_TEXTBOX_MARGIN;
        }
    }
}

.dx-colorview-hue-scale-cell {
    margin-left: @MATERIAL_COLORVIEW_HUE_SCALE_MARGIN;
}

.dx-colorview-palette {
    width: @MATERIAL_COLORVIEW_PALETTE_WIDTH;
    height: @MATERIAL_COLORVIEW_PALETTE_HEIGHT;
}

.dx-colorview-alpha-channel-scale {
    width: @MATERIAL_COLORVIEW_PALETTE_WIDTH;
}

.dx-colorview-container-row.dx-colorview-alpha-channel-row {
    margin-top: @MATERIAL_COLORVIEW_ALPHA_MARGIN;
    display: flex;
    align-items: center;
}

.dx-colorview-hue-scale {
    width: @MATERIAL_COLORVIEW_HUE_SCALE_WIDTH;
    height: @MATERIAL_COLORVIEW_HUE_SCALE_HEIGHT;
}

.dx-colorview-alpha-channel-cell {
    width: @MATERIAL_COLORVIEW_ALPHA_WIDTH;
}

.dx-colorview-hue-scale-wrapper {
    height: @MATERIAL_COLORVIEW_HUE_SCALE_HEIGHT + 2;
}

.dx-colorview-color-preview {
    width: 100%;
    height: @MATERIAL_COLORVIEW_COLOR_PREVIEW_HEIGHT;
}

.dx-colorview-controls-container {
    width: @MATERIAL_COLORVIEW_CONTROLS_CONTAINER_WIDTH;
    margin-left: @MATERIAL_COLORVIEW_CONTROLS_CONTAINER_MARGIN;
}

.dx-colorview-container label { // stylelint-disable-line no-duplicate-selectors
    color: @colorview-label-color;
}

.dx-colorview-palette-cell,
.dx-colorview-alpha-channel-border,
.dx-colorview-hue-scale-wrapper,
.dx-colorview-color-preview-container {
    padding: 1px;
    margin: 1px;
    margin-top: 0;
    background-color: @colorbox-palette-cell-bg;
    box-shadow: 0 0 0 1px @colorview-border-color;
}

.dx-colorview-color-preview-container {
    margin-bottom: @MATERIAL_COLORVIEW_PREVIEW_CONTAINER_MARGIN;
}

.dx-rtl {
    .dx-colorview-controls-container {
        margin-left: 0;
        margin-right: @MATERIAL_COLORVIEW_CONTROLS_CONTAINER_MARGIN;
    }

    .dx-colorview-hue-scale-cell {
        margin-left: 0;
        margin-right: @MATERIAL_COLORVIEW_HUE_SCALE_MARGIN;
    }

    .dx-colorview-container {
        label {
            &.dx-colorview-alpha-channel-label {
                margin-left: 0;
                margin-right: @MATERIAL_COLORVIEW_CONTAINER_ALPHA_LABEL_MARGIN;
            }
        }
    }
}