moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dark styles for datepicker 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-05-12 14:51:59 +02:00
parent f6d45b8b1b
commit 1530296244
1 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/styles/components/datepicker.scss
View File

@ -1,5 +1,5 @@
.react-datepicker { .react-datepicker {
@apply p-4 font-sans text-xs text-gray-900 border border-solid border-gray-200 rounded-lg; @apply dark:bg-slate-900 dark:border-slate-700 p-4 font-sans text-xs text-gray-900 dark:text-gray-300 border border-solid border-gray-200 rounded-lg;
} }
.react-datepicker__input-container > input { .react-datepicker__input-container > input {
@ -12,11 +12,11 @@
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after { .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
@apply border-b-white; @apply border-b-white dark:border-b-slate-900;
} }
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before { .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
@apply border-b-gray-200; @apply border-b-gray-200 dark:border-b-slate-700;
} }
.react-datepicker__header:not(.react-datepicker__header--has-time-select) { .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
@ -24,14 +24,14 @@
} }
.react-datepicker__header { .react-datepicker__header {
@apply bg-white border-b-0 py-1 px-0; @apply bg-white dark:bg-slate-900 border-b-0 py-1 px-0;
// border-top-left-radius: var(--border-radius-lg); // border-top-left-radius: var(--border-radius-lg);
} }
.react-datepicker__current-month, .react-datepicker__current-month,
.react-datepicker-time__header, .react-datepicker-time__header,
.react-datepicker-year-header { .react-datepicker-year-header {
@apply text-gray-900 font-bold text-sm; @apply text-gray-900 dark:text-gray-300 font-bold text-sm;
} }
.react-datepicker__current-month { .react-datepicker__current-month {
@ -39,7 +39,7 @@
} }
.react-datepicker__navigation { .react-datepicker__navigation {
@apply top-4 h-8 w-8 rounded hover:bg-gray-50; @apply top-4 h-8 w-8 rounded hover:bg-gray-50 dark:hover:bg-slate-900/50;
} }
.react-datepicker__navigation-icon { .react-datepicker__navigation-icon {
@ -78,24 +78,37 @@
.react-datepicker__day-names, .react-datepicker__day-names,
.react-datepicker__week { .react-datepicker__week {
display: flex; @apply flex justify-between;
justify-content: space-between; }
.react-datepicker__time {
@apply dark:bg-slate-900;
}
.react-datepicker__time-container {
@apply dark:border-slate-700;
} }
.react-datepicker__day-name, .react-datepicker__day-name,
.react-datepicker__day, .react-datepicker__day,
.react-datepicker__time-name { .react-datepicker__time-name {
@apply text-gray-900; @apply text-gray-900 dark:text-gray-300;
width: 30px; width: 30px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
.react-datepicker__time-list-item--disabled,
.react-datepicker__day--disabled {
@apply text-gray-400 dark:text-gray-500;
}
.react-datepicker__day:hover, .react-datepicker__day:hover,
.react-datepicker__month-text:hover, .react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover, .react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover { .react-datepicker__year-text:hover,
@apply bg-gray-100 rounded; .react-datepicker__time-list-item:hover {
@apply bg-gray-100 dark:bg-slate-700 rounded;
} }
.react-datepicker__day--selected, .react-datepicker__day--selected,
@ -110,16 +123,12 @@
.react-datepicker__year-text--selected, .react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range { .react-datepicker__year-text--in-range {
@apply bg-primary-600 hover:bg-primary-700 text-white rounded; @apply bg-primary-600 hover:bg-primary-700 dark:bg-slate-300 dark:hover:bg-slate-200 text-white dark:text-black rounded;
}
.react-datepicker__day--disabled {
@apply text-gray-400;
} }
.react-datepicker__day--keyboard-selected, .react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected, .react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected { .react-datepicker__year-text--keyboard-selected {
@apply bg-primary-50 hover:bg-primary-100 text-primary-600 dark:text-primary-400; @apply bg-primary-50 hover:bg-primary-100 dark:bg-slate-700 dark:hover:bg-slate-600 text-primary-600 dark:text-primary-400;
} }