_switch.scss in foundation-rails-6.9.0.0

- old
+ new

@@ -8,14 +8,22 @@
 
 /// Background color of a switch.
 /// @type Color
 $switch-background: $medium-gray !default;
 
+/// Background color of a switch on focus.
+/// @type Color
+$switch-background-focus: scale-color($switch-background, $lightness: -10%) !default;
+
 /// Background active color of a switch.
 /// @type Color
 $switch-background-active: $primary-color !default;
 
+/// Background active color of a switch on focus.
+/// @type Color
+$switch-background-active-focus: scale-color($switch-background-active, $lightness: -15%) !default;
+
 /// Height of a switch, with no class applied.
 /// @type Number
 $switch-height: 2rem !default;
 
 /// Height of a switch with .tiny class.
@@ -54,11 +62,11 @@
 /// @type Number
 $switch-paddle-transition: all 0.25s ease-out !default;
 
 /// Opacity of a disabled switch.
 /// @type Number
-$switch-opacity-disabled: .5 !default;
+$switch-opacity-disabled: 0.5 !default;
 
 /// Cursor for a disabled switch.
 /// @type Cursor
 $switch-cursor-disabled: not-allowed !default;
 
@@ -138,10 +146,25 @@
     &::after {
       #{$global-left}: $paddle-active-offest;
     }
   }
 
+
+  // Change the visual style when the switch is focused
+  input:focus-visible ~ & {
+    background: $switch-background-focus;
+
+    &::after {
+      background: $switch-paddle-background;
+    }
+  }
+
+  input:checked:focus-visible ~ & {
+    background: $switch-background-active-focus;
+  }
+
+
   // indicate a disabled switch
   input:disabled ~ & {
     cursor: $switch-cursor-disabled;
     opacity: $switch-opacity-disabled;
   }
@@ -213,11 +236,11 @@
 }
 
 @mixin foundation-switch {
   // Container class
   .switch {
-    height: $switch-height;
     @include switch-container;
+    height: $switch-height;
   }
 
   // <input> element
   .switch-input {
     @include switch-input;