qcal/frcal/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 '@common/ui/consts.scss';
@import '@common/ui/MonthBasedCalendar.scss';

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

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