fomantic-ui/src/definitions/modules/calendar.less

Fomantic empowers designers and developers by creating a shared vocabulary for UI.

/*!
 * # Fomantic-UI - Calendar
 * https://github.com/fomantic/Fomantic-UI/
 *
 *
 * Released under the MIT license
 * https://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type: "module";
@element: "calendar";

@import (multiple) "../../theme.config";

/*******************************
            Popup
*******************************/

.ui.calendar.popup {
    max-width: none;
    padding: 0;
    border: none;
    user-select: none;
    &.inverted::before when (@variationCalendarInverted) {
        background: @invertedArrowBackground;
    }
}

/*******************************
            Calendar
*******************************/

.ui.calendar .calendar:focus,
.ui.calendar.popup:focus {
    outline: 0;
}

/*******************************
            Grid
*******************************/

.ui.calendar.popup .ui.grid {
    display: block;
    white-space: nowrap;
}

.ui.calendar.popup .ui.grid > .column {
    width: auto;
}

/*******************************
            Table
*******************************/

.ui.calendar .ui.table.year,
.ui.calendar .ui.table.month,
.ui.calendar .ui.table.minute {
    min-width: 15em;
}

.ui.calendar .ui.table.day {
    min-width: 18em;
}

.ui.calendar .ui.table.day.andweek {
    min-width: 22em;
}

.ui.calendar .ui.table.hour {
    min-width: 20em;
}

.ui.calendar .ui.table tr th,
.ui.calendar .ui.table tr td {
    padding: 0.5em;
    white-space: nowrap;
}

.ui.calendar .ui.table tr th {
    border-left: none;
}

.ui.calendar .ui.table tr th i.icon {
    margin: 0;
}

.ui.calendar .ui.table tr:first-child th {
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

.ui.calendar .ui.table.day tr:first-child th {
    border: none;
}

.ui.calendar .ui.table.day tr:nth-child(2) th {
    padding-top: 0.2em;
    padding-bottom: 0.3em;
}

.ui.calendar .ui.table tr td {
    padding-left: 0.1em;
    padding-right: 0.1em;
}

.ui.calendar .ui.table tr .link {
    cursor: pointer;
}

.ui.calendar .ui.table tr .prev.link {
    width: 14.28571%;
    position: absolute;
    left: 0;
}

.ui.calendar .ui.table tr .next.link {
    width: 14.28571%;
    position: absolute;
    right: 0;
}

.ui.ui.calendar .ui.table tr .disabled {
    pointer-events: auto;
    cursor: default;
    color: @disabledTextColor;
}

.ui.calendar .ui.table tr .adjacent:not(.disabled):not(.active) {
    color: @adjacentTextColor;
    background: @adjacentBackground;
}

/* --------------
     States
--------------- */

.ui.calendar .ui.table tr td.today {
    font-weight: @todayFontWeight;
}

.ui.calendar .ui.table tr td.range {
    background: @rangeBackground;
    color: @rangeTextColor;
    box-shadow: @rangeBoxShadow;
}

.ui.calendar:not(.disabled):focus .ui.table tbody tr td.focus,
.ui.calendar:not(.disabled).popup.active .ui.table tbody tr td.focus {
    box-shadow: @focusBoxShadow;
}

& when (@variationCalendarInverted) {
    .ui.inverted.calendar .ui.table.inverted tr td.range {
        background: @rangeInvertedBackground;
        color: @rangeInvertedTextColor;
        box-shadow: @rangeInvertedBoxShadow;
    }

    .ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
    .ui.inverted.calendar:not(.disabled).popup.active .ui.table.inverted tbody tr td.focus {
        box-shadow: @focusInvertedBoxShadow;
    }
    .ui.inverted.calendar .ui.ui.ui.inverted.table tr .disabled {
        color: @invertedDisabledTextColor;
    }

    .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled):not(.active) {
        color: @adjacentInvertedTextColor;
        background: @adjacentInvertedBackground;
    }
}

& when (@variationCalendarMultiMonth) {
    .ui.calendar.popup > .ui.ui.grid {
        margin: @multiMonthMargin;
        & > .column:not(:first-child) {
            padding-left: @multiMonthPadding;
            & > .ui.table {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
        & > .column:not(:last-child) {
            padding-right: @multiMonthPadding;
            & > .ui.table {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
    }
}

/*******************************
            States
*******************************/

& when (@variationCalendarDisabled) {
    /* --------------------
            Disabled
    --------------------- */

    .ui.disabled.calendar {
        opacity: @disabledOpacity;
    }

    .ui.disabled.calendar > .input,
    .ui.disabled.calendar .ui.table tr .link {
        pointer-events: none;
    }
}

.loadUIOverrides();