summaryrefslogtreecommitdiffstats
path: root/src_old/objects/_switch.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-19 19:37:18 +0200
committerVolpeon <git@volpeon.ink>2024-10-19 19:37:18 +0200
commit4f472e44dbd2ffa1e4e10c63b7ab74105d8e894b (patch)
tree287b995743e5e4e4437b955df9f8cad8d2598ab0 /src_old/objects/_switch.scss
parentRefactoring complete (diff)
downloadiro-design-4f472e44dbd2ffa1e4e10c63b7ab74105d8e894b.tar.gz
iro-design-4f472e44dbd2ffa1e4e10c63b7ab74105d8e894b.tar.bz2
iro-design-4f472e44dbd2ffa1e4e10c63b7ab74105d8e894b.zip
Remove old code
Diffstat (limited to 'src_old/objects/_switch.scss')
-rw-r--r--src_old/objects/_switch.scss222
1 files changed, 0 insertions, 222 deletions
diff --git a/src_old/objects/_switch.scss b/src_old/objects/_switch.scss
deleted file mode 100644
index e1f1132..0000000
--- a/src_old/objects/_switch.scss
+++ /dev/null
@@ -1,222 +0,0 @@
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 --key-focus: (
17 --border: fn.global-dim(--key-focus --border),
18 --border-offset: fn.global-dim(--key-focus --border-offset),
19 --outline: fn.global-dim(--key-focus --outline),
20 ),
21 ),
22 --colors: (
23 --track-bg: fn.global-color(--border),
24 --handle-border: fn.global-color(--text-mute-more),
25 --handle-bg: fn.global-color(--base --50),
26
27 --hover: (
28 --label: fn.global-color(--heading),
29 --handle-border: fn.global-color(--text-mute),
30 ),
31 --accent: (
32 --handle-border: fn.global-color(--accent --900),
33
34 --hover: (
35 --handle-border: fn.global-color(--accent --1000),
36 ),
37 ),
38 --disabled: (
39 --label: fn.global-color(--text-disabled),
40 --track-bg: fn.global-color(--border),
41 --handle-border: fn.global-color(--border-strong),
42 --handle-bg: fn.global-color(--base --50),
43 ),
44 --key-focus: (
45 --label: fn.global-color(--focus --text),
46 --border: fn.global-color(--focus --border),
47 --outline: fn.global-color(--focus --outline),
48 ),
49 ),
50 ));
51
52 @include iro.bem-object(iro.props-namespace()) {
53 display: inline-block;
54 position: relative;
55 margin-inline:
56 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
57 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
58 padding-inline: fn.dim(--pad-i);
59 padding-block: fn.dim(--pad-b);
60
61 @include iro.bem-elem('indicator') {
62 display: inline-block;
63 flex: 0 0 auto;
64 inline-size: fn.dim(--width);
65 block-size: fn.dim(--height);
66 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset));
67 transition: background-color .2s ease;
68 border: fn.dim(--key-focus --border-offset) solid transparent;
69 border-radius: 2em;
70 background-color: fn.color(--track-bg);
71 background-clip: padding-box;
72 vertical-align: top;
73
74 &::after {
75 content: '';
76 display: block;
77 inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
78 block-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
79 transition: transform .2s ease;
80 border: fn.dim(--border) solid fn.color(--handle-border);
81 border-radius: fn.dim(--width);
82 background-color: fn.color(--handle-bg);
83 }
84 }
85
86 @include iro.bem-elem('label') {
87 margin-inline-start: fn.dim(--label-gap);
88 }
89
90 @include iro.bem-elem('native') {
91 appearance: none;
92 position: absolute;
93 z-index: -1;
94 inset-block-start: 0;
95 inset-inline-start: 0;
96 inline-size: 100%;
97 block-size: 100%;
98 margin: 0;
99 padding: 0;
100 overflow: hidden;
101 border-radius: fn.dim(--rounding);
102
103 &:hover,
104 &:focus-visible {
105 @include iro.bem-sibling-elem('label') {
106 color: fn.color(--hover --label);
107 }
108
109 @include iro.bem-sibling-elem('indicator') {
110 &::after {
111 border-color: fn.color(--hover --handle-border);
112 }
113 }
114 }
115
116 &:checked {
117 @include iro.bem-sibling-elem('indicator') {
118 background-color: fn.color(--handle-border);
119
120 &::after {
121 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
122 border-color: fn.color(--handle-border);
123 }
124 }
125
126 &:hover,
127 &:focus-visible {
128 @include iro.bem-sibling-elem('indicator') {
129 background-color: fn.color(--hover --handle-border);
130
131 &::after {
132 border-color: fn.color(--hover --handle-border);
133 }
134 }
135 }
136 }
137
138 &:disabled {
139 @include iro.bem-sibling-elem('label') {
140 color: fn.color(--disabled --label);
141 }
142
143 @include iro.bem-sibling-elem('indicator') {
144 background-color: fn.color(--disabled --track-bg);
145
146 &::after {
147 border-color: fn.color(--disabled --handle-border);
148 background-color: fn.color(--disabled --handle-bg);
149 }
150 }
151
152 &:checked {
153 @include iro.bem-sibling-elem('indicator') {
154 background-color: fn.color(--disabled --handle-border);
155
156 &::after {
157 border-color: fn.color(--disabled --handle-border);
158 }
159 }
160 }
161 }
162
163 &:focus-visible {
164 @include iro.bem-sibling-elem('label') {
165 color: fn.color(--key-focus --label);
166 }
167
168 @include iro.bem-sibling-elem('indicator') {
169 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
170 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
171 }
172 }
173 }
174
175 @include iro.bem-modifier('standalone') {
176 @include iro.bem-elem('indicator') {
177 margin-block-start: 0;
178 }
179 }
180
181 @include iro.bem-modifier('accent') {
182 @include iro.bem-elem('native') {
183 &:checked {
184 @include iro.bem-sibling-elem('indicator') {
185 background-color: fn.color(--accent --handle-border);
186
187 &::after {
188 border-color: fn.color(--accent --handle-border);
189 }
190 }
191
192 &:hover,
193 &:focus-visible {
194 @include iro.bem-sibling-elem('indicator') {
195 background-color: fn.color(--accent --hover --handle-border);
196
197 &::after {
198 border-color: fn.color(--accent --hover --handle-border);
199 }
200 }
201 }
202 }
203
204 &:disabled {
205 @include iro.bem-sibling-elem('label') {
206 color: fn.color(--disabled --label);
207 }
208
209 &:checked {
210 @include iro.bem-sibling-elem('indicator') {
211 background-color: fn.color(--disabled --handle-border);
212
213 &::after {
214 border-color: fn.color(--disabled --handle-border);
215 }
216 }
217 }
218 }
219 }
220 }
221 }
222}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 09:35:29 +0000