summaryrefslogtreecommitdiffstats
path: root/src/objects/_radio.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-22 08:23:33 +0200
committerVolpeon <git@volpeon.ink>2024-10-22 08:23:33 +0200
commit5855a6821cf5585378a70f9bee13563bdbfe2d86 (patch)
tree0ee25906c9e73912137a56b7d6214c89bf43e8a6 /src/objects/_radio.scss
parentUpdate (diff)
downloadiro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.gz
iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.bz2
iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.zip
Less broad imports
Diffstat (limited to 'src/objects/_radio.scss')
-rw-r--r--src/objects/_radio.scss40
1 files changed, 20 insertions, 20 deletions
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index c6e5a60..b603a0d 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use '../core.vars' as core; 5@use '../core.vars' as core;
@@ -10,7 +10,7 @@
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 iro.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);
@@ -19,7 +19,7 @@
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 iro.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);
@@ -45,11 +45,11 @@
45 } 45 }
46 } 46 }
47 47
48 @include iro.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 iro.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;
@@ -64,17 +64,17 @@
64 64
65 &:hover, 65 &:hover,
66 &:focus-visible { 66 &:focus-visible {
67 @include iro.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 iro.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 iro.bem-sibling-elem('circle') { 77 @include bem.sibling-elem('circle') {
78 &::after { 78 &::after {
79 transform: scale(.44); 79 transform: scale(.44);
80 } 80 }
@@ -82,11 +82,11 @@
82 } 82 }
83 83
84 &:disabled { 84 &:disabled {
85 @include iro.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 iro.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 {
@@ -96,11 +96,11 @@
96 } 96 }
97 97
98 &:focus-visible { 98 &:focus-visible {
99 @include iro.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 iro.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
@@ -112,29 +112,29 @@
112 } 112 }
113 } 113 }
114 114
115 @include iro.bem-modifier('standalone') { 115 @include bem.modifier('standalone') {
116 @include iro.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 iro.bem-modifier('accent') { 121 @include bem.modifier('accent') {
122 @include iro.bem-elem('native') { 122 @include bem.elem('native') {
123 &:checked { 123 &:checked {
124 @include iro.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 iro.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 iro.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 {
@@ -143,7 +143,7 @@
143 } 143 }
144 144
145 &:checked { 145 &:checked {
146 @include iro.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 }