forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-19 04:56:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added dark theme styles for date picker

Browse Source
This commit is contained in:
Alejandro Celaya
2021-02-20 09:02:07 +01:00
committed by Alejandro Celaya
parent 0ee899f309
commit e7466ced18
2 changed files with 52 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.scss
View File

@@ -101,7 +101,8 @@ body,
}
}
.dropdown-item {
.dropdown-item,
.dropdown-item-text {
color: var(--text-color);
}

54
src/utils/DateInput.scss
View File

@@ -43,10 +43,6 @@
display: block !important;
}
.react-datepicker-popper {
z-index: 2;
}
.react-datepicker__day--keyboard-selected {
background-color: $mainColor;
@@ -54,3 +50,53 @@
background-color: darken($mainColor, 12%);
}
}
.react-datepicker.react-datepicker {
background-color: var(--primary-color);
color: var(--text-color);
border-color: var(--border-color);
}
.react-datepicker__header.react-datepicker__header {
background-color: var(--secondary-color);
border-color: var(--border-color);
}
.react-datepicker__current-month.react-datepicker__current-month,
.react-datepicker-time__header.react-datepicker-time__header,
.react-datepicker-year-header.react-datepicker-year-header,
.react-datepicker__day-name.react-datepicker__day-name,
.react-datepicker__day:not(:hover).react-datepicker__day:not(:hover),
.react-datepicker__time-name.react-datepicker__time-name {
color: inherit;
}
.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 {
background-color: var(--brand-color) !important;
color: white !important;
}
.react-datepicker-popper.react-datepicker-popper {
z-index: 2;
&[data-placement^='top'] .react-datepicker__triangle.react-datepicker__triangle {
border-top-color: var(--primary-color);
border-bottom-color: var(--border-color);
&::before {
border-top-color: var(--border-color);
}
}
&[data-placement^='bottom'] .react-datepicker__triangle.react-datepicker__triangle {
border-top-color: var(--border-color);
border-bottom-color: var(--secondary-color);
&::before {
border-bottom-color: var(--border-color);
}
}
}