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

Fix action button disable css (#1567)

Browse Source 
* Darken light theme to comply with WCAG AA

* Adjust opacity on disabled

Color and/or opacity is used to delineate enabled vs disabled elements.
Both are required becaus some themes do not change color on disabled.
This commit is contained in:
Matt Gibson 2021-01-25 12:03:51 -06:00 committed by GitHub
parent f71bf77137
commit a26169750a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/popup/scss/box.scss
View File

@ -378,11 +378,13 @@
&.disabled { &.disabled {
@include themify($themes) { @include themify($themes) {
color: themed('disabledIconColor'); color: themed('disabledIconColor');
opacity: themed('disabledBoxOpacity');
} }
&:hover { &:hover {
@include themify($themes) { @include themify($themes) {
color: themed('disabledIconColor'); color: themed('disabledIconColor');
opacity: themed('disabledBoxOpacity');
} }
} }
} }

10
src/popup/scss/variables.scss
View File

@ -9,7 +9,8 @@ $text-color: #000000;
$border-color: #f0f0f0; $border-color: #f0f0f0;
$border-color-dark: #ddd; $border-color-dark: #ddd;
$list-item-hover: #fbfbfb; $list-item-hover: #fbfbfb;
$list-icon-color: #c7c7cd; $list-icon-color: #767679;
$disabled-box-opacity: 1;
$border-radius: 3px; $border-radius: 3px;
$line-height-base: 1.42857143; $line-height-base: 1.42857143;
@ -59,6 +60,7 @@ $themes: (
headerInputPlaceholderColor: lighten($brand-primary, 35%), headerInputPlaceholderColor: lighten($brand-primary, 35%),
listItemBackgroundHoverColor: $list-item-hover, listItemBackgroundHoverColor: $list-item-hover,
disabledIconColor: $list-icon-color, disabledIconColor: $list-icon-color,
disabledBoxOpacity: $disabled-box-opacity,
headingColor: $gray-light, headingColor: $gray-light,
labelColor: $gray-light, labelColor: $gray-light,
mutedColor: $text-muted, mutedColor: $text-muted,
@ -106,7 +108,8 @@ $themes: (
headerInputColor: #ffffff, headerInputColor: #ffffff,
headerInputPlaceholderColor: #707070, headerInputPlaceholderColor: #707070,
listItemBackgroundHoverColor: #3c3c3c, listItemBackgroundHoverColor: #3c3c3c,
disabledIconColor: #c7c7cd, disabledIconColor: #cacaca,
disabledBoxOpacity: 0.5,
headingColor: #a3a3a3, headingColor: #a3a3a3,
labelColor: #a3a3a3, labelColor: #a3a3a3,
mutedColor: #a3a3a3, mutedColor: #a3a3a3,
@ -154,7 +157,8 @@ $themes: (
headerInputColor: $nord2, headerInputColor: $nord2,
headerInputPlaceholderColor: $nord3, headerInputPlaceholderColor: $nord3,
listItemBackgroundHoverColor: $nord3, listItemBackgroundHoverColor: $nord3,
disabledIconColor: $nord5, disabledIconColor: $nord4,
disabledBoxOpacity: 0.5,
headingColor: $nord4, headingColor: $nord4,
labelColor: $nord4, labelColor: $nord4,
mutedColor: $nord4, mutedColor: $nord4,