Improve today highlighting in calendar
This commit is contained in:
parent
a419965aca
commit
12acbc5b1c
1 changed files with 9 additions and 2 deletions
|
|
@ -20,6 +20,14 @@ type OptionElement = React.ReactElement<{
|
|||
|
||||
type CalendarDropdownProps = DropdownProps & { children?: React.ReactNode }
|
||||
|
||||
const TODAY_HIGHLIGHT_CLASS = [
|
||||
// Subtle cyan background + ring when today isn't selected
|
||||
"[&_button]:ring-1 [&_button]:ring-[#00d6eb] [&_button]:ring-offset-1 [&_button]:ring-offset-white",
|
||||
"[&_button:not([aria-selected='true'])]:bg-[#00e8ff]/20 [&_button:not([aria-selected='true'])]:text-neutral-900",
|
||||
// Preserve selection colors but keep a cyan outline when today is part of the range
|
||||
"[&_button[aria-selected='true']]:ring-[#00f5ff] [&_button[aria-selected='true']]:ring-offset-neutral-900 [&_button[aria-selected='true']]:shadow-[0_0_0_1.5px_rgba(0,214,235,0.45)]",
|
||||
].join(" ")
|
||||
|
||||
const buildOptions = (options?: DropdownProps["options"], children?: React.ReactNode) => {
|
||||
if (options && options.length > 0) {
|
||||
return options.map((option) => ({
|
||||
|
|
@ -169,8 +177,7 @@ export function Calendar({
|
|||
range_middle: "bg-transparent text-neutral-900 [&_button]:rounded-full [&_button]:bg-neutral-900/10 [&_button]:text-neutral-900",
|
||||
range_start: "bg-transparent [&_button]:rounded-full [&_button]:bg-neutral-900 [&_button]:text-neutral-50 [&_button]:focus-visible:ring-0",
|
||||
range_end: "bg-transparent [&_button]:rounded-full [&_button]:bg-neutral-900 [&_button]:text-neutral-50 [&_button]:focus-visible:ring-0",
|
||||
today:
|
||||
"[&_button]:bg-[#00e8ff]/20 [&_button]:text-neutral-900 [&_button]:ring-1 [&_button]:ring-[#00d6eb] [&_button]:ring-offset-1 [&_button]:ring-offset-white",
|
||||
today: TODAY_HIGHLIGHT_CLASS,
|
||||
...modifiersClassNames,
|
||||
}}
|
||||
// Setas ao lado do caption
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue