diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_action-button.scss | 4 | ||||
-rw-r--r-- | src/objects/_avatar.scss | 33 | ||||
-rw-r--r-- | src/objects/_badge.scss | 36 | ||||
-rw-r--r-- | src/objects/_card.scss | 72 | ||||
-rw-r--r-- | src/objects/_divider.scss | 1 | ||||
-rw-r--r-- | src/objects/_popover.scss | 9 |
6 files changed, 126 insertions, 29 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 7a7ff46..7fe9d44 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
@@ -11,8 +11,8 @@ $static-themes: 'black' 'white' !default; | |||
11 | color: fn.color(list.join($theme, --disabled --label)); | 11 | color: fn.color(list.join($theme, --disabled --label)); |
12 | 12 | ||
13 | &::after { | 13 | &::after { |
14 | outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); | 14 | outline-color: fn.color(list.join($theme, --key-focus --border)); |
15 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); | 15 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); |
16 | } | 16 | } |
17 | 17 | ||
18 | &:link, | 18 | &:link, |
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index e6fa74e..5a34d19 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss | |||
@@ -24,9 +24,11 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
24 | @include iro.props-namespace('avatar') { | 24 | @include iro.props-namespace('avatar') { |
25 | @include iro.props-store(( | 25 | @include iro.props-store(( |
26 | --dims: ( | 26 | --dims: ( |
27 | --size: fn.global-dim(--size --500), | 27 | --size: fn.global-dim(--size --500), |
28 | --font-size: fn.global-dim(--font-size --100), | 28 | --font-size: fn.global-dim(--font-size --100), |
29 | --indicator-size: fn.global-dim(--size --150), | 29 | --indicator-size: fn.global-dim(--size --150), |
30 | --indicator-spacing: fn.global-dim(--size --40), | ||
31 | --rounding: 25%, | ||
30 | 32 | ||
31 | --xxxl: ( | 33 | --xxxl: ( |
32 | --size: fn.global-dim(--size --1600), | 34 | --size: fn.global-dim(--size --1600), |
@@ -58,8 +60,6 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
58 | --font-size: fn.global-dim(--font-size --50), | 60 | --font-size: fn.global-dim(--font-size --50), |
59 | --indicator-size: fn.global-dim(--size --100), | 61 | --indicator-size: fn.global-dim(--size --100), |
60 | ), | 62 | ), |
61 | --indicator-spacing: fn.global-dim(--size --40), | ||
62 | --rounding: 25%, | ||
63 | 63 | ||
64 | --key-focus: ( | 64 | --key-focus: ( |
65 | --border: fn.global-dim(--key-focus --border), | 65 | --border: fn.global-dim(--key-focus --border), |
@@ -82,12 +82,24 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
82 | @include iro.bem-object(iro.props-namespace()) { | 82 | @include iro.bem-object(iro.props-namespace()) { |
83 | display: inline-block; | 83 | display: inline-block; |
84 | position: relative; | 84 | position: relative; |
85 | border: fn.dim(--key-focus --border) solid transparent; | ||
86 | border-radius: fn.dim(--rounding); | 85 | border-radius: fn.dim(--rounding); |
87 | font-size: fn.dim(--font-size); | 86 | font-size: fn.dim(--font-size); |
88 | font-style: normal; | 87 | font-style: normal; |
89 | vertical-align: .05em; | 88 | vertical-align: .05em; |
90 | 89 | ||
90 | &::after { | ||
91 | content: ''; | ||
92 | display: none; | ||
93 | position: absolute; | ||
94 | z-index: 1; | ||
95 | inset: calc(-1 * fn.dim(--key-focus --border-offset)); | ||
96 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
97 | border-radius: fn.dim(--rounding); | ||
98 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
99 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
100 | pointer-events: none; | ||
101 | } | ||
102 | |||
91 | @include iro.bem-elem('status') { | 103 | @include iro.bem-elem('status') { |
92 | position: absolute; | 104 | position: absolute; |
93 | inset-inline-end: 0; | 105 | inset-inline-end: 0; |
@@ -110,6 +122,10 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
110 | @include iro.bem-modifier('circle') { | 122 | @include iro.bem-modifier('circle') { |
111 | border-radius: 100%; | 123 | border-radius: 100%; |
112 | 124 | ||
125 | &::after { | ||
126 | border-radius: 100%; | ||
127 | } | ||
128 | |||
113 | @include iro.bem-elem('content') { | 129 | @include iro.bem-elem('content') { |
114 | border-radius: 100%; | 130 | border-radius: 100%; |
115 | } | 131 | } |
@@ -143,8 +159,9 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
143 | } | 159 | } |
144 | 160 | ||
145 | &:focus-visible { | 161 | &:focus-visible { |
146 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 162 | &::after { |
147 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 163 | display: block; |
164 | } | ||
148 | } | 165 | } |
149 | } | 166 | } |
150 | } | 167 | } |
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index cc7e500..06261b8 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -45,13 +45,9 @@ $static-themes: 'black' 'white' !default; | |||
45 | } | 45 | } |
46 | 46 | ||
47 | @if string.slice($theme, 1, 7) == 'static-' { | 47 | @if string.slice($theme, 1, 7) == 'static-' { |
48 | &:link, | 48 | &::after { |
49 | &:visited, | 49 | outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); |
50 | &:enabled { | 50 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); |
51 | &:focus-visible { | ||
52 | outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); | ||
53 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); | ||
54 | } | ||
55 | } | 51 | } |
56 | } | 52 | } |
57 | } | 53 | } |
@@ -190,11 +186,10 @@ $static-themes: 'black' 'white' !default; | |||
190 | 186 | ||
191 | @include iro.bem-object(iro.props-namespace()) { | 187 | @include iro.bem-object(iro.props-namespace()) { |
192 | display: inline-block; | 188 | display: inline-block; |
193 | margin: calc(-1 * fn.dim(--key-focus --border)); | 189 | position: relative; |
194 | padding-block: fn.dim(--pad-b); | 190 | padding-block: fn.dim(--pad-b); |
195 | padding-inline: fn.dim(--pad-i); | 191 | padding-inline: fn.dim(--pad-i); |
196 | border: fn.dim(--key-focus --border) solid transparent; | 192 | border-radius: fn.dim(--rounding); |
197 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); | ||
198 | background-color: fn.color(--bg); | 193 | background-color: fn.color(--bg); |
199 | background-clip: padding-box; | 194 | background-clip: padding-box; |
200 | color: fn.color(--label); | 195 | color: fn.color(--label); |
@@ -203,6 +198,18 @@ $static-themes: 'black' 'white' !default; | |||
203 | text-align: center; | 198 | text-align: center; |
204 | text-decoration: none; | 199 | text-decoration: none; |
205 | 200 | ||
201 | &::after { | ||
202 | content: ''; | ||
203 | display: none; | ||
204 | position: absolute; | ||
205 | z-index: 1; | ||
206 | inset: calc(-1 * fn.dim(--key-focus --border-offset)); | ||
207 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); | ||
208 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
209 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
210 | pointer-events: none; | ||
211 | } | ||
212 | |||
206 | &:link, | 213 | &:link, |
207 | &:visited, | 214 | &:visited, |
208 | &:enabled { | 215 | &:enabled { |
@@ -244,8 +251,9 @@ $static-themes: 'black' 'white' !default; | |||
244 | &:visited, | 251 | &:visited, |
245 | &:enabled { | 252 | &:enabled { |
246 | &:focus-visible { | 253 | &:focus-visible { |
247 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 254 | &::after { |
248 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 255 | display: block; |
256 | } | ||
249 | } | 257 | } |
250 | } | 258 | } |
251 | 259 | ||
@@ -258,6 +266,10 @@ $static-themes: 'black' 'white' !default; | |||
258 | @include iro.bem-modifier('pill') { | 266 | @include iro.bem-modifier('pill') { |
259 | padding-inline: fn.dim(--pad-i-pill); | 267 | padding-inline: fn.dim(--pad-i-pill); |
260 | border-radius: 10em; | 268 | border-radius: 10em; |
269 | |||
270 | &::after { | ||
271 | border-radius: 10em; | ||
272 | } | ||
261 | } | 273 | } |
262 | 274 | ||
263 | @each $size in sm lg xl { | 275 | @each $size in sm lg xl { |
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 5783ac1..9f84d7a 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
@@ -18,18 +18,26 @@ | |||
18 | ), | 18 | ), |
19 | ), | 19 | ), |
20 | --colors: ( | 20 | --colors: ( |
21 | --bg: fn.global-color(--bg-l2), | 21 | --bg: fn.global-color(--bg-l2), |
22 | --border: fn.global-color(--border-mute), | 22 | --image-bg: fn.global-color(--border-mute), |
23 | --divider: fn.global-color(--border-mute), | 23 | --border: fn.global-color(--border-mute), |
24 | --divider: fn.global-color(--border-mute), | ||
24 | 25 | ||
25 | --hover: ( | 26 | --hover: ( |
26 | --border: fn.global-color(--border), | 27 | --border: fn.global-color(--border), |
27 | ), | 28 | ), |
29 | |||
28 | --key-focus: ( | 30 | --key-focus: ( |
29 | --label: fn.global-color(--focus --text), | 31 | --label: fn.global-color(--focus --text), |
30 | --border: fn.global-color(--focus --border), | 32 | --border: fn.global-color(--focus --border), |
31 | --outline: fn.global-color(--focus --outline), | 33 | --outline: fn.global-color(--focus --outline), |
32 | ), | 34 | ), |
35 | |||
36 | --quiet: ( | ||
37 | --hover: ( | ||
38 | --border: fn.global-color(--text-disabled), | ||
39 | ), | ||
40 | ), | ||
33 | ), | 41 | ), |
34 | )); | 42 | )); |
35 | 43 | ||
@@ -59,8 +67,20 @@ | |||
59 | } | 67 | } |
60 | 68 | ||
61 | @include iro.bem-elem('image') { | 69 | @include iro.bem-elem('image') { |
62 | position: relative; | 70 | position: relative; |
63 | width: 100%; | 71 | width: 100%; |
72 | overflow: hidden; | ||
73 | background-color: fn.color(--image-bg); | ||
74 | |||
75 | &:first-child { | ||
76 | border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | ||
77 | border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | ||
78 | } | ||
79 | |||
80 | &:last-child { | ||
81 | border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | ||
82 | border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); | ||
83 | } | ||
64 | 84 | ||
65 | @include iro.bem-next-elem('avatar') { | 85 | @include iro.bem-next-elem('avatar') { |
66 | margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); | 86 | margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); |
@@ -102,5 +122,47 @@ | |||
102 | background-color: fn.color(--divider); | 122 | background-color: fn.color(--divider); |
103 | } | 123 | } |
104 | } | 124 | } |
125 | |||
126 | @include iro.bem-modifier('quiet') { | ||
127 | position: relative; | ||
128 | border: 0; | ||
129 | background-color: transparent; | ||
130 | |||
131 | @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | ||
132 | &:hover, | ||
133 | &:active { | ||
134 | @include iro.bem-elem('image') { | ||
135 | outline: fn.dim(--border) solid fn.color(--quiet --hover --border); | ||
136 | outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border)); | ||
137 | } | ||
138 | } | ||
139 | |||
140 | &:focus-visible { | ||
141 | outline: none; | ||
142 | box-shadow: none; | ||
143 | |||
144 | @include iro.bem-elem('image') { | ||
145 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
146 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
147 | } | ||
148 | } | ||
149 | } | ||
150 | |||
151 | @include iro.bem-elem('image') { | ||
152 | margin: calc(-1 * fn.dim(--key-focus --border)); | ||
153 | border: fn.dim(--key-focus --border) solid transparent; | ||
154 | border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); | ||
155 | background-clip: padding-box; | ||
156 | } | ||
157 | |||
158 | @include iro.bem-elem('body') { | ||
159 | padding: 0; | ||
160 | padding-block-start: fn.dim(--spacing); | ||
161 | } | ||
162 | |||
163 | @include iro.bem-elem('footer') { | ||
164 | padding-inline: 0; | ||
165 | } | ||
166 | } | ||
105 | } | 167 | } |
106 | } | 168 | } |
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 84ddf12..d1e2897 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss | |||
@@ -75,6 +75,7 @@ $static-themes: 'black' 'white' !default; | |||
75 | 75 | ||
76 | @include iro.bem-object(iro.props-namespace()) { | 76 | @include iro.bem-object(iro.props-namespace()) { |
77 | display: flex; | 77 | display: flex; |
78 | flex: 0 0 auto; | ||
78 | flex-direction: row; | 79 | flex-direction: row; |
79 | align-items: center; | 80 | align-items: center; |
80 | block-size: 1em; | 81 | block-size: 1em; |
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 9d4b1c7..5ad58ec 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss | |||
@@ -14,7 +14,12 @@ | |||
14 | --colors: ( | 14 | --colors: ( |
15 | --bg: fn.global-color(--bg-l2), | 15 | --bg: fn.global-color(--bg-l2), |
16 | --border: fn.global-color(--border), | 16 | --border: fn.global-color(--border), |
17 | --shadow: 0 .2em .5em rgba(#000, .1), | 17 | --filter: drop-shadow( |
18 | fn.global-dim(--shadow --x) | ||
19 | fn.global-dim(--shadow --y) | ||
20 | fn.global-dim(--shadow --blur) | ||
21 | fn.global-color(--shadow) | ||
22 | ), | ||
18 | ), | 23 | ), |
19 | )); | 24 | )); |
20 | 25 | ||
@@ -29,7 +34,7 @@ | |||
29 | border: fn.dim(--border) solid fn.color(--border); | 34 | border: fn.dim(--border) solid fn.color(--border); |
30 | border-radius: fn.dim(--rounding); | 35 | border-radius: fn.dim(--rounding); |
31 | background-color: fn.color(--bg); | 36 | background-color: fn.color(--bg); |
32 | box-shadow: fn.color(--shadow); | 37 | filter: fn.color(--filter); |
33 | 38 | ||
34 | @include iro.bem-modifier('up-left') { | 39 | @include iro.bem-modifier('up-left') { |
35 | transform: translate(var(--x), calc(var(--y) - 100%)); | 40 | transform: translate(var(--x), calc(var(--y) - 100%)); |