devextreme/less/sources/widgets/material/dateBox.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-size-default() {
    @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN: 10px;
    @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN_ADAPTIVE: 18px;
    @MATERIAL_DATEBOX_POPUP_CONTENT_MARGIN: 0 34px;
    @MATERIAL_DATEBOX_INPUT_MIN_HEIGHT: 33px;
}

.dx-size-compact() {
    @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN: 10px;
    @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN_ADAPTIVE: 18px;
    @MATERIAL_DATEBOX_POPUP_CONTENT_MARGIN: 0 34px;
    @MATERIAL_DATEBOX_INPUT_MIN_HEIGHT: 33px;
}


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

    .dx-item {
        border: none;
    }

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

.dx-datebox-wrapper-rollers.dx-datebox-wrapper-time .dx-popup-content {
    margin: @MATERIAL_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(spindown);
        .dx-dropdowneditor-button-icon();
    }

    &.dx-dropdowneditor-active {
        &.dx-editor-filled {
            background: @texteditor-hover-bg; //TODO: Use active state const instead
        }
    }

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

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

    .dx-calendar {
        border: none;
        margin: @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN;
    }

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

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

    .dx-timeview {
        padding: @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN;

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

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

@media (max-width: 320px) {
    .dx-datebox-wrapper-calendar .dx-calendar {
        margin: @MATERIAL_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-wrapper-calendar.dx-datebox-wrapper-datetime {
        .dx-calendar {
            margin-left: @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN/2;
            margin-right: @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN;
        }

        .dx-timeview {
            margin-right: @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN/2;
            margin-left: @MATERIAL_DATEBOX_OVERLAY_ITEM_MARGIN;
        }
    }
}

.dx-datebox-list {
    .dx-dropdowneditor-icon {
        .dx-icon(spindown);
        .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: @MATERIAL_DATEBOX_INPUT_MIN_HEIGHT;
}