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