devextreme/less/sources/widgets/generic/timeView.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/timeView.generic.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.generic.less";
@import (once) "./selectBox.generic.less";
@import (once) "./box.generic.less";

.dx-size-default() {
    @GENERIC_TIMEVIEW_CLOCK_MIN_SIZE: 191px;
    @GENERIC_TIMEVIEW_FIELD_MIN_HEIGHT: 50px;
    @GENERIC_TIMEVIEW_ARROW_HEIGHT_REDUCE: 0;
    @GENERIC_TIMEVIEW_FIELD_NUMBERBOX_REDUCE: 0;
    @GENERIC_TIMEVIEW_CLOCK_ADDITIONAL_SIZE: 8px;
    @GENERIC_TIMEVIEW_TIME_SEPARATOR_MARGIN: 5px;
    @GENERIC_TIMEVIEW_FORMAT12_WIDTH: 70px;
}
.dx-size-compact() {
    @GENERIC_TIMEVIEW_CLOCK_MIN_SIZE: 161px;
    @GENERIC_TIMEVIEW_FIELD_MIN_HEIGHT: 32px;
    @GENERIC_TIMEVIEW_ARROW_HEIGHT_REDUCE: 20px;
    @GENERIC_TIMEVIEW_FIELD_NUMBERBOX_REDUCE: 16px;
    @GENERIC_TIMEVIEW_CLOCK_ADDITIONAL_SIZE: 8px;
    @GENERIC_TIMEVIEW_TIME_SEPARATOR_MARGIN: 5px;
    @GENERIC_TIMEVIEW_FORMAT12_WIDTH: 55px;
}


.dx-timeview {
    height: auto;
    width: auto;
}

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

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

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

.dx-timeview-format12 {
    width: @GENERIC_TIMEVIEW_FORMAT12_WIDTH;
    margin-left: @GENERIC_TIMEVIEW_TIME_SEPARATOR_MARGIN;
    margin-right: auto;

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

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

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

.dx-timeview-field .dx-numberbox {
    width: 70px - @GENERIC_TIMEVIEW_FIELD_NUMBERBOX_REDUCE;

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