From ea8b0bc19219f6f931e3be757c25743c2c828b2e Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 6 Feb 2022 10:28:10 +0100
Subject: Added checkbox and switch

---
 src/objects/_radio.scss | 56 ++++++++++++++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 21 deletions(-)

(limited to 'src/objects/_radio.scss')

diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 635a260..bb32cdf 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -11,14 +11,14 @@
             --margin-right: iro.props-get(--dims --spacing --x --md, $global: true),
         ),
         --colors: (
-            --circle-border: iro.props-get(--colors --fg-hi2, $global: true),
+            --circle-border: iro.props-get(--colors --fg-hi, $global: true),
             --circle-bg:     iro.props-get(--colors --bg-hi, $global: true),
     
             --hover: (
                 --label:         iro.props-get(--colors --fg-lo, $global: true),
-                --circle-border: iro.props-get(--colors --fg-hi, $global: true),
+                --circle-border: iro.props-get(--colors --fg, $global: true),
             ),
-            --active: (
+            --accent: (
                 --circle-border: iro.props-get(--colors --accent --primary, $global: true),
     
                 --hover: (
@@ -34,10 +34,6 @@
                 --label:         iro.props-get(--colors --fg-hi3, $global: true),
                 --circle-border: iro.props-get(--colors --obj-lo, $global: true),
                 --circle-bg:     iro.props-get(--colors --bg-hi, $global: true),
-    
-                --active: (
-                    --circle-border: iro.props-get(--colors --obj-lo, $global: true),
-                ),
             )
         ),
     ));
@@ -104,18 +100,10 @@
     
             &:checked {
                 @include iro.bem-sibling-elem('circle') {
-                    background-color: iro.props-get(--colors --active --circle-border);
-    
                     &::after {
                         transform: translateY(-50%) scale(.44);
                     }
                 }
-    
-                &:hover {
-                    @include iro.bem-sibling-elem('circle') {
-                        background-color: iro.props-get(--colors --active --hover --circle-border);
-                    }
-                }
             }
     
             &:disabled {
@@ -130,12 +118,6 @@
                         background-color: iro.props-get(--colors --disabled --circle-bg);
                     }
                 }
-    
-                &:checked {
-                    @include iro.bem-sibling-elem('circle') {
-                        background-color: iro.props-get(--colors --disabled --active --circle-border);
-                    }
-                }
             }
     
             @include iro.bem-at-theme('keyboard') {
@@ -151,5 +133,37 @@
                 }
             }
         }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: iro.props-get(--colors --accent --circle-border);
+                    }
+        
+                    &:hover {
+                        @include iro.bem-sibling-elem('circle') {
+                            background-color: iro.props-get(--colors --accent --hover --circle-border);
+                        }
+                    }
+                }
+    
+                &:disabled {
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: iro.props-get(--colors --disabled --circle-border);
+        
+                        &::after {
+                            background-color: iro.props-get(--colors --disabled --circle-bg);
+                        }
+                    }
+        
+                    &:checked {
+                        @include iro.bem-sibling-elem('circle') {
+                            background-color: iro.props-get(--colors --disabled --circle-border);
+                        }
+                    }
+                }
+            }
+        }
     }
 }
-- 
cgit v1.2.3-70-g09d2