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