Minor updates to the toggle component

To better match the current designs on Figma
element-hq · Sep 26, 2023 · 3a41093 · 3a41093
1 parent 7aef9f2
commit 3a41093
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/src/components/Toggle/Toggle.module.css b/src/components/Toggle/Toggle.module.css
@@ -16,8 +16,8 @@ limitations under the License.
 
 .toggle {
   display: grid;
-  width: 2.75rem;
-  height: 1.5rem;
+  width: 2.25rem;
+  height: 1.25rem;
   box-sizing: border-box;
 }
 
@@ -54,17 +54,19 @@ limitations under the License.
 }
 
 @media (hover) {
-  [type="checkbox"]:hover + .toggle-ui {
+  [type="checkbox"]:not(:checked):not([disabled]):hover + .toggle-ui {
     border-color: var(--cpd-color-border-interactive-hovered);
+    box-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   }
 }
 
-[type="checkbox"]:active + .toggle-ui {
+[type="checkbox"]:not(:checked):not([disabled]):active + .toggle-ui {
   border-color: var(--cpd-color-border-interactive-hovered);
+  box-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
 }
 
 @media (hover) {
-  :checked:hover + .toggle-ui {
+  :checked:not([disabled]):hover + .toggle-ui {
     background: var(--cpd-color-bg-action-primary-hovered);
     border-color: var(--cpd-color-bg-action-primary-hovered);
   }