@webilix/ngx-calendar-m3/ngx-calendar-m3.css

Jalali calendar components for Angular and Material 3

/* HEADER & NAV BAR */
.ngx-calendar-m3-date,
.ngx-calendar-m3-week,
.ngx-calendar-m3-month,
.ngx-calendar-m3-year {
    display: block;
    direction: rtl;

    .calendar-header {
        display: flex;
        align-items: center;
        padding: 0.25rem 0;

        .title {
            flex: 1;

            display: flex;
            align-items: center;
            font-weight: 500;
            column-gap: 0.5rem;
        }
    }

    .calendar-nav {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;

        margin-bottom: 0.5rem;
        padding: 0.75rem 0.5rem;
        background-color: var(--surface-container-highest);

        .item {
            flex: 1;
            text-align: center;
            font-size: 90%;
        }

        .click {
            cursor: pointer;
        }
    }
}

/* DATE & WEEK CONTENT */
.ngx-calendar-m3-date,
.ngx-calendar-m3-week {
    .calendar-content {
        position: relative;

        .calendar-view {
            display: flex;
            flex-direction: column;
            row-gap: 0.75rem;
            padding: 0.75rem 0;

            .week {
                display: flex;
                align-items: center;
                column-gap: 0.75rem;
                padding: 0 0.75rem;

                .day {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    border: 1px solid transparent;
                    border-radius: 50%;
                    cursor: pointer;
                }

                .day::after {
                    content: ' ';
                    display: 'block';
                    padding-bottom: 100%;
                }

                .day:not(.day-today, .day-selected, .day-disable):hover {
                    background-color: var(--outline-variant);
                }

                .day-today {
                    border-color: var(--primary);
                }

                .day-selected {
                    color: var(--on-primary);
                    border-color: var(--primary);
                    background-color: var(--primary);
                }

                .day-disable {
                    opacity: 0.5;
                    cursor: default;
                }
            }

            .week-selected {
                color: var(--on-primary);
                border-color: var(--primary);
                background-color: var(--primary);
            }
        }

        .month-view {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

            display: flex;
            flex-direction: column;
            overflow: hidden;

            .season {
                flex: 1;

                display: flex;
                align-items: center;
                column-gap: 0.5rem;

                .month {
                    flex: 1;

                    cursor: pointer;
                    text-align: center;
                    border-radius: 4px;
                    border: 1px solid transparent;
                    padding: 0.75rem 0;
                }

                .month-disable {
                    opacity: 0.5;
                    cursor: default;
                }
            }
        }
    }
}

/* MOMENT CONTENT */
.ngx-calendar-m3-moment {
    display: block;
    direction: rtl;

    .time {
        display: flex;
        align-items: center;

        background-color: var(--surface-container-highest);

        .date {
            flex: 1;
            font-size: 95%;
            padding-right: 1rem;
        }

        button.value {
            width: 40px;
            min-width: auto;
            border-radius: 0;
            font-weight: normal;
            color: var(--on-surface);
            min-height: 50px;
        }

        button.value:disabled {
            opacity: 0.5;
        }

        button.submit {
            font-size: 85%;
            border-radius: 0;
            min-height: 50px;
        }
    }
}

/* MONTH CONTENT */
.ngx-calendar-m3-month {
    .calendar-header {
        .title {
            padding-right: 1rem;
        }
    }

    .calendar-content {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;
        padding: 0 0.5rem;
        margin: 1rem 0 0.5rem 0;

        .month {
            flex: 1;

            cursor: pointer;
            text-align: center;
            border-radius: 4px;
            border: 1px solid transparent;
            padding: 0.75rem 0;
        }

        .month-today {
            border-color: var(--primary);
        }

        .month-selected {
            color: var(--on-primary);
            border-color: var(--primary);
            background-color: var(--primary);
        }

        .month-disable {
            opacity: 0.5;
            cursor: default;
        }
    }
}

/* YEAR CONTENT */
.ngx-calendar-m3-year {
    .calendar-header {
        .title {
            padding-right: 1rem;
        }
    }

    .calendar-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        row-gap: 0.5rem;
        column-gap: 0.5rem;
        padding: 0 0.5rem;
        margin: 1rem 0 0.5rem 0;

        .year {
            cursor: pointer;
            text-align: center;
            border-radius: 4px;
            border: 1px solid transparent;
            padding: 0.75rem 0;
        }

        .year-today {
            border-color: var(--primary);
        }

        .year-selected {
            color: var(--on-primary);
            border-color: var(--primary);
            background-color: var(--primary);
        }

        .year-disable {
            opacity: 0.5;
            cursor: default;
        }
    }
}

/* CALENDAR */
.ngx-calendar-m3 {
    display: flex;
    align-items: center;

    direction: rtl;
    border-radius: 4px;
    border: 1px solid var(--outline-variant);

    .calendar-types {
        display: flex;
        align-items: center;
        column-gap: 0.5rem;
        height: var(--ngx-calendar-m3-height);

        cursor: pointer;
        line-height: 45px;
        padding: 0 0.5rem;
        color: var(--primary);
        border-radius: 0 4px 4px 0;
        background-color: var(--surface-container-highest);
    }

    .calendar-title {
        flex: 1;

        display: flex;
        align-items: center;
        height: var(--ngx-calendar-m3-height);

        cursor: pointer;
        padding: 0 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-buttons {
        display: flex;
        align-items: center;
        height: var(--ngx-calendar-m3-height);

        border-radius: 4px 0 0 4px;
        background-color: var(--surface-container-highest);
    }

    .calendar-buttons.square {
        border-radius: 0;
    }

    .calendar-background {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10000;
    }

    .calendar-view {
        position: absolute;
        top: var(--ngx-calendar-m3-height);
        left: 0;
        right: 0;

        border: 1px solid var(--outline-variant);
        background-color: var(--surface-container-high);
        z-index: 10001;

        .months {
            display: flex;
            align-items: center;

            .month {
                padding: 1.5rem 0;
                flex: 1;
                cursor: pointer;
                text-align: center;
            }
        }

        .header {
            font-weight: 500;
            padding: 0.5rem;
            text-align: center;
            background-color: var(--surface-container-highest);
        }

        .week {
            display: flex;
            align-items: center;

            .day {
                padding: 1rem 0;
                flex: 1;
                cursor: pointer;
                text-align: center;
            }

            .day.empty {
                cursor: default;
            }
        }
    }
}