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.scss237
1 files changed, 237 insertions, 0 deletions
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
new file mode 100644
index 0000000..9ebb290
--- /dev/null
+++ b/src/objects/_switch.scss
@@ -0,0 +1,237 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('switch') {
5 @include iro.props-store((
6 --dims: (
7 --width: fn.global-dim(--size --350),
8 --height: fn.global-dim(--size --200),
9 --label-gap: fn.global-dim(--size --125),
10 --border: fn.global-dim(--border --medium),
11 --pad-i: fn.global-dim(--size --65),
12 --pad-b: fn.global-dim(--size --65),
13 --rounding: fn.global-dim(--rounding),
14 --spacing-sibling: fn.global-dim(--size --300),
15 ),
16 --colors: (
17 --track-bg: fn.global-color(--border),
18 --handle-border: fn.global-color(--text-mute),
19 --handle-bg: fn.global-color(--base --50),
20
21 --hover: (
22 --label: fn.global-color(--heading),
23 --handle-border: fn.global-color(--text),
24 ),
25 --accent: (
26 --handle-border: fn.global-color(--accent --900),
27
28 --hover: (
29 --handle-border: fn.global-color(--accent --1000),
30 ),
31 ),
32 --disabled: (
33 --label: fn.global-color(--text-disabled),
34 --track-bg: fn.global-color(--border),
35 --handle-border: fn.global-color(--border-strong),
36 --handle-bg: fn.global-color(--base --50),
37 ),
38 --key-focus: (
39 --bg: fn.global-color(--focus-static --400),
40 --label: fn.global-color(--focus-static --400-text),
41 --track-bg: fn.global-color(--focus-static --700),
42 --handle-border: fn.global-color(--focus-static --1000),
43 --handle-bg: fn.global-color(--focus-static --1000-text),
44 ),
45 ),
46 ));
47
48 @include iro.bem-object(iro.props-namespace()) {
49 display: inline-flex;
50 position: relative;
51 align-items: flex-start;
52 margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i));
53 padding-inline: fn.dim(--pad-i);
54 padding-block: fn.dim(--pad-b);
55
56 @include iro.bem-elem('indicator') {
57 display: block;
58 box-sizing: border-box;
59 flex: 0 0 auto;
60 inline-size: fn.dim(--width);
61 block-size: fn.dim(--height);
62 margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height)));
63 transition: background-color .2s ease;
64 border-radius: 2em;
65 background-color: fn.color(--track-bg);
66
67 &::after {
68 content: '';
69 display: block;
70 inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
71 block-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
72 transition: transform .2s ease;
73 border: fn.dim(--border) solid fn.color(--handle-border);
74 border-radius: fn.dim(--width);
75 background-color: fn.color(--handle-bg);
76 }
77 }
78
79 @include iro.bem-elem('label') {
80 align-self: baseline;
81 margin-inline-start: fn.dim(--label-gap);
82 }
83
84 @include iro.bem-elem('native') {
85 appearance: none;
86 position: absolute;
87 z-index: -1;
88 inset-block-start: 0;
89 inset-inline-start: 0;
90 inline-size: 100%;
91 block-size: 100%;
92 margin: 0;
93 padding: 0;
94 overflow: hidden;
95 border-radius: fn.dim(--rounding);
96
97 &:hover {
98 @include iro.bem-sibling-elem('label') {
99 color: fn.color(--hover --label);
100 }
101
102 @include iro.bem-sibling-elem('indicator') {
103 &::after {
104 border-color: fn.color(--hover --handle-border);
105 }
106 }
107 }
108
109 &:checked {
110 @include iro.bem-sibling-elem('indicator') {
111 background-color: fn.color(--handle-border);
112
113 &::after {
114 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
115 border-color: fn.color(--handle-border);
116 }
117 }
118
119 &:hover {
120 @include iro.bem-sibling-elem('indicator') {
121 background-color: fn.color(--hover --handle-border);
122
123 &::after {
124 border-color: fn.color(--hover --handle-border);
125 }
126 }
127 }
128 }
129
130 &:disabled {
131 @include iro.bem-sibling-elem('label') {
132 color: fn.color(--disabled --label);
133 }
134
135 @include iro.bem-sibling-elem('indicator') {
136 background-color: fn.color(--disabled --track-bg);
137
138 &::after {
139 border-color: fn.color(--disabled --handle-border);
140 background-color: fn.color(--disabled --handle-bg);
141 }
142 }
143
144 &:checked {
145 @include iro.bem-sibling-elem('indicator') {
146 background-color: fn.color(--disabled --handle-border);
147
148 &::after {
149 border-color: fn.color(--disabled --handle-border);
150 }
151 }
152 }
153 }
154
155 &:focus-visible {
156 background-color: fn.color(--key-focus --bg);
157
158 @include iro.bem-sibling-elem('label') {
159 color: fn.color(--key-focus --label);
160 }
161
162 @include iro.bem-sibling-elem('indicator') {
163 background-color: fn.color(--key-focus --track-bg);
164
165 &::after {
166 border-color: fn.color(--key-focus --handle-border);
167 background-color: fn.color(--key-focus --handle-bg);
168 }
169 }
170
171 &:checked {
172 @include iro.bem-sibling-elem('indicator') {
173 background-color: fn.color(--key-focus --handle-border);
174 }
175 }
176 }
177 }
178
179 @include iro.bem-modifier('standalone') {
180 @include iro.bem-elem('indicator') {
181 margin-block-start: 0;
182 }
183 }
184
185 @include iro.bem-modifier('accent') {
186 @include iro.bem-elem('native') {
187 &:checked {
188 @include iro.bem-sibling-elem('indicator') {
189 background-color: fn.color(--accent --handle-border);
190
191 &::after {
192 border-color: fn.color(--accent --handle-border);
193 }
194 }
195
196 &:hover {
197 @include iro.bem-sibling-elem('indicator') {
198 background-color: fn.color(--accent --hover --handle-border);
199
200 &::after {
201 border-color: fn.color(--accent --hover --handle-border);
202 }
203 }
204 }
205 }
206
207 &:disabled {
208 @include iro.bem-sibling-elem('label') {
209 color: fn.color(--disabled --label);
210 }
211
212 &:checked {
213 @include iro.bem-sibling-elem('indicator') {
214 background-color: fn.color(--disabled --handle-border);
215
216 &::after {
217 border-color: fn.color(--disabled --handle-border);
218 }
219 }
220 }
221 }
222
223 &:focus-visible {
224 &:checked {
225 @include iro.bem-sibling-elem('indicator') {
226 background-color: fn.color(--key-focus --handle-border);
227
228 &::after {
229 border-color: fn.color(--key-focus --handle-border);
230 }
231 }
232 }
233 }
234 }
235 }
236 }
237}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 11:57:11 +0000