summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-26 16:53:07 +0200
committerVolpeon <git@volpeon.ink>2024-06-26 16:53:07 +0200
commitdd1ade8acc17d74a45240d255cb862009129b0ec (patch)
tree47fdc87cdcda8e8597c9d192d07ca5a97d375072 /tpl
parentAdd static themes to action button (diff)
downloadiro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.gz
iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.tar.bz2
iro-design-dd1ade8acc17d74a45240d255cb862009129b0ec.zip
Update
Diffstat (limited to 'tpl')
-rw-r--r--tpl/views/avatar.pug130
-rw-r--r--tpl/views/status-indicator.pug8
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 @@
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-70-g09d2 (git 2.47.0) at 2024-11-21 15:14:14 +0000