summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug331
-rw-r--r--tpl/layouts/container.pug18
2 files changed, 349 insertions, 0 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
new file mode 100644
index 0000000..2fb865d
--- /dev/null
+++ b/tpl/index.pug
@@ -0,0 +1,331 @@
1-
2 let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat'
3
4include layouts/container.pug
5include objects/heading.pug
6include objects/rule.pug
7include objects/button.pug
8include objects/icon.pug
9include objects/text-input.pug
10include objects/field-label.pug
11include objects/radio.pug
12include objects/checkbox.pug
13include objects/switch.pug
14include objects/form.pug
15include objects/action-button.pug
16
17mixin box
18 +container(padH=true padV=true theme='box' inPage=true)
19 block
20
21
22doctype html
23html
24 head
25 meta(charset='utf-8')
26 meta(name='viewport' content='width=device-width, initial-scale=1')
27 title iro-design
28
29 body(class='t-lighter')
30 +container(padH=true padV=true narrow=true)
31
32 +h1-heading(level='xl')= 'Heading'
33 +rule(level='medium')
34
35 +box
36 +div-heading(level='xxl')= 'XXL Heading'
37 +div-heading(level='xl')= 'XL Heading'
38 +div-heading(level='lg')= 'LG Heading'
39 +div-heading(level='md')= 'MD Heading'
40 +div-heading(level='sm')= 'SM Heading'
41 +div-heading(level='xs')= 'XS Heading'
42
43 //-----------------------------------------
44
45 +h1-heading(level='xl')= 'Rule'
46 +rule(level='medium')
47
48 +box
49 +div-heading(level='lg')= 'Heading'
50 +rule(level='strong')
51 p= loremIpsum
52
53 +box
54 +div-heading(level='sm')= 'Heading'
55 +rule(level='medium')
56 p= loremIpsum
57
58 +box
59 +div-heading(level='xs')= 'Heading'
60 +rule(level='faint')
61 p= loremIpsum
62
63 +box
64 +rule(level='strong')= 'Strong'
65 +rule(level='medium')= 'Medium'
66 +rule(level='faint')= 'Faint'
67
68 //-----------------------------------------
69
70 +h1-heading(level='xl')= 'Button'
71 +rule(level='medium')
72
73 +box
74 +a-button(variant='primary')= 'Button'
75 = ' '
76 +a-button(variant='primary' disabled=true)= 'Button'
77 br
78 br
79 +a-button(variant='secondary')= 'Button'
80 = ' '
81 +a-button(variant='secondary' disabled=true)= 'Button'
82
83 +box
84 +a-button(variant='primary' quiet=true)= 'Button'
85 = ' '
86 +a-button(variant='primary' quiet=true disabled=true)= 'Button'
87 br
88 br
89 +a-button(variant='secondary' quiet=true)= 'Button'
90 = ' '
91 +a-button(variant='secondary' quiet=true disabled=true)= 'Button'
92
93 //-----------------------------------------
94
95 +h1-heading(level='xl')= 'Text input'
96 +rule(level='medium')
97
98 +box
99 +text-input(placeholder='Placeholder')
100 br
101 br
102 +text-input(value='Just landed in L.A.')
103 br
104 br
105 +text-input(value='Readonly' readonly=true)
106 br
107 br
108 +text-input(value='Incorrect input' pattern='a+' required=true)
109 br
110 br
111 +text-input(placeholder='Placeholder' disabled=true)
112 br
113 br
114 +text-input(value='Just landed in L.A.' disabled=true)
115 br
116 br
117 +text-input(value='Readonly' readonly=true disabled=true)
118 br
119 br
120 +text-input(value='Incorrect input' pattern='a+' required=true disabled=true)
121
122 //-----------------------------------------
123
124 +h1-heading(level='xl')= 'Field label'
125 +rule(level='medium')
126
127 +box
128 +field-label('First name')
129 +text-input(placeholder='Placeholder')
130 br
131 br
132 +field-label('Password', 'At least 6 characters required')
133 +text-input(placeholder='Placeholder' type='password')
134 br
135 br
136 +field-label('Password', 'At least 6 characters required')(invalid=true)
137 +text-input(placeholder='Placeholder' type='password' invalid=true)
138 br
139 br
140 +field-label('First name')(disabled=true)
141 +text-input(placeholder='Placeholder' disabled=true)
142 br
143 br
144 +field-label('Password', 'At least 6 characters required')(disabled=true)
145 +text-input(placeholder='Placeholder' type='password' disabled=true)
146 br
147 br
148 +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
149 +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true)
150
151 +box
152 +field-label('First name')(align='left' labelWidth='100px')
153 +text-input(placeholder='Placeholder')
154 br
155 br
156 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
157 +text-input(placeholder='Placeholder' type='password')
158 br
159 br
160 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
161 +text-input(placeholder='Placeholder' type='password' invalid=true)
162 br
163 br
164 +field-label('First name')(align='left' labelWidth='100px' disabled=true)
165 +text-input(placeholder='Placeholder' disabled=true)
166 br
167 br
168 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
169 +text-input(placeholder='Placeholder' type='password' disabled=true)
170 br
171 br
172 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
173 +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true)
174
175 +box
176 +field-label('First name')(align='right' labelWidth='100px')
177 +text-input(placeholder='Placeholder')
178 br
179 br
180 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
181 +text-input(placeholder='Placeholder' type='password')
182 br
183 br
184 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
185 +text-input(placeholder='Placeholder' type='password' invalid=true)
186 br
187 br
188 +field-label('First name')(align='right' labelWidth='100px' disabled=true)
189 +text-input(placeholder='Placeholder' disabled=true)
190 br
191 br
192 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
193 +text-input(placeholder='Placeholder' type='password' disabled=true)
194 br
195 br
196 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
197 +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true)
198
199 //-----------------------------------------
200
201 +h1-heading(level='xl')= 'Radio'
202 +rule(level='medium')
203
204 +box
205 +radio(name="radio-demo-1")= 'Cats'
206 +radio(name="radio-demo-1")= 'Dogs'
207 +radio(name="radio-demo-1" checked=true)= 'Foxes'
208 br
209 +radio(name="radio-demo-2" disabled=true)= 'Cats'
210 +radio(name="radio-demo-2" disabled=true)= 'Dogs'
211 +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
212
213 //-----------------------------------------
214
215 +h1-heading(level='xl')= 'Checkbox'
216 +rule(level='medium')
217
218 +box
219 +checkbox(indeterminate=true)= 'Cats'
220 +checkbox= 'Dogs'
221 +checkbox(checked=true)= 'Foxes'
222 br
223 +checkbox(indeterminate=true disabled=true)= 'Cats'
224 +checkbox(disabled=true)= 'Dogs'
225 +checkbox(checked=true disabled=true)= 'Foxes'
226
227 //-----------------------------------------
228
229 +h1-heading(level='xl')= 'Switch'
230 +rule(level='medium')
231
232 +box
233 +switch= 'Cats'
234 +switch= 'Dogs'
235 +switch(checked=true)= 'Foxes'
236 br
237 +switch(disabled=true)= 'Cats'
238 +switch(disabled=true)= 'Dogs'
239 +switch(checked=true disabled=true)= 'Foxes'
240
241 //-----------------------------------------
242
243 +h1-heading(level='xl')= 'Form'
244 +rule(level='medium')
245
246 +box
247 +form
248 +form-item('Username')
249 +text-input(placeholder='Example: Feuerfuchs')
250
251 +form-item('Password', 'At least 6 characters, all characters allowed')
252 +text-input(placeholder='Example: hunter2' type='password')
253
254 +form-item('Bio')
255 +text-input(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
256
257 +form-item('Favorite animal')
258 +radio(name="form-demo-1" checked=true)= 'Foxes'
259 +radio(name="form-demo-1")= 'Other'
260
261 +form-item('Notification settings')
262 +switch= 'In-app notifications'
263 br
264 +switch= 'Desktop notifications'
265 br
266 +switch= 'Email notifications'
267
268 +form-item('')
269 +checkbox= 'I\'ve read and accept the terms and conditions'
270
271 +form-item('')
272 +a-button(variant='primary')= 'Register'
273
274 //-----------------------------------------
275
276 +h1-heading(level='xl')= 'Action button'
277 +rule(level='medium')
278
279 +box
280 +a-action-button= 'Idle'
281 = ' '
282 +a-action-button(selected=true)= 'Selected'
283 = ' '
284 +a-action-button(disabled=true)= 'Disabled'
285 = ' '
286 +a-action-button(selected=true disabled=true)= 'Selected + disabled'
287 br
288 br
289 +a-action-button(icon='trash')= 'Idle'
290 = ' '
291 +a-action-button(icon='trash' selected=true)= 'Selected'
292 = ' '
293 +a-action-button(icon='trash' disabled=true)= 'Disabled'
294 = ' '
295 +a-action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
296 br
297 br
298 +a-action-button(icon='trash')
299 = ' '
300 +a-action-button(icon='trash' selected=true)
301 = ' '
302 +a-action-button(icon='trash' disabled=true)
303 = ' '
304 +a-action-button(icon='trash' selected=true disabled=true)
305
306 +box
307 +a-action-button(quiet=true )= 'Idle'
308 = ' '
309 +a-action-button(quiet=true selected=true)= 'Selected'
310 = ' '
311 +a-action-button(quiet=true disabled=true)= 'Disabled'
312 = ' '
313 +a-action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
314 br
315 br
316 +a-action-button(quiet=true icon='trash')= 'Idle'
317 = ' '
318 +a-action-button(quiet=true icon='trash' selected=true)= 'Selected'
319 = ' '
320 +a-action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
321 = ' '
322 +a-action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
323 br
324 br
325 +a-action-button(quiet=true icon='trash')
326 = ' '
327 +a-action-button(quiet=true icon='trash' selected=true)
328 = ' '
329 +a-action-button(quiet=true icon='trash' disabled=true)
330 = ' '
331 +a-action-button(quiet=true icon='trash' selected=true disabled=true)
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
new file mode 100644
index 0000000..75e3b36
--- /dev/null
+++ b/tpl/layouts/container.pug
@@ -0,0 +1,18 @@
1mixin container
2 -
3 let classes = {
4 'l-container': true,
5 'l-container--padH': attributes.padH,
6 'l-container--padV': attributes.padV,
7 'l-container--narrow': attributes.narrow,
8 'l-container--smNarrow': attributes.smNarrow,
9 'l-container--inPage': attributes.inPage,
10 'l-container--themed': !!attributes.theme
11 }
12 if (!!attributes.theme) {
13 classes['t-' + attributes.theme] = true
14 }
15
16 div(class=classes)
17 .l-container__inner
18 block
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 05:48:12 +0000