devextreme/less/sources/widgets/material/timeView.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/timeView.material.less)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./numberBox.material.less";
@import (once) "./selectBox.material.less";
@import (once) "./box.material.less";

.dx-size-default() {
    @MATERIAL_TIMEVIEW_CLOCK_MIN_SIZE: 252px;
    @MATERIAL_TIMEVIEW_CLOCK_IMAGE_MIN_SIZE: 215px;
    @MATERIAL_TIMEVIEW_FIELD_MIN_HEIGHT: 35px;
    @MATERIAL_TIMEVIEW_ARROW_HEIGHT_REDUCE: 0;
    @MATERIAL_TIMEVIEW_FIELD_NUMBERBOX_REDUCE: 0;
    @MATERIAL_TIMEVIEW_CLOCK_ADDITIONAL_SIZE: 8px;
    @MATERIAL_TIMEVIEW_TIME_SEPARATOR_MARGIN: 5px;
    @MATERIAL_TIMEVIEW_FORMAT12_WIDTH: 74px;
}
.dx-size-compact() {
    @MATERIAL_TIMEVIEW_CLOCK_MIN_SIZE: 200px;
    @MATERIAL_TIMEVIEW_CLOCK_IMAGE_MIN_SIZE: 190px;
    @MATERIAL_TIMEVIEW_FIELD_MIN_HEIGHT: 35px;
    @MATERIAL_TIMEVIEW_ARROW_HEIGHT_REDUCE: 0;
    @MATERIAL_TIMEVIEW_FIELD_NUMBERBOX_REDUCE: 0;
    @MATERIAL_TIMEVIEW_CLOCK_ADDITIONAL_SIZE: 8px;
    @MATERIAL_TIMEVIEW_TIME_SEPARATOR_MARGIN: 5px;
    @MATERIAL_TIMEVIEW_FORMAT12_WIDTH: 63px;
}


.dx-timeview {
    height: auto;
    width: auto;
    background-color: @timeview-bg;
}

.dx-timeview-clock {
    min-height: @MATERIAL_TIMEVIEW_CLOCK_MIN_SIZE + @MATERIAL_TIMEVIEW_CLOCK_ADDITIONAL_SIZE;
    min-width: @MATERIAL_TIMEVIEW_CLOCK_MIN_SIZE + @MATERIAL_TIMEVIEW_CLOCK_ADDITIONAL_SIZE;
    background: @timeview-clock-bg no-repeat 50% 50%;
    background-size: @MATERIAL_TIMEVIEW_CLOCK_IMAGE_MIN_SIZE;
}

.dx-timeview-hourarrow {
    background-image: @timeview-hourarrow-bg;
    background-size: 5px 57px - @MATERIAL_TIMEVIEW_ARROW_HEIGHT_REDUCE;
}

.dx-timeview-minutearrow {
    background-image: @timeview-minutearrow-bg;
    background-size: 5px 79px - @MATERIAL_TIMEVIEW_ARROW_HEIGHT_REDUCE / 2;
}

.dx-timeview-format12 {
    width: @MATERIAL_TIMEVIEW_FORMAT12_WIDTH;
    margin-left: @MATERIAL_TIMEVIEW_TIME_SEPARATOR_MARGIN;
    margin-right: auto;

    &.dx-rtl,
    .dx-rtl & {
        margin-left: auto;
        margin-right: @MATERIAL_TIMEVIEW_TIME_SEPARATOR_MARGIN;
    }

    &.dx-dropdowneditor-button-visible {
        .dx-texteditor-container {
            .dx-texteditor-input {
                padding-right: 0;

                .dx-rtl & {
                    padding-left: 0;
                }
            }

            .dx-texteditor-buttons-container .dx-dropdowneditor-button {
                margin-right: 0;

                &.dx-rtl,
                .dx-rtl & {
                    margin-left: 0;
                }
            }
        }

        &.dx-editor-filled,
        &.dx-editor-outlined {
            .dx-texteditor-container {
                .dx-texteditor-input {
                    .dx-rtl&,
                    .dx-rtl & {
                        padding-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
                    }
                }
            }
        }
    }
}

.dx-timeview-time-separator {
    margin: 0 @MATERIAL_TIMEVIEW_TIME_SEPARATOR_MARGIN;
}

.dx-timeview-field {
    min-height: @MATERIAL_TIMEVIEW_FIELD_MIN_HEIGHT;
}

.dx-timeview-field .dx-numberbox {
    width: @MATERIAL_TIMEVIEW_FORMAT12_WIDTH - @MATERIAL_TIMEVIEW_FIELD_NUMBERBOX_REDUCE;

    &.dx-numberbox-spin-touch-friendly {
        width: 110px - @MATERIAL_TIMEVIEW_FIELD_NUMBERBOX_REDUCE;
    }
}