Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects Releases Wiki Activity

SG-428 - Browser Extension - Send - Expiration / Deletion date calendar icon +… (#4034)

Browse Source 
* Browser Extension - Send - Expiration / Deletion date calendar icon + datepicker pop up now respect theme better in Chrome / Chromium based browsers and Safari (Firefox datepicker pop up doesn't seem to have an easy mechanism for theming)

* SG-428 - Extension - Iconography for date inputs for Chromium browsers now reflects theme colors properly + hover states; icon not shown on non-Chromium browsers

* Variables.scss - ran prettier locally after tweaking comments to pass eslint checks
This commit is contained in:
Jared Snider 2022-11-11 15:41:07 -05:00 committed by GitHub
parent 8d128b01b9
commit b45704d513
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/browser/src/popup/scss/base.scss
View File

@ -98,6 +98,25 @@ button {
font-family: $font-family-sans-serif;
}
input[type*="date"] {
@include themify($themes) {
color-scheme: themed("dateInputColorScheme");
}
}
::-webkit-calendar-picker-indicator {
@include themify($themes) {
filter: themed("webkitCalendarPickerFilter");
}
}
::-webkit-calendar-picker-indicator:hover {
@include themify($themes) {
filter: themed("webkitCalendarPickerHoverFilter");
}
cursor: pointer;
}
select {
width: 100%;
padding: 0.35rem;

24
apps/browser/src/popup/scss/variables.scss
View File

@ -114,6 +114,13 @@ $themes: (
toastTextColor: #ffffff,
svgSuffix: "-light.svg",
transparentColor: rgba(0, 0, 0, 0),
dateInputColorScheme: light,
// https://stackoverflow.com/a/53336754
webkitCalendarPickerFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
brightness(85%) contrast(103%),
// light has no hover so use same color
webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
brightness(85%) contrast(103%),
),
dark: (
textColor: #ffffff,
@ -168,6 +175,12 @@ $themes: (
toastTextColor: #1f242e,
svgSuffix: "-dark.svg",
transparentColor: rgba(0, 0, 0, 0),
dateInputColorScheme: dark,
// https://stackoverflow.com/a/53336754 - must prepend brightness(0) saturate(100%) to dark themed date inputs
webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(86%) sepia(19%) saturate(152%)
hue-rotate(184deg) brightness(87%) contrast(93%),
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%)
saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
),
nord: (
textColor: $nord5,
@ -222,6 +235,12 @@ $themes: (
toastTextColor: #ffffff,
svgSuffix: "-dark.svg",
transparentColor: rgba(0, 0, 0, 0),
dateInputColorScheme: dark,
webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(94%) sepia(5%) saturate(454%)
hue-rotate(185deg) brightness(93%) contrast(96%),
// has no hover so use same color
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%)
saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%),
),
solarizedDark: (
textColor: $solarizedDarkBase2,
@ -276,6 +295,11 @@ $themes: (
toastTextColor: #ffffff,
svgSuffix: "-solarized.svg",
transparentColor: rgba(0, 0, 0, 0),
dateInputColorScheme: dark,
webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(61%) sepia(13%) saturate(289%)
hue-rotate(138deg) brightness(92%) contrast(90%),
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%)
saturate(462%) hue-rotate(345deg) brightness(103%) contrast(87%),
),
);