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