summaryrefslogtreecommitdiffstats
path: root/tpl/views/button.pug
diff options
context:
space:
mode:
Diffstat (limited to 'tpl/views/button.pug')
-rw-r--r--tpl/views/button.pug231
1 files changed, 176 insertions, 55 deletions
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index edd8ef6..4b8c59f 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -1,85 +1,206 @@
1mixin view-button 1mixin view-button
2 +view('button', 'Button') 2 +view('button', 'Button')
3 .c-box 3 .c-box
4 +a-button(size='sm')= 'Button' 4 +button(size='sm')= 'Idle'
5 = ' ' 5 = ' '
6 +a-button= 'Button' 6 +button= 'Idle'
7 = ' ' 7 = ' '
8 +a-button(size='lg')= 'Button' 8 +button(size='lg')= 'Idle'
9 = ' ' 9 = ' '
10 +a-button(size='xl')= 'Button' 10 +button(size='xl')= 'Idle'
11 br
12 br
13 +button(icon='trash' size='sm')
14 = ' '
15 +button(icon='trash')
16 = ' '
17 +button(icon='trash' size='lg')
18 = ' '
19 +button(icon='trash' size='xl')
20 br
21 br
22 +button(icon='user' size='sm')= 'Idle'
23 = ' '
24 +button(icon='user')= 'Idle'
25 = ' '
26 +button(icon='user' size='lg')= 'Idle'
27 = ' '
28 +button(icon='user' size='xl')= 'Idle'
11 29
12 .c-box 30 .c-box
13 +a-button(size='sm' outline=true)= 'Button' 31 +button(pill=true size='sm')= 'Idle'
32 = ' '
33 +button(pill=true)= 'Idle'
34 = ' '
35 +button(pill=true size='lg')= 'Idle'
36 = ' '
37 +button(pill=true size='xl')= 'Idle'
38 br
39 br
40 +button(pill=true icon='trash' size='sm')
41 = ' '
42 +button(pill=true icon='trash')
14 = ' ' 43 = ' '
15 +a-button(outline=true)= 'Button' 44 +button(pill=true icon='trash' size='lg')
16 = ' ' 45 = ' '
17 +a-button(size='lg' outline=true)= 'Button' 46 +button(pill=true icon='trash' size='xl')
47 br
48 br
49 +button(pill=true icon='user' size='sm')= 'Idle'
50 = ' '
51 +button(pill=true icon='user')= 'Idle'
52 = ' '
53 +button(pill=true icon='user' size='lg')= 'Idle'
18 = ' ' 54 = ' '
19 +a-button(size='xl' outline=true)= 'Button' 55 +button(pill=true icon='user' size='xl')= 'Idle'
20 56
21 .c-box 57 .c-box
22 +a-button(postIcon='arrow-right' size='sm')= 'Button' 58 +button= 'Label'
23 = ' ' 59 = ' '
24 +a-button(postIcon='arrow-right')= 'Button' 60 +button(icon='trash')= 'Label'
25 = ' ' 61 = ' '
26 +a-button(postIcon='arrow-right' size='lg')= 'Button' 62 +button(icon='trash')
63 br
64 br
65 +button(quiet=true)= 'Label'
27 = ' ' 66 = ' '
28 +a-button(postIcon='arrow-right' size='xl')= 'Button' 67 +button(quiet=true icon='trash')= 'Label'
68 = ' '
69 +button(quiet=true icon='trash')
29 70
30 .c-box 71 .c-box
31 .l-button-group 72 +button= 'Idle'
32 +a-button= 'Button' 73 = ' '
33 +a-button(disabled=true)= 'Button' 74 +button(highlighted=true)= 'Highlighted'
34 +a-button(outline=true)= 'Button' 75 = ' '
35 +a-button(outline=true disabled=true)= 'Button' 76 +button(selected=true)= 'Selected'
77 = ' '
78 +button(disabled=true)= 'Disabled'
79 = ' '
80 +button(selected=true disabled=true)= 'Selected + disabled'
81 br
36 br 82 br
37 .l-button-group 83 +button(badge=true)= 'Idle'
38 +a-button(icon='trash') 84 = ' '
39 +a-button(disabled=true icon='trash') 85 +button(badge=true highlighted=true)= 'Highlighted'
40 +a-button(outline=true icon='trash') 86 = ' '
41 +a-button(outline=true disabled=true icon='trash') 87 +button(badge=true selected=true)= 'Selected'
88 = ' '
89 +button(badge=true disabled=true)= 'Disabled'
90 = ' '
91 +button(badge=true selected=true disabled=true)= 'Selected + disabled'
92 br
93 br
94 +button(quiet=true)= 'Idle'
95 = ' '
96 +button(quiet=true highlighted=true)= 'Highlighted'
97 = ' '
98 +button(quiet=true selected=true)= 'Selected'
99 = ' '
100 +button(quiet=true disabled=true)= 'Disabled'
101 = ' '
102 +button(quiet=true selected=true disabled=true)= 'Selected + disabled'
42 103
43 each theme in ['primary', 'accent', 'negative'] 104 .c-box
105 +button(pill=true)= 'Idle'
106 = ' '
107 +button(pill=true highlighted=true)= 'Highlighted'
108 = ' '
109 +button(pill=true selected=true)= 'Selected'
110 = ' '
111 +button(pill=true disabled=true)= 'Disabled'
112 = ' '
113 +button(pill=true selected=true disabled=true)= 'Selected + disabled'
114 br
115 br
116 +button(pill=true badge=true)= 'Idle'
117 = ' '
118 +button(pill=true badge=true highlighted=true)= 'Highlighted'
119 = ' '
120 +button(pill=true badge=true selected=true)= 'Selected'
121 = ' '
122 +button(pill=true badge=true disabled=true)= 'Disabled'
123 = ' '
124 +button(pill=true badge=true selected=true disabled=true)= 'Selected + disabled'
125 br
126 br
127 +button(pill=true quiet=true)= 'Idle'
128 = ' '
129 +button(pill=true quiet=true highlighted=true)= 'Highlighted'
130 = ' '
131 +button(pill=true quiet=true selected=true)= 'Selected'
132 = ' '
133 +button(pill=true quiet=true disabled=true)= 'Disabled'
134 = ' '
135 +button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
136
137 each theme, i in ['accent', 'positive', 'negative', 'warning']
44 .c-box 138 .c-box
45 .l-button-group 139 +button(theme=theme)= 'Idle'
46 +a-button(variant=theme)= 'Button' 140 = ' '
47 +a-button(variant=theme disabled=true)= 'Button' 141 +button(theme=theme highlighted=true)= 'Highlighted'
48 +a-button(variant=theme outline=true)= 'Button' 142 = ' '
49 +a-button(variant=theme outline=true disabled=true)= 'Button' 143 +button(theme=theme selected=true)= 'Selected'
144 = ' '
145 +button(theme=theme disabled=true)= 'Disabled'
146 = ' '
147 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
50 br 148 br
51 .l-button-group 149 br
52 +a-button(variant=theme icon='trash') 150 +button(theme=theme badge=true)= 'Idle'
53 +a-button(variant=theme disabled=true icon='trash') 151 = ' '
54 +a-button(variant=theme outline=true icon='trash') 152 +button(theme=theme badge=true highlighted=true)= 'Highlighted'
55 +a-button(variant=theme outline=true disabled=true icon='trash') 153 = ' '
154 +button(theme=theme badge=true selected=true)= 'Selected'
155 = ' '
156 +button(theme=theme badge=true disabled=true)= 'Disabled'
157 = ' '
158 +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled'
159 br
160 br
161 +button(theme=theme quiet=true)= 'Idle'
162 = ' '
163 +button(theme=theme quiet=true highlighted=true)= 'Highlighted'
164 = ' '
165 +button(theme=theme quiet=true selected=true)= 'Selected'
166 = ' '
167 +button(theme=theme quiet=true disabled=true)= 'Disabled'
168 = ' '
169 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
56 170
57 each theme in ['static-black', 'static-white'] 171 each theme in ['static-black', 'static-white']
58 - 172 -
59 const bg = theme.startsWith('static-black') ? 500 : 1000; 173 const bg = theme.startsWith('static-black') ? 500 : 1000;
60 174
61 .c-box(style=`background-color: var(--colors--blue-static--${bg});`) 175 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
62 .l-button-group 176 +button(theme=theme)= 'Idle'
63 +a-button(variant=theme)= 'Button' 177 = ' '
64 +a-button(variant=theme disabled=true)= 'Button' 178 +button(theme=theme highlighted=true)= 'Highlighted'
65 +a-button(variant=theme outline=true)= 'Button' 179 = ' '
66 +a-button(variant=theme outline=true disabled=true)= 'Button' 180 +button(theme=theme selected=true)= 'Selected'
181 = ' '
182 +button(theme=theme disabled=true)= 'Disabled'
183 = ' '
184 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
185 br
186 br
187 +button(theme=theme badge=true)= 'Idle'
188 = ' '
189 +button(theme=theme badge=true highlighted=true)= 'Highlighted'
190 = ' '
191 +button(theme=theme badge=true selected=true)= 'Selected'
192 = ' '
193 +button(theme=theme badge=true disabled=true)= 'Disabled'
194 = ' '
195 +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled'
67 br 196 br
68 .l-button-group
69 +a-button(variant=theme icon='trash')
70 +a-button(variant=theme disabled=true icon='trash')
71 +a-button(variant=theme outline=true icon='trash')
72 +a-button(variant=theme outline=true disabled=true icon='trash')
73
74 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
75 .l-button-group
76 +a-button(variant=theme primary=true)= 'Button'
77 +a-button(variant=theme primary=true disabled=true)= 'Button'
78 +a-button(variant=theme primary=true outline=true)= 'Button'
79 +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
80 br 197 br
81 .l-button-group 198 +button(theme=theme quiet=true)= 'Idle'
82 +a-button(variant=theme primary=true icon='trash') 199 = ' '
83 +a-button(variant=theme primary=true disabled=true icon='trash') 200 +button(theme=theme quiet=true highlighted=true)= 'Highlighted'
84 +a-button(variant=theme primary=true outline=true icon='trash') 201 = ' '
85 +a-button(variant=theme primary=true outline=true disabled=true icon='trash') 202 +button(theme=theme quiet=true selected=true)= 'Selected'
203 = ' '
204 +button(theme=theme quiet=true disabled=true)= 'Disabled'
205 = ' '
206 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-09-13 22:17:34 +0000