summaryrefslogtreecommitdiffstats
path: root/tpl/views
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-25 18:29:21 +0100
committerVolpeon <git@volpeon.ink>2022-03-25 18:29:21 +0100
commit5e2696d9ae35b37a9f7d0fe1c52b93fb84570464 (patch)
treee3b22a889bd4f8a6679d76dbe85c3152173947a6 /tpl/views
parentFixed vertical rule (diff)
downloadiro-design-5e2696d9ae35b37a9f7d0fe1c52b93fb84570464.tar.gz
iro-design-5e2696d9ae35b37a9f7d0fe1c52b93fb84570464.tar.bz2
iro-design-5e2696d9ae35b37a9f7d0fe1c52b93fb84570464.zip
Split demo in :target views
Diffstat (limited to 'tpl/views')
-rw-r--r--tpl/views/action-button.pug55
-rw-r--r--tpl/views/action-menu.pug19
-rw-r--r--tpl/views/alert.pug12
-rw-r--r--tpl/views/avatar.pug53
-rw-r--r--tpl/views/backdrop.pug4
-rw-r--r--tpl/views/badge.pug6
-rw-r--r--tpl/views/button.pug20
-rw-r--r--tpl/views/checkbox.pug18
-rw-r--r--tpl/views/colored-links.pug9
-rw-r--r--tpl/views/dialog.pug29
-rw-r--r--tpl/views/field-label.pug58
-rw-r--r--tpl/views/form.pug29
-rw-r--r--tpl/views/heading.pug9
-rw-r--r--tpl/views/lightbox.pug14
-rw-r--r--tpl/views/list-group.pug15
-rw-r--r--tpl/views/menu.pug42
-rw-r--r--tpl/views/radio.pug18
-rw-r--r--tpl/views/rule.pug21
-rw-r--r--tpl/views/status-indicator.pug10
-rw-r--r--tpl/views/switch.pug18
-rw-r--r--tpl/views/table.pug101
-rw-r--r--tpl/views/text-field.pug22
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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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 @@
1mixin 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')
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 01:45:09 +0000