summaryrefslogtreecommitdiffstats
path: root/tpl/views/button.pug
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-07-23 08:34:23 +0200
committerVolpeon <git@volpeon.ink>2025-07-23 08:34:23 +0200
commit5c878876d3bdd2c7cd094871fa0644f3310bcec8 (patch)
tree0a41059f6983040f429d786ab0ad0dbf89764e96 /tpl/views/button.pug
parentFixed divider (diff)
downloadiro-design-5c878876d3bdd2c7cd094871fa0644f3310bcec8.tar.gz
iro-design-5c878876d3bdd2c7cd094871fa0644f3310bcec8.tar.bz2
iro-design-5c878876d3bdd2c7cd094871fa0644f3310bcec8.zip
Commit merge of button and badge into action-button (and rename it to button)
Diffstat (limited to 'tpl/views/button.pug')
-rw-r--r--tpl/views/button.pug203
1 files changed, 148 insertions, 55 deletions
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index da7531b..7e03e04 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -1,89 +1,182 @@
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'
14 = ' ' 34 = ' '
15 +a-button(outline=true)= 'Button' 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')
16 = ' ' 41 = ' '
17 +a-button(size='lg' outline=true)= 'Button' 42 +button(pill=true icon='trash')
18 = ' ' 43 = ' '
19 +a-button(size='xl' outline=true)= 'Button' 44 +button(pill=true icon='trash' size='lg')
45 = ' '
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'
54 = ' '
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'
66 = ' '
67 +button(quiet=true icon='trash')= 'Label'
27 = ' ' 68 = ' '
28 +a-button(postIcon='arrow-right' size='xl')= 'Button' 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(selected=true)= 'Selected'
34 +a-button(outline=true)= 'Button' 75 = ' '
35 +a-button(outline=true disabled=true)= 'Button' 76 +button(disabled=true)= 'Disabled'
77 = ' '
78 +button(selected=true disabled=true)= 'Selected + disabled'
36 br 79 br
37 br 80 br
38 .l-button-group 81 +button(static=true )= 'Idle'
39 +a-button(icon='trash') 82 = ' '
40 +a-button(disabled=true icon='trash') 83 +button(static=true selected=true)= 'Selected'
41 +a-button(outline=true icon='trash') 84 = ' '
42 +a-button(outline=true disabled=true icon='trash') 85 +button(static=true disabled=true)= 'Disabled'
86 = ' '
87 +button(static=true selected=true disabled=true)= 'Selected + disabled'
88 br
89 br
90 +button(quiet=true )= 'Idle'
91 = ' '
92 +button(quiet=true selected=true)= 'Selected'
93 = ' '
94 +button(quiet=true disabled=true)= 'Disabled'
95 = ' '
96 +button(quiet=true selected=true disabled=true)= 'Selected + disabled'
97
98 .c-box
99 +button(pill=true)= 'Idle'
100 = ' '
101 +button(pill=true selected=true)= 'Selected'
102 = ' '
103 +button(pill=true disabled=true)= 'Disabled'
104 = ' '
105 +button(pill=true selected=true disabled=true)= 'Selected + disabled'
106 br
107 br
108 +button(pill=true static=true)= 'Idle'
109 = ' '
110 +button(pill=true static=true selected=true)= 'Selected'
111 = ' '
112 +button(pill=true static=true disabled=true)= 'Disabled'
113 = ' '
114 +button(pill=true static=true selected=true disabled=true)= 'Selected + disabled'
115 br
116 br
117 +button(pill=true quiet=true)= 'Idle'
118 = ' '
119 +button(pill=true quiet=true selected=true)= 'Selected'
120 = ' '
121 +button(pill=true quiet=true disabled=true)= 'Disabled'
122 = ' '
123 +button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
43 124
44 each theme in ['primary', 'accent', 'negative'] 125 each theme, i in ['accent', 'positive', 'negative', 'warning']
45 .c-box 126 .c-box
46 .l-button-group 127 +button(theme=theme)= 'Idle'
47 +a-button(variant=theme)= 'Button' 128 = ' '
48 +a-button(variant=theme disabled=true)= 'Button' 129 +button(theme=theme selected=true)= 'Selected'
49 +a-button(variant=theme outline=true)= 'Button' 130 = ' '
50 +a-button(variant=theme outline=true disabled=true)= 'Button' 131 +button(theme=theme disabled=true)= 'Disabled'
132 = ' '
133 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
134 br
51 br 135 br
136 +button(theme=theme static=true)= 'Idle'
137 = ' '
138 +button(theme=theme static=true selected=true)= 'Selected'
139 = ' '
140 +button(theme=theme static=true disabled=true)= 'Disabled'
141 = ' '
142 +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
52 br 143 br
53 .l-button-group 144 br
54 +a-button(variant=theme icon='trash') 145 +button(theme=theme quiet=true)= 'Idle'
55 +a-button(variant=theme disabled=true icon='trash') 146 = ' '
56 +a-button(variant=theme outline=true icon='trash') 147 +button(theme=theme quiet=true selected=true)= 'Selected'
57 +a-button(variant=theme outline=true disabled=true icon='trash') 148 = ' '
149 +button(theme=theme quiet=true disabled=true)= 'Disabled'
150 = ' '
151 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
58 152
59 each theme in ['static-black', 'static-white'] 153 each theme in ['static-black', 'static-white']
60 - 154 -
61 const bg = theme.startsWith('static-black') ? 500 : 1000; 155 const bg = theme.startsWith('static-black') ? 500 : 1000;
62 156
63 .c-box(style=`background-color: var(--colors--blue-static--${bg});`) 157 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
64 .l-button-group 158 +button(theme=theme)= 'Idle'
65 +a-button(variant=theme)= 'Button' 159 = ' '
66 +a-button(variant=theme disabled=true)= 'Button' 160 +button(theme=theme selected=true)= 'Selected'
67 +a-button(variant=theme outline=true)= 'Button' 161 = ' '
68 +a-button(variant=theme outline=true disabled=true)= 'Button' 162 +button(theme=theme disabled=true)= 'Disabled'
163 = ' '
164 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
69 br 165 br
70 br 166 br
71 .l-button-group 167 +button(theme=theme static=true)= 'Idle'
72 +a-button(variant=theme icon='trash') 168 = ' '
73 +a-button(variant=theme disabled=true icon='trash') 169 +button(theme=theme static=true selected=true)= 'Selected'
74 +a-button(variant=theme outline=true icon='trash') 170 = ' '
75 +a-button(variant=theme outline=true disabled=true icon='trash') 171 +button(theme=theme static=true disabled=true)= 'Disabled'
76 172 = ' '
77 .c-box(style=`background-color: var(--colors--blue-static--${bg});`) 173 +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
78 .l-button-group
79 +a-button(variant=theme primary=true)= 'Button'
80 +a-button(variant=theme primary=true disabled=true)= 'Button'
81 +a-button(variant=theme primary=true outline=true)= 'Button'
82 +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
83 br 174 br
84 br 175 br
85 .l-button-group 176 +button(theme=theme quiet=true)= 'Idle'
86 +a-button(variant=theme primary=true icon='trash') 177 = ' '
87 +a-button(variant=theme primary=true disabled=true icon='trash') 178 +button(theme=theme quiet=true selected=true)= 'Selected'
88 +a-button(variant=theme primary=true outline=true icon='trash') 179 = ' '
89 +a-button(variant=theme primary=true outline=true disabled=true icon='trash') 180 +button(theme=theme quiet=true disabled=true)= 'Disabled'
181 = ' '
182 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 04:03:57 +0000