devextreme/less/sources/widgets/material/calendar.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/calendar.material.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) "./button.material.less";

.dx-size-default() {
    @MATERIAL_CALENDAR_CELL_FONT_SIZE: 12px;
    @MATERIAL_CALENDAR_BODY_WIDTH: 320px;
    @MATERIAL_CALENDAR_BODY_HEIGHT: 267px;
    @MATERIAL_CALENDAR_BODY_TOP: 49px;
    @MATERIAL_CALENDAR_FOOTER_HEIGHT: 45px;
    @MATERIAL_CALENDAR_NAVIGATOR_VERTICAL_PADDING: 9px;
    @MATERIAL_CALENDAR_NAVIGATOR_HEIGHT: 36px;

    @MATERIAL_CALENDAR_HEADER_BOTTOM_PADDING: 10px;
    @MATERIAL_CALENDAR_CELL_HORIZONTAL_PADDING: 8px;
    @MATERIAL_NAV_BUTTON_WIDTH: 32px;
    @MATERIAL_CALENDAR_CAPTION_BUTTON_PADDING: 2px 15px 4px;
    @MATERIAL_CALENDAR_CELL_WIDTH: 39px;
    @MATERIAL_CALENDAR_CELL_DIAMETER: 32px;
    @MATERIAL_CALENDAR_CELL_VERTICAL_PADDING: 4px;
}

.dx-size-compact() {
    @MATERIAL_CALENDAR_CELL_FONT_SIZE: 12px;
    @MATERIAL_CALENDAR_BODY_WIDTH: 250px;
    @MATERIAL_CALENDAR_BODY_HEIGHT: 200px;
    @MATERIAL_CALENDAR_BODY_TOP: 35px;
    @MATERIAL_CALENDAR_FOOTER_HEIGHT: 45px;
    @MATERIAL_CALENDAR_NAVIGATOR_VERTICAL_PADDING: 9px;
    @MATERIAL_CALENDAR_NAVIGATOR_HEIGHT: 28px;

    @MATERIAL_CALENDAR_HEADER_BOTTOM_PADDING: 10px;
    @MATERIAL_CALENDAR_CELL_HORIZONTAL_PADDING: 8px;
    @MATERIAL_NAV_BUTTON_WIDTH: 28px;
    @MATERIAL_CALENDAR_CAPTION_BUTTON_PADDING: 2px 15px 4px;
    @MATERIAL_CALENDAR_CELL_WIDTH: 32px;
    @MATERIAL_CALENDAR_CELL_DIAMETER: 28px;
    @MATERIAL_CALENDAR_CELL_VERTICAL_PADDING: 0;
}

@MATERIAL_CALENDAR_NAVIGATOR_ICON_FONTSIZE: @MATERIAL_BASE_ICON_SIZE;
@MATERIAL_CALENDAR_NAVIGATOR_FONTSIZE: 14px;
@MATERIAL_CALENDAR_NAVIGATOR_LINE_HEIGHT: 1.6;
@MATERIAL_CALENDAR_WIDTH: @MATERIAL_CALENDAR_BODY_WIDTH;
@MATERIAL_CALENDAR_HEIGHT: @MATERIAL_CALENDAR_BODY_HEIGHT + @MATERIAL_CALENDAR_NAVIGATOR_FONTSIZE * @MATERIAL_CALENDAR_NAVIGATOR_LINE_HEIGHT + @MATERIAL_CALENDAR_NAVIGATOR_VERTICAL_PADDING * 2;

.dx-calendar {
    width: @MATERIAL_CALENDAR_WIDTH;
    min-width: @MATERIAL_CALENDAR_WIDTH;
    height: @MATERIAL_CALENDAR_HEIGHT + 20px;
    min-height: @MATERIAL_CALENDAR_HEIGHT + 20px;
    background-color: @calendar-bg;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: 0;
    border: 1px solid transparent;

    &.dx-calendar-with-footer {
        height: @MATERIAL_CALENDAR_HEIGHT + @MATERIAL_CALENDAR_FOOTER_HEIGHT + 10px + 20px;
        min-height: @MATERIAL_CALENDAR_HEIGHT + @MATERIAL_CALENDAR_FOOTER_HEIGHT;

        .dx-calendar-body {
            bottom: @MATERIAL_CALENDAR_FOOTER_HEIGHT + 10px;
        }

        .dx-calendar-footer {
            text-align: center;
            height: @MATERIAL_CALENDAR_FOOTER_HEIGHT;
            width: 100%;
        }
    }
}

