From 64b4dec941dbe329d7cd0c0b8064ac61e61f118b Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Sat, 27 Jul 2024 01:42:20 +0200 Subject: [PATCH 1/7] Add arrow-down-disabled _images --- assets/sass/protocol/includes/mixins/_images.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/sass/protocol/includes/mixins/_images.scss b/assets/sass/protocol/includes/mixins/_images.scss index e069fa4c..7aef29b4 100644 --- a/assets/sass/protocol/includes/mixins/_images.scss +++ b/assets/sass/protocol/includes/mixins/_images.scss @@ -69,9 +69,10 @@ $svg-expand-white: ''; // https://github.com/mozilla/protocol-assets/blob/master/icons/arrow-down.svg -$svg-arrow-down-form: ''; +$svg-arrow-down-form: ''; $svg-arrow-down-link: ''; $svg-arrow-down-link-hover: ''; +$svg-arrow-down-disabled: ''; // https://github.com/mozilla/protocol-assets/blob/master/icons/download.svg $svg-download-link-hover: ''; @@ -87,6 +88,7 @@ $url-image-expand-black: svg-url($svg-expand-black); $url-image-arrow-down-form: svg-url($svg-arrow-down-form); $url-image-arrow-down-link: svg-url($svg-arrow-down-link); $url-image-arrow-down-link-hover: svg-url($svg-arrow-down-link-hover); +$url-image-arrow-down-disabled: svg-url($svg-arrow-down-disabled); $url-image-download-link-hover: svg-url($svg-download-link-hover); $url-image-search-form: svg-url($svg-search-form); $url-image-search-link: svg-url($svg-search-link); From 597506499b7e6587ae936088daacb57ea050fbcf Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Sat, 27 Jul 2024 01:49:58 +0200 Subject: [PATCH 2/7] Update _forms select disabled arrow --- assets/sass/protocol/base/elements/_forms.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss index 13926f6b..b7168f15 100644 --- a/assets/sass/protocol/base/elements/_forms.scss +++ b/assets/sass/protocol/base/elements/_forms.scss @@ -358,10 +358,7 @@ select { &:disabled, &[aria-disabled='true'] { - /* stylelint-disable declaration-colon-newline-after */ - background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), - forms.$select-bg-disabled; - /* stylelint-enable declaration-colon-newline-after */ + background-image: $url-image-arrow-down-disabled, forms.$select-bg-disabled; border-color: $color-marketing-gray-30; color: $color-marketing-gray-70; From 2a0b115fecdc10c372b3f9ba30fb23fbfef8a528 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Mon, 29 Jul 2024 23:23:09 +0200 Subject: [PATCH 3/7] Add form color vars --- assets/sass/protocol/includes/forms/_index.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/assets/sass/protocol/includes/forms/_index.scss b/assets/sass/protocol/includes/forms/_index.scss index 9b4bc1c1..5b955cc6 100644 --- a/assets/sass/protocol/includes/forms/_index.scss +++ b/assets/sass/protocol/includes/forms/_index.scss @@ -15,13 +15,16 @@ // colors $form-red: #d70022; $form-text: $body-text-color-secondary; +$form-inactive: $color-marketing-gray-70; // fields $field-border-color: $color-marketing-gray-50; $field-border-color-hover: $color-link-hover; +$field-border-color-focus: $color-link; $field-border-color-error: $form-red; $field-border-color-error-hover: $color-red-80; $field-border-color-disabled: $color-marketing-gray-30; +$field-border-color-disabled-focus: $color-marketing-gray-80; $field-border: 2px solid $field-border-color; $field-min-width: $content-xs - ($layout-xs * 2); $field-border-radius: $border-radius-sm; From 295fc6ddf81b08758958e6889629e9059c706ab6 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Mon, 29 Jul 2024 23:29:34 +0200 Subject: [PATCH 4/7] Streamline _forms colors --- .../sass/protocol/base/elements/_forms.scss | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss index b7168f15..8169a168 100644 --- a/assets/sass/protocol/base/elements/_forms.scss +++ b/assets/sass/protocol/base/elements/_forms.scss @@ -133,7 +133,7 @@ input[type='url'] { @include forms.form-input; &::placeholder { - color: $color-marketing-gray-70; + color: forms.$form-inactive; } &:hover { @@ -142,7 +142,7 @@ input[type='url'] { &:focus { outline: none; - border-color: $color-link; + border-color: forms.$field-border-color-focus; box-shadow: forms.$field-focus-ring; .mzp-t-dark & { @@ -167,11 +167,11 @@ input[type='url'] { &:disabled, &[aria-disabled='true'] { background: $color-marketing-gray-10; - border-color: $color-marketing-gray-30; - color: $color-marketing-gray-70; + border-color: forms.$field-border-color-disabled; + color: forms.$form-inactive; &:focus { - border-color: $color-marketing-gray-80; + border-color: forms.$field-border-color-disabled-focus; } } } @@ -255,7 +255,7 @@ input[type='file'] { } &:focus { - border-color: $color-link; + border-color: forms.$field-border-color-focus; box-shadow: forms.$field-focus-ring; outline: none; } @@ -276,12 +276,12 @@ input[type='file'] { &:disabled, &[aria-disabled='true'] { - background: $color-marketing-gray-30; - border-color: $color-marketing-gray-30; - color: $color-marketing-gray-70; + background: forms.$field-border-color-disabled; + border-color: forms.$field-border-color-disabled; + color: forms.$form-inactive; &:focus { - border-color: $color-marketing-gray-80; + border-color: forms.$field-border-color-disabled-focus; } } } @@ -331,7 +331,7 @@ select { } &:focus { - border-color: $color-link; + border-color: forms.$field-border-color-focus; background-image: $url-image-arrow-down-link, forms.$select-bg; box-shadow: forms.$field-focus-ring; color: #222; @@ -359,15 +359,15 @@ select { &:disabled, &[aria-disabled='true'] { background-image: $url-image-arrow-down-disabled, forms.$select-bg-disabled; - border-color: $color-marketing-gray-30; - color: $color-marketing-gray-70; + border-color: forms.$field-border-color-disabled; + color: forms.$form-inactive; &:hover { - border-color: $color-marketing-gray-30; + border-color: forms.$field-border-color-disabled; } &:focus { - border-color: $color-marketing-gray-80; + border-color: forms.$field-border-color-disabled-focus; } } From 35b4f7a1022b23ffaad17f52399c8e0cd9afcbce Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Mon, 29 Jul 2024 23:35:07 +0200 Subject: [PATCH 5/7] Use default select caret --- assets/sass/protocol/base/elements/_forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss index 8169a168..53fac6b0 100644 --- a/assets/sass/protocol/base/elements/_forms.scss +++ b/assets/sass/protocol/base/elements/_forms.scss @@ -358,7 +358,7 @@ select { &:disabled, &[aria-disabled='true'] { - background-image: $url-image-arrow-down-disabled, forms.$select-bg-disabled; + background-image: $url-image-arrow-down-form, forms.$select-bg-disabled; border-color: forms.$field-border-color-disabled; color: forms.$form-inactive; From 931ca8b7bad08ac19e619ad564132f7b9afdf004 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Mon, 29 Jul 2024 23:42:41 +0200 Subject: [PATCH 6/7] Skip adding new disabled caret to _images --- assets/sass/protocol/includes/mixins/_images.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/sass/protocol/includes/mixins/_images.scss b/assets/sass/protocol/includes/mixins/_images.scss index 7aef29b4..6146e604 100644 --- a/assets/sass/protocol/includes/mixins/_images.scss +++ b/assets/sass/protocol/includes/mixins/_images.scss @@ -72,7 +72,6 @@ $svg-expand-black: ''; $svg-arrow-down-link: ''; $svg-arrow-down-link-hover: ''; -$svg-arrow-down-disabled: ''; // https://github.com/mozilla/protocol-assets/blob/master/icons/download.svg $svg-download-link-hover: ''; @@ -88,7 +87,6 @@ $url-image-expand-black: svg-url($svg-expand-black); $url-image-arrow-down-form: svg-url($svg-arrow-down-form); $url-image-arrow-down-link: svg-url($svg-arrow-down-link); $url-image-arrow-down-link-hover: svg-url($svg-arrow-down-link-hover); -$url-image-arrow-down-disabled: svg-url($svg-arrow-down-disabled); $url-image-download-link-hover: svg-url($svg-download-link-hover); $url-image-search-form: svg-url($svg-search-form); $url-image-search-link: svg-url($svg-search-link); From 543c49f1fc9f1ba7defbdcca096486d750023789 Mon Sep 17 00:00:00 2001 From: Jan Brasna <1784648+janbrasna@users.noreply.github.com> Date: Tue, 30 Jul 2024 00:06:52 +0200 Subject: [PATCH 7/7] Update CHANGELOG --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21c3870b..97ca5a72 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,9 @@ ## Features * **js:** Migrate tests from Karma to Jasmine browser runner (#899) +## Bug Fixes +* **css:** Form select elements don't match styling when disabled (#885) + # 19.2.0 ## Features