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