devextreme/less/sources/widgets/generic/dateView.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/dateView.generic.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) "./scrollable.generic.less";
@import (once) "./validation.generic.less";

.dx-size-default() {
    @GENERIC_DATEVIEW_ROLLER_HEIGHT: 182px;
    @GENERIC_DATEVIEW_ROLLER_ITEM_HEIGHT: 40px;
}

.dx-size-compact() {
    @GENERIC_DATEVIEW_ROLLER_HEIGHT: 152px;
    @GENERIC_DATEVIEW_ROLLER_ITEM_HEIGHT: 34px;
}

@GENERIC_DATEVIEW_ROLLER_PADDING: (@GENERIC_DATEVIEW_ROLLER_HEIGHT - @GENERIC_DATEVIEW_ROLLER_ITEM_HEIGHT) / 2;


.dx-dateview-rollers {
    width: auto;
    text-align: center;
    display: block;
}

.dx-dateviewroller-current {
    .dx-dateview-item {
        transition: font-size 0.2s ease-out;
    }
}

.dx-dateviewroller {
    min-width: 4em;
    text-align: center;
    display: inline-block;

    .dx-button {
        display: none;
    }

    .dx-scrollable-content:before,
    .dx-scrollable-content:after {
        content: "";
        height: @GENERIC_DATEVIEW_ROLLER_PADDING;
        display: block;
    }

    .dx-scrollable-container {
        height: @GENERIC_DATEVIEW_ROLLER_HEIGHT;
    }

    &.dx-dateviewroller-year {
        min-width: 4.85em;
    }

    &.dx-state-active {
        .dx-button {
            display: none;
        }
    }
}

.dx-dateviewroller-month {
    min-width: 12em;
}

.dx-dateviewroller-hours {
    &:after {
        content: ":";
        font-size: 2.2em;
        position: absolute;
        right: -9%;
        font-weight: bold;
        top: 37%;
        color: @dateview-color;
    }

    .dx-dateview-item-selected-frame {
        padding-left: 20%;
    }
}

.dx-dateviewroller-minutes {
    .dx-dateview-item-selected-frame {
        width: 80%;
    }
}

.dx-dateview-item {
    height: @GENERIC_DATEVIEW_ROLLER_ITEM_HEIGHT;
    line-height: @GENERIC_DATEVIEW_ROLLER_ITEM_HEIGHT;
    text-align: center;
    font-size: 1.3em;
    color: @dateview-color;
}

.dx-dateview-item-selected {
    font-size: 2.2em;
}

.dx-rtl {
    &.dx-dateviewroller-hours {
        &:after {
            left: -9%;
            right: auto;
        }
    }
}

.dx-dateview-item-selected-frame {
    position: absolute;
    top: @GENERIC_DATEVIEW_ROLLER_PADDING;
    width: 100%;

    &:before,
    &:after {
        backface-visibility: hidden;
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        height: @GENERIC_DATEVIEW_ROLLER_PADDING;
    }

    &:before {
        top: -@GENERIC_DATEVIEW_ROLLER_PADDING;
        border-bottom: 1px solid @dateview-border-color;
        .gradient-linear(@dateview-shadow-up);
    }

    &:after {
        top: @GENERIC_DATEVIEW_ROLLER_ITEM_HEIGHT;
        border-top: 1px solid @dateview-border-color;
        .gradient-linear(@dateview-shadow-down);
    }
}

.dx-device-tablet,
.dx-device-phone,
.dx-dateview-compact {
    .dx-dateview-rollers {
        .flex-container(row, nowrap);
    }

    .dx-dateviewroller-month {
        min-width: 4em;
    }

    .dx-dateview-item {
        font-size: 1.1em;
    }

    .dx-dateview-item-selected {
        font-size: 1.4em;
    }
}