From 1702ca75ad2b5cbcd21938f90526cca8b48a66d8 Mon Sep 17 00:00:00 2001 From: Valentin Hutter Date: Mon, 8 Jan 2024 07:13:23 +0100 Subject: [PATCH] #244 - fix day borders (#251) * fix: #244 - day borders * fix: vc-day is-today style, unhover bg color and radius glitch update new-york `Calendar.vue` --------- Co-authored-by: sadeghbarati --- .../lib/registry/default/ui/calendar/Calendar.vue | 14 +++++++++++++- .../lib/registry/new-york/ui/calendar/Calendar.vue | 14 +++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue index 9aeb0752..32bdacc4 100644 --- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue @@ -118,8 +118,20 @@ onMounted(async () => { .calendar .vc-day:has(.vc-highlights) { @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden; } +.calendar .vc-day.is-today { + @apply bg-secondary rounded-md; +} +.calendar .vc-day:has(.vc-highlight-base-start) { + @apply rounded-l-md; +} +.calendar .vc-day:has(.vc-highlight-base-end) { + @apply rounded-r-md; +} +.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) { + @apply rounded-md; +} .calendar .vc-day-content { - @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none; + @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none; } .calendar .vc-day-content:not(.vc-highlight-content-light) { @apply rounded-md; diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue index 83eb965f..c0b4cd6a 100644 --- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue @@ -117,8 +117,20 @@ onMounted(async () => { .calendar .vc-day:has(.vc-highlights) { @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden; } +.calendar .vc-day.is-today { + @apply bg-secondary rounded-md; +} +.calendar .vc-day:has(.vc-highlight-base-start) { + @apply rounded-l-md; +} +.calendar .vc-day:has(.vc-highlight-base-end) { + @apply rounded-r-md; +} +.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) { + @apply rounded-md; +} .calendar .vc-day-content { - @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none; + @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none; } .calendar .vc-day-content:not(.vc-highlight-content-light) { @apply rounded-md;