summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/.old/objects/_action-menu.scss122
-rw-r--r--src/_config.scss3
-rw-r--r--src/_objects.scss6
-rw-r--r--src/objects/_action-menu.scss111
-rw-r--r--src/objects/_avatar.scss (renamed from src/.old/objects/_avatar.scss)84
-rw-r--r--src/objects/_status-indicator.scss (renamed from src/.old/objects/_status-indicator.scss)28
-rw-r--r--tpl/views/avatar.pug130
-rw-r--r--tpl/views/status-indicator.pug8
8 files changed, 190 insertions, 302 deletions
diff --git a/src/.old/objects/_action-menu.scss b/src/.old/objects/_action-menu.scss
deleted file mode 100644
index 12e3b5f..0000000
--- a/src/.old/objects/_action-menu.scss
+++ /dev/null
@@ -1,122 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-menu') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: 0,
8 --pad-y: fn.global-dim(--size --85),
9 --separator: fn.global-dim(--size --85),
10 --rounding: 3px,
11 --border: 1px,
12 --item: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 ),
16 ),
17 ), 'dims');
18
19 @include iro.props-store((
20 --colors: (
21 --shadow: 0 .2em .5em rgba(#000, .1),
22 --border: fn.global-color(--border --stable-lo),
23 --separator: fn.global-color(--obj),
24 --icon: fn.global-color(--fg-hi),
25 --item: (
26 --hover: (
27 --bg: fn.global-color(--obj-hi),
28 --label: fn.global-color(--fg-lo),
29 ),
30 --disabled: (
31 --label: fn.global-color(--fg-hi3),
32 ),
33 --key-focus: (
34 --bg: fn.global-color(--obj-hi),
35 --label: fn.global-color(--fg-lo),
36 --border: fn.global-color(--focus --fill),
37 --shadow: fn.global-color(--focus --shadow),
38 ),
39 ),
40 ),
41 ), 'colors');
42
43 @include iro.props-store((
44 --colors: (
45 --shadow: 0 .2em .5em rgba(#000, .5),
46 ),
47 ), 'colors-dark');
48
49 @include iro.bem-object(iro.props-namespace()) {
50 position: absolute;
51 z-index: 10000;
52 top: 0;
53 left: 0;
54 padding: fn.dim(--pad-y) fn.dim(--pad-x);
55 transform: translate(var(--x), var(--y));
56 border: fn.dim(--border) solid fn.color(--border);
57 border-radius: fn.dim(--rounding);
58 background-clip: padding-box;
59 background-color: fn.global-color(--bg);
60 box-shadow: fn.color(--shadow);
61 color: fn.global-color(--fg);
62
63 @include iro.bem-modifier('up-left') {
64 transform: translate(var(--x), calc(var(--y) - 100%));
65 }
66
67 @include iro.bem-modifier('up-right') {
68 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
69 }
70
71 @include iro.bem-modifier('down-right') {
72 transform: translate(calc(var(--x) - 100%), var(--y));
73 }
74
75 @include iro.bem-elem('item') {
76 display: block;
77 box-sizing: border-box;
78 width: 100%;
79 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
80 border: 2px solid transparent;
81 color: fn.color(--item --disabled --label);
82
83 &:link,
84 &:visited,
85 &:enabled {
86 color: currentColor;
87
88 &:hover,
89 &:active {
90 background-color: fn.color(--item --hover --bg);
91 color: fn.color(--item --hover --label);
92 }
93
94 @include iro.bem-at-theme('keyboard') {
95 &:focus {
96 border-radius: calc(fn.dim(--rounding) - 1px);
97 border-color: fn.color(--item --key-focus --border);
98 background-color: fn.color(--item --key-focus --bg);
99 box-shadow: fn.color(--item --key-focus --shadow);
100 color: fn.color(--item --key-focus --label);
101 }
102 }
103 }
104 }
105
106 @include iro.bem-elem('separator') {
107 height: 1px;
108 margin: fn.dim(--separator) 0;
109 background-color: fn.color(--separator);
110 }
111
112 @include iro.bem-elem('slot') {
113 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
114 }
115
116 @include iro.bem-elem('icon-slot') {
117 display: flex;
118 justify-content: center;
119 width: fn.foreign-dim(--icon, --size);
120 }
121 }
122}
diff --git a/src/_config.scss b/src/_config.scss
index f4f43fd..56a74e1 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -82,9 +82,6 @@ $semantic-colors-common: (
82 --focus-raw: --accent, 82 --focus-raw: --accent,
83 --focus-static: --accent-static, 83 --focus-static: --accent-static,
84 84
85 --light: --white-transparent,
86 --shadow: --black-transparent,
87
88 --border-mute: --base --200, 85 --border-mute: --base --200,
89 --border: --base --300, 86 --border: --base --300,
90 --border-strong: --base --400, 87 --border-strong: --base --400,
diff --git a/src/_objects.scss b/src/_objects.scss
index b1872c9..0973920 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -11,10 +11,10 @@
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';
16// @use 'objects/message'; 16// @use 'objects/message';
17// @use 'objects/action-menu'; 17@use 'objects/action-menu';
18// @use 'objects/menu'; 18// @use 'objects/menu';
19// @use 'objects/icon-nav'; 19// @use 'objects/icon-nav';
20// @use 'objects/backdrop'; 20// @use 'objects/backdrop';
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
new file mode 100644
index 0000000..2a74834
--- /dev/null
+++ b/src/objects/_action-menu.scss
@@ -0,0 +1,111 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-menu') {
5 @include iro.props-store((
6 --dims: (
7 --pad-i: 0,
8 --pad-b: fn.global-dim(--size --85),
9 --separator: fn.global-dim(--size --85),
10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
12 --item: (
13 --pad-i: fn.global-dim(--size --150),
14 --pad-b: fn.global-dim(--size --85),
15 ),
16 ),
17 --colors: (
18 --bg: fn.global-color(--bg-l2),
19 --text: fn.global-color(--text),
20 --shadow: 0 .2em .5em rgba(#000, .1),
21 --border: fn.global-color(--border),
22 --separator: fn.global-color(--border),
23 --icon: fn.global-color(--text-mute),
24 --item: (
25 --hover: (
26 --bg: fn.global-color(--border-mute),
27 --label: fn.global-color(--heading),
28 ),
29 --disabled: (
30 --label: fn.global-color(--text-disabled),
31 ),
32 --key-focus: (
33 --border: fn.global-color(--focus --border),
34 --outline: fn.global-color(--focus --outline),
35 ),
36 ),
37 ),
38 ));
39
40 @include iro.bem-object(iro.props-namespace()) {
41 position: absolute;
42 z-index: 10000;
43 inset-block-start: 0;
44 inset-inline-start: 0;
45 padding-block: fn.dim(--pad-b);
46 padding-inline: fn.dim(--pad-i);
47 transform: translate(var(--x), var(--y));
48 border: fn.dim(--border) solid fn.color(--border);
49 border-radius: fn.dim(--rounding);
50 background-clip: padding-box;
51 background-color: fn.color(--bg);
52 box-shadow: fn.color(--shadow);
53 color: fn.color(--text);
54
55 @include iro.bem-modifier('up-left') {
56 transform: translate(var(--x), calc(var(--y) - 100%));
57 }
58
59 @include iro.bem-modifier('up-right') {
60 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
61 }
62
63 @include iro.bem-modifier('down-right') {
64 transform: translate(calc(var(--x) - 100%), var(--y));
65 }
66
67 @include iro.bem-elem('item') {
68 display: block;
69 box-sizing: border-box;
70 inline-size: 100%;
71 padding-block: calc(fn.dim(--item --pad-b) - 2px);
72 padding-inline: calc(fn.dim(--item --pad-i) - 2px);
73 border: 2px solid transparent;
74 color: fn.color(--item --disabled --label);
75
76 &:link,
77 &:visited,
78 &:enabled {
79 color: currentColor;
80
81 &:hover,
82 &:active,
83 &:focus-visible {
84 background-color: fn.color(--item --hover --bg);
85 color: fn.color(--item --hover --label);
86 }
87
88 &:focus-visible {
89 border-color: fn.color(--item --key-focus --border);
90 }
91 }
92 }
93
94 @include iro.bem-elem('separator') {
95 block-size: 1px;
96 margin-block: fn.dim(--separator);
97 background-color: fn.color(--separator);
98 }
99
100 @include iro.bem-elem('slot') {
101 padding-block: fn.dim(--item --pad-b);
102 padding-inline: fn.dim(--item --pad-i);
103 }
104
105 @include iro.bem-elem('icon-slot') {
106 display: flex;
107 justify-content: center;
108 inline-size: fn.foreign-dim(--icon, --size);
109 }
110 }
111}
diff --git a/src/.old/objects/_avatar.scss b/src/objects/_avatar.scss
index 4be780e..e6fa74e 100644
--- a/src/.old/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,16 +1,19 @@
1@use 'sass:list';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 3@use '../functions' as fn;
3 4
4@mixin status($size) { 5$sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
6
7@mixin status($size: ()) {
5 @include iro.bem-elem('status') { 8 @include iro.bem-elem('status') {
6 width: fn.dim(--#{$size} --indicator-size); 9 width: fn.dim(list.join($size, --indicator-size));
7 height: fn.dim(--#{$size} --indicator-size); 10 height: fn.dim(list.join($size, --indicator-size));
8 11
9 @include iro.bem-next-elem('content') { 12 @include iro.bem-next-elem('content') {
10 mask-image: radial-gradient( 13 mask-image: radial-gradient(
11 circle calc(.5 * fn.dim(--#{$size} --indicator-size) + fn.dim(--indicator-spacing)) at 14 circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at
12 calc(100% - .5 * fn.dim(--#{$size} --indicator-size)) 15 calc(100% - .5 * fn.dim(list.join($size, --indicator-size)))
13 calc(100% - .5 * fn.dim(--#{$size} --indicator-size)), 16 calc(100% - .5 * fn.dim(list.join($size, --indicator-size))),
14 transparent 95%, 17 transparent 95%,
15 #fff 18 #fff
16 ); 19 );
@@ -21,81 +24,84 @@
21@include iro.props-namespace('avatar') { 24@include iro.props-namespace('avatar') {
22 @include iro.props-store(( 25 @include iro.props-store((
23 --dims: ( 26 --dims: (
24 --400: ( 27 --size: fn.global-dim(--size --500),
28 --font-size: fn.global-dim(--font-size --100),
29 --indicator-size: fn.global-dim(--size --150),
30
31 --xxxl: (
25 --size: fn.global-dim(--size --1600), 32 --size: fn.global-dim(--size --1600),
26 --font-size: fn.global-dim(--font-size --800), 33 --font-size: fn.global-dim(--font-size --800),
27 --indicator-size: fn.global-dim(--size --400), 34 --indicator-size: fn.global-dim(--size --400),
28 ), 35 ),
29 --300: ( 36 --xxl: (
30 --size: fn.global-dim(--size --1200), 37 --size: fn.global-dim(--size --1200),
31 --font-size: fn.global-dim(--font-size --600), 38 --font-size: fn.global-dim(--font-size --600),
32 --indicator-size: fn.global-dim(--size --300), 39 --indicator-size: fn.global-dim(--size --300),
33 ), 40 ),
34 --200: ( 41 --xl: (
35 --size: fn.global-dim(--size --800), 42 --size: fn.global-dim(--size --800),
36 --font-size: fn.global-dim(--font-size --300), 43 --font-size: fn.global-dim(--font-size --300),
37 --indicator-size: fn.global-dim(--size --225), 44 --indicator-size: fn.global-dim(--size --225),
38 ), 45 ),
39 --150: ( 46 --lg: (
40 --size: fn.global-dim(--size --650), 47 --size: fn.global-dim(--size --650),
41 --font-size: fn.global-dim(--font-size --200), 48 --font-size: fn.global-dim(--font-size --200),
42 --indicator-size: fn.global-dim(--size --175), 49 --indicator-size: fn.global-dim(--size --175),
43 ), 50 ),
44 --100: ( 51 --sm: (
45 --size: fn.global-dim(--size --500),
46 --font-size: fn.global-dim(--font-size --100),
47 --indicator-size: fn.global-dim(--size --150),
48 ),
49 --75: (
50 --size: fn.global-dim(--size --375), 52 --size: fn.global-dim(--size --375),
51 --font-size: fn.global-dim(--font-size --75), 53 --font-size: fn.global-dim(--font-size --75),
52 --indicator-size: fn.global-dim(--size --125), 54 --indicator-size: fn.global-dim(--size --125),
53 ), 55 ),
54 --50: ( 56 --xs: (
55 --size: fn.global-dim(--size --250), 57 --size: fn.global-dim(--size --250),
56 --font-size: fn.global-dim(--font-size --50), 58 --font-size: fn.global-dim(--font-size --50),
57 --indicator-size: fn.global-dim(--size --100), 59 --indicator-size: fn.global-dim(--size --100),
58 ), 60 ),
59 --indicator-spacing: fn.global-dim(--size --40), 61 --indicator-spacing: fn.global-dim(--size --40),
60 --rounding: 25%, 62 --rounding: 25%,
63
64 --key-focus: (
65 --border: fn.global-dim(--key-focus --border),
66 --border-offset: fn.global-dim(--key-focus --border-offset),
67 --outline: fn.global-dim(--key-focus --outline),
68 ),
61 ), 69 ),
62 ), 'dims');
63
64 @include iro.props-store((
65 --colors: ( 70 --colors: (
66 --h: 354, 71 --h: 354,
67 --s: 44%, 72 --s: 44%,
68 --l: 45%, 73 --l: 45%,
69 74
70 --key-focus: ( 75 --key-focus: (
71 --border: fn.global-color(--focus --fill), 76 --border: fn.global-color(--focus --border),
72 --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo), 77 --outline: fn.global-color(--focus --outline),
73 ), 78 ),
74 ), 79 ),
75 ), 'colors'); 80 ));
76 81
77 @include iro.bem-object(iro.props-namespace()) { 82 @include iro.bem-object(iro.props-namespace()) {
78 display: inline-block; 83 display: inline-block;
79 position: relative; 84 position: relative;
85 border: fn.dim(--key-focus --border) solid transparent;
80 border-radius: fn.dim(--rounding); 86 border-radius: fn.dim(--rounding);
81 font-size: fn.dim(--100 --font-size); 87 font-size: fn.dim(--font-size);
82 font-style: normal; 88 font-style: normal;
83 vertical-align: .05em; 89 vertical-align: .05em;
84 90
85 @include iro.bem-elem('status') { 91 @include iro.bem-elem('status') {
86 position: absolute; 92 position: absolute;
87 right: 0; 93 inset-inline-end: 0;
88 bottom: 0; 94 inset-block-end: 0;
89 } 95 }
90 96
91 @include status(100); 97 @include status;
92 98
93 @include iro.bem-elem('content') { 99 @include iro.bem-elem('content') {
94 display: block; 100 display: block;
95 width: fn.dim(--100 --size); 101 inline-size: fn.dim(--size);
96 height: fn.dim(--100 --size); 102 block-size: fn.dim(--size);
97 border-radius: fn.dim(--rounding); 103 border-radius: fn.dim(--rounding);
98 line-height: fn.dim(--100 --size); 104 line-height: fn.dim(--size);
99 text-align: center; 105 text-align: center;
100 object-fit: cover; 106 object-fit: cover;
101 object-position: center center; 107 object-position: center center;
@@ -122,25 +128,23 @@
122 } 128 }
123 } 129 }
124 130
125 @each $size in 50 75 150 200 300 400 { 131 @each $size in $sizes {
126 @include iro.bem-modifier($size) { 132 @include iro.bem-modifier($size) {
127 font-size: fn.dim(--#{$size} --font-size); 133 font-size: fn.dim(--#{$size} --font-size);
128 134
129 @include status($size); 135 @include status(--#{$size});
130 136
131 @include iro.bem-elem('content') { 137 @include iro.bem-elem('content') {
132 width: fn.dim(--#{$size} --size); 138 inline-size: fn.dim(--#{$size} --size);
133 height: fn.dim(--#{$size} --size); 139 block-size: fn.dim(--#{$size} --size);
134 line-height: fn.dim(--#{$size} --size); 140 line-height: fn.dim(--#{$size} --size);
135 } 141 }
136 } 142 }
137 } 143 }
138 144
139 @include iro.bem-at-theme('keyboard') { 145 &:focus-visible {
140 &:focus { 146 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
141 outline: 2px solid fn.color(--key-focus --border); 147 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
142 box-shadow: fn.color(--key-focus --shadow);
143 }
144 } 148 }
145 } 149 }
146} 150}
diff --git a/src/.old/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index d8ea9ef..4c5305e 100644
--- a/src/.old/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,22 +1,26 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4$themes: 'accent' 'positive' 'negative' 'warning' !default;
5
4@include iro.props-namespace('status-indicator') { 6@include iro.props-namespace('status-indicator') {
5 @include iro.props-store(( 7 @include iro.props-store((
6 --dims: ( 8 --dims: (
7 --size: fn.global-dim(--size --125), 9 --size: fn.global-dim(--size --125),
8 ), 10 ),
9 ), 'dims');
10
11 @include iro.props-store((
12 --colors: ( 11 --colors: (
13 --default: fn.global-color(--obj-lo), 12 --default: fn.global-color(--border-strong),
14 --primary: fn.global-color(--fg), 13 --primary: fn.global-color(--text),
15 --green: fn.global-color(--green --solid --bg-hi),
16 --yellow: fn.global-color(--yellow --solid --bg-hi),
17 --red: fn.global-color(--red --solid --bg-hi),
18 ), 14 ),
19 ), 'colors'); 15 ));
16
17 @each $theme in $themes {
18 @include iro.props-store((
19 --colors: (
20 --#{$theme}: fn.global-color(--#{$theme}-static --800),
21 ),
22 ));
23 }
20 24
21 @include iro.bem-object(iro.props-namespace()) { 25 @include iro.bem-object(iro.props-namespace()) {
22 display: inline-block; 26 display: inline-block;
@@ -26,9 +30,9 @@
26 background-color: fn.color(--default); 30 background-color: fn.color(--default);
27 vertical-align: middle; 31 vertical-align: middle;
28 32
29 @each $color in 'primary' 'green' 'yellow' 'red' { 33 @each $theme in $themes {
30 @include iro.bem-is($color) { 34 @include iro.bem-is($theme) {
31 background-color: fn.color(--#{$color}); 35 background-color: fn.color(--#{$theme});
32 } 36 }
33 } 37 }
34 } 38 }
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
index b08f5d7..f345098 100644
--- a/tpl/views/avatar.pug
+++ b/tpl/views/avatar.pug
@@ -1,125 +1,19 @@
1mixin view-avatar 1mixin view-avatar
2 +view('avatar', 'Avatar') 2 +view('avatar', 'Avatar')
3 .c-box 3 each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
4 div(style={ display: 'flex', gap: '.3em' }) 4 .c-box(style={ display: 'flex', gap: '.3em' })
5 +avatar(size='400' href='#') 5 +avatar(size=size href='#')
6 = 'Vo' 6 = 'Vo'
7 +avatar(size='400' status='green' hue=45) 7 +avatar(size=size status='green' hue=45)
8 = 'lp' 8 = 'lp'
9 +avatar(size='400' src='avatar.png') 9 +avatar(size=size src='avatar.png')
10 +avatar(size='400' src='avatar.png' status='red') 10 +avatar(size=size src='avatar.png' status='red')
11 br
12 br
13 div(style={ display: 'flex', gap: '.3em' })
14 +avatar(size='300' href='#')
15 = 'Vo'
16 +avatar(size='300' status='green' hue=45)
17 = 'lp'
18 +avatar(size='300' src='avatar.png')
19 +avatar(size='300' src='avatar.png' status='red')
20 br
21 br
22 div(style={ display: 'flex', gap: '.3em' })
23 +avatar(size='200' href='#')
24 = 'Vo'
25 +avatar(size='200' status='green' hue=45)
26 = 'lp'
27 +avatar(size='200' src='avatar.png')
28 +avatar(size='200' src='avatar.png' status='red')
29 br
30 br
31 div(style={ display: 'flex', gap: '.3em' })
32 +avatar(size='150' href='#')
33 = 'Vo'
34 +avatar(size='150' status='green' hue=45)
35 = 'lp'
36 +avatar(size='150' src='avatar.png')
37 +avatar(size='150' src='avatar.png' status='red')
38 br
39 br
40 div(style={ display: 'flex', gap: '.3em' })
41 +avatar(href='#')
42 = 'Vo'
43 +avatar(status='green' hue=45)
44 = 'lp'
45 +avatar(src='avatar.png')
46 +avatar(src='avatar.png' status='red')
47 br
48 br
49 div(style={ display: 'flex', gap: '.3em' })
50 +avatar(size='75' hue=90 href='#')
51 = 'eo'
52 +avatar(size='75' status='green' hue=135)
53 = 'n'
54 +avatar(size='75' src='avatar.png')
55 +avatar(size='75' src='avatar.png' status='red')
56 br
57 br
58 div(style={ display: 'flex', gap: '.3em' })
59 +avatar(size='50' hue=180 href='#')
60 = 'V'
61 +avatar(size='50' hue=225)
62 = 'o'
63 +avatar(size='50' src='avatar.png')
64 11
65 .c-box 12 each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
66 div(style={ display: 'flex', gap: '.3em' }) 13 .c-box(style={ display: 'flex', gap: '.3em' })
67 +avatar(circle=true size='400' href='#') 14 +avatar(circle=true size=size href='#')
68 = 'Vo'
69 +avatar(circle=true size='400' status='green' hue=45)
70 = 'lp'
71 +avatar(circle=true size='400' src='avatar.png')
72 +avatar(circle=true size='400' src='avatar.png' status='red')
73 br
74 br
75 div(style={ display: 'flex', gap: '.3em' })
76 +avatar(circle=true size='300' href='#')
77 = 'Vo'
78 +avatar(circle=true size='300' status='green' hue=45)
79 = 'lp'
80 +avatar(circle=true size='300' src='avatar.png')
81 +avatar(circle=true size='300' src='avatar.png' status='red')
82 br
83 br
84 div(style={ display: 'flex', gap: '.3em' })
85 +avatar(circle=true size='200' href='#')
86 = 'Vo'
87 +avatar(circle=true size='200' status='green' hue=45)
88 = 'lp'
89 +avatar(circle=true size='200' src='avatar.png')
90 +avatar(circle=true size='200' src='avatar.png' status='red')
91 br
92 br
93 div(style={ display: 'flex', gap: '.3em' })
94 +avatar(circle=true size='150' href='#')
95 = 'Vo'
96 +avatar(circle=true size='150' status='green' hue=45)
97 = 'lp'
98 +avatar(circle=true size='150' src='avatar.png')
99 +avatar(circle=true size='150' src='avatar.png' status='red')
100 br
101 br
102 div(style={ display: 'flex', gap: '.3em' })
103 +avatar(circle=true href='#')
104 = 'Vo' 15 = 'Vo'
105 +avatar(circle=true status='green' hue=45) 16 +avatar(circle=true size=size status='green' hue=45)
106 = 'lp' 17 = 'lp'
107 +avatar(circle=true src='avatar.png') 18 +avatar(circle=true size=size src='avatar.png')
108 +avatar(circle=true src='avatar.png' status='red') 19 +avatar(circle=true size=size src='avatar.png' status='red')
109 br
110 br
111 div(style={ display: 'flex', gap: '.3em' })
112 +avatar(circle=true size='75' hue=90 href='#')
113 = 'eo'
114 +avatar(circle=true size='75' status='green' hue=135)
115 = 'n'
116 +avatar(circle=true size='75' src='avatar.png')
117 +avatar(circle=true size='75' src='avatar.png' status='red')
118 br
119 br
120 div(style={ display: 'flex', gap: '.3em' })
121 +avatar(circle=true size='50' hue=180 href='#')
122 = 'V'
123 +avatar(circle=true size='50' hue=225)
124 = 'o'
125 +avatar(circle=true size='50' src='avatar.png')
diff --git a/tpl/views/status-indicator.pug b/tpl/views/status-indicator.pug
index 553e454..f4c8ad0 100644
--- a/tpl/views/status-indicator.pug
+++ b/tpl/views/status-indicator.pug
@@ -3,10 +3,10 @@ mixin view-status-indicator
3 .c-box 3 .c-box
4 +status-indicator 4 +status-indicator
5 = ' ' 5 = ' '
6 +status-indicator('primary') 6 +status-indicator('accent')
7 = ' ' 7 = ' '
8 +status-indicator('green') 8 +status-indicator('positive')
9 = ' ' 9 = ' '
10 +status-indicator('yellow') 10 +status-indicator('warning')
11 = ' ' 11 = ' '
12 +status-indicator('red') 12 +status-indicator('negative')
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 09:29:43 +0000