summaryrefslogtreecommitdiffstats
path: root/src/objects/_radio.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
committerVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
commit48cb00040763459fc46d4aa108bf72c12f48f422 (patch)
tree9609470d56bb31d55697ef0c42f1c908804dd3f1 /src/objects/_radio.scss
parentUpdate (diff)
downloadiro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip
WIP: Refactoring
Diffstat (limited to 'src/objects/_radio.scss')
-rw-r--r--src/objects/_radio.scss176
1 files changed, 0 insertions, 176 deletions
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
deleted file mode 100644
index 5af7a12..0000000
--- a/src/objects/_radio.scss
+++ /dev/null
@@ -1,176 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('radio') {
5 @include iro.props-store((
6 --dims: (
7 --diameter: calc(fn.global-dim(--size --175) + 1px),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: fn.global-dim(--size --65),
12 ),
13 ), 'dims');
14
15 @include iro.props-store((
16 --colors: (
17 --circle-border: fn.global-color(--fg-hi),
18 --circle-bg: fn.global-color(--bg-hi),
19
20 --hover: (
21 --label: fn.global-color(--fg-lo),
22 --circle-border: fn.global-color(--fg),
23 ),
24 --accent: (
25 --circle-border: fn.global-color(--accent --primary --solid --bg),
26
27 --hover: (
28 --circle-border: fn.global-color(--accent --primary --solid --obj),
29 ),
30 ),
31 --key-focus: (
32 --label: fn.global-color(--focus --text),
33 --circle-border: fn.global-color(--focus --fill),
34 --shadow: fn.global-color(--focus --shadow),
35 ),
36 --disabled: (
37 --label: fn.global-color(--fg-hi3),
38 --circle-border: fn.global-color(--obj-lo),
39 --circle-bg: fn.global-color(--bg-hi),
40 )
41 ),
42 ), 'colors');
43
44 @include iro.bem-object(iro.props-namespace()) {
45 display: inline-flex;
46 position: relative;
47 align-items: flex-start;
48 margin-right: calc(-1 * fn.dim(--pad-x));
49 margin-left: calc(-1 * fn.dim(--pad-x));
50 padding: fn.dim(--pad-y) fn.dim(--pad-x);
51
52 @include iro.bem-elem('circle') {
53 display: block;
54 box-sizing: border-box;
55 flex: 0 0 auto;
56 width: fn.dim(--diameter);
57 height: fn.dim(--diameter);
58 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter)));
59 border-radius: 2em;
60 background-color: fn.color(--circle-border);
61
62 &::after {
63 content: '';
64 display: block;
65 position: relative;
66 top: fn.dim(--border);
67 left: fn.dim(--border);
68 width: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
69 height: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
70 transition: transform .2s ease;
71 border-radius: fn.dim(--diameter);
72 background-color: fn.color(--circle-bg);
73 }
74 }
75
76 @include iro.bem-elem('label') {
77 align-self: baseline;
78 margin-left: fn.dim(--label-gap);
79 }
80
81 @include iro.bem-elem('native') {
82 position: absolute;
83 top: 0;
84 left: 0;
85 width: 100%;
86 height: 100%;
87 margin: 0;
88 padding: 0;
89 overflow: hidden;
90 opacity: .0001;
91
92 &:hover {
93 @include iro.bem-sibling-elem('label') {
94 color: fn.color(--hover --label);
95 }
96
97 @include iro.bem-sibling-elem('circle') {
98 background-color: fn.color(--hover --circle-border);
99 }
100 }
101
102 &:checked {
103 @include iro.bem-sibling-elem('circle') {
104 &::after {
105 transform: scale(.44);
106 }
107 }
108 }
109
110 &:disabled {
111 @include iro.bem-sibling-elem('label') {
112 color: fn.color(--disabled --label);
113 }
114
115 @include iro.bem-sibling-elem('circle') {
116 background-color: fn.color(--disabled --circle-border);
117
118 &::after {
119 background-color: fn.color(--disabled --circle-bg);
120 }
121 }
122 }
123
124 @include iro.bem-at-theme('keyboard') {
125 &:focus {
126 @include iro.bem-sibling-elem('label') {
127 color: fn.color(--key-focus --label);
128 }
129
130 @include iro.bem-sibling-elem('circle') {
131 background-color: fn.color(--key-focus --circle-border);
132 box-shadow: fn.color(--key-focus --shadow);
133 }
134 }
135 }
136 }
137
138 @include iro.bem-modifier('standalone') {
139 @include iro.bem-elem('circle') {
140 margin-top: 0;
141 }
142 }
143
144 @include iro.bem-modifier('accent') {
145 @include iro.bem-elem('native') {
146 &:checked {
147 @include iro.bem-sibling-elem('circle') {
148 background-color: fn.color(--accent --circle-border);
149 }
150
151 &:hover {
152 @include iro.bem-sibling-elem('circle') {
153 background-color: fn.color(--accent --hover --circle-border);
154 }
155 }
156 }
157
158 &:disabled {
159 @include iro.bem-sibling-elem('circle') {
160 background-color: fn.color(--disabled --circle-border);
161
162 &::after {
163 background-color: fn.color(--disabled --circle-bg);
164 }
165 }
166
167 &:checked {
168 @include iro.bem-sibling-elem('circle') {
169 background-color: fn.color(--disabled --circle-border);
170 }
171 }
172 }
173 }
174 }
175 }
176}
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2025-12-12 14:26:28 +0000