feat(focus-visible): forms focus styles, almost matching v4-dev

Orange-OpenSource · May 27, 2020 · a0522ea · a0522ea
1 parent 00789c2
commit a0522ea
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
           }
         }