public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change datepicker styles to fix dark mode issue (#8886) 

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
pull/8948/head
Parth Sharma 2023-05-17 18:42:52 +05:30 committed by GitHub
parent 4b356dd937
commit d22b1072b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/ui/components/form/date-range-picker/styles.css
View File

@ -1,8 +1,8 @@
.react-calendar {
width: 350px;
max-width: 100%;
background: white;
border: 1px solid #e5e7eb;
background: var(--cal-bg);
border: 1px solid var(--cal-bg-inverted);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.125em;
}
@ -52,13 +52,13 @@
}
.react-calendar__navigation button:disabled {
background-color: #f0f0f0;
background-color: transparent;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
background-color: #e5e7eb;
color: #111827;
background-color: #1d5ad8;
color: var(--cal-text-emphasis);
}
.react-calendar__tile {
@ -100,7 +100,7 @@
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
background-color: #e6e6e6;
background-color: var(--cal-bg-subtle);
}
.react-daterange-picker > .react-daterange-picker__wrapper {
@ -134,7 +134,7 @@
.react-daterange-picker > .react-daterange-picker__wrapper:focus-within,
.react-daterange-picker > .react-daterange-picker__wrapper:focus-within:hover {
border-color: #111827;
border-color: var(--cal-bg-subtle);
border-width: 2px;
}
@ -173,7 +173,7 @@
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
color: #111827;
color: var(--cal-text);
order: -9999;
justify-content: flex-start;
align-items: center;
@ -206,26 +206,26 @@ button.react-calendar__tile.react-calendar__month-view__days__day {
}
.react-calendar__tile.react-calendar__tile--hover:not(.react-calendar__tile--active) {
background-color: #e5e7eb !important;
background-color: var(--cal-bg-subtle) !important;
}
.react-calendar__month-view__days > .react-calendar__tile.react-calendar__tile--hasActive,
.react-calendar__month-view__days > .react-calendar__tile.react-calendar__tile--active,
.react-calendar__month-view__days > button.react-calendar__tile.react-calendar__tile--active:hover {
background-color: #111827;
color: #ffffff;
background-color: var(--cal-bg-inverted);
color: var(--cal-text-inverted);
}
.react-calendar__tile.react-calendar__tile--active.react-calendar__month-view__days__day--weekend {
color: #ffffff;
color: var(--cal-text-inverted);
}
.react-calendar__tile.react-calendar__month-view__days__day--weekend {
color: #111827;
color: var(--cal-text-emphasis);
}
.react-calendar__tile.react-calendar__month-view__days__day--neighboringMonth {
color: #9ca3af;
color: var(--cal-text-muted);
}
.react-calendar__tile--now::before {
@ -234,7 +234,7 @@ button.react-calendar__tile.react-calendar__month-view__days__day {
height: 4px;
border-radius: 50%;
position: absolute;
background-color: #111827;
background-color: var(--cal-text-emphasis);
left: 50%;
transform: translateX(-50%);
bottom: 0;
@ -243,19 +243,19 @@ button.react-calendar__tile.react-calendar__month-view__days__day {
button.react-calendar__tile.react-calendar__month-view__days__day:hover,
.react-calendar__tile.react-calendar__year-view__months__month:hover {
background-color: #d1d5db;
color: #111827;
background-color: var(--cal-bg-subtle);
color: var(--cal-text-emphasis);
}
.react-daterange-picker > .react-daterange-picker__wrapper:hover {
border-color: #9ca3af;
border-color: var(--cal-bg-subtle);
}
.react-daterange-picker.react-daterange-picker--disabled > .react-daterange-picker__wrapper:hover {
border-color: #e5e7eb;
border-color: var(--cal-bg-subtle);
}
.react-calendar__navigation button.react-calendar__navigation__label:enabled:hover,
.react-calendar__navigation button.react-calendar__navigation__label:enabled:focus {
background-color: transparent;
}
}