fuse-angular/src/app/main/apps/calendar/calendar.component.scss

@import "src/@fuse/scss/fuse";
@import "node_modules/angular-calendar/scss/angular-calendar";

.cal-month-view {

    .cal-header {

        .cal-cell {
            font-weight: 600;
        }
    }

    .cal-day-cell {

        @include media-breakpoint(lg) {
            min-height: 150px;
        }

        @include media-breakpoint(gt-lg) {
            min-height: 200px;
        }

        &.cal-open {
            @include mat-elevation(3);
        }
    }

    .cal-open-day-events {
        box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
        padding: 0;
        display: flex;
        flex-direction: column;

        > div {
            padding: 0 16px;
            margin: 8px 16px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            @include mat-elevation(1);
            transition: box-shadow 300ms ease;

            &:first-of-type {
                margin-top: 16px;
            }

            &:last-of-type {
                margin-bottom: 16px;
            }

            &:hover {
                @include mat-elevation(3);
            }

            .cal-event {
                top: 0;
                margin: 0;
            }

            mwl-calendar-event-title {
                flex: 1;

                .cal-event-title {
                    display: block;
                    padding: 21px 24px;
                    line-height: 1;
                    text-decoration: none;
                }
            }

            mwl-calendar-event-actions {

                .cal-event-actions {
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    .cal-event-action {
                        display: block;
                        line-height: 1;
                        padding: 8px;
                    }
                }
            }

        }
    }
}

.cal-week-view {

    .cal-header > b {
        font-weight: 600;
    }

    .cal-event {
        display: flex;
        flex-direction: row;
        align-items: center;

        mwl-calendar-event-title {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            order: 0;

            .cal-event-title {
                display: block;
                line-height: 1;
                text-decoration: none;
            }
        }

        mwl-calendar-event-actions {
            order: 1;

            .cal-event-actions {
                display: flex;
                flex-direction: row;
                align-items: center;

                .cal-event-action {
                    display: block;
                    line-height: 1;
                    padding: 8px;
                }
            }
        }
    }
}

.cal-day-view {

    .cal-time {
        font-weight: 600;
    }

    .cal-event {
        display: flex;
        flex-direction: row;

        mwl-calendar-event-title {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            order: 0;

            .cal-event-title {
                display: block;
                height: 26px;
                line-height: 26px;
                text-decoration: none;
            }
        }

        mwl-calendar-event-actions {
            order: 1;

            .cal-event-actions {
                display: flex;
                flex-direction: row;
                align-items: center;

                .cal-event-action {
                    display: block;
                    line-height: 1;
                    padding: 4px;
                }
            }
        }
    }

    .cal-hour-segment {

        &:after,
        &::after {
            content: '' !important;
        }
    }
}

#calendar {

    .header {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
        position: relative;
        background-size: 100% auto;
        background-position: 0 50%;
        background-repeat: no-repeat;
        background-color: #FAFAFA;
        color: #FFFFFF;

        @include media-breakpoint(xs) {
            height: 164px;
            min-height: 164px;
            max-height: 164px;
        }

        &:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            background: rgba(0, 0, 0, 0.45);
        }

        &.Jan {
            background-image: url('/assets/images/backgrounds/winter.jpg');
            background-position: 0 85%;
        }
        &.Feb {
            background-image: url('/assets/images/backgrounds/winter.jpg');
            background-position: 0 85%;
        }
        &.Mar {
            background-image: url('/assets/images/backgrounds/spring.jpg');
            background-position: 0 40%;
        }
        &.Apr {
            background-image: url('/assets/images/backgrounds/spring.jpg');
            background-position: 0 40%;
        }
        &.May {
            background-image: url('/assets/images/backgrounds/spring.jpg');
            background-position: 0 40%;
        }
        &.Jun {
            background-image: url('/assets/images/backgrounds/summer.jpg');
            background-position: 0 80%;
        }
        &.Jul {
            background-image: url('/assets/images/backgrounds/summer.jpg');
            background-position: 0 80%;
        }
        &.Aug {
            background-image: url('/assets/images/backgrounds/summer.jpg');
            background-position: 0 80%;
        }
        &.Sep {
            background-image: url('/assets/images/backgrounds/autumn.jpg');
            background-position: 0 40%;
        }
        &.Oct {
            background-image: url('/assets/images/backgrounds/autumn.jpg');
            background-position: 0 40%;
        }
        &.Nov {
            background-image: url('/assets/images/backgrounds/autumn.jpg');
            background-position: 0 40%;
        }
        &.Dec {
            background-image: url('/assets/images/backgrounds/winter.jpg');
            background-position: 0 85%;
        }

        .header-content {
            height: 100%;

            .header-top {
                position: relative;
                z-index: 2;

                .logo {

                    .logo-icon {
                        margin-right: 16px;
                    }

                    .logo-text {
                        font-size: 24px;
                    }
                }
            }

            .header-bottom {
                position: relative;
                z-index: 2;

                .title {
                    font-size: 20px;
                    min-width: 160px;
                    text-align: center;
                    font-weight: 600;
                }
            }
        }

        .add-event-button {
            position: absolute;
            right: 18px;
            bottom: -26px;
            z-index: 10;
        }
    }

    .content {
        padding: 24px;
    }
}