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.scss154
1 files changed, 71 insertions, 83 deletions
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index c1f7411..0ef95e6 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,79 +1,73 @@
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 "switch.vars"; 7@forward 'switch.vars';
8@use "switch.vars" as vars; 8@use 'switch.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("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);
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("indicator") { 22 @include bem.elem('indicator') {
26 display: inline-block; 23 display: inline-block;
27 flex: 0 0 auto; 24 flex: 0 0 auto;
28 inline-size: props.get(vars.$inline-size); 25 inline-size: props.get(vars.$inline-size);
29 block-size: props.get(vars.$block-size); 26 block-size: props.get(vars.$block-size);
30 margin-block-start: calc( 27 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - 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.$block-size) - props.get(vars.$key-focus--border-offset) 29 background-color: props.get(vars.$track-bg-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.$track-bg-color); 32 border-radius: 2em;
36 background-clip: padding-box; 33 transition: background-color .2s ease;
37 border: props.get(vars.$key-focus--border-offset) solid transparent;
38 border-radius: 2em;
39 transition: background-color 0.2s ease;
40 34
41 &::after { 35 &::after {
42 display: block; 36 display: block;
43 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); 37 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
44 block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); 38 block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
45 content: ""; 39 content: '';
46 background-color: props.get(vars.$handle-bg-color); 40 background-color: props.get(vars.$handle-bg-color);
47 border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); 41 border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
48 border-radius: props.get(vars.$inline-size); 42 border-radius: props.get(vars.$inline-size);
49 transition: transform 0.2s ease; 43 transition: transform .2s ease;
50 } 44 }
51 } 45 }
52 46
53 @include bem.elem("label") { 47 @include bem.elem('label') {
54 margin-inline-start: props.get(vars.$label-gap); 48 margin-inline-start: props.get(vars.$label-gap);
55 } 49 }
56 50
57 @include bem.elem("native") { 51 @include bem.elem('native') {
58 position: absolute; 52 position: absolute;
59 inset-block-start: 0; 53 inset-block-start: 0;
60 inset-inline-start: 0; 54 inset-inline-start: 0;
61 z-index: -1; 55 z-index: -1;
62 inline-size: 100%; 56 inline-size: 100%;
63 block-size: 100%; 57 block-size: 100%;
64 padding: 0; 58 padding: 0;
65 margin: 0; 59 margin: 0;
66 overflow: hidden; 60 overflow: hidden;
67 appearance: none; 61 appearance: none;
68 border-radius: props.get(vars.$rounding); 62 border-radius: props.get(vars.$rounding);
69 63
70 &:hover, 64 &:hover,
71 &:focus-visible { 65 &:focus-visible {
72 @include bem.sibling-elem("label") { 66 @include bem.sibling-elem('label') {
73 color: props.get(vars.$hover--label-color); 67 color: props.get(vars.$hover--label-color);
74 } 68 }
75 69
76 @include bem.sibling-elem("indicator") { 70 @include bem.sibling-elem('indicator') {
77 &::after { 71 &::after {
78 border-color: props.get(vars.$hover--handle-border-color); 72 border-color: props.get(vars.$hover--handle-border-color);
79 } 73 }
@@ -81,23 +75,18 @@
81 } 75 }
82 76
83 &:checked { 77 &:checked {
84 @include bem.sibling-elem("indicator") { 78 @include bem.sibling-elem('indicator') {
85 background-color: props.get(vars.$handle-border-color); 79 background-color: props.get(vars.$handle-border-color);
86 80
87 &::after { 81 &::after {
88 border-color: props.get(vars.$handle-border-color); 82 border-color: props.get(vars.$handle-border-color);
89 transform: translate( 83 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
90 calc(
91 props.get(vars.$inline-size) - props.get(vars.$block-size) + 0.5px
92 ),
93 0
94 );
95 } 84 }
96 } 85 }
97 86
98 &:hover, 87 &:hover,
99 &:focus-visible { 88 &:focus-visible {
100 @include bem.sibling-elem("indicator") { 89 @include bem.sibling-elem('indicator') {
101 background-color: props.get(vars.$hover--handle-border-color); 90 background-color: props.get(vars.$hover--handle-border-color);
102 91
103 &::after { 92 &::after {
@@ -108,21 +97,21 @@
108 } 97 }
109 98
110 &:disabled { 99 &:disabled {
111 @include bem.sibling-elem("label") { 100 @include bem.sibling-elem('label') {
112 color: props.get(vars.$disabled--label-color); 101 color: props.get(vars.$disabled--label-color);
113 } 102 }
114 103
115 @include bem.sibling-elem("indicator") { 104 @include bem.sibling-elem('indicator') {
116 background-color: props.get(vars.$disabled--track-bg-color); 105 background-color: props.get(vars.$disabled--track-bg-color);
117 106
118 &::after { 107 &::after {
119 background-color: props.get(vars.$disabled--handle-bg-color); 108 background-color: props.get(vars.$disabled--handle-bg-color);
120 border-color: props.get(vars.$disabled--handle-border-color); 109 border-color: props.get(vars.$disabled--handle-border-color);
121 } 110 }
122 } 111 }
123 112
124 &:checked { 113 &:checked {
125 @include bem.sibling-elem("indicator") { 114 @include bem.sibling-elem('indicator') {
126 background-color: props.get(vars.$disabled--handle-border-color); 115 background-color: props.get(vars.$disabled--handle-border-color);
127 116
128 &::after { 117 &::after {
@@ -133,33 +122,32 @@
133 } 122 }
134 123
135 &:focus-visible { 124 &:focus-visible {
136 @include bem.sibling-elem("label") { 125 @include bem.sibling-elem('label') {
137 color: props.get(vars.$key-focus--label-color); 126 color: props.get(vars.$key-focus--label-color);
138 } 127 }
139 128
140 @include bem.sibling-elem("indicator") { 129 @include bem.sibling-elem('indicator') {
141 outline: props.get(vars.$key-focus--border-color) solid 130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
142 props.get(vars.$key-focus--border-width); 131 box-shadow:
143 box-shadow: 0 0 0 132 0
144 calc( 133 0
145 props.get(vars.$key-focus--border-width) + 134 0
146 props.get(vars.$key-focus--outline-width) 135 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
147 )
148 props.get(vars.$key-focus--outline-color); 136 props.get(vars.$key-focus--outline-color);
149 } 137 }
150 } 138 }
151 } 139 }
152 140
153 @include bem.modifier("standalone") { 141 @include bem.modifier('standalone') {
154 @include bem.elem("indicator") { 142 @include bem.elem('indicator') {
155 margin-block-start: 0; 143 margin-block-start: 0;
156 } 144 }
157 } 145 }
158 146
159 @include bem.modifier("accent") { 147 @include bem.modifier('accent') {
160 @include bem.elem("native") { 148 @include bem.elem('native') {
161 &:checked { 149 &:checked {
162 @include bem.sibling-elem("indicator") { 150 @include bem.sibling-elem('indicator') {
163 background-color: props.get(vars.$accent--handle-border-color); 151 background-color: props.get(vars.$accent--handle-border-color);
164 152
165 &::after { 153 &::after {
@@ -169,7 +157,7 @@
169 157
170 &:hover, 158 &:hover,
171 &:focus-visible { 159 &:focus-visible {
172 @include bem.sibling-elem("indicator") { 160 @include bem.sibling-elem('indicator') {
173 background-color: props.get(vars.$accent--hover--handle-border-color); 161 background-color: props.get(vars.$accent--hover--handle-border-color);
174 162
175 &::after { 163 &::after {
@@ -180,12 +168,12 @@
180 } 168 }
181 169
182 &:disabled { 170 &:disabled {
183 @include bem.sibling-elem("label") { 171 @include bem.sibling-elem('label') {
184 color: props.get(vars.$disabled--label-color); 172 color: props.get(vars.$disabled--label-color);
185 } 173 }
186 174
187 &:checked { 175 &:checked {
188 @include bem.sibling-elem("indicator") { 176 @include bem.sibling-elem('indicator') {
189 background-color: props.get(vars.$disabled--handle-border-color); 177 background-color: props.get(vars.$disabled--handle-border-color);
190 178
191 &::after { 179 &::after {
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 22:02:27 +0000