diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index ae8617be68..3d0e065217 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -129,7 +129,7 @@ .form-switch { // Boosted mod - --o-switch-gradient: linear-gradient(to right, $white $form-switch-bg-square-size, transparent); + --o-switch-gradient: #{linear-gradient(to right, $white $form-switch-bg-square-size, transparent)}; min-height: $form-switch-width / 2; padding-left: $form-switch-padding-left; diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index 0b0733bad0..a4f2f02ef7 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -27,7 +27,8 @@ &:focus { color: $input-focus-color; background-color: $input-focus-bg; - border-color: $input-focus-border-color; + border-color: $input-focus-border-color !important; // stylelint-disable-line declaration-no-important + outline: 0; @if $enable-shadows { @include box-shadow($input-box-shadow, $input-focus-box-shadow); } @else { diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 656aacc52e..a9da777949 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -25,7 +25,7 @@ appearance: none; &:focus { - border-color: $form-select-focus-border-color; + border-color: $form-select-focus-border-color !important; // stylelint-disable-line declaration-no-important @if $enable-shadows { @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow); } @else { diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 504ca4d544..3aa83c4564 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -67,9 +67,8 @@ // Boosted mod: validation icon in .*-feedback // Boosted mod: no box-shadow - &:focus { - border-color: $color; - } + + // Boosted mod: focus styles don't match validation state } } @@ -82,9 +81,8 @@ // Boosted mod: no icon in background // Boosted mod: no box-shadow - &:focus { - border-color: $color; - } + + // Boosted mod: focus styles don't match validation state } } @@ -117,7 +115,8 @@ &:focus { ~ .form-file-label { - border-color: $color; + // Boosted mod: focus styles don't match validation state + // Boosted mod: no box-shadow } }