- Adds focus styles for all the inputs

- linting
bitcrowd · May 4, 2023 · b19e591 · b19e591
1 parent a9bc8dd
commit b19e591
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 61 deletions.
diff --git a/scss/bitstyles/base/forms/_index.scss b/scss/bitstyles/base/forms/_index.scss
@@ -25,10 +25,10 @@ label {
   gap: settings.$label-gap;
   align-items: baseline;
   margin-bottom: settings.$label-gap;
-  cursor: pointer;
   font-weight: settings.$label-font-weight;
+  cursor: pointer;
 
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     color: settings.$label-disabled-color;
   }
 }

diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -5,22 +5,16 @@
 @use 'sass:math';
 
 [type='checkbox'] {
-  display: inline-block;
   position: relative;
+  top: calc(settings.$gap / 2);
   flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin: settings.$gap;
+  outline-offset: 0;
   font-size: settings.$size;
-  vertical-align: middle;
   cursor: pointer;
   appearance: none;
-  top: calc(settings.$gap / 2);
-
-  &:focus-visible {
-    outline: focus.$outline-color solid focus.$outline-width;
-    outline-offset: focus.$outline-offset;
-  }
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -35,12 +29,17 @@
     &:hover,
     &:focus {
       border-color: settings.$border-color-hover;
-      outline: none;
+      outline-width: 0;
       background-color: settings.$background-color-hover;
       box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:active {
       border-color: settings.$border-color-active;
       background-color: settings.$background-color-active;
@@ -57,7 +56,9 @@
       transition: opacity math.div(animation.$transition-duration, 2)
           animation.$transition-duration animation.$transition-easing,
         transform math.div(animation.$transition-duration, 2)
-          animation.$transition-duration animation.$transition-easing;
+          animation.$transition-duration animation.$transition-easing,
+        outline-offset animation.$transition-duration
+          animation.$transition-easing;
       opacity: 0;
       background-image: settings.$background-image-checked;
       background-repeat: no-repeat;
@@ -77,21 +78,6 @@
       }
     }
 
-    &:checked:hover,
-    &:checked:focus {
-      border-color: settings.$border-color-checked-hover;
-      background-color: settings.$background-color-checked-hover;
-      box-shadow: settings.$box-shadow-checked-hover;
-      color: settings.$color-checked-hover;
-    }
-
-    &:checked:active {
-      border-color: settings.$border-color-checked-active;
-      background-color: settings.$background-color-checked-active;
-      box-shadow: settings.$box-shadow-checked-active;
-      color: settings.$color-checked-active;
-    }
-
     &:invalid,
     &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
@@ -113,5 +99,23 @@
         color: settings.$color-disabled-checked;
       }
     }
+
+    &:checked:hover:not(:invalid),
+    &:checked:focus:not(:invalid),
+    &:checked:hover:not([aria-invalid='true']),
+    &:checked:focus:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-hover;
+      background-color: settings.$background-color-checked-hover;
+      box-shadow: settings.$box-shadow-checked-hover;
+      color: settings.$color-checked-hover;
+    }
+
+    &:checked:active:not(:invalid),
+    &:checked:active:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-active;
+      background-color: settings.$background-color-checked-active;
+      box-shadow: settings.$box-shadow-checked-active;
+      color: settings.$color-checked-active;
+    }
   }
 }
diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -81,6 +81,9 @@ $box-shadow-disabled: none !default;
 //
 // Disabled-checked colors ////////////////////////////////////////
 $color-disabled-checked: palette.get('grayscale', 'white') !default;
-$background-color-disabled-checked: palette.get('grayscale', 'light-1') !default;
+$background-color-disabled-checked: palette.get(
+  'grayscale',
+  'light-1'
+) !default;
 $border-color-disabled-checked: palette.get('grayscale', 'light-1') !default;
 $box-shadow-disabled-checked: none !default;
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
@@ -5,19 +5,15 @@
 
 [type='radio'] {
   position: relative;
+  top: calc(settings.$gap / 2);
   flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin: settings.$gap;
+  outline-offset: 0;
   font-size: settings.$size;
   cursor: pointer;
   appearance: none;
-  top: calc(settings.$gap / 2);
-
-  &:focus-visible {
-    outline: focus.$outline-color solid focus.$outline-width;
-    outline-offset: focus.$outline-offset;
-  }
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -37,7 +33,9 @@
       transform: scale(0.5);
       transition: opacity animation.$transition-duration
           animation.$transition-easing,
-        transform animation.$transition-duration animation.$transition-easing;
+        transform animation.$transition-duration animation.$transition-easing,
+        outline-offset animation.$transition-duration
+          animation.$transition-easing;
       border-radius: settings.$border-radius;
       opacity: 0;
       background: settings.$color-checked;
@@ -46,11 +44,17 @@
     &:hover,
     &:focus {
       border-color: settings.$border-color-hover;
+      outline-width: 0;
       background-color: settings.$background-color-hover;
       box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:active {
       border-color: settings.$border-color-active;
       background-color: settings.$background-color-active;
@@ -70,21 +74,6 @@
       }
     }
 
-    &:checked:hover,
-    &:checked:focus {
-      border-color: settings.$border-color-checked-hover;
-      background-color: settings.$background-color-checked-hover;
-      box-shadow: settings.$box-shadow-checked-hover;
-      color: settings.$color-checked-hover;
-    }
-
-    &:checked:active {
-      border-color: settings.$border-color-checked-active;
-      background-color: settings.$background-color-checked-active;
-      box-shadow: settings.$box-shadow-checked-active;
-      color: settings.$color-checked-active;
-    }
-
     &:invalid,
     &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
@@ -110,5 +99,27 @@
         background: settings.$color-disabled-checked;
       }
     }
