summaryrefslogtreecommitdiffstats
path: root/tpl/index.pug
diff options
context:
space:
mode:
Diffstat (limited to 'tpl/index.pug')
-rw-r--r--tpl/index.pug106
1 files changed, 63 insertions, 43 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index 510e09b..0b74ed8 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -17,6 +17,8 @@ include objects/status-indicator.pug
17include objects/avatar.pug 17include objects/avatar.pug
18include objects/action-menu.pug 18include objects/action-menu.pug
19include objects/menu.pug 19include objects/menu.pug
20include objects/backdrop.pug
21include objects/dialog.pug
20 22
21mixin box 23mixin box
22 +container(padX=true padY=true inPage=true theme="raised") 24 +container(padX=true padY=true inPage=true theme="raised")
@@ -44,46 +46,46 @@ html
44 body 46 body
45 +container(padX=true padY=true narrow=true) 47 +container(padX=true padY=true narrow=true)
46 48
47 +h1-heading(level='xl')= 'Heading' 49 +h1-heading('xl')= 'Heading'
48 +rule(level='medium') 50 +rule('medium')
49 51
50 +box 52 +box
51 +div-heading(level='xxl')= 'XXL Heading' 53 +div-heading('xxl')= 'XXL Heading'
52 +div-heading(level='xl')= 'XL Heading' 54 +div-heading('xl')= 'XL Heading'
53 +div-heading(level='lg')= 'LG Heading' 55 +div-heading('lg')= 'LG Heading'
54 +div-heading(level='md')= 'MD Heading' 56 +div-heading('md')= 'MD Heading'
55 +div-heading(level='sm')= 'SM Heading' 57 +div-heading('sm')= 'SM Heading'
56 +div-heading(level='xs')= 'XS Heading' 58 +div-heading('xs')= 'XS Heading'
57 59
58 //----------------------------------------- 60 //-----------------------------------------
59 61
60 +h1-heading(level='xl')= 'Rule' 62 +h1-heading('xl')= 'Rule'
61 +rule(level='medium') 63 +rule('medium')
62 64
63 +box 65 +box
64 +div-heading(level='lg')= 'Heading' 66 +div-heading('lg')= 'Heading'
65 +rule(level='strong') 67 +rule('strong')
66 p= loremIpsum 68 p= loremIpsum
67 69
68 +box 70 +box
69 +div-heading(level='sm')= 'Heading' 71 +div-heading('sm')= 'Heading'
70 +rule(level='medium') 72 +rule('medium')
71 p= loremIpsum 73 p= loremIpsum
72 74
73 +box 75 +box
74 +div-heading(level='xs')= 'Heading' 76 +div-heading('xs')= 'Heading'
75 +rule(level='faint') 77 +rule('faint')
76 p= loremIpsum 78 p= loremIpsum
77 79
78 +box 80 +box
79 +rule(level='strong')= 'Strong' 81 +rule('strong')= 'Strong'
80 +rule(level='medium')= 'Medium' 82 +rule('medium')= 'Medium'
81 +rule(level='faint')= 'Faint' 83 +rule('faint')= 'Faint'
82 84
83 //----------------------------------------- 85 //-----------------------------------------
84 86
85 +h1-heading(level='xl')= 'Button' 87 +h1-heading('xl')= 'Button'
86 +rule(level='medium') 88 +rule('medium')
87 89
88 +box 90 +box
89 +a-button(variant='accent')= 'Button' 91 +a-button(variant='accent')= 'Button'
@@ -114,8 +116,8 @@ html
114 116
115 //----------------------------------------- 117 //-----------------------------------------
116 118
117 +h1-heading(level='xl')= 'Text field' 119 +h1-heading('xl')= 'Text field'
118 +rule(level='medium') 120 +rule('medium')
119 121
120 +box 122 +box
121 +text-field(placeholder='Placeholder') 123 +text-field(placeholder='Placeholder')
@@ -143,8 +145,8 @@ html
143 145
144 //----------------------------------------- 146 //-----------------------------------------
145 147
146 +h1-heading(level='xl')= 'Field label' 148 +h1-heading('xl')= 'Field label'
147 +rule(level='medium') 149 +rule('medium')
148 150
149 +box 151 +box
150 +field-label('First name') 152 +field-label('First name')
@@ -220,8 +222,8 @@ html
220 222
221 //----------------------------------------- 223 //-----------------------------------------
222 224
223 +h1-heading(level='xl')= 'Radio' 225 +h1-heading('xl')= 'Radio'
224 +rule(level='medium') 226 +rule('medium')
225 227
226 +box 228 +box
227 +radio(name="radio-demo-1")= 'Cats' 229 +radio(name="radio-demo-1")= 'Cats'
@@ -242,8 +244,8 @@ html
242 244
243 //----------------------------------------- 245 //-----------------------------------------
244 246
245 +h1-heading(level='xl')= 'Checkbox' 247 +h1-heading('xl')= 'Checkbox'
246 +rule(level='medium') 248 +rule('medium')
247 249
248 +box 250 +box
249 +checkbox(indeterminate=true)= 'Cats' 251 +checkbox(indeterminate=true)= 'Cats'
@@ -264,8 +266,8 @@ html
264 266
265 //----------------------------------------- 267 //-----------------------------------------
266 268
267 +h1-heading(level='xl')= 'Switch' 269 +h1-heading('xl')= 'Switch'
268 +rule(level='medium') 270 +rule('medium')
269 271
270 +box 272 +box
271 +switch= 'Cats' 273 +switch= 'Cats'
@@ -286,8 +288,8 @@ html
286 288
287 //----------------------------------------- 289 //-----------------------------------------
288 290
289 +h1-heading(level='xl')= 'Form' 291 +h1-heading('xl')= 'Form'
290 +rule(level='medium') 292 +rule('medium')
291 293
292 +box 294 +box
293 +form(labelsAlign="left") 295 +form(labelsAlign="left")
@@ -319,8 +321,8 @@ html
319 321
320 //----------------------------------------- 322 //-----------------------------------------
321 323
322 +h1-heading(level='xl')= 'Action button' 324 +h1-heading('xl')= 'Action button'
323 +rule(level='medium') 325 +rule('medium')
324 326
325 +box 327 +box
326 +action-button= 'Idle' 328 +action-button= 'Idle'
@@ -378,8 +380,8 @@ html
378 380
379 //----------------------------------------- 381 //-----------------------------------------
380 382
381 +h1-heading(level='xl')= 'Status indicator' 383 +h1-heading('xl')= 'Status indicator'
382 +rule(level='medium') 384 +rule('medium')
383 385
384 +box 386 +box
385 +status-indicator 387 +status-indicator
@@ -392,8 +394,8 @@ html
392 394
393 //----------------------------------------- 395 //-----------------------------------------
394 396
395 +h1-heading(level='xl')= 'Avatar' 397 +h1-heading('xl')= 'Avatar'
396 +rule(level='medium') 398 +rule('medium')
397 399
398 +box 400 +box
399 div(style={ display: 'flex', gap: '.3em' }) 401 div(style={ display: 'flex', gap: '.3em' })
@@ -449,8 +451,8 @@ html
449 451
450 //----------------------------------------- 452 //-----------------------------------------
451 453
452 +h1-heading(level='xl')= 'Action menu' 454 +h1-heading('xl')= 'Action menu'
453 +rule(level='medium') 455 +rule('medium')
454 456
455 +box 457 +box
456 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) 458 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
@@ -472,8 +474,8 @@ html
472 474
473 //----------------------------------------- 475 //-----------------------------------------
474 476
475 +h1-heading(level='xl')= 'Menu' 477 +h1-heading('xl')= 'Menu'
476 +rule(level='medium') 478 +rule('medium')
477 479
478 +box 480 +box
479 div(style={ display: 'flex', gap: '3rem' }) 481 div(style={ display: 'flex', gap: '3rem' })
@@ -516,4 +518,22 @@ html
516 +menu-item 518 +menu-item
517 +user-card('johndoe', 270) 519 +user-card('johndoe', 270)
518 520
521 //-----------------------------------------
522
523 +h1-heading('xl')= 'Backdrop'
524 +rule('medium')
525
526 +box
527 +backdrop
528
529 //-----------------------------------------
530
531 +h1-heading('xl')= 'Dialog'
532 +rule('medium')
533
534 +box
535 +backdrop
536 +dialog('Lorem ipsum')
537 = loremIpsum
538
519 539