diff options
author | Volpeon <git@volpeon.ink> | 2024-06-26 16:53:07 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-26 16:53:07 +0200 |
commit | dd1ade8acc17d74a45240d255cb862009129b0ec (patch) | |
tree | 47fdc87cdcda8e8597c9d192d07ca5a97d375072 /tpl/views | |
parent | Add static themes to action button (diff) | |
download | iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.gz iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.bz2 iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.zip |
Update
Diffstat (limited to 'tpl/views')
-rw-r--r-- | tpl/views/avatar.pug | 130 | ||||
-rw-r--r-- | tpl/views/status-indicator.pug | 8 |
2 files changed, 16 insertions, 122 deletions
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 @@ | |||
1 | mixin view-avatar | 1 | mixin 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') |