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