From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 21 Jun 2024 23:07:50 +0200
Subject: WIP: Refactoring

---
 src/.old/objects/_radio.scss | 176 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 176 insertions(+)
 create mode 100644 src/.old/objects/_radio.scss

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

diff --git a/src/.old/objects/_radio.scss b/src/.old/objects/_radio.scss
new file mode 100644
index 0000000..5af7a12
--- /dev/null
+++ b/src/.old/objects/_radio.scss
@@ -0,0 +1,176 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('radio') {
+    @include iro.props-store((
+        --dims: (
+            --diameter:  calc(fn.global-dim(--size --175) + 1px),
+            --label-gap: fn.global-dim(--size --125),
+            --border:    fn.global-dim(--border --medium),
+            --pad-x:     fn.global-dim(--size --65),
+            --pad-y:     fn.global-dim(--size --65),
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --circle-border: fn.global-color(--fg-hi),
+            --circle-bg:     fn.global-color(--bg-hi),
+    
+            --hover: (
+                --label:         fn.global-color(--fg-lo),
+                --circle-border: fn.global-color(--fg),
+            ),
+            --accent: (
+                --circle-border: fn.global-color(--accent --primary --solid --bg),
+    
+                --hover: (
+                    --circle-border: fn.global-color(--accent --primary --solid --obj),
+                ),
+            ),
+            --key-focus: (
+                --label:         fn.global-color(--focus --text),
+                --circle-border: fn.global-color(--focus --fill),
+                --shadow:        fn.global-color(--focus --shadow),
+            ),
+            --disabled: (
+                --label:         fn.global-color(--fg-hi3),
+                --circle-border: fn.global-color(--obj-lo),
+                --circle-bg:     fn.global-color(--bg-hi),
+            )
+        ),
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:      inline-flex;
+        position:     relative;
+        align-items:  flex-start;
+        margin-right: calc(-1 * fn.dim(--pad-x));
+        margin-left:  calc(-1 * fn.dim(--pad-x));
+        padding:      fn.dim(--pad-y) fn.dim(--pad-x);
+    
+        @include iro.bem-elem('circle') {
+            display:          block;
+            box-sizing:       border-box;
+            flex:             0 0 auto;
+            width:            fn.dim(--diameter);
+            height:           fn.dim(--diameter);
+            margin-top:       calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter)));
+            border-radius:    2em;
+            background-color: fn.color(--circle-border);
+    
+            &::after {
+                content:          '';
+                display:          block;
+                position:         relative;
+                top:              fn.dim(--border);
+                left:             fn.dim(--border);
+                width:            calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                height:           calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                transition:       transform .2s ease;
+                border-radius:    fn.dim(--diameter);
+                background-color: fn.color(--circle-bg);
+            }
+        }
+    
+        @include iro.bem-elem('label') {
+            align-self:  baseline;
+            margin-left: fn.dim(--label-gap);
+        }
+    
+        @include iro.bem-elem('native') {
+            position: absolute;
+            top:      0;
+            left:     0;
+            width:    100%;
+            height:   100%;
+            margin:   0;
+            padding:  0;
+            overflow: hidden;
+            opacity:  .0001;
+    
+            &:hover {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--hover --label);
+                }
+    
+                @include iro.bem-sibling-elem('circle') {
+                    background-color: fn.color(--hover --circle-border);
+                }
+            }
+    
+            &:checked {
+                @include iro.bem-sibling-elem('circle') {
+                    &::after {
+                        transform: scale(.44);
+                    }
+                }
+            }
+    
+            &:disabled {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--disabled --label);
+                }
+    
+                @include iro.bem-sibling-elem('circle') {
+                    background-color: fn.color(--disabled --circle-border);
+    
+                    &::after {
+                        background-color: fn.color(--disabled --circle-bg);
+                    }
+                }
+            }
+    
+            @include iro.bem-at-theme('keyboard') {
+                &:focus {
+                    @include iro.bem-sibling-elem('label') {
+                        color: fn.color(--key-focus --label);
+                    }
+    
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: fn.color(--key-focus --circle-border);
+                        box-shadow:       fn.color(--key-focus --shadow);
+                    }
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('standalone') {
+            @include iro.bem-elem('circle') {
+                margin-top: 0;
+            }
+        }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: fn.color(--accent --circle-border);
+                    }
+        
+                    &:hover {
+                        @include iro.bem-sibling-elem('circle') {
+                            background-color: fn.color(--accent --hover --circle-border);
+                        }
+                    }
+                }
+    
+                &:disabled {
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: fn.color(--disabled --circle-border);
+        
+                        &::after {
+                            background-color: fn.color(--disabled --circle-bg);
+                        }
+                    }
+        
+                    &:checked {
+                        @include iro.bem-sibling-elem('circle') {
+                            background-color: fn.color(--disabled --circle-border);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
-- 
cgit v1.2.3-54-g00ecf