OEL-3401: Input focus state.

[skip chromatic]
openeuropa · Oct 29, 2024 · a36e8d4 · a36e8d4
1 parent 29e7488
commit a36e8d4
Showing 1 changed file with 33 additions and 2 deletions.
diff --git a/src/themes/default/src/scss/_input.scss b/src/themes/default/src/scss/_input.scss
@@ -1,11 +1,16 @@
-// stylelint-disable no-duplicate-selectors
-// stylelint-disable selector-no-qualifying-type
+/* stylelint-disable no-duplicate-selectors, selector-no-qualifying-type, no-descending-specificity */
 
 .form-select {
   padding-top: $input-padding-y-lg;
   padding-bottom: $input-padding-y-lg;
   padding-left: $input-padding-x-lg;
   font-size: $form-font-size-lg;
+  &:focus-visible {
+    outline: 2px solid $primary;
+    box-shadow: none;
+    border-radius: 4px;
+    outline-offset: -1px;
+  }
 }
 
 .form-control {
@@ -18,6 +23,12 @@
     margin: (-$input-padding-y-lg) $input-padding-x-lg (-$input-padding-y-lg)
       (-$input-padding-x-lg);
   }
+  &:focus-visible {
+    outline: 2px solid $primary;
+    box-shadow: none;
+    border-radius: 4px;
+    outline-offset: -1px;
+  }
 }
 .form-check:not(.form-switch) {
   padding-left: 1.8rem;
@@ -30,6 +41,20 @@
     margin-top: 0.15rem;
   }
 }
+.form-check-input {
+  &:focus-visible {
+    outline: 4px solid $primary;
+    box-shadow: none;
+    border-radius: 4px;
+    outline-offset: 0;
+    &[type="radio"] {
+      border-radius: 50%;
+    }
+  }
+  &:checked:focus-visible {
+    border-color: $white;
+  }
+}
 
 @include media-breakpoint-up(md) {
   .form-check:not(.form-switch) {
@@ -73,6 +98,12 @@ textarea.form-control,
 }
 
 .form-select:not([multiple]):not([size]) {
+  &:focus-visible {
+    outline: 2px solid $primary;
+    box-shadow: none;
+    border-radius: 4px;
+    outline-offset: -1px;
+  }
   &.is-invalid {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"),
       url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");