summaryrefslogtreecommitdiffstats
path: root/src/objects/_switch.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_switch.scss')
-rw-r--r--src/objects/_switch.scss44
1 files changed, 22 insertions, 22 deletions
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index f368229..15d75b9 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.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('switch') { 13 @include bem.object('switch') {
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('indicator') { 22 @include bem.elem('indicator') {
23 display: inline-block; 23 display: inline-block;
24 flex: 0 0 auto; 24 flex: 0 0 auto;
25 inline-size: props.get(vars.$inline-size); 25 inline-size: props.get(vars.$inline-size);
@@ -44,11 +44,11 @@
44 } 44 }
45 } 45 }
46 46
47 @include iro.bem-elem('label') { 47 @include bem.elem('label') {
48 margin-inline-start: props.get(vars.$label-gap); 48 margin-inline-start: props.get(vars.$label-gap);
49 } 49 }
50 50
51 @include iro.bem-elem('native') { 51 @include bem.elem('native') {
52 position: absolute; 52 position: absolute;
53 inset-block-start: 0; 53 inset-block-start: 0;
54 inset-inline-start: 0; 54 inset-inline-start: 0;
@@ -63,11 +63,11 @@
63 63
64 &:hover, 64 &:hover,
65 &:focus-visible { 65 &:focus-visible {
66 @include iro.bem-sibling-elem('label') { 66 @include bem.sibling-elem('label') {
67 color: props.get(vars.$hover--label-color); 67 color: props.get(vars.$hover--label-color);
68 } 68 }
69 69
70 @include iro.bem-sibling-elem('indicator') { 70 @include bem.sibling-elem('indicator') {
71 &::after { 71 &::after {
72 border-color: props.get(vars.$hover--handle-border-color); 72 border-color: props.get(vars.$hover--handle-border-color);
73 } 73 }
@@ -75,7 +75,7 @@
75 } 75 }
76 76
77 &:checked { 77 &:checked {
78 @include iro.bem-sibling-elem('indicator') { 78 @include bem.sibling-elem('indicator') {
79 background-color: props.get(vars.$handle-border-color); 79 background-color: props.get(vars.$handle-border-color);
80 80
81 &::after { 81 &::after {
@@ -86,7 +86,7 @@
86 86
87 &:hover, 87 &:hover,
88 &:focus-visible { 88 &:focus-visible {
89 @include iro.bem-sibling-elem('indicator') { 89 @include bem.sibling-elem('indicator') {
90 background-color: props.get(vars.$hover--handle-border-color); 90 background-color: props.get(vars.$hover--handle-border-color);
91 91
92 &::after { 92 &::after {
@@ -97,11 +97,11 @@
97 } 97 }
98 98
99 &:disabled { 99 &:disabled {
100 @include iro.bem-sibling-elem('label') { 100 @include bem.sibling-elem('label') {
101 color: props.get(vars.$disabled--label-color); 101 color: props.get(vars.$disabled--label-color);
102 } 102 }
103 103
104 @include iro.bem-sibling-elem('indicator') { 104 @include bem.sibling-elem('indicator') {
105 background-color: props.get(vars.$disabled--track-bg-color); 105 background-color: props.get(vars.$disabled--track-bg-color);
106 106
107 &::after { 107 &::after {
@@ -111,7 +111,7 @@
111 } 111 }
112 112
113 &:checked { 113 &:checked {
114 @include iro.bem-sibling-elem('indicator') { 114 @include bem.sibling-elem('indicator') {
115 background-color: props.get(vars.$disabled--handle-border-color); 115 background-color: props.get(vars.$disabled--handle-border-color);
116 116
117 &::after { 117 &::after {
@@ -122,11 +122,11 @@
122 } 122 }
123 123
124 &:focus-visible { 124 &:focus-visible {
125 @include iro.bem-sibling-elem('label') { 125 @include bem.sibling-elem('label') {
126 color: props.get(vars.$key-focus--label-color); 126 color: props.get(vars.$key-focus--label-color);
127 } 127 }
128 128
129 @include iro.bem-sibling-elem('indicator') { 129 @include bem.sibling-elem('indicator') {
130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
131 box-shadow: 131 box-shadow:
132 0 132 0
@@ -138,16 +138,16 @@
138 } 138 }
139 } 139 }
140 140
141 @include iro.bem-modifier('standalone') { 141 @include bem.modifier('standalone') {
142 @include iro.bem-elem('indicator') { 142 @include bem.elem('indicator') {
143 margin-block-start: 0; 143 margin-block-start: 0;
144 } 144 }
145 } 145 }
146 146
147 @include iro.bem-modifier('accent') { 147 @include bem.modifier('accent') {
148 @include iro.bem-elem('native') { 148 @include bem.elem('native') {
149 &:checked { 149 &:checked {
150 @include iro.bem-sibling-elem('indicator') { 150 @include bem.sibling-elem('indicator') {
151 background-color: props.get(vars.$accent--handle-border-color); 151 background-color: props.get(vars.$accent--handle-border-color);
152 152
153 &::after { 153 &::after {
@@ -157,7 +157,7 @@
157 157
158 &:hover, 158 &:hover,
159 &:focus-visible { 159 &:focus-visible {
160 @include iro.bem-sibling-elem('indicator') { 160 @include bem.sibling-elem('indicator') {
161 background-color: props.get(vars.$accent--hover--handle-border-color); 161 background-color: props.get(vars.$accent--hover--handle-border-color);
162 162
163 &::after { 163 &::after {
@@ -168,12 +168,12 @@
168 } 168 }
169 169
170 &:disabled { 170 &:disabled {
171 @include iro.bem-sibling-elem('label') { 171 @include bem.sibling-elem('label') {
172 color: props.get(vars.$disabled--label-color); 172 color: props.get(vars.$disabled--label-color);
173 } 173 }
174 174
175 &:checked { 175 &:checked {
176 @include iro.bem-sibling-elem('indicator') { 176 @include bem.sibling-elem('indicator') {
177 background-color: props.get(vars.$disabled--handle-border-color); 177 background-color: props.get(vars.$disabled--handle-border-color);
178 178
179 &::after { 179 &::after {