.dx-calendar-navigator {
    line-height: @MATERIAL_CALENDAR_NAVIGATOR_LINE_HEIGHT;
    height: @MATERIAL_CALENDAR_NAVIGATOR_HEIGHT;
    display: table;
    border-collapse: collapse;

    .dx-button {
        height: 100%;
        display: table-cell;

        .dx-button-flat-color-styling(@button-default-bg, @button-default-text-hover-bg, @button-default-text-focused-bg, @button-default-text-active-bg);

        .dx-button-text {
            text-transform: none;
        }

        .dx-icon {
            font-size: @MATERIAL_CALENDAR_NAVIGATOR_ICON_FONTSIZE;
        }

        &.dx-calendar-disabled-navigator-link {
            border-collapse: collapse;
            visibility: visible;
            opacity: 1;

            .dx-button-content {
                opacity: 0.5;
            }
        }

        &.dx-state-active:not(.dx-calendar-disabled-navigator-link) {
            z-index: 1;
        }

        &.dx-state-hover:not(.dx-calendar-disabled-navigator-link) {
            z-index: 1;
        }
    }

    .dx-calendar-caption-button {
        font-size: @MATERIAL_CALENDAR_NAVIGATOR_FONTSIZE;
        line-height: 1.2;
        text-transform: uppercase;
        right: @MATERIAL_NAV_BUTTON_WIDTH;
        left: @MATERIAL_NAV_BUTTON_WIDTH;

        &.dx-button {
            .dx-button-content {
                padding: @MATERIAL_CALENDAR_CAPTION_BUTTON_PADDING;
            }
        }
    }
}

.dx-calendar-navigator-previous-month {
    width: @MATERIAL_NAV_BUTTON_WIDTH;
    background: none;

    &.dx-button {
        margin: 0 2px;
    }

    .dx-button-content {
        padding: 0;
    }

    &.dx-state-hover {
        z-index: 1;
    }
}

.dx-calendar-navigator-previous-month,
.dx-calendar-navigator-next-view {
    width: @MATERIAL_NAV_BUTTON_WIDTH;
    background: none;

    &.dx-button {
        margin: 0 1px;
    }

    .dx-button-content {
        padding: 0;
    }
}


.dx-calendar-navigator-previous-view,
.dx-calendar-navigator-previous-month {
    left: 0;

    &.dx-button {
        border-radius: @calendar-navigator-border-radius 0 0 @calendar-navigator-border-radius;

        .dx-icon {
            color: @calendar-shevron-icon-color;
        }
    }
}

.dx-calendar-navigator-next-view,
.dx-calendar-navigator-next-month {
    right: 0;

    &.dx-button {
        border-radius: 0 @calendar-navigator-border-radius @calendar-navigator-border-radius 0;

        .dx-icon {
            color: @calendar-shevron-icon-color;
        }
    }
}

.dx-calendar-body {
    top: @MATERIAL_CALENDAR_BODY_TOP;

    thead {
        font-size: 11px;
        line-height: 1.2;

        tr {
            height: 25px;
            padding-bottom: 10px;
        }
    }

    table {
        border-spacing: 0;

        th {
            color: @calendar-header-color;
            font-weight: 500;
            text-align: center;
            padding: 1px 0 @MATERIAL_CALENDAR_HEADER_BOTTOM_PADDING 0;
        }
    }
}

.dx-calendar-cell {
    text-align: center;
    padding: @MATERIAL_CALENDAR_CELL_VERTICAL_PADDING 0;
    color: @calendar-color;
    font-size: @MATERIAL_CALENDAR_CELL_FONT_SIZE;
    width: @MATERIAL_CALENDAR_CELL_WIDTH;
    border-radius: @calendar-cell-contoured-border-radius;

    .dx-calendar-view-decade &,
    .dx-calendar-view-year & {
        span {
            line-height: 400%;
            width: 48px;
        }
    }


    .dx-calendar-view-century & {
        span {
            line-height: 200%;
            width: 48px;
        }
    }


    span {
        display: inline-block;
        width: @MATERIAL_CALENDAR_CELL_DIAMETER;
        line-height: @MATERIAL_CALENDAR_CELL_DIAMETER;
        border-radius: 50%;
    }

    &.dx-calendar-today {
        font-weight: bold;
        color: @calendar-cell-selected-bg;
    }

    &.dx-state-hover,
    &.dx-calendar-contoured-date:not(.dx-calendar-today):not(.dx-calendar-selected-date):not(.dx-calendar-empty-cell) {
        color: @calendar-cell-hover-color;

        span {
            background-color: @calendar-hover-bg;
        }
    }

    &.dx-calendar-other-view,
    &.dx-calendar-empty-cell {
        color: @calendar-cell-other-color;


        &.dx-state-hover,
        &.dx-state-active {
            color: @calendar-cell-other-hover-color;
        }
    }

    &.dx-calendar-empty-cell {
        cursor: default;
        color: fade(@calendar-color, 25%);

        &.dx-state-hover:not(.dx-calendar-selected-date) {
            color: fade(@calendar-color, 25%);

            span {
                background-color: transparent;
            }
        }
    }

    &.dx-state-active {
        &:not(.dx-calendar-empty-cell) {
            &:not(.dx-calendar-selected-date) {
                span {
                    background-color: @calendar-cell-active-bg;
                }
            }
        }
    }

    &.dx-calendar-selected-date {
        &,
        &.dx-calendar-today {
            span {
                color: @base-inverted-text-color;
                background-color: @calendar-cell-selected-bg;
                font-weight: normal;
            }
        }
    }
}

.dx-invalid {
    &.dx-calendar {
        border-color: @calendar-invalid-faded-border-color;

        &.dx-state-focused {
            border-color: @calendar-invalid-focused-border-color;
        }
    }
}

.dx-popup-wrapper {
    .dx-calendar {
        .dx-calendar-caption-button {
            margin: 0;
        }
    }
}