devextreme/less/sources/widgets/generic/dateBox.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-size-default() {
    @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN: 30px;
    @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN_ADAPTIVE: 18px;
    @GENERIC_DATEBOX_OVERLAY_BUTTON_WIDTH: 85px;
    @GENERIC_DATEBOX_POPUP_CONTENT_MARGIN: 0 34px;
    @GENERIC_DATEBOX_INPUT_MIN_HEIGHT: 33px;
}

.dx-size-compact() {
    @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN: 15px;
    @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN_ADAPTIVE: 15px;
    @GENERIC_DATEBOX_OVERLAY_BUTTON_WIDTH: 60px;
    @GENERIC_DATEBOX_POPUP_CONTENT_MARGIN: 0 14px;
    @GENERIC_DATEBOX_INPUT_MIN_HEIGHT: 23px;
}


.dx-datebox-wrapper {
    .dx-popup-title {
        min-height: 10px;
        border-bottom: none;
        background: none;
    }

    .dx-item {
        border: none;
    }

    .dx-popup-bottom {
        .dx-button {
            min-width: @GENERIC_DATEBOX_OVERLAY_BUTTON_WIDTH;
            width: auto;
        }
    }
}

.dx-datebox-wrapper-rollers.dx-datebox-wrapper-time .dx-popup-content {
    margin: @GENERIC_DATEBOX_POPUP_CONTENT_MARGIN;
}

.dx-datebox-wrapper-list {
    .dx-overlay-content {
        border-top: none;
    }
}

.dx-device-phone .dx-datebox-wrapper-rollers {
    .dx-popup-content {
        padding: 10px;
    }
}

.dx-datebox-calendar {
    .dx-dropdowneditor-icon {
        .dx-icon(event);
        .dx-dropdowneditor-button-icon();
    }

    &.dx-rtl {
        &.dx-dropdowneditor-active {
            .dx-dropdowneditor-button {
                .dx-dropdowneditor-icon {
                    opacity: 1;
                }
            }
        }

        &.dx-editor-underlined {
            padding-right: 0;
        }
    }
}

.dx-datebox-wrapper-calendar {
    .dx-popup-content {
        padding: 0;
        margin: 0 @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN/2;
    }

    .dx-calendar {
        border: none;
        margin: @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN/2;
    }

    .dx-datebox-container-cell {
        margin-right: @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN;
        margin-bottom: @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN;
    }
}

.dx-datebox-wrapper-calendar.dx-datebox-wrapper-datetime {
    .dx-calendar {
        margin-bottom: @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN/2;
    }

    .dx-timeview {
        margin: @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN/2 @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN/2;

        .dx-datebox-adaptivity-mode& {
            margin: 0 @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN/2 @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN/2;
        }
    }

    .dx-datebox-container-cell {
        margin-top: -1px;
        margin-right: @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN;
    }
}

@media (max-width: 320px) {
    .dx-datebox-wrapper-calendar .dx-calendar {
        margin: @GENERIC_DATEBOX_OVERLAY_ITEM_MARGIN_ADAPTIVE;
    }
}

.dx-rtl {
    .dx-datebox-wrapper {
        .dx-popup-bottom {
            .dx-toolbar-button + .dx-toolbar-button {
                .dx-button {
                    margin-right: 5px;
                    margin-left: 0;
                }
            }
        }
    }
}

.dx-datebox-list {
    .dx-dropdowneditor-icon {
        .dx-icon(clock);
        .dx-dropdowneditor-button-icon();
    }
}

.dx-datebox-wrapper-list .dx-popup-content {
    padding: 0;
}

.dx-datebox {
    input[type="date"] {
        line-height: normal;
    }

    &,
    &:not(.dx-texteditor-empty) {
        &.dx-auto-width {
            .invalid-dropdowneditor-input-padding();
        }
    }
}

.dx-device-ios .dx-datebox.dx-texteditor-empty .dx-texteditor-input {
    min-height: @GENERIC_DATEBOX_INPUT_MIN_HEIGHT;
}