summaryrefslogtreecommitdiffstats
path: root/src/.old/objects/_switch.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-25 11:11:05 +0200
committerVolpeon <git@volpeon.ink>2024-06-25 11:11:05 +0200
commitb566769679473b91d2f63406fba7cc3b44c4fcc1 (patch)
tree24fe359c8922bc250ad8cce8cba688d5c8c72235 /src/.old/objects/_switch.scss
parentFix button style (diff)
downloadiro-design-b566769679473b91d2f63406fba7cc3b44c4fcc1.tar.gz
iro-design-b566769679473b91d2f63406fba7cc3b44c4fcc1.tar.bz2
iro-design-b566769679473b91d2f63406fba7cc3b44c4fcc1.zip
Update
Diffstat (limited to 'src/.old/objects/_switch.scss')
-rw-r--r--src/.old/objects/_switch.scss221
1 files changed, 0 insertions, 221 deletions
diff --git a/src/.old/objects/_switch.scss b/src/.old/objects/_switch.scss
deleted file mode 100644
index cbbb9b7..0000000
--- a/src/.old/objects/_switch.scss
+++ /dev/null
@@ -1,221 +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 --325),
8 --height: calc(fn.global-dim(--size --175) + 1px),
9 --label-gap: fn.global-dim(--size --125),
10 --border: fn.global-dim(--border --medium),
11 --pad-x: fn.global-dim(--size --65),
12 --pad-y: fn.global-dim(--size --65),
13 ),
14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: (
18 --track-bg: fn.global-color(--obj),
19 --handle-border: fn.global-color(--fg-hi),
20 --handle-bg: fn.global-color(--bg-hi),
21
22 --hover: (
23 --label: fn.global-color(--fg-lo),
24 --handle-border: fn.global-color(--fg),
25 ),
26 --accent: (
27 --handle-border: fn.global-color(--accent --primary --solid --bg),
28
29 --hover: (
30 --handle-border: fn.global-color(--accent --primary --solid --obj),
31 ),
32 ),
33 --key-focus: (
34 --label: fn.global-color(--focus --text),
35 --track-bg: fn.global-color(--focus --fill),
36 --handle-border: fn.global-color(--focus --fill),
37 --shadow: fn.global-color(--focus --shadow),
38 ),
39 --disabled: (
40 --label: fn.global-color(--fg-hi3),
41 --track-bg: fn.global-color(--obj),
42 --handle-border: fn.global-color(--obj-lo),
43 --handle-bg: fn.global-color(--bg-hi),
44 )
45 ),
46 ), 'colors');
47
48 @include iro.bem-object(iro.props-namespace()) {
49 display: inline-flex;
50 position: relative;
51 align-items: flex-start;
52 margin-right: calc(-1 * fn.dim(--pad-x));
53 margin-left: calc(-1 * fn.dim(--pad-x));
54 padding: fn.dim(--pad-y) fn.dim(--pad-x);
55
56 @include iro.bem-elem('indicator') {
57 display: block;
58 box-sizing: border-box;
59 flex: 0 0 auto;
60 width: fn.dim(--width);
61 height: fn.dim(--height);
62 margin-top: 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 width: calc(fn.dim(--height) - 2 * fn.dim(--border));
71 height: 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-left: fn.dim(--label-gap);
82 }
83
84 @include iro.bem-elem('native') {
85 position: absolute;
86 top: 0;
87 left: 0;
88 width: 100%;
89 height: 100%;
90 margin: 0;
91 padding: 0;
92 overflow: hidden;
93 opacity: .0001;
94
95 &:hover {
96 @include iro.bem-sibling-elem('label') {
97 color: fn.color(--hover --label);
98 }
99
100 @include iro.bem-sibling-elem('indicator') {
101 &::after {
102 border-color: fn.color(--hover --handle-border);
103 }
104 }
105 }
106
107 &:checked {
108 @include iro.bem-sibling-elem('indicator') {
109 background-color: fn.color(--handle-border);
110
111 &::after {
112 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
113 border-color: fn.color(--handle-border);
114 }
115 }
116
117 &:hover {
118 @include iro.bem-sibling-elem('indicator') {
119 background-color: fn.color(--hover --handle-border);
120
121 &::after {
122 border-color: fn.color(--hover --handle-border);
123 }
124 }
125 }
126 }
127
128 &:disabled {
129 @include iro.bem-sibling-elem('label') {
130 color: fn.color(--disabled --label);
131 }
132
133 @include iro.bem-sibling-elem('indicator') {
134 background-color: fn.color(--disabled --track-bg);
135
136 &::after {
137 border-color: fn.color(--disabled --handle-border);
138 background-color: fn.color(--disabled --handle-bg);
139 }
140 }
141
142 &:checked {
143 @include iro.bem-sibling-elem('indicator') {
144 background-color: fn.color(--disabled --handle-border);
145
146 &::after {
147 border-color: fn.color(--disabled --handle-border);
148 }
149 }
150 }
151 }
152
153 @include iro.bem-at-theme('keyboard') {
154 &:focus {
155 @include iro.bem-sibling-elem('label') {
156 color: fn.color(--key-focus --label);
157 }
158
159 @include iro.bem-sibling-elem('indicator') {
160 &::after {
161 border-color: fn.color(--key-focus --handle-border);
162 box-shadow: fn.color(--key-focus --shadow);
163 }
164 }
165
166 &:checked {
167 @include iro.bem-sibling-elem('indicator') {
168 background-color: fn.color(--key-focus --track-bg);
169 }
170 }
171 }
172 }
173 }
174
175 @include iro.bem-modifier('standalone') {
176 @include iro.bem-elem('indicator') {
177 margin-top: 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 @include iro.bem-sibling-elem('indicator') {
194 background-color: fn.color(--accent --hover --handle-border);
195
196 &::after {
197 border-color: fn.color(--accent --hover --handle-border);
198 }
199 }
200 }
201 }
202
203 &:disabled {
204 @include iro.bem-sibling-elem('label') {
205 color: fn.color(--disabled --label);
206 }
207
208 &:checked {
209 @include iro.bem-sibling-elem('indicator') {
210 background-color: fn.color(--disabled --handle-border);
211
212 &::after {
213 border-color: fn.color(--disabled --handle-border);
214 }
215 }
216 }
217 }
218 }
219 }
220 }
221}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-11 02:59:00 +0000