summaryrefslogtreecommitdiffstats
path: root/src_old/objects/_radio.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src_old/objects/_radio.scss')
-rw-r--r--src_old/objects/_radio.scss185
1 files changed, 185 insertions, 0 deletions
diff --git a/src_old/objects/_radio.scss b/src_old/objects/_radio.scss
new file mode 100644
index 0000000..9fa937d
--- /dev/null
+++ b/src_old/objects/_radio.scss
@@ -0,0 +1,185 @@
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: fn.global-dim(--size --200),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --65),
11 --pad-b: fn.global-dim(--size --65),
12 --rounding: fn.global-dim(--rounding),
13 --spacing-sibling: fn.global-dim(--size --300),
14
15 --key-focus: (
16 --border: fn.global-dim(--key-focus --border),
17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --outline),
19 ),
20 ),
21 --colors: (
22 --circle-border: fn.global-color(--text-mute-more),
23 --circle-bg: fn.global-color(--base --75),
24
25 --hover: (
26 --label: fn.global-color(--heading),
27 --circle-border: fn.global-color(--text-mute),
28 ),
29 --accent: (
30 --circle-border: fn.global-color(--accent --900),
31
32 --hover: (
33 --circle-border: fn.global-color(--accent --1000),
34 ),
35 ),
36 --disabled: (
37 --label: fn.global-color(--text-disabled),
38 --circle-border: fn.global-color(--border-strong),
39 --circle-bg: fn.global-color(--base --75),
40 ),
41 --key-focus: (
42 --label: fn.global-color(--focus --text),
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
46 ),
47 ));
48
49 @include iro.bem-object(iro.props-namespace()) {
50 display: inline-block;
51 position: relative;
52 margin-inline:
53 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
54 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
55 padding-block: fn.dim(--pad-b);
56 padding-inline: fn.dim(--pad-i);
57
58 @include iro.bem-elem('circle') {
59 display: inline-block;
60 flex: 0 0 auto;
61 inline-size: fn.dim(--diameter);
62 block-size: fn.dim(--diameter);
63 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset));
64 border: fn.dim(--key-focus --border-offset) solid transparent;
65 border-radius: 2em;
66 background-color: fn.color(--circle-border);
67 background-clip: padding-box;
68 vertical-align: top;
69
70 &::after {
71 content: '';
72 display: block;
73 position: relative;
74 inset-block-start: fn.dim(--border);
75 inset-inline-start: fn.dim(--border);
76 inline-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
77 block-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
78 transition: transform .2s ease;
79 border-radius: fn.dim(--diameter);
80 background-color: fn.color(--circle-bg);
81 }
82 }
83
84 @include iro.bem-elem('label') {
85 margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
86 }
87
88 @include iro.bem-elem('native') {
89 appearance: none;
90 position: absolute;
91 z-index: -1;
92 inset-block-start: 0;
93 inset-inline-start: 0;
94 inline-size: 100%;
95 block-size: 100%;
96 margin: 0;
97 padding: 0;
98 overflow: hidden;
99 border-radius: fn.dim(--rounding);
100
101 &:hover,
102 &:focus-visible {
103 @include iro.bem-sibling-elem('label') {
104 color: fn.color(--hover --label);
105 }
106
107 @include iro.bem-sibling-elem('circle') {
108 background-color: fn.color(--hover --circle-border);
109 }
110 }
111
112 &:checked {
113 @include iro.bem-sibling-elem('circle') {
114 &::after {
115 transform: scale(.44);
116 }
117 }
118 }
119
120 &:disabled {
121 @include iro.bem-sibling-elem('label') {
122 color: fn.color(--disabled --label);
123 }
124
125 @include iro.bem-sibling-elem('circle') {
126 background-color: fn.color(--disabled --circle-border);
127
128 &::after {
129 background-color: fn.color(--disabled --circle-bg);
130 }
131 }
132 }
133
134 &:focus-visible {
135 @include iro.bem-sibling-elem('label') {
136 color: fn.color(--key-focus --label);
137 }
138
139 @include iro.bem-sibling-elem('circle') {
140 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
141 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
142 }
143 }
144 }
145
146 @include iro.bem-modifier('standalone') {
147 @include iro.bem-elem('circle') {
148 margin-block-start: 0;
149 }
150 }
151
152 @include iro.bem-modifier('accent') {
153 @include iro.bem-elem('native') {
154 &:checked {
155 @include iro.bem-sibling-elem('circle') {
156 background-color: fn.color(--accent --circle-border);
157 }
158
159 &:hover,
160 &:focus-visible {
161 @include iro.bem-sibling-elem('circle') {
162 background-color: fn.color(--accent --hover --circle-border);
163 }
164 }
165 }
166
167 &:disabled {
168 @include iro.bem-sibling-elem('circle') {
169 background-color: fn.color(--disabled --circle-border);
170
171 &::after {
172 background-color: fn.color(--disabled --circle-bg);
173 }
174 }
175
176 &:checked {
177 @include iro.bem-sibling-elem('circle') {
178 background-color: fn.color(--disabled --circle-border);
179 }
180 }
181 }
182 }
183 }
184 }
185}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 05:45:35 +0000