qcal/src/Calendar.scss

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/forms';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/buttons';
@import './consts';

.Calendar {
    @include make-container();
}

.Calendar-head {
    display: flex;
    justify-content: center;
    font-size: 2em;
    font-weight: 600;
    position: sticky;
    top: 0;
    background: white;
    margin-top: -$spacer * 4;
    margin-left: -$spacer;
    margin-right: -$spacer;
    padding-top: $spacer * 4;
    padding-left: $spacer;
    padding-right: $spacer;

    .btn {
        margin: 0 1px;
    }
}

.Calendar-prev, .Calendar-next {
    flex: 0 70px;
}

.Calendar-prev {
    text-align: right;
}

.Calendar-month-name {
    flex: 1;
    max-width: 30rem;
    text-align: center;
}

.Month-decadeHead {
    display: none;
}

.Month-decade {
    @include make-row($gutter: 0);

    > * {
        @include make-col-ready();
    }
}

.Month-decadeSplitter-small, .Month-decadeSplitter-medium {
    width: 100%;
}

.Month-decadeSplitter-medium {
    display: none;
}

@include media-breakpoint-up(md) {
    .Month-decadeSplitter-small {
        display: none;
    }

    .Month-decadeSplitter-medium {
        display: block;
    }
}

@include media-breakpoint-up(xl) {
    .Month-decadeSplitter-medium {
        display: none;
    }

    .Month-decadeHead {
        display: block;
        @include make-row($gutter: 0);
    }

    .Day-decade {
        display: none;
    }
}

.Day, .DecadeName, .ComplementaryDay-fake {
    margin: $calendar-gutter;
    @include make-col($columns: 10);
}

@include media-breakpoint-up(lg) {
    .ComplementaryDays {
        @include make-row($gutter: 0);

        > * {
            @include make-col-ready();
        }
    }

    .ComplementaryDay, .ComplementaryDay-fake {
        @include make-col();
    }

    .ComplementaryDays-splitter {
        width: 100%;
    }
}

.Month, .ComplementaryDays {
    margin-left: -$calendar-gutter;
    margin-right: -$calendar-gutter;
}

.ComplementaryDay {
    margin-top: $calendar-gutter;
}

.ComplementaryDay-fake {
    padding: 0.5em;
}

.Day {
    padding: 0.5em;
    border: 1px solid black;
    border-radius: $border-radius;
}

.DecadeName {
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;
}

.Day-name {
    font-size: 2em;
    font-weight: 600;
}

.Day-decade {
    font-weight: 600;
}

.Day-today {
    background: $gray-300;
}

.Calendar-month-name.input-group {
    justify-content: center;
    font-size: 0.75em;
}

.Calendar-month-input {
    max-width: 12.5em;
}

.Calendar-year-input {
    max-width: 6em;
}

.Calendar-today-button {
    max-width: 5em;
}