diff options
author | Volpeon <git@volpeon.ink> | 2024-06-25 17:39:03 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-25 17:39:03 +0200 |
commit | 4de75e0f305b2cb4a026073440f2bac7c34df817 (patch) | |
tree | 628f71b6f917bb9357ae14d018149509db655e4e /src/objects/_switch.scss | |
parent | Update (diff) | |
download | iro-design-4de75e0f305b2cb4a026073440f2bac7c34df817.tar.gz iro-design-4de75e0f305b2cb4a026073440f2bac7c34df817.tar.bz2 iro-design-4de75e0f305b2cb4a026073440f2bac7c34df817.zip |
Focus indicator style
Diffstat (limited to 'src/objects/_switch.scss')
-rw-r--r-- | src/objects/_switch.scss | 67 |
1 files changed, 26 insertions, 41 deletions
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 9ebb290..a67aa8d 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss | |||
@@ -12,6 +12,12 @@ | |||
12 | --pad-b: fn.global-dim(--size --65), | 12 | --pad-b: fn.global-dim(--size --65), |
13 | --rounding: fn.global-dim(--rounding), | 13 | --rounding: fn.global-dim(--rounding), |
14 | --spacing-sibling: fn.global-dim(--size --300), | 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 --border), | ||
20 | ), | ||
15 | ), | 21 | ), |
16 | --colors: ( | 22 | --colors: ( |
17 | --track-bg: fn.global-color(--border), | 23 | --track-bg: fn.global-color(--border), |
@@ -36,33 +42,34 @@ | |||
36 | --handle-bg: fn.global-color(--base --50), | 42 | --handle-bg: fn.global-color(--base --50), |
37 | ), | 43 | ), |
38 | --key-focus: ( | 44 | --key-focus: ( |
39 | --bg: fn.global-color(--focus-static --400), | 45 | --label: fn.global-color(--focus --text), |
40 | --label: fn.global-color(--focus-static --400-text), | 46 | --border: fn.global-color(--focus --border), |
41 | --track-bg: fn.global-color(--focus-static --700), | 47 | --outline: fn.global-color(--focus --outline), |
42 | --handle-border: fn.global-color(--focus-static --1000), | ||
43 | --handle-bg: fn.global-color(--focus-static --1000-text), | ||
44 | ), | 48 | ), |
45 | ), | 49 | ), |
46 | )); | 50 | )); |
47 | 51 | ||
48 | @include iro.bem-object(iro.props-namespace()) { | 52 | @include iro.bem-object(iro.props-namespace()) { |
49 | display: inline-flex; | 53 | display: inline-block; |
50 | position: relative; | 54 | position: relative; |
51 | align-items: flex-start; | 55 | margin-inline: |
52 | margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i)); | 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)); | ||
53 | padding-inline: fn.dim(--pad-i); | 58 | padding-inline: fn.dim(--pad-i); |
54 | padding-block: fn.dim(--pad-b); | 59 | padding-block: fn.dim(--pad-b); |
55 | 60 | ||
56 | @include iro.bem-elem('indicator') { | 61 | @include iro.bem-elem('indicator') { |
57 | display: block; | 62 | display: inline-block; |
58 | box-sizing: border-box; | ||
59 | flex: 0 0 auto; | 63 | flex: 0 0 auto; |
60 | inline-size: fn.dim(--width); | 64 | inline-size: fn.dim(--width); |
61 | block-size: fn.dim(--height); | 65 | block-size: fn.dim(--height); |
62 | margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - 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)); |
63 | transition: background-color .2s ease; | 67 | transition: background-color .2s ease; |
68 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
64 | border-radius: 2em; | 69 | border-radius: 2em; |
65 | background-color: fn.color(--track-bg); | 70 | background-color: fn.color(--track-bg); |
71 | background-clip: padding-box; | ||
72 | vertical-align: top; | ||
66 | 73 | ||
67 | &::after { | 74 | &::after { |
68 | content: ''; | 75 | content: ''; |
@@ -77,7 +84,6 @@ | |||
77 | } | 84 | } |
78 | 85 | ||
79 | @include iro.bem-elem('label') { | 86 | @include iro.bem-elem('label') { |
80 | align-self: baseline; | ||
81 | margin-inline-start: fn.dim(--label-gap); | 87 | margin-inline-start: fn.dim(--label-gap); |
82 | } | 88 | } |
83 | 89 | ||
@@ -94,7 +100,8 @@ | |||
94 | overflow: hidden; | 100 | overflow: hidden; |
95 | border-radius: fn.dim(--rounding); | 101 | border-radius: fn.dim(--rounding); |
96 | 102 | ||
97 | &:hover { | 103 | &:hover, |
104 | &:focus-visible { | ||
98 | @include iro.bem-sibling-elem('label') { | 105 | @include iro.bem-sibling-elem('label') { |
99 | color: fn.color(--hover --label); | 106 | color: fn.color(--hover --label); |
100 | } | 107 | } |
@@ -116,7 +123,8 @@ | |||
116 | } | 123 | } |
117 | } | 124 | } |
118 | 125 | ||
119 | &:hover { | 126 | &:hover, |
127 | &:focus-visible { | ||
120 | @include iro.bem-sibling-elem('indicator') { | 128 | @include iro.bem-sibling-elem('indicator') { |
121 | background-color: fn.color(--hover --handle-border); | 129 | background-color: fn.color(--hover --handle-border); |
122 | 130 | ||
@@ -153,25 +161,13 @@ | |||
153 | } | 161 | } |
154 | 162 | ||
155 | &:focus-visible { | 163 | &:focus-visible { |
156 | background-color: fn.color(--key-focus --bg); | ||
157 | |||
158 | @include iro.bem-sibling-elem('label') { | 164 | @include iro.bem-sibling-elem('label') { |
159 | color: fn.color(--key-focus --label); | 165 | color: fn.color(--key-focus --label); |
160 | } | 166 | } |
161 | 167 | ||
162 | @include iro.bem-sibling-elem('indicator') { | 168 | @include iro.bem-sibling-elem('indicator') { |
163 | background-color: fn.color(--key-focus --track-bg); | 169 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); |
164 | 170 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | |
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 | } | 171 | } |
176 | } | 172 | } |
177 | } | 173 | } |
@@ -193,7 +189,8 @@ | |||
193 | } | 189 | } |
194 | } | 190 | } |
195 | 191 | ||
196 | &:hover { | 192 | &:hover, |
193 | &:focus-visible { | ||
197 | @include iro.bem-sibling-elem('indicator') { | 194 | @include iro.bem-sibling-elem('indicator') { |
198 | background-color: fn.color(--accent --hover --handle-border); | 195 | background-color: fn.color(--accent --hover --handle-border); |
199 | 196 | ||
@@ -219,18 +216,6 @@ | |||
219 | } | 216 | } |
220 | } | 217 | } |
221 | } | 218 | } |
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 | } | 219 | } |
235 | } | 220 | } |
236 | } | 221 | } |