65 lines
1.6 KiB
CSS
65 lines
1.6 KiB
CSS
.calendar {
|
|
@apply grid col-span-3 pr-6 2xl:pr-8 pb-6 2xl:pb-8 pt-2;
|
|
grid-template-rows: 2rem 1fr;
|
|
|
|
hgroup {
|
|
@apply grid grid-cols-7 w-full gap-1;
|
|
|
|
> span {
|
|
@apply uppercase text-right pr-4 font-bold;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
@apply grid grid-cols-7 w-full gap-1;
|
|
contain: paint;
|
|
grid-auto-rows: 1fr;
|
|
|
|
li {
|
|
@apply relative px-1 pt-8 border-t-md border-primary;
|
|
|
|
&::before {
|
|
@apply absolute top-0 right-px w-auto h-8 flex items-center justify-end pr-4 text-sm font-medium;
|
|
content: attr(data-day-number);
|
|
}
|
|
|
|
&.day--outside {
|
|
@apply bg-gray-50 text-gray-700;
|
|
}
|
|
|
|
&.day--today {
|
|
@apply bg-cyan-100;
|
|
}
|
|
|
|
&:nth-child(-n+7) {
|
|
@apply border-t-2;
|
|
}
|
|
|
|
&:last-child {
|
|
@apply rounded-br-lg;
|
|
}
|
|
|
|
.event {
|
|
@apply flex items-center text-xs gap-1 px-1 py-px font-medium truncate rounded-sm bg-transparent;
|
|
transition: background-color 125ms ease-in-out;
|
|
|
|
.indicator {
|
|
--indicator-bg: var(--event-color);
|
|
}
|
|
|
|
.title {
|
|
@apply grow;
|
|
}
|
|
|
|
time {
|
|
@apply text-2xs;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: color-mix(in srgb, var(--event-color) 25%, #fff 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|