summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-28 14:22:27 +0200
committerVolpeon <git@volpeon.ink>2024-06-28 14:22:27 +0200
commitf98a5c58c830a283d07d8efad4502281a5e0369e (patch)
tree84c4abdd260e595c7b314d79ae7af58bd406bf67 /src/objects
parentAdd card (diff)
downloadiro-design-f98a5c58c830a283d07d8efad4502281a5e0369e.tar.gz
iro-design-f98a5c58c830a283d07d8efad4502281a5e0369e.tar.bz2
iro-design-f98a5c58c830a283d07d8efad4502281a5e0369e.zip
Update
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-button.scss4
-rw-r--r--src/objects/_avatar.scss33
-rw-r--r--src/objects/_badge.scss36
-rw-r--r--src/objects/_card.scss72
-rw-r--r--src/objects/_divider.scss1
-rw-r--r--src/objects/_popover.scss9
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%));