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
diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss
index 13926f6b..53fac6b0 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;
@@ -358,19 +358,16 @@ 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 */
- border-color: $color-marketing-gray-30;
- color: $color-marketing-gray-70;
+ background-image: $url-image-arrow-down-form, forms.$select-bg-disabled;
+ 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;
}
}
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;
diff --git a/assets/sass/protocol/includes/mixins/_images.scss b/assets/sass/protocol/includes/mixins/_images.scss
index e069fa4c..6146e604 100644
--- a/assets/sass/protocol/includes/mixins/_images.scss
+++ b/assets/sass/protocol/includes/mixins/_images.scss
@@ -69,7 +69,7 @@ $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: '';