From 5b967128432b220e08c92e5c34a7a617bc9beb53 Mon Sep 17 00:00:00 2001
From: Lucas Larroche <lucas@larroche.com>
Date: Wed, 15 Mar 2023 22:15:25 +0700
Subject: [PATCH] style: Checkboxes, radios and switches

---
 scss/forms/_basics.scss                | 58 ++++++++++------
 scss/forms/_checkbox-radio-switch.scss | 92 ++++++++++++++++++++------
 2 files changed, 107 insertions(+), 43 deletions(-)

diff --git a/scss/forms/_basics.scss b/scss/forms/_basics.scss
index c5e6a8df..17cfbe1c 100644
--- a/scss/forms/_basics.scss
+++ b/scss/forms/_basics.scss
@@ -133,10 +133,14 @@
   label,
   fieldset legend {
     display: block;
-    margin-bottom: calc(var(#{$✨}spacing) * 0.25);
+    margin-bottom: calc(var(#{$✨}spacing) * 0.375);
     font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
   }
 
+  fieldset legend {
+    margin-bottom: calc(var(#{$✨}spacing) * 0.5);
+  }
+
   // Blocks, 100%
   input:not([type="checkbox"], [type="radio"]),
   select,
@@ -267,18 +271,24 @@
       &:is(:active, :focus) {
         @if $enable-important {
           #{$✨}border-color: var(#{$✨}form-element-valid-active-border-color) !important;
-          #{$✨}box-shadow: 0
-            0
-            0
-            var(#{$✨}outline-width)
-            var(#{$✨}form-element-valid-focus-color) !important;
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$✨}box-shadow: 0
+              0
+              0
+              var(#{$✨}outline-width)
+              var(#{$✨}form-element-valid-focus-color) !important;
+          }
         } @else {
           #{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
-          #{$✨}box-shadow: 0
-            0
-            0
-            var(#{$✨}outline-width)
-            var(#{$✨}form-element-valid-focus-color);
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$✨}box-shadow: 0
+              0
+              0
+              var(#{$✨}outline-width)
+              var(#{$✨}form-element-valid-focus-color);
+          }
         }
       }
     }
@@ -289,18 +299,24 @@
       &:is(:active, :focus) {
         @if $enable-important {
           #{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color) !important;
-          #{$✨}box-shadow: 0
-            0
-            0
-            var(#{$✨}outline-width)
-            var(#{$✨}form-element-invalid-focus-color) !important;
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$✨}box-shadow: 0
+              0
+              0
+              var(#{$✨}outline-width)
+              var(#{$✨}form-element-invalid-focus-color) !important;
+          }
         } @else {
           #{$✨}border-color: var(#{$✨}form-element-invalid-active-border-color);
-          #{$✨}box-shadow: 0
-            0
-            0
-            var(#{$✨}outline-width)
-            var(#{$✨}form-element-invalid-focus-color);
+
+          &:not([type="checkbox"], [type="radio"]) {
+            #{$✨}box-shadow: 0
+              0
+              0
+              var(#{$✨}outline-width)
+              var(#{$✨}form-element-invalid-focus-color);
+          }
         }
       }
     }
diff --git a/scss/forms/_checkbox-radio-switch.scss b/scss/forms/_checkbox-radio-switch.scss
index 86f33e31..f7d66e56 100644
--- a/scss/forms/_checkbox-radio-switch.scss
+++ b/scss/forms/_checkbox-radio-switch.scss
@@ -6,6 +6,29 @@
    * Checkboxes, Radios and Switches
    */
 
+  // Labels
+  label {
+    &:has([type="checkbox"], [type="radio"]) {
+      width: fit-content;
+      cursor: pointer;
+    }
+  }
+
+  // Disabled labels
+  label:has([disabled]),
+  [type="checkbox"][disabled] + label,
+  [type="radio"][disabled] + label {
+    opacity: var(#{$✨}form-element-disabled-opacity);
+    pointer-events: none;
+  }
+
+  label:has([disabled]) {
+    [type="checkbox"],
+    [type="radio"] {
+      opacity: initial;
+    }
+  }
+
   [type="checkbox"],
   [type="radio"] {
     -webkit-appearance: none;
@@ -14,10 +37,7 @@
     width: 1.25em;
     height: 1.25em;
     margin-top: -0.125em;
-    margin-right: 0.375em;
-    margin-left: 0;
-    margin-inline-start: 0;
-    margin-inline-end: 0.375em;
+    margin-inline-end: 0.5em;
     border-width: var(#{$✨}border-width);
     vertical-align: middle;
     cursor: pointer;
@@ -39,9 +59,12 @@
 
     & ~ label {
       display: inline-block;
-      margin-right: 0.375em;
       margin-bottom: 0;
       cursor: pointer;
+
+      &:not(:last-of-type) {
+        margin-inline-end: 1em;
+      }
     }
   }
 
@@ -73,7 +96,6 @@
   // Switchs
   [type="checkbox"][role="switch"] {
     #{$✨}background-color: var(#{$✨}switch-background-color);
-    #{$✨}border-color: var(#{$✨}switch-background-color);
     #{$✨}color: var(#{$✨}switch-color);
 
     // Config
@@ -89,16 +111,10 @@
     background-color: var(#{$✨}background-color);
     line-height: $switch-height;
 
-    &:focus {
-      #{$✨}background-color: var(#{$✨}switch-background-color);
+    &:not([aria-invalid]) {
       #{$✨}border-color: var(#{$✨}switch-background-color);
     }
 
-    &:checked {
-      #{$✨}background-color: var(#{$✨}switch-checked-background-color);
-      #{$✨}border-color: var(#{$✨}switch-checked-background-color);
-    }
-
     &:before {
       display: block;
       width: calc(#{$switch-height} - (var(#{$✨}border-width) * 2));
@@ -112,29 +128,61 @@
       }
     }
 
+    &:focus {
+      #{$✨}background-color: var(#{$✨}switch-background-color);
+      #{$✨}border-color: var(#{$✨}switch-background-color);
+    }
+
     &:checked {
+      #{$✨}background-color: var(#{$✨}switch-checked-background-color);
+      #{$✨}border-color: var(#{$✨}switch-checked-background-color);
       background-image: none;
 
       &::before {
-        margin-left: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
         margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
       }
     }
+
+    &[disabled] {
+      #{$✨}background-color: var(#{$✨}border-color);
+    }
   }
 
   // Aria-invalid
   [type="checkbox"],
-  [type="checkbox"]:checked,
-  [type="radio"],
-  [type="radio"]:checked,
-  [type="checkbox"][role="switch"],
-  [type="checkbox"][role="switch"]:checked {
+  [type="checkbox"][role="switch"] {
     &[aria-invalid="false"] {
-      #{$✨}border-color: var(#{$✨}form-element-valid-border-color);
+      &:checked,
+      &:checked:active,
+      &:checked:focus {
+        #{$✨}background-color: var(#{$✨}form-element-valid-border-color);
+      }
     }
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      &[aria-invalid="true"] {
+        #{$✨}background-color: var(#{$✨}form-element-invalid-border-color);
+      }
+    }
+  }
 
-    &[aria-invalid="true"] {
-      #{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
+  [type="checkbox"],
+  [type="radio"],
+  [type="checkbox"][role="switch"] {
+    &[aria-invalid="false"] {
+      &:checked,
+      &:checked:active,
+      &:checked:focus {
+        #{$✨}border-color: var(#{$✨}form-element-valid-border-color);
+      }
+    }
+    &:checked,
+    &:checked:active,
+    &:checked:focus {
+      &[aria-invalid="true"] {
+        #{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
+      }
     }
   }
 }