diff options
Diffstat (limited to 'tpl/views')
-rw-r--r-- | tpl/views/action-button.pug | 55 | ||||
-rw-r--r-- | tpl/views/action-menu.pug | 19 | ||||
-rw-r--r-- | tpl/views/alert.pug | 12 | ||||
-rw-r--r-- | tpl/views/avatar.pug | 53 | ||||
-rw-r--r-- | tpl/views/backdrop.pug | 4 | ||||
-rw-r--r-- | tpl/views/badge.pug | 6 | ||||
-rw-r--r-- | tpl/views/button.pug | 20 | ||||
-rw-r--r-- | tpl/views/checkbox.pug | 18 | ||||
-rw-r--r-- | tpl/views/colored-links.pug | 9 | ||||
-rw-r--r-- | tpl/views/dialog.pug | 29 | ||||
-rw-r--r-- | tpl/views/field-label.pug | 58 | ||||
-rw-r--r-- | tpl/views/form.pug | 29 | ||||
-rw-r--r-- | tpl/views/heading.pug | 9 | ||||
-rw-r--r-- | tpl/views/lightbox.pug | 14 | ||||
-rw-r--r-- | tpl/views/list-group.pug | 15 | ||||
-rw-r--r-- | tpl/views/menu.pug | 42 | ||||
-rw-r--r-- | tpl/views/radio.pug | 18 | ||||
-rw-r--r-- | tpl/views/rule.pug | 21 | ||||
-rw-r--r-- | tpl/views/status-indicator.pug | 10 | ||||
-rw-r--r-- | tpl/views/switch.pug | 18 | ||||
-rw-r--r-- | tpl/views/table.pug | 101 | ||||
-rw-r--r-- | tpl/views/text-field.pug | 22 |
22 files changed, 582 insertions, 0 deletions
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug new file mode 100644 index 0000000..7bffe72 --- /dev/null +++ b/tpl/views/action-button.pug | |||
@@ -0,0 +1,55 @@ | |||
1 | mixin view-action-button | ||
2 | +view('action-button', 'Action button') | ||
3 | .c-box | ||
4 | +action-button= 'Idle' | ||
5 | = ' ' | ||
6 | +action-button(selected=true)= 'Selected' | ||
7 | = ' ' | ||
8 | +action-button(disabled=true)= 'Disabled' | ||
9 | = ' ' | ||
10 | +action-button(selected=true disabled=true)= 'Selected + disabled' | ||
11 | br | ||
12 | br | ||
13 | +action-button(icon='trash')= 'Idle' | ||
14 | = ' ' | ||
15 | +action-button(icon='trash' selected=true)= 'Selected' | ||
16 | = ' ' | ||
17 | +action-button(icon='trash' disabled=true)= 'Disabled' | ||
18 | = ' ' | ||
19 | +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled' | ||
20 | br | ||
21 | br | ||
22 | +action-button(icon='trash') | ||
23 | = ' ' | ||
24 | +action-button(icon='trash' selected=true) | ||
25 | = ' ' | ||
26 | +action-button(icon='trash' disabled=true) | ||
27 | = ' ' | ||
28 | +action-button(icon='trash' selected=true disabled=true) | ||
29 | |||
30 | .c-box | ||
31 | +action-button(quiet=true )= 'Idle' | ||
32 | = ' ' | ||
33 | +action-button(quiet=true selected=true)= 'Selected' | ||
34 | = ' ' | ||
35 | +action-button(quiet=true disabled=true)= 'Disabled' | ||
36 | = ' ' | ||
37 | +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
38 | br | ||
39 | br | ||
40 | +action-button(quiet=true icon='trash')= 'Idle' | ||
41 | = ' ' | ||
42 | +action-button(quiet=true icon='trash' selected=true)= 'Selected' | ||
43 | = ' ' | ||
44 | +action-button(quiet=true icon='trash' disabled=true)= 'Disabled' | ||
45 | = ' ' | ||
46 | +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled' | ||
47 | br | ||
48 | br | ||
49 | +action-button(quiet=true icon='trash') | ||
50 | = ' ' | ||
51 | +action-button(quiet=true icon='trash' selected=true) | ||
52 | = ' ' | ||
53 | +action-button(quiet=true icon='trash' disabled=true) | ||
54 | = ' ' | ||
55 | +action-button(quiet=true icon='trash' selected=true disabled=true) | ||
diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug new file mode 100644 index 0000000..4f96934 --- /dev/null +++ b/tpl/views/action-menu.pug | |||
@@ -0,0 +1,19 @@ | |||
1 | mixin view-action-menu | ||
2 | +view('action-menu', 'Action menu') | ||
3 | .c-box | ||
4 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) | ||
5 | +action-button(quiet=true selected=true)= 'Menu' | ||
6 | +action-menu | ||
7 | +action-menu-slot(class='l-card l-card--flush') | ||
8 | +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block') | ||
9 | .l-card__block.l-card__block--main | ||
10 | strong.u-d-block= 'Volpeon' | ||
11 | small.u-d-block= '@volpeon@mk.vulpes.one' | ||
12 | +action-menu-separator | ||
13 | +action-menu-item(icon='user')= 'View profile' | ||
14 | +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' | ||
15 | +action-menu-separator | ||
16 | +action-menu-item(icon='trash' disabled=true)= 'Delete' | ||
17 | +action-menu-item(icon='bookmark')= 'Bookmark' | ||
18 | +action-menu-item(icon='tags')= 'Tags' | ||
19 | +action-menu-item(postIcon='chevron-right')= 'More' | ||
diff --git a/tpl/views/alert.pug b/tpl/views/alert.pug new file mode 100644 index 0000000..c176279 --- /dev/null +++ b/tpl/views/alert.pug | |||
@@ -0,0 +1,12 @@ | |||
1 | mixin view-alert | ||
2 | +view('alert', 'Alert') | ||
3 | .c-box | ||
4 | +alert= loremIpsum | ||
5 | br | ||
6 | +alert('primary')= loremIpsum | ||
7 | br | ||
8 | +alert('error')= loremIpsum | ||
9 | br | ||
10 | +alert('success')= loremIpsum | ||
11 | br | ||
12 | +alert('warning')= loremIpsum | ||
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug new file mode 100644 index 0000000..01aaf93 --- /dev/null +++ b/tpl/views/avatar.pug | |||
@@ -0,0 +1,53 @@ | |||
1 | mixin view-avatar | ||
2 | +view('avatar', 'Avatar') | ||
3 | .c-box | ||
4 | div(style={ display: 'flex', gap: '.3em' }) | ||
5 | +avatar | ||
6 | = 'Vo' | ||
7 | +avatar(status='green' hue=45) | ||
8 | = 'lp' | ||
9 | +avatar(src='avatar.png') | ||
10 | +avatar(src='avatar.png' status='red') | ||
11 | br | ||
12 | br | ||
13 | div(style={ display: 'flex', gap: '.3em' }) | ||
14 | +avatar(size='75' hue=90) | ||
15 | = 'eo' | ||
16 | +avatar(size='75' status='green' hue=135) | ||
17 | = 'n' | ||
18 | +avatar(size='75' src='avatar.png') | ||
19 | +avatar(size='75' src='avatar.png' status='red') | ||
20 | br | ||
21 | br | ||
22 | div(style={ display: 'flex', gap: '.3em' }) | ||
23 | +avatar(size='50' hue=180) | ||
24 | = 'V' | ||
25 | +avatar(size='50' hue=225) | ||
26 | = 'o' | ||
27 | +avatar(size='50' src='avatar.png') | ||
28 | |||
29 | .c-box | ||
30 | div(style={ display: 'flex', gap: '.3em' }) | ||
31 | +avatar(circle=true) | ||
32 | = 'Vo' | ||
33 | +avatar(circle=true status='green' hue=45) | ||
34 | = 'lp' | ||
35 | +avatar(circle=true src='avatar.png') | ||
36 | +avatar(circle=true src='avatar.png' status='red') | ||
37 | br | ||
38 | br | ||
39 | div(style={ display: 'flex', gap: '.3em' }) | ||
40 | +avatar(circle=true size='75' hue=90) | ||
41 | = 'eo' | ||
42 | +avatar(circle=true size='75' status='green' hue=135) | ||
43 | = 'n' | ||
44 | +avatar(circle=true size='75' src='avatar.png') | ||
45 | +avatar(circle=true size='75' src='avatar.png' status='red') | ||
46 | br | ||
47 | br | ||
48 | div(style={ display: 'flex', gap: '.3em' }) | ||
49 | +avatar(circle=true size='50' hue=180) | ||
50 | = 'V' | ||
51 | +avatar(circle=true size='50' hue=225) | ||
52 | = 'o' | ||
53 | +avatar(circle=true size='50' src='avatar.png') | ||
diff --git a/tpl/views/backdrop.pug b/tpl/views/backdrop.pug new file mode 100644 index 0000000..d4fadce --- /dev/null +++ b/tpl/views/backdrop.pug | |||
@@ -0,0 +1,4 @@ | |||
1 | mixin view-backdrop | ||
2 | +view('backdrop', 'Backdrop') | ||
3 | .c-box | ||
4 | +backdrop | ||
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug new file mode 100644 index 0000000..9b2c3e6 --- /dev/null +++ b/tpl/views/badge.pug | |||
@@ -0,0 +1,6 @@ | |||
1 | mixin view-badge | ||
2 | +view('badge', 'Badge') | ||
3 | .c-box | ||
4 | +badge= '100' | ||
5 | = ' ' | ||
6 | +badge('accent')= 'new' | ||
diff --git a/tpl/views/button.pug b/tpl/views/button.pug new file mode 100644 index 0000000..9deba01 --- /dev/null +++ b/tpl/views/button.pug | |||
@@ -0,0 +1,20 @@ | |||
1 | mixin view-button | ||
2 | +view('button', 'Button') | ||
3 | .c-box | ||
4 | .l-button-group | ||
5 | +a-button(variant='accent')= 'Button' | ||
6 | +a-button(variant='accent' disabled=true)= 'Button' | ||
7 | +a-button(variant='accent' outline=true)= 'Button' | ||
8 | +a-button(variant='accent' outline=true disabled=true)= 'Button' | ||
9 | br | ||
10 | .l-button-group | ||
11 | +a-button(variant='primary')= 'Button' | ||
12 | +a-button(variant='primary' disabled=true)= 'Button' | ||
13 | +a-button(variant='primary' outline=true)= 'Button' | ||
14 | +a-button(variant='primary' outline=true disabled=true)= 'Button' | ||
15 | br | ||
16 | .l-button-group | ||
17 | +a-button(variant='secondary')= 'Button' | ||
18 | +a-button(variant='secondary' disabled=true)= 'Button' | ||
19 | +a-button(variant='secondary' outline=true)= 'Button' | ||
20 | +a-button(variant='secondary' outline=true disabled=true)= 'Button' | ||
diff --git a/tpl/views/checkbox.pug b/tpl/views/checkbox.pug new file mode 100644 index 0000000..8f925af --- /dev/null +++ b/tpl/views/checkbox.pug | |||
@@ -0,0 +1,18 @@ | |||
1 | mixin view-checkbox | ||
2 | +view('checkbox', 'Checkbox') | ||
3 | .c-box | ||
4 | +checkbox(indeterminate=true)= 'Cats' | ||
5 | +checkbox= 'Dogs' | ||
6 | +checkbox(checked=true)= 'Foxes' | ||
7 | br | ||
8 | +checkbox(indeterminate=true disabled=true)= 'Cats' | ||
9 | +checkbox(disabled=true)= 'Dogs' | ||
10 | +checkbox(checked=true disabled=true)= 'Foxes' | ||
11 | br | ||
12 | +checkbox(accent=true indeterminate=true)= 'Cats' | ||
13 | +checkbox(accent=true)= 'Dogs' | ||
14 | +checkbox(accent=true checked=true)= 'Foxes' | ||
15 | br | ||
16 | +checkbox(accent=true indeterminate=true disabled=true)= 'Cats' | ||
17 | +checkbox(accent=true disabled=true)= 'Dogs' | ||
18 | +checkbox(accent=true checked=true disabled=true)= 'Foxes' | ||
diff --git a/tpl/views/colored-links.pug b/tpl/views/colored-links.pug new file mode 100644 index 0000000..8951154 --- /dev/null +++ b/tpl/views/colored-links.pug | |||
@@ -0,0 +1,9 @@ | |||
1 | mixin view-colored-links | ||
2 | +view('colored-links', 'Colored links') | ||
3 | .c-box | ||
4 | .s-colored-links | ||
5 | = 'Lorem ipsum dolor ' | ||
6 | a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/' | ||
7 | = ' sit amet, consetetur ' | ||
8 | a(href='https://v.reddit.com/')= 'https://v.reddit.com/' | ||
9 | = ' sadipscing elitr, sed diam nonumy eirmod tempor' | ||
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug new file mode 100644 index 0000000..6aaead5 --- /dev/null +++ b/tpl/views/dialog.pug | |||
@@ -0,0 +1,29 @@ | |||
1 | mixin view-dialog | ||
2 | +view('dialog', 'Dialog') | ||
3 | .c-box | ||
4 | +backdrop | ||
5 | +dialog('Lorem ipsum') | ||
6 | +slot('body') | ||
7 | = loremIpsum | ||
8 | |||
9 | .c-box | ||
10 | +backdrop | ||
11 | +dialog('Lorem ipsum')(bodyClass='l-overflow') | ||
12 | +slot('body') | ||
13 | p.u-mt-0= loremIpsum | ||
14 | p= loremIpsum | ||
15 | p= loremIpsum | ||
16 | p= loremIpsum | ||
17 | p= loremIpsum | ||
18 | |||
19 | .c-box | ||
20 | +backdrop | ||
21 | +dialog('Lorem ipsum')(noRule=true) | ||
22 | +slot('sidebar') | ||
23 | +menu(style={ 'min-width': '10em' }) | ||
24 | +menu-header= '#channel' | ||
25 | +menu-item(icon='bookmark')= 'Bookmark' | ||
26 | +menu-item(icon='tags', selected=true)= 'Tags' | ||
27 | +menu-item(icon='hash')= 'achannel' | ||
28 | +slot('body') | ||
29 | p.u-mt-0= loremIpsum | ||
diff --git a/tpl/views/field-label.pug b/tpl/views/field-label.pug new file mode 100644 index 0000000..37ffb1a --- /dev/null +++ b/tpl/views/field-label.pug | |||
@@ -0,0 +1,58 @@ | |||
1 | mixin view-field-label | ||
2 | +view('field-label', 'Field label') | ||
3 | .c-box | ||
4 | +field-label('First name') | ||
5 | +text-field(placeholder='Placeholder') | ||
6 | br | ||
7 | +field-label('Password', 'At least 6 characters required') | ||
8 | +text-field(placeholder='Placeholder' type='password') | ||
9 | br | ||
10 | +field-label('Password', 'At least 6 characters required')(invalid=true) | ||
11 | +text-field(placeholder='Placeholder' type='password' invalid=true) | ||
12 | br | ||
13 | +field-label('First name')(disabled=true) | ||
14 | +text-field(placeholder='Placeholder' disabled=true) | ||
15 | br | ||
16 | +field-label('Password', 'At least 6 characters required')(disabled=true) | ||
17 | +text-field(placeholder='Placeholder' type='password' disabled=true) | ||
18 | br | ||
19 | +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true) | ||
20 | +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) | ||
21 | |||
22 | .c-box | ||
23 | +field-label('First name')(align='left' labelWidth='100px') | ||
24 | +text-field(placeholder='Placeholder') | ||
25 | br | ||
26 | +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px') | ||
27 | +text-field(placeholder='Placeholder' type='password') | ||
28 | br | ||
29 | +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true) | ||
30 | +text-field(placeholder='Placeholder' type='password' invalid=true) | ||
31 | br | ||
32 | +field-label('First name')(align='left' labelWidth='100px' disabled=true) | ||
33 | +text-field(placeholder='Placeholder' disabled=true) | ||
34 | br | ||
35 | +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true) | ||
36 | +text-field(placeholder='Placeholder' type='password' disabled=true) | ||
37 | br | ||
38 | +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true) | ||
39 | +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) | ||
40 | |||
41 | .c-box | ||
42 | +field-label('First name')(align='right' labelWidth='100px') | ||
43 | +text-field(placeholder='Placeholder') | ||
44 | br | ||
45 | +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px') | ||
46 | +text-field(placeholder='Placeholder' type='password') | ||
47 | br | ||
48 | +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true) | ||
49 | +text-field(placeholder='Placeholder' type='password' invalid=true) | ||
50 | br | ||
51 | +field-label('First name')(align='right' labelWidth='100px' disabled=true) | ||
52 | +text-field(placeholder='Placeholder' disabled=true) | ||
53 | br | ||
54 | +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true) | ||
55 | +text-field(placeholder='Placeholder' type='password' disabled=true) | ||
56 | br | ||
57 | +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true) | ||
58 | +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) | ||
diff --git a/tpl/views/form.pug b/tpl/views/form.pug new file mode 100644 index 0000000..859e9a6 --- /dev/null +++ b/tpl/views/form.pug | |||
@@ -0,0 +1,29 @@ | |||
1 | mixin view-form | ||
2 | +view('form', 'Form') | ||
3 | .c-box | ||
4 | +form(labelsAlign="left") | ||
5 | +form-item('Username') | ||
6 | +text-field(placeholder='Example: Volpeon') | ||
7 | |||
8 | +form-item('Password', 'At least 6 characters, all characters allowed') | ||
9 | +text-field(placeholder='Example: hunter2' type='password') | ||
10 | |||
11 | +form-item('Bio') | ||
12 | +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...') | ||
13 | |||
14 | +form-item('Favorite animal') | ||
15 | +radio(name="form-demo-1" checked=true)= 'Foxes' | ||
16 | +radio(name="form-demo-1")= 'Other' | ||
17 | |||
18 | +form-item('Notification settings') | ||
19 | +switch= 'In-app notifications' | ||
20 | br | ||
21 | +switch= 'Desktop notifications' | ||
22 | br | ||
23 | +switch= 'Email notifications' | ||
24 | |||
25 | +form-item('') | ||
26 | +checkbox= 'I\'ve read and accept the terms and conditions' | ||
27 | |||
28 | +form-item('') | ||
29 | +a-button(variant='primary')= 'Register' | ||
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug new file mode 100644 index 0000000..a49c93d --- /dev/null +++ b/tpl/views/heading.pug | |||
@@ -0,0 +1,9 @@ | |||
1 | mixin view-heading | ||
2 | +view('heading', 'Heading') | ||
3 | .c-box | ||
4 | +div-heading('xxl')= 'XXL Heading' | ||
5 | +div-heading('xl')= 'XL Heading' | ||
6 | +div-heading('lg')= 'LG Heading' | ||
7 | +div-heading('md')= 'MD Heading' | ||
8 | +div-heading('sm')= 'SM Heading' | ||
9 | +div-heading('xs')= 'XS Heading' | ||
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug new file mode 100644 index 0000000..174e904 --- /dev/null +++ b/tpl/views/lightbox.pug | |||
@@ -0,0 +1,14 @@ | |||
1 | mixin view-lightbox | ||
2 | +view('lightbox', 'Lightbox') | ||
3 | .c-box | ||
4 | +backdrop(class='t-dark') | ||
5 | +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) | ||
6 | = "Let's try multiple links! " | ||
7 | a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") | ||
8 | = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" | ||
9 | = ' ' | ||
10 | a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c") | ||
11 | = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c" | ||
12 | = ' ' | ||
13 | a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") | ||
14 | = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" | ||
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug new file mode 100644 index 0000000..970f0fb --- /dev/null +++ b/tpl/views/list-group.pug | |||
@@ -0,0 +1,15 @@ | |||
1 | mixin view-list-group | ||
2 | +view('list-group', 'List group') | ||
3 | .c-box | ||
4 | +list-group | ||
5 | +list-group-item= 'First item' | ||
6 | +list-group-item= 'Second item' | ||
7 | +list-group-item= 'Third item' | ||
8 | +list-group-item= 'Fourth item' | ||
9 | |||
10 | .c-box | ||
11 | +list-group | ||
12 | +list-group-item(action=true)= 'First item' | ||
13 | +list-group-item(action=true)= 'Second item' | ||
14 | +list-group-item(action=true)= 'Third item' | ||
15 | +list-group-item(action=true)= 'Fourth item' | ||
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug new file mode 100644 index 0000000..a255999 --- /dev/null +++ b/tpl/views/menu.pug | |||
@@ -0,0 +1,42 @@ | |||
1 | mixin view-menu | ||
2 | +view('menu', 'Menu') | ||
3 | .c-box | ||
4 | div(style={ display: 'flex', gap: '3rem' }) | ||
5 | +menu | ||
6 | +menu-header= 'Category 1' | ||
7 | +menu-item= 'Mark as away' | ||
8 | +menu-item= 'Delete' | ||
9 | +menu-separator | ||
10 | +menu-header= 'Category 2' | ||
11 | +menu-item(icon='bookmark')= 'Bookmark' | ||
12 | +menu-item(icon='tags')= 'Tags' | ||
13 | |||
14 | +menu | ||
15 | +menu-item | ||
16 | strong= 'Bouncer' | ||
17 | +menu-separator | ||
18 | +menu-item | ||
19 | strong= 'Libera' | ||
20 | +menu-item(icon='hash')= 'achannel' | ||
21 | +menu-item(icon='hash')= 'kitsuneirc' | ||
22 | +menu-item(icon='green' iconIsStatus=true)= 'volpeon' | ||
23 | +menu-item(icon='red' iconIsStatus=true)= 'someone' | ||
24 | +menu-separator | ||
25 | +menu-item | ||
26 | strong= 'Ergo Testnet' | ||
27 | +menu-separator | ||
28 | +menu-item | ||
29 | strong= 'NixNet' | ||
30 | |||
31 | +menu | ||
32 | +menu-header= 'Operators' | ||
33 | +menu-item | ||
34 | +user-card('volpeon', 0) | ||
35 | +menu-item | ||
36 | +user-card('curiousfox', 90) | ||
37 | +menu-separator | ||
38 | +menu-header= 'Moderators' | ||
39 | +menu-item | ||
40 | +user-card('user3567', 135) | ||
41 | +menu-item | ||
42 | +user-card('johndoe', 270) | ||
diff --git a/tpl/views/radio.pug b/tpl/views/radio.pug new file mode 100644 index 0000000..283bb4e --- /dev/null +++ b/tpl/views/radio.pug | |||
@@ -0,0 +1,18 @@ | |||
1 | mixin view-radio | ||
2 | +view('radio', 'Radio') | ||
3 | .c-box | ||
4 | +radio(name="radio-demo-1")= 'Cats' | ||
5 | +radio(name="radio-demo-1")= 'Dogs' | ||
6 | +radio(name="radio-demo-1" checked=true)= 'Foxes' | ||
7 | br | ||
8 | +radio(name="radio-demo-2" disabled=true)= 'Cats' | ||
9 | +radio(name="radio-demo-2" disabled=true)= 'Dogs' | ||
10 | +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes' | ||
11 | br | ||
12 | +radio(accent=true name="radio-demo-3")= 'Cats' | ||
13 | +radio(accent=true name="radio-demo-3")= 'Dogs' | ||
14 | +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes' | ||
15 | br | ||
16 | +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats' | ||
17 | +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs' | ||
18 | +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes' | ||
diff --git a/tpl/views/rule.pug b/tpl/views/rule.pug new file mode 100644 index 0000000..495c804 --- /dev/null +++ b/tpl/views/rule.pug | |||
@@ -0,0 +1,21 @@ | |||
1 | mixin view-rule | ||
2 | +view('rule', 'Rule') | ||
3 | .c-box | ||
4 | +div-heading('lg')= 'Heading' | ||
5 | +rule('strong') | ||
6 | p= loremIpsum | ||
7 | |||
8 | .c-box | ||
9 | +div-heading('sm')= 'Heading' | ||
10 | +rule('medium') | ||
11 | p= loremIpsum | ||
12 | |||
13 | .c-box | ||
14 | +div-heading('xs')= 'Heading' | ||
15 | +rule('faint') | ||
16 | p= loremIpsum | ||
17 | |||
18 | .c-box | ||
19 | +rule('strong')= 'Strong' | ||
20 | +rule('medium')= 'Medium' | ||
21 | +rule('faint')= 'Faint' | ||
diff --git a/tpl/views/status-indicator.pug b/tpl/views/status-indicator.pug new file mode 100644 index 0000000..6d7ad30 --- /dev/null +++ b/tpl/views/status-indicator.pug | |||
@@ -0,0 +1,10 @@ | |||
1 | mixin view-status-indicator | ||
2 | +view('status-indicator', 'Status indicator') | ||
3 | .c-box | ||
4 | +status-indicator | ||
5 | = ' ' | ||
6 | +status-indicator('green') | ||
7 | = ' ' | ||
8 | +status-indicator('yellow') | ||
9 | = ' ' | ||
10 | +status-indicator('red') | ||
diff --git a/tpl/views/switch.pug b/tpl/views/switch.pug new file mode 100644 index 0000000..f51077d --- /dev/null +++ b/tpl/views/switch.pug | |||
@@ -0,0 +1,18 @@ | |||
1 | mixin view-switch | ||
2 | +view('switch', 'Switch') | ||
3 | .c-box | ||
4 | +switch= 'Cats' | ||
5 | +switch= 'Dogs' | ||
6 | +switch(checked=true)= 'Foxes' | ||
7 | br | ||
8 | +switch(disabled=true)= 'Cats' | ||
9 | +switch(disabled=true)= 'Dogs' | ||
10 | +switch(checked=true disabled=true)= 'Foxes' | ||
11 | br | ||
12 | +switch(accent=true)= 'Cats' | ||
13 | +switch(accent=true)= 'Dogs' | ||
14 | +switch(accent=true checked=true)= 'Foxes' | ||
15 | br | ||
16 | +switch(accent=true disabled=true)= 'Cats' | ||
17 | +switch(accent=true disabled=true)= 'Dogs' | ||
18 | +switch(accent=true checked=true disabled=true)= 'Foxes' | ||
diff --git a/tpl/views/table.pug b/tpl/views/table.pug new file mode 100644 index 0000000..a5f62a7 --- /dev/null +++ b/tpl/views/table.pug | |||
@@ -0,0 +1,101 @@ | |||
1 | mixin view-table | ||
2 | +view('table', 'Table') | ||
3 | .c-box | ||
4 | +table(interactive=true) | ||
5 | +table-head | ||
6 | +table-row | ||
7 | +table-head-cell= 'Title' | ||
8 | +table-head-cell= 'Title' | ||
9 | +table-head-cell= 'Title' | ||
10 | +table-body | ||
11 | +table-row | ||
12 | +table-cell= 'Row 1,1' | ||
13 | +table-cell= 'Row 1,2' | ||
14 | +table-cell= 'Row 1,3' | ||
15 | +table-row | ||
16 | +table-cell= 'Row 2,1' | ||
17 | +table-cell= 'Row 2,2' | ||
18 | +table-cell= 'Row 2,3' | ||
19 | +table-row | ||
20 | +table-cell= 'Row 3,1' | ||
21 | +table-cell= 'Row 3,2' | ||
22 | +table-cell= 'Row 3,3' | ||
23 | +table-row | ||
24 | +table-cell= 'Row 4,1' | ||
25 | +table-cell= 'Row 4,2' | ||
26 | +table-cell= 'Row 4,3' | ||
27 | |||
28 | .c-box | ||
29 | +table(flush=true) | ||
30 | +table-head | ||
31 | +table-row | ||
32 | +table-head-cell= 'Title' | ||
33 | +table-head-cell= 'Title' | ||
34 | +table-head-cell= 'Title' | ||
35 | +table-body | ||
36 | +table-row | ||
37 | +table-cell= 'Row 1,1' | ||
38 | +table-cell= 'Row 1,2' | ||
39 | +table-cell= 'Row 1,3' | ||
40 | +table-row | ||
41 | +table-cell= 'Row 2,1' | ||
42 | +table-cell= 'Row 2,2' | ||
43 | +table-cell= 'Row 2,3' | ||
44 | +table-row | ||
45 | +table-cell= 'Row 3,1' | ||
46 | +table-cell= 'Row 3,2' | ||
47 | +table-cell= 'Row 3,3' | ||
48 | +table-row | ||
49 | +table-cell= 'Row 4,1' | ||
50 | +table-cell= 'Row 4,2' | ||
51 | +table-cell= 'Row 4,3' | ||
52 | |||
53 | .c-box | ||
54 | +table(box=true) | ||
55 | +table-head | ||
56 | +table-row | ||
57 | +table-head-cell= 'Title' | ||
58 | +table-head-cell= 'Title' | ||
59 | +table-head-cell= 'Title' | ||
60 | +table-body | ||
61 | +table-row | ||
62 | +table-cell(divider=true)= 'Row 1,1' | ||
63 | +table-cell= 'Row 1,2' | ||
64 | +table-cell= 'Row 1,3' | ||
65 | +table-row | ||
66 | +table-cell(divider=true)= 'Row 2,1' | ||
67 | +table-cell= 'Row 2,2' | ||
68 | +table-cell= 'Row 2,3' | ||
69 | +table-row | ||
70 | +table-cell(divider=true)= 'Row 3,1' | ||
71 | +table-cell= 'Row 3,2' | ||
72 | +table-cell= 'Row 3,3' | ||
73 | +table-row | ||
74 | +table-cell(divider=true)= 'Row 4,1' | ||
75 | +table-cell= 'Row 4,2' | ||
76 | +table-cell= 'Row 4,3' | ||
77 | |||
78 | .c-box | ||
79 | +table(box=true, size50=true) | ||
80 | +table-head | ||
81 | +table-row | ||
82 | +table-head-cell= 'Title' | ||
83 | +table-head-cell= 'Title' | ||
84 | +table-head-cell= 'Title' | ||
85 | +table-body | ||
86 | +table-row | ||
87 | +table-cell= 'Row 1,1' | ||
88 | +table-cell= 'Row 1,2' | ||
89 | +table-cell= 'Row 1,3' | ||
90 | +table-row | ||
91 | +table-cell= 'Row 2,1' | ||
92 | +table-cell= 'Row 2,2' | ||
93 | +table-cell= 'Row 2,3' | ||
94 | +table-row | ||
95 | +table-cell= 'Row 3,1' | ||
96 | +table-cell= 'Row 3,2' | ||
97 | +table-cell= 'Row 3,3' | ||
98 | +table-row | ||
99 | +table-cell= 'Row 4,1' | ||
100 | +table-cell= 'Row 4,2' | ||
101 | +table-cell= 'Row 4,3' | ||
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug new file mode 100644 index 0000000..0ba84be --- /dev/null +++ b/tpl/views/text-field.pug | |||
@@ -0,0 +1,22 @@ | |||
1 | mixin view-text-field | ||
2 | +view('text-field', 'Text field') | ||
3 | .c-box | ||
4 | div(style={ display: 'flex', gap: '1rem' }) | ||
5 | +text-field(placeholder='Placeholder') | ||
6 | +text-field(value='Just landed in L.A.') | ||
7 | +text-field(value='Readonly' readonly=true) | ||
8 | +text-field(value='Incorrect input' pattern='a+' required=true) | ||
9 | br | ||
10 | div(style={ display: 'flex', gap: '1rem' }) | ||
11 | +text-field(placeholder='Placeholder' disabled=true) | ||
12 | +text-field(value='Just landed in L.A.' disabled=true) | ||
13 | +text-field(value='Readonly' readonly=true disabled=true) | ||
14 | +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) | ||
15 | br | ||
16 | div | ||
17 | +text-field(placeholder='Just landed in L.A.') | ||
18 | +slot('pre') | ||
19 | +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon' | ||
20 | +slot('post') | ||
21 | +action-button(quiet=true icon='smile' class='l-card__block') | ||
22 | +action-button(quiet=true icon='send' class='l-card__block') | ||