88 lines
2.1 KiB
CSS
88 lines
2.1 KiB
CSS
.calendar {
|
|
@apply grid col-span-3 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-gray-900;
|
|
|
|
&::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;
|
|
}
|
|
|
|
/* need to handle this for various 4, 5, and 7 day configs */
|
|
&:nth-child(-n+7) { /* first 7 items */
|
|
@apply border-t-2;
|
|
}
|
|
&:nth-last-child(-n+7) { /* last 7 items */
|
|
@apply border-b-md;
|
|
}
|
|
|
|
/*&:last-child {
|
|
@apply rounded-br-lg;
|
|
}*/
|
|
|
|
/* events */
|
|
.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;
|
|
animation: event-slide 350ms ease-in-out both;
|
|
|
|
.indicator {
|
|
--indicator-bg: var(--event-color);
|
|
}
|
|
|
|
.title {
|
|
@apply grow truncate;
|
|
}
|
|
|
|
time {
|
|
@apply text-2xs shrink-0 mt-px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: color-mix(in srgb, var(--event-color) 25%, #fff 100%);
|
|
}
|
|
|
|
&.hidden {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* animations */
|
|
@keyframes event-slide {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-1rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|