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';

.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;
}

@include media-breakpoint-up(md) {
    .Month-decade {
        @include make-row();

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

.Month-decadeSplitter {
    width: 100%;
}

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

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

    .Day-decade {
        display: none;
    }
}

@include media-breakpoint-up(lg) {
    .ComplementaryDays {
        @include make-row();

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

    .ComplementaryDay {
        @include make-col($columns: 2);
    }

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

.Day, .DecadeName {
    margin: 0.5em;
    @include make-col($columns: 10);
}

.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;
}