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