devextreme/less/sources/widgets/ios7/dateView.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

@ROLLER_HEIGHT: 182px;
@ROLLER_ITEM_HEIGHT: 34px;
@ROLLER_PADDING: (@ROLLER_HEIGHT - @ROLLER_ITEM_HEIGHT) / 2;


.dx-dateview-wrapper {
    color: @IOS7_DATE_PICKER_TEXT_COLOR;
    font-size: 1.3em;
}

.dx-dateview-rollers {
    width: auto;
    min-width: 250px;
}

.dx-dateviewroller {
    text-align: center;

    .dx-button {
        display: none;
    }

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

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

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

.dx-dateview-datetime .dx-dateviewroller-hours .dx-scrollable-content {
    margin-left: 15px;
}

.dx-dateview-time {
    .dx-dateviewroller-hours .dx-scrollable-content {
        margin-left: 50%;
    }

    .dx-dateviewroller-minutes .dx-scrollable-content {
        margin-right: 50%;
    }
}

.dx-dateview-item {
    height: @ROLLER_ITEM_HEIGHT;
    line-height: @ROLLER_ITEM_HEIGHT;
    padding: 0 20px;
}

.dx-dateview-item-selected {
    color: @IOS7_DATE_PICKER_SELECTED_TEXT_COLOR;
}

.dx-dateview-item-selected-frame {
    position: absolute;
    top: @ROLLER_PADDING;
    width: 100%;
    height: @ROLLER_ITEM_HEIGHT;
    border-top: 1px solid @IOS7_DATE_PICKER_FRAME_BORDER_COLOR;
    border-bottom: 1px solid @IOS7_DATE_PICKER_FRAME_BORDER_COLOR;

    &:before,
    &:after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        height: @ROLLER_PADDING;
    }

    &:before {
        top: -@ROLLER_PADDING;
        .gradient-linear(@IOS_DATEVIEW_SHADOW_UP);
    }

    &:after {
        top: @ROLLER_ITEM_HEIGHT;
        .gradient-linear(@IOS_DATEVIEW_SHADOW_DOWN);
    }
}

.dx-device-phone {
    .dx-dateview-rollers {
        flex-wrap: nowrap;
    }

    .dx-dateview-item {
        padding: 0;
    }
}

.dx-rtl {
    &:first-child.dx-dateviewroller-hours {
        text-align: left;
    }

    &:last-child.dx-dateviewroller-minutes {
        text-align: right;
    }
}