From 1a2d616331120bd681b88ee06c190e9ca8f27f48 Mon Sep 17 00:00:00 2001 From: Valentin Hutter Date: Sun, 7 Jan 2024 23:05:15 +0100 Subject: [PATCH 1/2] fix: #244 - day borders --- .../src/lib/registry/default/ui/calendar/Calendar.vue | 9 +++++++++ 1 file changed, 9 insertions(+) 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 9aeb07525..d5e71bad7 100644 --- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue @@ -118,6 +118,15 @@ onMounted(async () => { .calendar .vc-day:has(.vc-highlights) { @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden; } +.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; } From 87c355f08472c6354ed3ff76efb86d4bef07452f Mon Sep 17 00:00:00 2001 From: sadeghbarati Date: Mon, 8 Jan 2024 09:41:57 +0330 Subject: [PATCH 2/2] fix: vc-day is-today style, unhover bg color and radius glitch update new-york `Calendar.vue` --- .../lib/registry/default/ui/calendar/Calendar.vue | 5 ++++- .../lib/registry/new-york/ui/calendar/Calendar.vue | 14 +++++++++++++- 2 files changed, 17 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 d5e71bad7..32bdacc4e 100644 --- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue +++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue @@ -118,6 +118,9 @@ 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; } @@ -128,7 +131,7 @@ onMounted(async () => { @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 83eb965f5..c0b4cd6a1 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;