devextreme/less/sources/widgets/common/colorView.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

@COLOR_VIEW_CONTAINER_WIDTH: 450px;
@COLOR_VIEW_PALETTE_WIDTH: 288px;
@COLOR_VIEW_PALETTE_HEIGHT: 299px;
@COLOR_VIEW_ALPHA_WIDTH: 292px;
@COLOR_VIEW_HUE_SCALE_WIDTH: 18px;
@COLOR_VIEW_HUE_SCALE_HEIGHT: @COLOR_VIEW_PALETTE_HEIGHT;

@COLORVIEW_PALETTE_HANDLE_SIZE: 28px;
@COLORVIEW_TRANSPARENT_BACKGROUND_COLOR: #cccccc;

@COLORVIEW_HANDLE_FIRST_SIDE_SIZE: 36px;
@COLORVIEW_HANDLE_SECOND_SIDE_SIZE: 17px;


.dx-colorview-container {
    width: @COLOR_VIEW_CONTAINER_WIDTH;
    overflow: hidden;

    label {
        display: block;
        overflow: hidden;
        line-height: 36px;
        font-weight: normal;
        margin: 0;
        white-space: normal;

        &.dx-colorview-label-hex {
            margin: 10px 0 0 0;
        }

        &.dx-colorview-alpha-channel-label {
            margin-left: 43px;
            width: 115px;
        }

        .dx-texteditor {
            width: 69px;
            float: right;
            margin: 1px 1px 10px 0;
        }
    }

    .dx-button {
        margin-top: 0;
        margin-bottom: 0;

        &.dx-colorview-apply-button {
            margin-right: 10px;
            margin-left: 0;
        }

        &.dx-colorview-cancel-button {
            margin-right: 0;
            margin-left: 0;
        }
    }
}

.dx-colorview-container-row {
    overflow: hidden;
    padding-top: 1px;

    &:first-child {
        margin-top: 0;
    }

    &.dx-colorview-alpha-channel-row {
        margin-top: 10px;
    }
}

.dx-colorview-container-cell {
    float: left;
}

.dx-colorview-palette-handle {
    width: @COLORVIEW_PALETTE_HANDLE_SIZE;
    height: @COLORVIEW_PALETTE_HANDLE_SIZE;
    top: 0;
    left: 0;
    cursor: crosshair;
    border-radius: 100%;
    z-index: 5;
}

.dx-colorview-hue-scale-handle,
.dx-colorview-alpha-channel-handle {
    position: absolute;
    cursor: pointer;
}

.dx-colorview-hue-scale-handle {
    width: @COLORVIEW_HANDLE_FIRST_SIDE_SIZE;
    height: @COLORVIEW_HANDLE_SECOND_SIDE_SIZE;
    top: 0;
    left: -7px;
}

.dx-colorview-alpha-channel-handle {
    width: @COLORVIEW_HANDLE_SECOND_SIDE_SIZE;
    height: @COLORVIEW_HANDLE_FIRST_SIDE_SIZE;
    top: -6px;
    left: 0;
}

.dx-colorview-hue-scale {
    position: relative;
    width: @COLOR_VIEW_HUE_SCALE_WIDTH;
    height: @COLOR_VIEW_HUE_SCALE_HEIGHT;

    @hue-scale-bg: 0deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%;
    .gradient-linear(@hue-scale-bg);
}

.dx-colorview-color-preview-container-inner,
.dx-colorview-alpha-channel-wrapper,
.dx-colorbox-input-container::after {
    background-image: linear-gradient(45deg, @COLORVIEW_TRANSPARENT_BACKGROUND_COLOR 25%, transparent 25%, transparent 74%, @COLORVIEW_TRANSPARENT_BACKGROUND_COLOR 75%, @COLORVIEW_TRANSPARENT_BACKGROUND_COLOR), linear-gradient(45deg, @COLORVIEW_TRANSPARENT_BACKGROUND_COLOR 25%, transparent 25%, transparent 74%, @COLORVIEW_TRANSPARENT_BACKGROUND_COLOR 75%, @COLORVIEW_TRANSPARENT_BACKGROUND_COLOR);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.dx-colorview-alpha-channel-wrapper {
    background-position: 0 6px, 8px 14px;
}

.dx-colorbox-input-container {
    height: 100%;
}


.dx-colorview-palette-gradient-white {
    @palette-white-bg: 270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1);
    .gradient-linear(@palette-white-bg);
}

.dx-colorview-palette-gradient-black {
    @palette-black-bg: 180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1);
    .gradient-linear(@palette-black-bg);
}

.dx-colorview-palette {
    position: relative;
    overflow: hidden;
    width: @COLOR_VIEW_PALETTE_WIDTH;
    height: @COLOR_VIEW_PALETTE_HEIGHT;
    cursor: crosshair;
}

.dx-colorview-palette-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dx-colorview-alpha-channel-scale {
    width: @COLOR_VIEW_PALETTE_WIDTH;
    height: 20px;
    position: relative;
}

.dx-colorview-hue-scale-cell {
    margin-left: 19px;
    position: relative;
}

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

.dx-colorview-controls-container {
    position: relative;
    width: 90px;
    margin-left: 27px;
}

.dx-colorview-color-preview {
    width: 86px;
    height: 40px;
}

.dx-colorview-alpha-channel-cell {
    margin: 6px 0;
    position: relative;
    width: @COLOR_VIEW_ALPHA_WIDTH;

    .dx-button {
        width: 90px;
    }
}

.dx-rtl {
    .dx-colorview-container-row {
        .dx-colorview-container-cell {
            float: right;
        }
    }

    .dx-colorview-hue-scale-cell {
        margin-right: 19px;
        margin-left: 0;
    }

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

            .dx-texteditor {
                float: left;
            }
        }
    }

    .dx-colorview-controls-container {
        margin-right: 25px;
        margin-left: 0;
    }

    .dx-colorview-alpha-channel-scale {
        direction: ltr;
    }
}