@stackoverflow/stacks 0.73.1 → 0.76.0

package/lib/css/components/_stacks-toggle-switches.less

@@ -1,137 +1,144 @@
-//
-//  STACK OVERFLOW
-//  TOGGLE SWITCHES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.s-toggle-switch {
-    position: relative;
-
-    input[type="checkbox"] {
-        // Hide the checkbox underneath the .s-toggle-switch--indicator.
-        margin: 0; // guard against production adding 5px of margin to these
-        opacity: 0;
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 44px;
-        height: 24px;
-        cursor: pointer;
-
-        + .s-toggle-switch--indicator {
-            pointer-events: none;
-            outline: 0;
-            display: block;
-            width: 44px;
-            height: 24px;
-            position: relative;
-            background: var(--black-300);
-            border-radius: 1000px;
-            padding: 3px;
-            transition: left 0.2s ease;
-
-            &:after,
-            &:before {
-                position: relative;
-                display: block;
-                content: "";
-                width: 50%;
-                height: 100%;
-            }
-
-            &:after {
-                left: 0;
-                border-radius: 50%;
-                background: @white;
-                transition: left 0.1s ease;
-
-                .highcontrast-mode({
-                    background: var(--white);
-                });
-            }
-
-            &:before {
-                display: none;
-            }
-        }
-
-        &:checked + .s-toggle-switch--indicator {
-            background: var(--green-400);
-
-            &:after {
-                left: 50%;
-            }
-        }
-
-        &:focus + .s-toggle-switch--indicator {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
-        }
-
-        &:checked:focus + .s-toggle-switch--indicator {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-success);
-        }
-    }
-
-    &.s-toggle-switch__multiple {
-        display: flex;
-        align-items: stretch;
-
-        //  First hide the radio buttons
-        input[type="radio"] {
-            position: absolute;
-            left: -999em;
-            opacity: 0;
-            margin: 0;
-        }
-
-        //  Next modifications to option cells
-        label {
-            //  Style the base label
-            width: 100%;
-            margin: 0;
-            padding: 0.5em 0.7em;
-            border-radius: 1000px;
-            color: var(--black-500);
-            font-size: @fs-body1;
-            font-weight: 400;
-            line-height: 1;
-            text-align: center;
-            white-space: nowrap;
-            cursor: pointer;
-
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            user-select: none;
-        }
-
-        //  If the input is selected, style its label accordingly.
-        input[type="radio"]:checked {
-            + label {
-                // Color activated options green
-                &.s-toggle-switch--label-off {
-                    background-color: var(--black-300);
-                    color: @white;
-
-                    .highcontrast-mode({
-                        color: var(--white);
-                    });
-                }
-
-                // Color activated options green
-                &:not(.s-toggle-switch--label-off) {
-                    background-color: var(--green-400);
-                    color: @white;
-
-                    .highcontrast-mode({
-                        color: var(--white);
-                    });
-                }
-            }
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  TOGGLE SWITCHES
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.s-toggle-switch {
+    position: relative;
+
+    input[type="checkbox"] {
+        // Hide the checkbox underneath the .s-toggle-switch--indicator.
+        margin: 0; // guard against production adding 5px of margin to these
+        opacity: 0;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 44px;
+        height: 24px;
+        cursor: pointer;
+
+        + .s-toggle-switch--indicator {
+            pointer-events: none;
+            outline: 0;
+            display: block;
+            width: 44px;
+            height: 24px;
+            position: relative;
+            background: var(--black-300);
+            border-radius: 1000px;
+            padding: 3px;
+            transition: left 0.2s ease;
+
+            &:after,
+            &:before {
+                position: relative;
+                display: block;
+                content: "";
+                width: 50%;
+                height: 100%;
+            }
+
+            &:after {
+                left: 0;
+                border-radius: 50%;
+                background: @white;
+                transition: left 0.1s ease;
+
+                .highcontrast-mode({
+                    background: var(--white);
+                });
+            }
+
+            &:before {
+                display: none;
+            }
+        }
+
+        &:checked + .s-toggle-switch--indicator {
+            background: var(--green-400);
+
+            &:after {
+                left: 50%;
+            }
+        }
+
+        &:focus + .s-toggle-switch--indicator {
+            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+        }
+
+        &:checked:focus + .s-toggle-switch--indicator {
+            box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+        }
+    }
+
+    &.s-toggle-switch__multiple {
+        display: flex;
+        align-items: stretch;
+
+        //  First hide the radio buttons
+        input[type="radio"] {
+            position: absolute;
+            left: -999em;
+            opacity: 0;
+            margin: 0;
+        }
+
+        //  Next modifications to option cells
+        label {
+            //  Style the base label
+            width: 100%;
+            margin: 0;
+            padding: 0.5em 0.7em;
+            border-radius: 1000px;
+            color: var(--black-500);
+            font-size: @fs-body1;
+            font-weight: 400;
+            line-height: 1;
+            text-align: center;
+            white-space: nowrap;
+            cursor: pointer;
+
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            user-select: none;
+        }
+
+        //  If the input is selected, style its label accordingly.
+        input[type="radio"]:checked {
+            + label {
+                &.s-toggle-switch--label-off {
+                    background-color: var(--black-300);
+                    color: @white;
+
+                    .highcontrast-mode({
+                        color: var(--white);
+                    });
+                }
+
+                // Color activated options green
+                &:not(.s-toggle-switch--label-off) {
+                    background-color: var(--green-400);
+                    color: @white;
+
+                    .highcontrast-mode({
+                        color: var(--white);
+                    });
+                }
+            }
+
+            &:focus + label.s-toggle-switch--label-off {
+                box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+            }
+
+            &:focus + label:not(.s-toggle-switch--label-off) {
+                box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+            }
+        }
+    }
+}