+
+    &:focus:not(:focus-visible) {
+      outline-width: 0;
+    }
+
+    &:checked:hover:not(:invalid),
+    &:checked:focus:not(:invalid),
+    &:checked:hover:not([aria-invalid='true']),
+    &:checked:focus:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-hover;
+      background-color: settings.$background-color-checked-hover;
+      box-shadow: settings.$box-shadow-checked-hover;
+      color: settings.$color-checked-hover;
+    }
+
+    &:checked:active:not(:invalid),
+    &:checked:active:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-active;
+      background-color: settings.$background-color-checked-active;
+      box-shadow: settings.$box-shadow-checked-active;
+      color: settings.$color-checked-active;
+    }
   }
 }
diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use './settings';
 @use '../../settings/animation';
+@use '../../settings/focus';
 @use 'sass:math';
 @use '../../tools/custom-property';
 
@@ -9,7 +10,9 @@ textarea,
 input {
   transition: color animation.$transition-duration animation.$transition-easing,
     background-color animation.$transition-duration animation.$transition-easing,
-    border animation.$transition-duration animation.$transition-easing;
+    border animation.$transition-duration animation.$transition-easing,
+    outline-offset animation.$transition-duration animation.$transition-easing;
+  outline-offset: 0;
   resize: vertical;
 
   &::placeholder {
@@ -43,7 +46,7 @@ textarea {
   width: 100%;
   padding: settings.$padding-vertical settings.$padding-horizontal;
   border: settings.$border-width solid settings.$border-color;
-  border-radius: 
+  border-radius:
     var(#{custom-property.get($items: ('input-text', 'border-top-left-radius'))})
     var(#{custom-property.get($items: ('input-text', 'border-top-right-radius'))})
     var(#{custom-property.get($items: ('input-text', 'border-bottom-right-radius'))})
@@ -53,7 +56,8 @@ textarea {
   color: settings.$color;
   font: settings.$font;
 
-  &:hover {
+  &:hover,
+  &:focus {
     border-color: settings.$border-color-hover;
     background-color: settings.$background-hover;
     box-shadow: settings.$box-shadow-hover;
@@ -64,10 +68,14 @@ textarea {
     }
   }
 
-  &:active,
-  &:focus {
+  &:focus-visible {
+    outline: focus.$outline-color solid focus.$outline-width;
+    outline-offset: focus.$outline-offset;
+  }
+
+  &:active {
     border-color: settings.$border-color-active;
-    outline: none;
+    outline-width: 0;
     background-color: settings.$background-active;
     box-shadow: settings.$box-shadow-active;
     color: settings.$color-active;
@@ -100,5 +108,9 @@ textarea {
       color: settings.$placeholder-color-disabled;
     }
   }
+
+  &:focus:not(:focus-visible) {
+    outline-width: 0;
+  }
 }
 /* stylelint-enable selector-max-type */
diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use 'settings';
 @use '../../settings/animation';
+@use '../../settings/focus';
 @use '../../settings/typography';
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -19,11 +20,13 @@
       border animation.$transition-duration animation.$transition-easing;
     border: settings.$border-width solid settings.$border-color;
     border-radius: settings.$border-radius;
+    outline-offset: 0;
     background-color: settings.$background-color;
     background-image: settings.$background-image;
     background-repeat: no-repeat;
     background-position: right 0.75em top 50%;
     background-size: 1em;
+    box-shadow: settings.$box-shadow;
     color: settings.$color;
     font-weight: settings.$font-weight;
     text-overflow: ellipsis;
@@ -34,19 +37,26 @@
       display: none;
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       border-color: settings.$border-color-hover;
       background-color: settings.$background-color-hover;
       background-image: settings.$background-image-hover;
+      box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
-    &:focus,
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:active {
       border-color: settings.$border-color-active;
       outline: none;
       background-color: settings.$background-color-active;
       background-image: settings.$background-image-active;
+      box-shadow: settings.$box-shadow-active;
       color: settings.$color-active;
     }
 
@@ -55,16 +65,22 @@
       border-color: settings.$border-color-invalid;
       background-color: settings.$background-color-invalid;
       background-image: settings.$background-image-invalid;
+      box-shadow: settings.$box-shadow-invalid;
       color: settings.$color-invalid;
     }
 
     &[disabled] {
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
       background-image: settings.$background-image-disabled;
+      box-shadow: settings.$box-shadow-disabled;
       color: settings.$color-disabled;
       cursor: default;
     }
+
+    &:focus:not(:focus-visible) {
+      outline-width: 0;
+    }
   }
   /* stylelint-enable selector-max-type */
 }