diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_badge.scss | 48 | ||||
-rw-r--r-- | src/objects/_button.scss | 47 | ||||
-rw-r--r-- | src/objects/_checkbox.scss | 74 | ||||
-rw-r--r-- | src/objects/_radio.scss | 62 | ||||
-rw-r--r-- | src/objects/_switch.scss | 67 | ||||
-rw-r--r-- | src/objects/_table.scss | 167 | ||||
-rw-r--r-- | src/objects/_text-field.scss | 8 |
7 files changed, 313 insertions, 160 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index b9020b6..cc7e500 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -12,7 +12,8 @@ $static-themes: 'black' 'white' !default; | |||
12 | &:link, | 12 | &:link, |
13 | &:visited, | 13 | &:visited, |
14 | &:enabled { | 14 | &:enabled { |
15 | &:hover { | 15 | &:hover, |
16 | &:focus-visible { | ||
16 | background-color: fn.color(--#{$theme} --hover --bg); | 17 | background-color: fn.color(--#{$theme} --hover --bg); |
17 | color: fn.color(--#{$theme} --hover --label); | 18 | color: fn.color(--#{$theme} --hover --label); |
18 | } | 19 | } |
@@ -30,7 +31,8 @@ $static-themes: 'black' 'white' !default; | |||
30 | &:link, | 31 | &:link, |
31 | &:visited, | 32 | &:visited, |
32 | &:enabled { | 33 | &:enabled { |
33 | &:hover { | 34 | &:hover, |
35 | &:focus-visible { | ||
34 | background-color: fn.color(--#{$theme}-quiet --hover --bg); | 36 | background-color: fn.color(--#{$theme}-quiet --hover --bg); |
35 | color: fn.color(--#{$theme}-quiet --hover --label); | 37 | color: fn.color(--#{$theme}-quiet --hover --label); |
36 | } | 38 | } |
@@ -47,10 +49,8 @@ $static-themes: 'black' 'white' !default; | |||
47 | &:visited, | 49 | &:visited, |
48 | &:enabled { | 50 | &:enabled { |
49 | &:focus-visible { | 51 | &:focus-visible { |
50 | border-color: fn.color(--#{$theme} --key-focus --border); | 52 | outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); |
51 | outline: fn.color(--#{$theme} --key-focus --outline) solid fn.dim(--key-focus --outline); | 53 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); |
52 | background-color: fn.color(--#{$theme} --key-focus --bg); | ||
53 | color: fn.color(--#{$theme} --key-focus --label); | ||
54 | } | 54 | } |
55 | } | 55 | } |
56 | } | 56 | } |
@@ -85,8 +85,9 @@ $static-themes: 'black' 'white' !default; | |||
85 | ), | 85 | ), |
86 | 86 | ||
87 | --key-focus: ( | 87 | --key-focus: ( |
88 | --border: fn.global-dim(--border --medium), | 88 | --border: fn.global-dim(--key-focus --border), |
89 | --outline: fn.global-dim(--key-focus --border), | 89 | --border-offset: fn.global-dim(--key-focus --border-offset), |
90 | --outline: fn.global-dim(--key-focus --outline), | ||
90 | ), | 91 | ), |
91 | ), | 92 | ), |
92 | --colors: ( | 93 | --colors: ( |
@@ -99,10 +100,9 @@ $static-themes: 'black' 'white' !default; | |||
99 | --bg: fn.global-color(--heading), | 100 | --bg: fn.global-color(--heading), |
100 | ), | 101 | ), |
101 | --key-focus: ( | 102 | --key-focus: ( |
102 | --bg: fn.global-color(--base --50), | 103 | --label: fn.global-color(--focus --text), |
103 | --label: fn.global-color(--heading), | 104 | --border: fn.global-color(--focus --border), |
104 | --border: fn.global-color(--focus --1100), | 105 | --outline: fn.global-color(--focus --outline), |
105 | --outline: fn.global-color(--focus --400), | ||
106 | ), | 106 | ), |
107 | 107 | ||
108 | --quiet: ( | 108 | --quiet: ( |
@@ -190,11 +190,13 @@ $static-themes: 'black' 'white' !default; | |||
190 | 190 | ||
191 | @include iro.bem-object(iro.props-namespace()) { | 191 | @include iro.bem-object(iro.props-namespace()) { |
192 | display: inline-block; | 192 | display: inline-block; |
193 | padding-block: calc(fn.dim(--pad-b) - fn.dim(--key-focus --border)); | 193 | margin: calc(-1 * fn.dim(--key-focus --border)); |
194 | padding-inline: calc(fn.dim(--pad-i) - fn.dim(--key-focus --border)); | 194 | padding-block: fn.dim(--pad-b); |
195 | padding-inline: fn.dim(--pad-i); | ||
195 | border: fn.dim(--key-focus --border) solid transparent; | 196 | border: fn.dim(--key-focus --border) solid transparent; |
196 | border-radius: fn.dim(--rounding); | 197 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); |
197 | background-color: fn.color(--bg); | 198 | background-color: fn.color(--bg); |
199 | background-clip: padding-box; | ||
198 | color: fn.color(--label); | 200 | color: fn.color(--label); |
199 | font-size: fn.dim(--font-size); | 201 | font-size: fn.dim(--font-size); |
200 | line-height: fn.global-dim(--font --standard --line-height); | 202 | line-height: fn.global-dim(--font --standard --line-height); |
@@ -204,7 +206,8 @@ $static-themes: 'black' 'white' !default; | |||
204 | &:link, | 206 | &:link, |
205 | &:visited, | 207 | &:visited, |
206 | &:enabled { | 208 | &:enabled { |
207 | &:hover { | 209 | &:hover, |
210 | &:focus-visible { | ||
208 | background-color: fn.color(--hover --bg); | 211 | background-color: fn.color(--hover --bg); |
209 | } | 212 | } |
210 | 213 | ||
@@ -220,7 +223,8 @@ $static-themes: 'black' 'white' !default; | |||
220 | &:link, | 223 | &:link, |
221 | &:visited, | 224 | &:visited, |
222 | &:enabled { | 225 | &:enabled { |
223 | &:hover { | 226 | &:hover, |
227 | &:focus-visible { | ||
224 | background-color: fn.color(--quiet --hover --bg); | 228 | background-color: fn.color(--quiet --hover --bg); |
225 | } | 229 | } |
226 | 230 | ||
@@ -240,10 +244,8 @@ $static-themes: 'black' 'white' !default; | |||
240 | &:visited, | 244 | &:visited, |
241 | &:enabled { | 245 | &:enabled { |
242 | &:focus-visible { | 246 | &:focus-visible { |
243 | border-color: fn.color(--key-focus --border); | 247 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); |
244 | outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline); | 248 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); |
245 | background-color: fn.color(--key-focus --bg); | ||
246 | color: fn.color(--key-focus --label); | ||
247 | } | 249 | } |
248 | } | 250 | } |
249 | 251 | ||
@@ -260,8 +262,8 @@ $static-themes: 'black' 'white' !default; | |||
260 | 262 | ||
261 | @each $size in sm lg xl { | 263 | @each $size in sm lg xl { |
262 | @include iro.bem-modifier($size) { | 264 | @include iro.bem-modifier($size) { |
263 | padding-block: calc(fn.dim(--#{$size} --pad-b) - fn.dim(--key-focus --border)); | 265 | padding-block: fn.dim(--#{$size} --pad-b); |
264 | padding-inline: calc(fn.dim(--#{$size} --pad-i) - fn.dim(--key-focus --border)); | 266 | padding-inline: fn.dim(--#{$size} --pad-i); |
265 | font-size: fn.dim(--#{$size} --font-size); | 267 | font-size: fn.dim(--#{$size} --font-size); |
266 | 268 | ||
267 | @include iro.bem-modifier('pill') { | 269 | @include iro.bem-modifier('pill') { |
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 08dc0ea..49f3f67 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -29,7 +29,8 @@ $static-themes: 'black' 'white' !default; | |||
29 | &:link, | 29 | &:link, |
30 | &:visited, | 30 | &:visited, |
31 | &:enabled { | 31 | &:enabled { |
32 | &:hover { | 32 | &:hover, |
33 | &:focus-visible { | ||
33 | border-color: transparent; | 34 | border-color: transparent; |
34 | background-color: fn.color(list.join($key, --hover --bg)); | 35 | background-color: fn.color(list.join($key, --hover --bg)); |
35 | color: fn.color(list.join($key, --hover --label)); | 36 | color: fn.color(list.join($key, --hover --label)); |
@@ -58,15 +59,9 @@ $static-themes: 'black' 'white' !default; | |||
58 | 59 | ||
59 | @include theme(static-#{$theme}); | 60 | @include theme(static-#{$theme}); |
60 | 61 | ||
61 | &:link, | 62 | &::after { |
62 | &:visited, | 63 | outline: fn.color(list.join($key, --key-focus --border)) solid fn.dim(--key-focus --border); |
63 | &:enabled { | 64 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($key, --key-focus --outline)); |
64 | &:focus-visible { | ||
65 | border-color: fn.color(list.join($key, --key-focus --border)); | ||
66 | outline: fn.color(list.join($key, --key-focus --outline)) solid fn.dim(--key-focus --outline); | ||
67 | background-color: fn.color(list.join($key, --key-focus --bg)); | ||
68 | color: fn.color(list.join($key, --key-focus --label)); | ||
69 | } | ||
70 | } | 65 | } |
71 | } | 66 | } |
72 | 67 | ||
@@ -97,7 +92,9 @@ $static-themes: 'black' 'white' !default; | |||
97 | ), | 92 | ), |
98 | 93 | ||
99 | --key-focus: ( | 94 | --key-focus: ( |
100 | --outline: fn.global-dim(--key-focus --border), | 95 | --border: fn.global-dim(--key-focus --border), |
96 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
97 | --outline: fn.global-dim(--key-focus --outline), | ||
101 | ), | 98 | ), |
102 | ), | 99 | ), |
103 | --colors: ( | 100 | --colors: ( |
@@ -120,10 +117,9 @@ $static-themes: 'black' 'white' !default; | |||
120 | --label: fn.global-color(--text-disabled), | 117 | --label: fn.global-color(--text-disabled), |
121 | ), | 118 | ), |
122 | --key-focus: ( | 119 | --key-focus: ( |
123 | --bg: fn.global-color(--base --50), | 120 | --label: fn.global-color(--focus --text), |
124 | --label: fn.global-color(--heading), | 121 | --border: fn.global-color(--focus --border), |
125 | --border: fn.global-color(--focus --1100), | 122 | --outline: fn.global-color(--focus --outline), |
126 | --outline: fn.global-color(--focus --400), | ||
127 | ), | 123 | ), |
128 | 124 | ||
129 | --primary: ( | 125 | --primary: ( |
@@ -216,6 +212,7 @@ $static-themes: 'black' 'white' !default; | |||
216 | 212 | ||
217 | @include iro.bem-object(iro.props-namespace()) { | 213 | @include iro.bem-object(iro.props-namespace()) { |
218 | display: inline-block; | 214 | display: inline-block; |
215 | position: relative; | ||
219 | padding-block: fn.dim(--pad-b); | 216 | padding-block: fn.dim(--pad-b); |
220 | padding-inline: fn.dim(--pad-i); | 217 | padding-inline: fn.dim(--pad-i); |
221 | border: fn.dim(--border) solid transparent; | 218 | border: fn.dim(--border) solid transparent; |
@@ -228,6 +225,19 @@ $static-themes: 'black' 'white' !default; | |||
228 | line-height: fn.dim(--line-height); | 225 | line-height: fn.dim(--line-height); |
229 | text-align: center; | 226 | text-align: center; |
230 | text-decoration: none; | 227 | text-decoration: none; |
228 | |||
229 | &::after { | ||
230 | content: ''; | ||
231 | display: none; | ||
232 | position: absolute; | ||
233 | z-index: 1; | ||
234 | inset-block: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); | ||
235 | inset-inline: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); | ||
236 | border-radius: fn.dim(--rounding); | ||
237 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
238 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
239 | pointer-events: none; | ||
240 | } | ||
231 | 241 | ||
232 | @include iro.bem-modifier('block') { | 242 | @include iro.bem-modifier('block') { |
233 | display: block; | 243 | display: block; |
@@ -263,10 +273,9 @@ $static-themes: 'black' 'white' !default; | |||
263 | &:visited, | 273 | &:visited, |
264 | &:enabled { | 274 | &:enabled { |
265 | &:focus-visible { | 275 | &:focus-visible { |
266 | border-color: fn.color(--key-focus --border); | 276 | &::after { |
267 | outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline); | 277 | display: block; |
268 | background-color: fn.color(--key-focus --bg); | 278 | } |
269 | color: fn.color(--key-focus --label); | ||
270 | } | 279 | } |
271 | } | 280 | } |
272 | 281 | ||
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index a254ec4..509822b 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss | |||
@@ -11,14 +11,20 @@ | |||
11 | --pad-b: fn.global-dim(--size --65), | 11 | --pad-b: fn.global-dim(--size --65), |
12 | --rounding: fn.global-dim(--rounding), | 12 | --rounding: fn.global-dim(--rounding), |
13 | --spacing-sibling: fn.global-dim(--size --300), | 13 | --spacing-sibling: fn.global-dim(--size --300), |
14 | |||
15 | --key-focus: ( | ||
16 | --border: fn.global-dim(--key-focus --border), | ||
17 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
18 | --outline: fn.global-dim(--key-focus --border), | ||
19 | ), | ||
14 | ), | 20 | ), |
15 | --colors: ( | 21 | --colors: ( |
16 | --box-border: fn.global-color(--text-mute), | 22 | --box-border: fn.global-color(--text-mute-more), |
17 | --box-bg: fn.global-color(--base --75), | 23 | --box-bg: fn.global-color(--base --75), |
18 | 24 | ||
19 | --hover: ( | 25 | --hover: ( |
20 | --label: fn.global-color(--heading), | 26 | --label: fn.global-color(--heading), |
21 | --box-border: fn.global-color(--text), | 27 | --box-border: fn.global-color(--text-mute), |
22 | ), | 28 | ), |
23 | --accent: ( | 29 | --accent: ( |
24 | --box-border: fn.global-color(--accent --900), | 30 | --box-border: fn.global-color(--accent --900), |
@@ -27,37 +33,40 @@ | |||
27 | --box-border: fn.global-color(--accent --1000), | 33 | --box-border: fn.global-color(--accent --1000), |
28 | ), | 34 | ), |
29 | ), | 35 | ), |
30 | --key-focus: ( | ||
31 | --bg: fn.global-color(--focus-static --400), | ||
32 | --label: fn.global-color(--focus-static --400-text), | ||
33 | --box-border: fn.global-color(--focus-static --1000), | ||
34 | --box-bg: fn.global-color(--focus-static --1000-text), | ||
35 | ), | ||
36 | --disabled: ( | 36 | --disabled: ( |
37 | --label: fn.global-color(--text-disabled), | 37 | --label: fn.global-color(--text-disabled), |
38 | --box-border: fn.global-color(--border-strong), | 38 | --box-border: fn.global-color(--border-strong), |
39 | --box-bg: fn.global-color(--base --75), | 39 | --box-bg: fn.global-color(--base --75), |
40 | ) | 40 | ), |
41 | --key-focus: ( | ||
42 | --label: fn.global-color(--focus --text), | ||
43 | --border: fn.global-color(--focus --border), | ||
44 | --outline: fn.global-color(--focus --outline), | ||
45 | ), | ||
41 | ), | 46 | ), |
42 | )); | 47 | )); |
43 | 48 | ||
44 | @include iro.bem-object(iro.props-namespace()) { | 49 | @include iro.bem-object(iro.props-namespace()) { |
45 | display: inline-flex; | 50 | display: inline-block; |
46 | position: relative; | 51 | position: relative; |
47 | align-items: flex-start; | 52 | margin-inline: |
48 | margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b)); | 53 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) |
54 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset)); | ||
49 | padding-block: fn.dim(--pad-b); | 55 | padding-block: fn.dim(--pad-b); |
50 | padding-inline: fn.dim(--pad-i); | 56 | padding-inline: fn.dim(--pad-i); |
51 | 57 | ||
52 | @include iro.bem-elem('box') { | 58 | @include iro.bem-elem('box') { |
53 | display: block; | 59 | display: inline-block; |
54 | position: relative; | 60 | position: relative; |
55 | flex: 0 0 auto; | 61 | flex: 0 0 auto; |
56 | inline-size: fn.dim(--size); | 62 | inline-size: fn.dim(--size); |
57 | block-size: fn.dim(--size); | 63 | block-size: fn.dim(--size); |
58 | margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size))); | 64 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset)); |
59 | border-radius: fn.dim(--border); | 65 | border: fn.dim(--key-focus --border-offset) solid transparent; |
66 | border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset)); | ||
60 | background-color: fn.color(--box-border); | 67 | background-color: fn.color(--box-border); |
68 | background-clip: padding-box; | ||
69 | vertical-align: top; | ||
61 | 70 | ||
62 | &::before, | 71 | &::before, |
63 | &::after { | 72 | &::after { |
@@ -110,8 +119,7 @@ | |||
110 | } | 119 | } |
111 | 120 | ||
112 | @include iro.bem-elem('label') { | 121 | @include iro.bem-elem('label') { |
113 | align-self: baseline; | 122 | margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); |
114 | margin-left: fn.dim(--label-gap); | ||
115 | } | 123 | } |
116 | 124 | ||
117 | @include iro.bem-elem('native') { | 125 | @include iro.bem-elem('native') { |
@@ -127,7 +135,8 @@ | |||
127 | overflow: hidden; | 135 | overflow: hidden; |
128 | border-radius: fn.dim(--rounding); | 136 | border-radius: fn.dim(--rounding); |
129 | 137 | ||
130 | &:hover { | 138 | &:hover, |
139 | &:focus-visible { | ||
131 | @include iro.bem-sibling-elem('label') { | 140 | @include iro.bem-sibling-elem('label') { |
132 | color: fn.color(--hover --label); | 141 | color: fn.color(--hover --label); |
133 | } | 142 | } |
@@ -180,26 +189,13 @@ | |||
180 | } | 189 | } |
181 | 190 | ||
182 | &:focus-visible { | 191 | &:focus-visible { |
183 | background-color: fn.color(--key-focus --bg); | ||
184 | |||
185 | @include iro.bem-sibling-elem('label') { | 192 | @include iro.bem-sibling-elem('label') { |
186 | color: fn.color(--key-focus --label); | 193 | color: fn.color(--key-focus --label); |
187 | } | 194 | } |
188 | 195 | ||
189 | @include iro.bem-sibling-elem('box') { | 196 | @include iro.bem-sibling-elem('box') { |
190 | background-color: fn.color(--key-focus --box-border); | 197 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); |
191 | 198 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | |
192 | &::before { | ||
193 | background-color: fn.color(--key-focus --box-bg); | ||
194 | } | ||
195 | |||
196 | &::after { | ||
197 | border-color: fn.color(--key-focus --box-bg); | ||
198 | } | ||
199 | |||
200 | @include iro.bem-elem('check-icon') { | ||
201 | color: fn.color(--key-focus --box-bg); | ||
202 | } | ||
203 | } | 199 | } |
204 | } | 200 | } |
205 | } | 201 | } |
@@ -217,7 +213,8 @@ | |||
217 | background-color: fn.color(--accent --box-border); | 213 | background-color: fn.color(--accent --box-border); |
218 | } | 214 | } |
219 | 215 | ||
220 | &:hover { | 216 | &:hover, |
217 | &:focus-visible { | ||
221 | @include iro.bem-sibling-elem('box') { | 218 | @include iro.bem-sibling-elem('box') { |
222 | background-color: fn.color(--accent --hover --box-border); | 219 | background-color: fn.color(--accent --hover --box-border); |
223 | } | 220 | } |
@@ -229,7 +226,8 @@ | |||
229 | background-color: fn.color(--accent --box-border); | 226 | background-color: fn.color(--accent --box-border); |
230 | } | 227 | } |
231 | 228 | ||
232 | &:hover { | 229 | &:hover, |
230 | &:focus-visible { | ||
233 | @include iro.bem-sibling-elem('box') { | 231 | @include iro.bem-sibling-elem('box') { |
234 | background-color: fn.color(--accent --hover --box-border); | 232 | background-color: fn.color(--accent --hover --box-border); |
235 | } | 233 | } |
@@ -257,12 +255,6 @@ | |||
257 | } | 255 | } |
258 | } | 256 | } |
259 | } | 257 | } |
260 | |||
261 | &:focus-visible { | ||
262 | @include iro.bem-sibling-elem('box') { | ||
263 | background-color: fn.color(--key-focus --box-border); | ||
264 | } | ||
265 | } | ||
266 | } | 258 | } |
267 | } | 259 | } |
268 | } | 260 | } |
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 12dc6ca..7ade7e1 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss | |||
@@ -11,14 +11,20 @@ | |||
11 | --pad-b: fn.global-dim(--size --65), | 11 | --pad-b: fn.global-dim(--size --65), |
12 | --rounding: fn.global-dim(--rounding), | 12 | --rounding: fn.global-dim(--rounding), |
13 | --spacing-sibling: fn.global-dim(--size --300), | 13 | --spacing-sibling: fn.global-dim(--size --300), |
14 | |||
15 | --key-focus: ( | ||
16 | --border: fn.global-dim(--key-focus --border), | ||
17 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
18 | --outline: fn.global-dim(--key-focus --border), | ||
19 | ), | ||
14 | ), | 20 | ), |
15 | --colors: ( | 21 | --colors: ( |
16 | --circle-border: fn.global-color(--text-mute), | 22 | --circle-border: fn.global-color(--text-mute-more), |
17 | --circle-bg: fn.global-color(--base --75), | 23 | --circle-bg: fn.global-color(--base --75), |
18 | 24 | ||
19 | --hover: ( | 25 | --hover: ( |
20 | --label: fn.global-color(--heading), | 26 | --label: fn.global-color(--heading), |
21 | --circle-border: fn.global-color(--text), | 27 | --circle-border: fn.global-color(--text-mute), |
22 | ), | 28 | ), |
23 | --accent: ( | 29 | --accent: ( |
24 | --circle-border: fn.global-color(--accent --900), | 30 | --circle-border: fn.global-color(--accent --900), |
@@ -27,37 +33,39 @@ | |||
27 | --circle-border: fn.global-color(--accent --1000), | 33 | --circle-border: fn.global-color(--accent --1000), |
28 | ), | 34 | ), |
29 | ), | 35 | ), |
30 | --key-focus: ( | ||
31 | --bg: fn.global-color(--focus-static --400), | ||
32 | --label: fn.global-color(--focus-static --400-text), | ||
33 | --circle-border: fn.global-color(--focus-static --1000), | ||
34 | --circle-bg: fn.global-color(--focus-static --1000-text), | ||
35 | ), | ||
36 | --disabled: ( | 36 | --disabled: ( |
37 | --label: fn.global-color(--text-disabled), | 37 | --label: fn.global-color(--text-disabled), |
38 | --circle-border: fn.global-color(--border-strong), | 38 | --circle-border: fn.global-color(--border-strong), |
39 | --circle-bg: fn.global-color(--base --75), | 39 | --circle-bg: fn.global-color(--base --75), |
40 | ) | 40 | ), |
41 | --key-focus: ( | ||
42 | --label: fn.global-color(--focus --text), | ||
43 | --border: fn.global-color(--focus --border), | ||
44 | --outline: fn.global-color(--focus --outline), | ||
45 | ), | ||
41 | ), | 46 | ), |
42 | )); | 47 | )); |
43 | 48 | ||
44 | @include iro.bem-object(iro.props-namespace()) { | 49 | @include iro.bem-object(iro.props-namespace()) { |
45 | display: inline-flex; | 50 | display: inline-block; |
46 | position: relative; | 51 | position: relative; |
47 | align-items: flex-start; | 52 | margin-inline: |
48 | margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i)); | 53 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) |
54 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); | ||
49 | padding-block: fn.dim(--pad-b); | 55 | padding-block: fn.dim(--pad-b); |
50 | padding-inline: fn.dim(--pad-i); | 56 | padding-inline: fn.dim(--pad-i); |
51 | 57 | ||
52 | @include iro.bem-elem('circle') { | 58 | @include iro.bem-elem('circle') { |
53 | display: block; | 59 | display: inline-block; |
54 | box-sizing: border-box; | ||
55 | flex: 0 0 auto; | 60 | flex: 0 0 auto; |
56 | inline-size: fn.dim(--diameter); | 61 | inline-size: fn.dim(--diameter); |
57 | block-size: fn.dim(--diameter); | 62 | block-size: fn.dim(--diameter); |
58 | margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter))); | 63 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset)); |
64 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
59 | border-radius: 2em; | 65 | border-radius: 2em; |
60 | background-color: fn.color(--circle-border); | 66 | background-color: fn.color(--circle-border); |
67 | background-clip: padding-box; | ||
68 | vertical-align: top; | ||
61 | 69 | ||
62 | &::after { | 70 | &::after { |
63 | content: ''; | 71 | content: ''; |
@@ -74,8 +82,7 @@ | |||
74 | } | 82 | } |
75 | 83 | ||
76 | @include iro.bem-elem('label') { | 84 | @include iro.bem-elem('label') { |
77 | align-self: baseline; | 85 | margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); |
78 | margin-inline-start: fn.dim(--label-gap); | ||
79 | } | 86 | } |
80 | 87 | ||
81 | @include iro.bem-elem('native') { | 88 | @include iro.bem-elem('native') { |
@@ -91,7 +98,8 @@ | |||
91 | overflow: hidden; | 98 | overflow: hidden; |
92 | border-radius: fn.dim(--rounding); | 99 | border-radius: fn.dim(--rounding); |
93 | 100 | ||
94 | &:hover { | 101 | &:hover, |
102 | &:focus-visible { | ||
95 | @include iro.bem-sibling-elem('label') { | 103 | @include iro.bem-sibling-elem('label') { |
96 | color: fn.color(--hover --label); | 104 | color: fn.color(--hover --label); |
97 | } | 105 | } |
@@ -124,18 +132,13 @@ | |||
124 | } | 132 | } |
125 | 133 | ||
126 | &:focus-visible { | 134 | &:focus-visible { |
127 | background-color: fn.color(--key-focus --bg); | ||
128 | |||
129 | @include iro.bem-sibling-elem('label') { | 135 | @include iro.bem-sibling-elem('label') { |
130 | color: fn.color(--key-focus --label); | 136 | color: fn.color(--key-focus --label); |
131 | } | 137 | } |
132 | 138 | ||
133 | @include iro.bem-sibling-elem('circle') { | 139 | @include iro.bem-sibling-elem('circle') { |
134 | background-color: fn.color(--key-focus --circle-border); | 140 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); |
135 | 141 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | |
136 | &::after { | ||
137 | background-color: fn.color(--key-focus --circle-bg); | ||
138 | } | ||
139 | } | 142 | } |
140 | } | 143 | } |
141 | } | 144 | } |
@@ -153,7 +156,8 @@ | |||
153 | background-color: fn.color(--accent --circle-border); | 156 | background-color: fn.color(--accent --circle-border); |
154 | } | 157 | } |
155 | 158 | ||
156 | &:hover { | 159 | &:hover, |
160 | &:focus-visible { | ||
157 | @include iro.bem-sibling-elem('circle') { | 161 | @include iro.bem-sibling-elem('circle') { |
158 | background-color: fn.color(--accent --hover --circle-border); | 162 | background-color: fn.color(--accent --hover --circle-border); |
159 | } | 163 | } |
@@ -175,12 +179,6 @@ | |||
175 | } | 179 | } |
176 | } | 180 | } |
177 | } | 181 | } |
178 | |||
179 | &:focus-visible { | ||
180 | @include iro.bem-sibling-elem('circle') { | ||
181 | background-color: fn.color(--key-focus --circle-border); | ||
182 | } | ||
183 | } | ||
184 | } | 182 | } |
185 | } | 183 | } |
186 | } | 184 | } |
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 | } |
diff --git a/src/objects/_table.scss b/src/objects/_table.scss new file mode 100644 index 0000000..cccf956 --- /dev/null +++ b/src/objects/_table.scss | |||
@@ -0,0 +1,167 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | @use '../mixins' as mx; | ||
4 | |||
5 | @include iro.props-namespace('table') { | ||
6 | @include iro.props-store(( | ||
7 | --dims: ( | ||
8 | --pad-i: fn.global-dim(--size --175), | ||
9 | --pad-b: fn.global-dim(--size --125), | ||
10 | --rounding: fn.global-dim(--rounding), | ||
11 | --border: fn.global-dim(--border --thin), | ||
12 | --50: ( | ||
13 | --pad-b: fn.global-dim(--size --75), | ||
14 | ) | ||
15 | ), | ||
16 | --colors: ( | ||
17 | --border: fn.global-color(--border), | ||
18 | --heading: fn.global-color(--heading), | ||
19 | --hover: fn.global-color(--border-mute), | ||
20 | --press: fn.global-color(--border), | ||
21 | --box: ( | ||
22 | --bg: fn.global-color(--base --50), | ||
23 | --hover: fn.global-color(--bg-base), | ||
24 | --press: fn.global-color(--border-mute), | ||
25 | ) | ||
26 | ) | ||
27 | )); | ||
28 | |||
29 | @include iro.bem-object(iro.props-namespace()) { | ||
30 | border-spacing: 0; | ||
31 | border-collapse: separate; | ||
32 | |||
33 | @include iro.bem-modifier('fixed') { | ||
34 | table-layout: fixed; | ||
35 | } | ||
36 | |||
37 | @include iro.bem-elem('head-cell') { | ||
38 | @include mx.set-font(--standard, ( | ||
39 | --line-height: null, | ||
40 | --size: fn.global-dim(--font-size --50), | ||
41 | --weight: bold, | ||
42 | --transform: uppercase, | ||
43 | --spacing: .5px | ||
44 | )); | ||
45 | |||
46 | padding-inline: fn.dim(--pad-i); | ||
47 | padding-block: fn.dim(--pad-b); | ||
48 | color: fn.color(--heading); | ||
49 | text-align: left; | ||
50 | } | ||
51 | |||
52 | @include iro.bem-elem('cell') { | ||
53 | padding-inline: fn.dim(--pad-i); | ||
54 | padding-block: fn.dim(--pad-b); | ||
55 | border-width: 0; | ||
56 | border-block-start-width: fn.dim(--border); | ||
57 | border-style: solid; | ||
58 | border-color: fn.color(--border); | ||
59 | |||
60 | @include iro.bem-modifier('divider') { | ||
61 | border-inline-end-width: fn.dim(--border); | ||
62 | } | ||
63 | } | ||
64 | |||
65 | @include iro.bem-elem('row') { | ||
66 | &:last-child { | ||
67 | @include iro.bem-elem('cell') { | ||
68 | border-block-end-width: fn.dim(--border); | ||
69 | } | ||
70 | } | ||
71 | } | ||
72 | |||
73 | @include iro.bem-modifier('flush') { | ||
74 | @include iro.bem-elem('head-cell', 'cell') { | ||
75 | &:first-child { | ||
76 | padding-inline-start: 0; | ||
77 | } | ||
78 | |||
79 | &:last-child { | ||
80 | padding-inline-end: 0; | ||
81 | } | ||
82 | } | ||
83 | } | ||
84 | |||
85 | @include iro.bem-modifier('box') { | ||
86 | @include iro.bem-elem('cell') { | ||
87 | background-color: fn.color(--box --bg); | ||
88 | |||
89 | &:first-child { | ||
90 | border-inline-start-width: fn.dim(--border); | ||
91 | } | ||
92 | |||
93 | &:last-child { | ||
94 | border-inline-end-width: fn.dim(--border); | ||
95 | } | ||
96 | } | ||
97 | |||
98 | @include iro.bem-elem('row') { | ||
99 | &:first-child { | ||
100 | @include iro.bem-elem('cell') { | ||
101 | &:first-child { | ||
102 | border-start-start-radius: fn.dim(--rounding); | ||
103 | } | ||
104 | |||
105 | &:last-child { | ||
106 | border-start-end-radius: fn.dim(--rounding); | ||
107 | } | ||
108 | } | ||
109 | } | ||
110 | |||
111 | &:last-child { | ||
112 | @include iro.bem-elem('cell') { | ||
113 | &:first-child { | ||
114 | border-end-start-radius: fn.dim(--rounding); | ||
115 | } | ||
116 | |||
117 | &:last-child { | ||
118 | border-end-end-radius: fn.dim(--rounding); | ||
119 | } | ||
120 | } | ||
121 | } | ||
122 | } | ||
123 | } | ||
124 | |||
125 | @include iro.bem-modifier('interactive') { | ||
126 | @include iro.bem-elem('row') { | ||
127 | @include iro.bem-elem('cell') { | ||
128 | cursor: pointer; | ||
129 | } | ||
130 | |||
131 | &:hover { | ||
132 | @include iro.bem-elem('cell') { | ||
133 | background-color: fn.color(--hover); | ||
134 | } | ||
135 | } | ||
136 | |||
137 | &:active { | ||
138 | @include iro.bem-elem('cell') { | ||
139 | background-color: fn.color(--press); | ||
140 | } | ||
141 | } | ||
142 | } | ||
143 | |||
144 | @include iro.bem-modifier('box') { | ||
145 | @include iro.bem-elem('row') { | ||
146 | &:hover { | ||
147 | @include iro.bem-elem('cell') { | ||
148 | background-color: fn.color(--box --hover); | ||
149 | } | ||
150 | } | ||
151 | |||
152 | &:active { | ||
153 | @include iro.bem-elem('cell') { | ||
154 | background-color: fn.color(--box --press); | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | } | ||
159 | } | ||
160 | |||
161 | @include iro.bem-modifier('50') { | ||
162 | @include iro.bem-elem('head-cell', 'cell') { | ||
163 | padding-block: fn.dim(--50 --pad-b); | ||
164 | } | ||
165 | } | ||
166 | } | ||
167 | } | ||
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index babec79..6611ea6 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss | |||
@@ -50,7 +50,7 @@ | |||
50 | ), | 50 | ), |
51 | 51 | ||
52 | --key-focus: ( | 52 | --key-focus: ( |
53 | --border: fn.global-dim(--key-focus --border), | 53 | --border: fn.global-dim(--key-focus --outline), |
54 | ), | 54 | ), |
55 | ), | 55 | ), |
56 | --colors: ( | 56 | --colors: ( |
@@ -63,11 +63,11 @@ | |||
63 | --border: fn.global-color(--text-mute-more), | 63 | --border: fn.global-color(--text-mute-more), |
64 | ), | 64 | ), |
65 | --focus: ( | 65 | --focus: ( |
66 | --border: fn.global-color(--focus --1100), | 66 | --border: fn.global-color(--focus --border), |
67 | ), | 67 | ), |
68 | --key-focus: ( | 68 | --key-focus: ( |
69 | --border: fn.global-color(--focus --1100), | 69 | --border: fn.global-color(--focus --border), |
70 | --outline: fn.global-color(--focus --400), | 70 | --outline: fn.global-color(--focus --outline), |
71 | ), | 71 | ), |
72 | --error: ( | 72 | --error: ( |
73 | --border: fn.global-color(--negative --700), | 73 | --border: fn.global-color(--negative --700), |