diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_objects.scss | 2 | ||||
-rw-r--r-- | src/objects/_action-button.scss (renamed from src/.old/objects/_action-button.scss) | 137 | ||||
-rw-r--r-- | src/objects/_button.scss | 25 | ||||
-rw-r--r-- | src/objects/_checkbox.scss | 2 | ||||
-rw-r--r-- | src/objects/_radio.scss | 2 |
5 files changed, 86 insertions, 82 deletions
diff --git a/src/_objects.scss b/src/_objects.scss index 525e31a..b1872c9 100644 --- a/src/_objects.scss +++ b/src/_objects.scss | |||
@@ -9,7 +9,7 @@ | |||
9 | @use 'objects/radio'; | 9 | @use 'objects/radio'; |
10 | @use 'objects/checkbox'; | 10 | @use 'objects/checkbox'; |
11 | @use 'objects/switch'; | 11 | @use 'objects/switch'; |
12 | // @use 'objects/action-button'; | 12 | @use 'objects/action-button'; |
13 | // @use 'objects/overflow-button'; | 13 | // @use 'objects/overflow-button'; |
14 | // @use 'objects/status-indicator'; | 14 | // @use 'objects/status-indicator'; |
15 | // @use 'objects/avatar'; | 15 | // @use 'objects/avatar'; |
diff --git a/src/.old/objects/_action-button.scss b/src/objects/_action-button.scss index 48ac2a6..6f0288d 100644 --- a/src/.old/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
@@ -5,79 +5,84 @@ | |||
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --line-height: 1.4, | 7 | --line-height: 1.4, |
8 | --pad-x: fn.global-dim(--size --100), | 8 | --pad-i: fn.global-dim(--size --100), |
9 | --pad-y: fn.global-dim(--size --85), | 9 | --pad-b: fn.global-dim(--size --85), |
10 | --rounding: 3px, | 10 | --border: fn.global-dim(--border --thin), |
11 | --rounding: fn.global-dim(--rounding), | ||
12 | |||
13 | --key-focus: ( | ||
14 | --border: fn.global-dim(--key-focus --border), | ||
15 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
16 | --outline: fn.global-dim(--key-focus --outline), | ||
17 | ), | ||
11 | ), | 18 | ), |
12 | ), 'dims'); | ||
13 | |||
14 | @include iro.props-store(( | ||
15 | --colors: ( | 19 | --colors: ( |
16 | --bg: fn.global-color(--bg-hi), | 20 | --bg: fn.global-color(--base --75), |
17 | --label: fn.global-color(--fg), | 21 | --label: fn.global-color(--text), |
18 | --border: fn.global-color(--obj-lo), | 22 | --border: fn.global-color(--border-strong), |
19 | 23 | ||
20 | --hover: ( | 24 | --hover: ( |
21 | --bg: fn.global-color(--bg-hi2), | 25 | --bg: fn.global-color(--base --50), |
22 | --label: fn.global-color(--fg-lo), | 26 | --label: fn.global-color(--heading), |
23 | --border: fn.global-color(--fg-hi2), | 27 | --border: fn.global-color(--text-mute-more), |
24 | ), | 28 | ), |
25 | --active: ( | 29 | --active: ( |
26 | --bg: fn.global-color(--obj-hi), | 30 | --bg: fn.global-color(--border-mute), |
27 | --label: fn.global-color(--fg-lo), | 31 | --label: fn.global-color(--heading), |
28 | --border: fn.global-color(--fg-hi2), | 32 | --border: fn.global-color(--text-mute-more), |
29 | ), | 33 | ), |
30 | --selected: ( | 34 | --selected: ( |
31 | --bg: fn.global-color(--obj-hi), | 35 | --bg: fn.global-color(--border-mute), |
32 | --label: fn.global-color(--fg), | 36 | --label: fn.global-color(--text), |
33 | --border: fn.global-color(--fg-hi3), | 37 | --border: fn.global-color(--text-disabled), |
34 | 38 | ||
35 | --hover: ( | 39 | --hover: ( |
36 | --label: fn.global-color(--fg-lo), | 40 | --label: fn.global-color(--heading), |
37 | --border: fn.global-color(--fg-hi2), | 41 | --border: fn.global-color(--text-mute-more), |
38 | ), | 42 | ), |
39 | ), | 43 | ), |
40 | --disabled: ( | 44 | --disabled: ( |
41 | --bg: fn.global-color(--obj-hi), | 45 | --bg: fn.global-color(--bg-base), |
42 | --label: fn.global-color(--fg-hi3), | 46 | --label: fn.global-color(--text-disabled), |
43 | --border: fn.global-color(--obj-hi), | 47 | --border: fn.global-color(--border-mute), |
44 | ), | 48 | ), |
45 | --key-focus: ( | 49 | --key-focus: ( |
46 | --border: fn.global-color(--focus --fill), | 50 | --border: fn.global-color(--focus --border), |
47 | --shadow: fn.global-color(--focus --shadow), | 51 | --outline: fn.global-color(--focus --outline), |
48 | ), | 52 | ), |
49 | --quiet: ( | 53 | --quiet: ( |
50 | --label: fn.global-color(--fg), | 54 | --label: fn.global-color(--text), |
51 | 55 | ||
52 | --hover: ( | 56 | --hover: ( |
53 | --bg: fn.global-color(--obj-hi), | 57 | --bg: fn.global-color(--border-mute), |
54 | --label: fn.global-color(--fg-lo), | 58 | --label: fn.global-color(--heading), |
55 | ), | 59 | ), |
56 | --active: ( | 60 | --active: ( |
57 | --bg: fn.global-color(--obj), | 61 | --bg: fn.global-color(--border), |
58 | --label: fn.global-color(--fg-lo), | 62 | --label: fn.global-color(--heading), |
59 | ), | 63 | ), |
60 | --selected: ( | 64 | --selected: ( |
61 | --bg: fn.global-color(--obj-hi), | 65 | --bg: fn.global-color(--border-mute), |
62 | --label: fn.global-color(--fg), | 66 | --label: fn.global-color(--text), |
63 | 67 | ||
64 | --hover: ( | 68 | --hover: ( |
65 | --bg: fn.global-color(--obj), | 69 | --bg: fn.global-color(--border), |
66 | --label: fn.global-color(--fg-lo), | 70 | --label: fn.global-color(--heading), |
67 | ), | 71 | ), |
68 | ), | 72 | ), |
69 | --disabled: ( | 73 | --disabled: ( |
70 | --label: fn.global-color(--fg-hi3), | 74 | --label: fn.global-color(--text-disabled), |
71 | ), | 75 | ), |
72 | ), | 76 | ), |
73 | ), | 77 | ), |
74 | ), 'colors'); | 78 | )); |
75 | 79 | ||
76 | @include iro.bem-object(iro.props-namespace()) { | 80 | @include iro.bem-object(iro.props-namespace()) { |
77 | display: inline-block; | 81 | display: inline-block; |
78 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | 82 | position: relative; |
79 | overflow: hidden; | 83 | padding-block: fn.dim(--pad-b); |
80 | border: 1px solid fn.color(--disabled --border); | 84 | padding-inline: fn.dim(--pad-i); |
85 | border: fn.dim(--border) solid fn.color(--disabled --border); | ||
81 | border-radius: fn.dim(--rounding); | 86 | border-radius: fn.dim(--rounding); |
82 | background-color: fn.color(--disabled --bg); | 87 | background-color: fn.color(--disabled --bg); |
83 | color: fn.color(--disabled --label); | 88 | color: fn.color(--disabled --label); |
@@ -88,6 +93,18 @@ | |||
88 | vertical-align: top; | 93 | vertical-align: top; |
89 | white-space: nowrap; | 94 | white-space: nowrap; |
90 | 95 | ||
96 | &::after { | ||
97 | content: ''; | ||
98 | display: none; | ||
99 | position: absolute; | ||
100 | z-index: 1; | ||
101 | inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); | ||
102 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
103 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
104 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
105 | pointer-events: none; | ||
106 | } | ||
107 | |||
91 | &:link, | 108 | &:link, |
92 | &:visited, | 109 | &:visited, |
93 | &:enabled { | 110 | &:enabled { |
@@ -95,7 +112,8 @@ | |||
95 | background-color: fn.color(--bg); | 112 | background-color: fn.color(--bg); |
96 | color: fn.color(--label); | 113 | color: fn.color(--label); |
97 | 114 | ||
98 | &:hover { | 115 | &:hover, |
116 | &:focus-visible { | ||
99 | border-color: fn.color(--hover --border); | 117 | border-color: fn.color(--hover --border); |
100 | background-color: fn.color(--hover --bg); | 118 | background-color: fn.color(--hover --bg); |
101 | color: fn.color(--hover --label); | 119 | color: fn.color(--hover --label); |
@@ -107,10 +125,9 @@ | |||
107 | color: fn.color(--active --label); | 125 | color: fn.color(--active --label); |
108 | } | 126 | } |
109 | 127 | ||
110 | @include iro.bem-at-theme('keyboard') { | 128 | &:focus-visible { |
111 | &:focus { | 129 | &::after { |
112 | background-color: fn.color(--hover --bg); | 130 | display: block; |
113 | color: fn.color(--hover --label); | ||
114 | } | 131 | } |
115 | } | 132 | } |
116 | } | 133 | } |
@@ -124,7 +141,8 @@ | |||
124 | color: fn.color(--selected --label); | 141 | color: fn.color(--selected --label); |
125 | 142 | ||
126 | &:hover, | 143 | &:hover, |
127 | &:active { | 144 | &:active, |
145 | &:focus-visible { | ||
128 | border-color: fn.color(--selected --hover --border); | 146 | border-color: fn.color(--selected --hover --border); |
129 | background-color: fn.color(--selected --bg); | 147 | background-color: fn.color(--selected --bg); |
130 | color: fn.color(--selected --hover --label); | 148 | color: fn.color(--selected --hover --label); |
@@ -153,7 +171,8 @@ | |||
153 | box-shadow: none; | 171 | box-shadow: none; |
154 | color: fn.color(--quiet --label); | 172 | color: fn.color(--quiet --label); |
155 | 173 | ||
156 | &:hover { | 174 | &:hover, |
175 | &:focus-visible { | ||
157 | border-color: transparent; | 176 | border-color: transparent; |
158 | background-color: fn.color(--quiet --hover --bg); | 177 | background-color: fn.color(--quiet --hover --bg); |
159 | box-shadow: none; | 178 | box-shadow: none; |
@@ -188,35 +207,21 @@ | |||
188 | color: fn.color(--quiet --selected --label); | 207 | color: fn.color(--quiet --selected --label); |
189 | 208 | ||
190 | &:hover, | 209 | &:hover, |
191 | &:active { | 210 | &:active, |
211 | &:focus-visible { | ||
192 | border-color: transparent; | 212 | border-color: transparent; |
193 | background-color: fn.color(--quiet --selected --hover --bg); | 213 | background-color: fn.color(--quiet --selected --hover --bg); |
194 | box-shadow: none; | 214 | box-shadow: none; |
195 | color: fn.color(--quiet --selected --hover --label); | 215 | color: fn.color(--quiet --selected --hover --label); |
196 | } | 216 | } |
197 | |||
198 | @include iro.bem-at-theme('keyboard') { | ||
199 | &:focus { | ||
200 | background-color: fn.color(--quiet --selected --bg); | ||
201 | color: fn.color(--quiet --selected --hover --label); | ||
202 | } | ||
203 | } | ||
204 | } | 217 | } |
205 | } | 218 | } |
206 | } | 219 | } |
207 | 220 | ||
208 | @include iro.bem-at-theme('keyboard') { | ||
209 | &:focus { | ||
210 | border-color: fn.color(--key-focus --border); | ||
211 | box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); | ||
212 | } | ||
213 | } | ||
214 | |||
215 | @include iro.bem-modifier('round') { | 221 | @include iro.bem-modifier('round') { |
216 | width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y)); | 222 | inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); |
217 | padding-right: 0; | 223 | padding-inline: 0; |
218 | padding-left: 0; | 224 | border-radius: 100em; |
219 | border-radius: 100em; | ||
220 | } | 225 | } |
221 | } | 226 | } |
222 | } | 227 | } |
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 49f3f67..1c907c0 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -231,13 +231,22 @@ $static-themes: 'black' 'white' !default; | |||
231 | display: none; | 231 | display: none; |
232 | position: absolute; | 232 | position: absolute; |
233 | z-index: 1; | 233 | z-index: 1; |
234 | inset-block: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); | 234 | inset: 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)); | 235 | border-radius: calc(fn.dim(--rounding) + 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); | 236 | 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); | 237 | 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; | 238 | pointer-events: none; |
240 | } | 239 | } |
240 | |||
241 | &:link, | ||
242 | &:visited, | ||
243 | &:enabled { | ||
244 | &:focus-visible { | ||
245 | &::after { | ||
246 | display: block; | ||
247 | } | ||
248 | } | ||
249 | } | ||
241 | 250 | ||
242 | @include iro.bem-modifier('block') { | 251 | @include iro.bem-modifier('block') { |
243 | display: block; | 252 | display: block; |
@@ -268,16 +277,6 @@ $static-themes: 'black' 'white' !default; | |||
268 | @include theme($theme); | 277 | @include theme($theme); |
269 | } | 278 | } |
270 | } | 279 | } |
271 | |||
272 | &:link, | ||
273 | &:visited, | ||
274 | &:enabled { | ||
275 | &:focus-visible { | ||
276 | &::after { | ||
277 | display: block; | ||
278 | } | ||
279 | } | ||
280 | } | ||
281 | 280 | ||
282 | @each $theme in $static-themes { | 281 | @each $theme in $static-themes { |
283 | @include iro.bem-modifier(static-#{$theme}) { | 282 | @include iro.bem-modifier(static-#{$theme}) { |
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 509822b..8527948 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss | |||
@@ -15,7 +15,7 @@ | |||
15 | --key-focus: ( | 15 | --key-focus: ( |
16 | --border: fn.global-dim(--key-focus --border), | 16 | --border: fn.global-dim(--key-focus --border), |
17 | --border-offset: fn.global-dim(--key-focus --border-offset), | 17 | --border-offset: fn.global-dim(--key-focus --border-offset), |
18 | --outline: fn.global-dim(--key-focus --border), | 18 | --outline: fn.global-dim(--key-focus --outline), |
19 | ), | 19 | ), |
20 | ), | 20 | ), |
21 | --colors: ( | 21 | --colors: ( |
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 7ade7e1..9fa937d 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss | |||
@@ -15,7 +15,7 @@ | |||
15 | --key-focus: ( | 15 | --key-focus: ( |
16 | --border: fn.global-dim(--key-focus --border), | 16 | --border: fn.global-dim(--key-focus --border), |
17 | --border-offset: fn.global-dim(--key-focus --border-offset), | 17 | --border-offset: fn.global-dim(--key-focus --border-offset), |
18 | --outline: fn.global-dim(--key-focus --border), | 18 | --outline: fn.global-dim(--key-focus --outline), |
19 | ), | 19 | ), |
20 | ), | 20 | ), |
21 | --colors: ( | 21 | --colors: ( |