From 5e2696d9ae35b37a9f7d0fe1c52b93fb84570464 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 25 Mar 2022 18:29:21 +0100 Subject: Split demo in :target views --- tpl/views/action-button.pug | 55 ++++++++++++++++++++++ tpl/views/action-menu.pug | 19 ++++++++ tpl/views/alert.pug | 12 +++++ tpl/views/avatar.pug | 53 +++++++++++++++++++++ tpl/views/backdrop.pug | 4 ++ tpl/views/badge.pug | 6 +++ tpl/views/button.pug | 20 ++++++++ tpl/views/checkbox.pug | 18 ++++++++ tpl/views/colored-links.pug | 9 ++++ tpl/views/dialog.pug | 29 ++++++++++++ tpl/views/field-label.pug | 58 +++++++++++++++++++++++ tpl/views/form.pug | 29 ++++++++++++ tpl/views/heading.pug | 9 ++++ tpl/views/lightbox.pug | 14 ++++++ tpl/views/list-group.pug | 15 ++++++ tpl/views/menu.pug | 42 +++++++++++++++++ tpl/views/radio.pug | 18 ++++++++ tpl/views/rule.pug | 21 +++++++++ tpl/views/status-indicator.pug | 10 ++++ tpl/views/switch.pug | 18 ++++++++ tpl/views/table.pug | 101 +++++++++++++++++++++++++++++++++++++++++ tpl/views/text-field.pug | 22 +++++++++ 22 files changed, 582 insertions(+) create mode 100644 tpl/views/action-button.pug create mode 100644 tpl/views/action-menu.pug create mode 100644 tpl/views/alert.pug create mode 100644 tpl/views/avatar.pug create mode 100644 tpl/views/backdrop.pug create mode 100644 tpl/views/badge.pug create mode 100644 tpl/views/button.pug create mode 100644 tpl/views/checkbox.pug create mode 100644 tpl/views/colored-links.pug create mode 100644 tpl/views/dialog.pug create mode 100644 tpl/views/field-label.pug create mode 100644 tpl/views/form.pug create mode 100644 tpl/views/heading.pug create mode 100644 tpl/views/lightbox.pug create mode 100644 tpl/views/list-group.pug create mode 100644 tpl/views/menu.pug create mode 100644 tpl/views/radio.pug create mode 100644 tpl/views/rule.pug create mode 100644 tpl/views/status-indicator.pug create mode 100644 tpl/views/switch.pug create mode 100644 tpl/views/table.pug create mode 100644 tpl/views/text-field.pug (limited to 'tpl/views') 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 @@ +mixin view-action-button + +view('action-button', 'Action button') + .c-box + +action-button= 'Idle' + = ' ' + +action-button(selected=true)= 'Selected' + = ' ' + +action-button(disabled=true)= 'Disabled' + = ' ' + +action-button(selected=true disabled=true)= 'Selected + disabled' + br + br + +action-button(icon='trash')= 'Idle' + = ' ' + +action-button(icon='trash' selected=true)= 'Selected' + = ' ' + +action-button(icon='trash' disabled=true)= 'Disabled' + = ' ' + +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled' + br + br + +action-button(icon='trash') + = ' ' + +action-button(icon='trash' selected=true) + = ' ' + +action-button(icon='trash' disabled=true) + = ' ' + +action-button(icon='trash' selected=true disabled=true) + + .c-box + +action-button(quiet=true )= 'Idle' + = ' ' + +action-button(quiet=true selected=true)= 'Selected' + = ' ' + +action-button(quiet=true disabled=true)= 'Disabled' + = ' ' + +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' + br + br + +action-button(quiet=true icon='trash')= 'Idle' + = ' ' + +action-button(quiet=true icon='trash' selected=true)= 'Selected' + = ' ' + +action-button(quiet=true icon='trash' disabled=true)= 'Disabled' + = ' ' + +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled' + br + br + +action-button(quiet=true icon='trash') + = ' ' + +action-button(quiet=true icon='trash' selected=true) + = ' ' + +action-button(quiet=true icon='trash' disabled=true) + = ' ' + +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 @@ +mixin view-action-menu + +view('action-menu', 'Action menu') + .c-box + div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) + +action-button(quiet=true selected=true)= 'Menu' + +action-menu + +action-menu-slot(class='l-card l-card--flush') + +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block') + .l-card__block.l-card__block--main + strong.u-d-block= 'Volpeon' + small.u-d-block= '@volpeon@mk.vulpes.one' + +action-menu-separator + +action-menu-item(icon='user')= 'View profile' + +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' + +action-menu-separator + +action-menu-item(icon='trash' disabled=true)= 'Delete' + +action-menu-item(icon='bookmark')= 'Bookmark' + +action-menu-item(icon='tags')= 'Tags' + +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 @@ +mixin view-alert + +view('alert', 'Alert') + .c-box + +alert= loremIpsum + br + +alert('primary')= loremIpsum + br + +alert('error')= loremIpsum + br + +alert('success')= loremIpsum + br + +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 @@ +mixin view-avatar + +view('avatar', 'Avatar') + .c-box + div(style={ display: 'flex', gap: '.3em' }) + +avatar + = 'Vo' + +avatar(status='green' hue=45) + = 'lp' + +avatar(src='avatar.png') + +avatar(src='avatar.png' status='red') + br + br + div(style={ display: 'flex', gap: '.3em' }) + +avatar(size='75' hue=90) + = 'eo' + +avatar(size='75' status='green' hue=135) + = 'n' + +avatar(size='75' src='avatar.png') + +avatar(size='75' src='avatar.png' status='red') + br + br + div(style={ display: 'flex', gap: '.3em' }) + +avatar(size='50' hue=180) + = 'V' + +avatar(size='50' hue=225) + = 'o' + +avatar(size='50' src='avatar.png') + + .c-box + div(style={ display: 'flex', gap: '.3em' }) + +avatar(circle=true) + = 'Vo' + +avatar(circle=true status='green' hue=45) + = 'lp' + +avatar(circle=true src='avatar.png') + +avatar(circle=true src='avatar.png' status='red') + br + br + div(style={ display: 'flex', gap: '.3em' }) + +avatar(circle=true size='75' hue=90) + = 'eo' + +avatar(circle=true size='75' status='green' hue=135) + = 'n' + +avatar(circle=true size='75' src='avatar.png') + +avatar(circle=true size='75' src='avatar.png' status='red') + br + br + div(style={ display: 'flex', gap: '.3em' }) + +avatar(circle=true size='50' hue=180) + = 'V' + +avatar(circle=true size='50' hue=225) + = 'o' + +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 @@ +mixin view-backdrop + +view('backdrop', 'Backdrop') + .c-box + +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 @@ +mixin view-badge + +view('badge', 'Badge') + .c-box + +badge= '100' + = ' ' + +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 @@ +mixin view-button + +view('button', 'Button') + .c-box + .l-button-group + +a-button(variant='accent')= 'Button' + +a-button(variant='accent' disabled=true)= 'Button' + +a-button(variant='accent' outline=true)= 'Button' + +a-button(variant='accent' outline=true disabled=true)= 'Button' + br + .l-button-group + +a-button(variant='primary')= 'Button' + +a-button(variant='primary' disabled=true)= 'Button' + +a-button(variant='primary' outline=true)= 'Button' + +a-button(variant='primary' outline=true disabled=true)= 'Button' + br + .l-button-group + +a-button(variant='secondary')= 'Button' + +a-button(variant='secondary' disabled=true)= 'Button' + +a-button(variant='secondary' outline=true)= 'Button' + +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 @@ +mixin view-checkbox + +view('checkbox', 'Checkbox') + .c-box + +checkbox(indeterminate=true)= 'Cats' + +checkbox= 'Dogs' + +checkbox(checked=true)= 'Foxes' + br + +checkbox(indeterminate=true disabled=true)= 'Cats' + +checkbox(disabled=true)= 'Dogs' + +checkbox(checked=true disabled=true)= 'Foxes' + br + +checkbox(accent=true indeterminate=true)= 'Cats' + +checkbox(accent=true)= 'Dogs' + +checkbox(accent=true checked=true)= 'Foxes' + br + +checkbox(accent=true indeterminate=true disabled=true)= 'Cats' + +checkbox(accent=true disabled=true)= 'Dogs' + +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 @@ +mixin view-colored-links + +view('colored-links', 'Colored links') + .c-box + .s-colored-links + = 'Lorem ipsum dolor ' + a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/' + = ' sit amet, consetetur ' + a(href='https://v.reddit.com/')= 'https://v.reddit.com/' + = ' 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 @@ +mixin view-dialog + +view('dialog', 'Dialog') + .c-box + +backdrop + +dialog('Lorem ipsum') + +slot('body') + = loremIpsum + + .c-box + +backdrop + +dialog('Lorem ipsum')(bodyClass='l-overflow') + +slot('body') + p.u-mt-0= loremIpsum + p= loremIpsum + p= loremIpsum + p= loremIpsum + p= loremIpsum + + .c-box + +backdrop + +dialog('Lorem ipsum')(noRule=true) + +slot('sidebar') + +menu(style={ 'min-width': '10em' }) + +menu-header= '#channel' + +menu-item(icon='bookmark')= 'Bookmark' + +menu-item(icon='tags', selected=true)= 'Tags' + +menu-item(icon='hash')= 'achannel' + +slot('body') + 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 @@ +mixin view-field-label + +view('field-label', 'Field label') + .c-box + +field-label('First name') + +text-field(placeholder='Placeholder') + br + +field-label('Password', 'At least 6 characters required') + +text-field(placeholder='Placeholder' type='password') + br + +field-label('Password', 'At least 6 characters required')(invalid=true) + +text-field(placeholder='Placeholder' type='password' invalid=true) + br + +field-label('First name')(disabled=true) + +text-field(placeholder='Placeholder' disabled=true) + br + +field-label('Password', 'At least 6 characters required')(disabled=true) + +text-field(placeholder='Placeholder' type='password' disabled=true) + br + +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true) + +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) + + .c-box + +field-label('First name')(align='left' labelWidth='100px') + +text-field(placeholder='Placeholder') + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px') + +text-field(placeholder='Placeholder' type='password') + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true) + +text-field(placeholder='Placeholder' type='password' invalid=true) + br + +field-label('First name')(align='left' labelWidth='100px' disabled=true) + +text-field(placeholder='Placeholder' disabled=true) + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true) + +text-field(placeholder='Placeholder' type='password' disabled=true) + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true) + +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) + + .c-box + +field-label('First name')(align='right' labelWidth='100px') + +text-field(placeholder='Placeholder') + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px') + +text-field(placeholder='Placeholder' type='password') + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true) + +text-field(placeholder='Placeholder' type='password' invalid=true) + br + +field-label('First name')(align='right' labelWidth='100px' disabled=true) + +text-field(placeholder='Placeholder' disabled=true) + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true) + +text-field(placeholder='Placeholder' type='password' disabled=true) + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true) + +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 @@ +mixin view-form + +view('form', 'Form') + .c-box + +form(labelsAlign="left") + +form-item('Username') + +text-field(placeholder='Example: Volpeon') + + +form-item('Password', 'At least 6 characters, all characters allowed') + +text-field(placeholder='Example: hunter2' type='password') + + +form-item('Bio') + +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...') + + +form-item('Favorite animal') + +radio(name="form-demo-1" checked=true)= 'Foxes' + +radio(name="form-demo-1")= 'Other' + + +form-item('Notification settings') + +switch= 'In-app notifications' + br + +switch= 'Desktop notifications' + br + +switch= 'Email notifications' + + +form-item('') + +checkbox= 'I\'ve read and accept the terms and conditions' + + +form-item('') + +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 @@ +mixin view-heading + +view('heading', 'Heading') + .c-box + +div-heading('xxl')= 'XXL Heading' + +div-heading('xl')= 'XL Heading' + +div-heading('lg')= 'LG Heading' + +div-heading('md')= 'MD Heading' + +div-heading('sm')= 'SM Heading' + +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 @@ +mixin view-lightbox + +view('lightbox', 'Lightbox') + .c-box + +backdrop(class='t-dark') + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) + = "Let's try multiple links! " + a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") + = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" + = ' ' + a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c") + = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c" + = ' ' + a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") + = "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 @@ +mixin view-list-group + +view('list-group', 'List group') + .c-box + +list-group + +list-group-item= 'First item' + +list-group-item= 'Second item' + +list-group-item= 'Third item' + +list-group-item= 'Fourth item' + + .c-box + +list-group + +list-group-item(action=true)= 'First item' + +list-group-item(action=true)= 'Second item' + +list-group-item(action=true)= 'Third item' + +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 @@ +mixin view-menu + +view('menu', 'Menu') + .c-box + div(style={ display: 'flex', gap: '3rem' }) + +menu + +menu-header= 'Category 1' + +menu-item= 'Mark as away' + +menu-item= 'Delete' + +menu-separator + +menu-header= 'Category 2' + +menu-item(icon='bookmark')= 'Bookmark' + +menu-item(icon='tags')= 'Tags' + + +menu + +menu-item + strong= 'Bouncer' + +menu-separator + +menu-item + strong= 'Libera' + +menu-item(icon='hash')= 'achannel' + +menu-item(icon='hash')= 'kitsuneirc' + +menu-item(icon='green' iconIsStatus=true)= 'volpeon' + +menu-item(icon='red' iconIsStatus=true)= 'someone' + +menu-separator + +menu-item + strong= 'Ergo Testnet' + +menu-separator + +menu-item + strong= 'NixNet' + + +menu + +menu-header= 'Operators' + +menu-item + +user-card('volpeon', 0) + +menu-item + +user-card('curiousfox', 90) + +menu-separator + +menu-header= 'Moderators' + +menu-item + +user-card('user3567', 135) + +menu-item + +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 @@ +mixin view-radio + +view('radio', 'Radio') + .c-box + +radio(name="radio-demo-1")= 'Cats' + +radio(name="radio-demo-1")= 'Dogs' + +radio(name="radio-demo-1" checked=true)= 'Foxes' + br + +radio(name="radio-demo-2" disabled=true)= 'Cats' + +radio(name="radio-demo-2" disabled=true)= 'Dogs' + +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes' + br + +radio(accent=true name="radio-demo-3")= 'Cats' + +radio(accent=true name="radio-demo-3")= 'Dogs' + +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes' + br + +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats' + +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs' + +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 @@ +mixin view-rule + +view('rule', 'Rule') + .c-box + +div-heading('lg')= 'Heading' + +rule('strong') + p= loremIpsum + + .c-box + +div-heading('sm')= 'Heading' + +rule('medium') + p= loremIpsum + + .c-box + +div-heading('xs')= 'Heading' + +rule('faint') + p= loremIpsum + + .c-box + +rule('strong')= 'Strong' + +rule('medium')= 'Medium' + +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 @@ +mixin view-status-indicator + +view('status-indicator', 'Status indicator') + .c-box + +status-indicator + = ' ' + +status-indicator('green') + = ' ' + +status-indicator('yellow') + = ' ' + +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 @@ +mixin view-switch + +view('switch', 'Switch') + .c-box + +switch= 'Cats' + +switch= 'Dogs' + +switch(checked=true)= 'Foxes' + br + +switch(disabled=true)= 'Cats' + +switch(disabled=true)= 'Dogs' + +switch(checked=true disabled=true)= 'Foxes' + br + +switch(accent=true)= 'Cats' + +switch(accent=true)= 'Dogs' + +switch(accent=true checked=true)= 'Foxes' + br + +switch(accent=true disabled=true)= 'Cats' + +switch(accent=true disabled=true)= 'Dogs' + +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 @@ +mixin view-table + +view('table', 'Table') + .c-box + +table(interactive=true) + +table-head + +table-row + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-body + +table-row + +table-cell= 'Row 1,1' + +table-cell= 'Row 1,2' + +table-cell= 'Row 1,3' + +table-row + +table-cell= 'Row 2,1' + +table-cell= 'Row 2,2' + +table-cell= 'Row 2,3' + +table-row + +table-cell= 'Row 3,1' + +table-cell= 'Row 3,2' + +table-cell= 'Row 3,3' + +table-row + +table-cell= 'Row 4,1' + +table-cell= 'Row 4,2' + +table-cell= 'Row 4,3' + + .c-box + +table(flush=true) + +table-head + +table-row + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-body + +table-row + +table-cell= 'Row 1,1' + +table-cell= 'Row 1,2' + +table-cell= 'Row 1,3' + +table-row + +table-cell= 'Row 2,1' + +table-cell= 'Row 2,2' + +table-cell= 'Row 2,3' + +table-row + +table-cell= 'Row 3,1' + +table-cell= 'Row 3,2' + +table-cell= 'Row 3,3' + +table-row + +table-cell= 'Row 4,1' + +table-cell= 'Row 4,2' + +table-cell= 'Row 4,3' + + .c-box + +table(box=true) + +table-head + +table-row + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-body + +table-row + +table-cell(divider=true)= 'Row 1,1' + +table-cell= 'Row 1,2' + +table-cell= 'Row 1,3' + +table-row + +table-cell(divider=true)= 'Row 2,1' + +table-cell= 'Row 2,2' + +table-cell= 'Row 2,3' + +table-row + +table-cell(divider=true)= 'Row 3,1' + +table-cell= 'Row 3,2' + +table-cell= 'Row 3,3' + +table-row + +table-cell(divider=true)= 'Row 4,1' + +table-cell= 'Row 4,2' + +table-cell= 'Row 4,3' + + .c-box + +table(box=true, size50=true) + +table-head + +table-row + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-head-cell= 'Title' + +table-body + +table-row + +table-cell= 'Row 1,1' + +table-cell= 'Row 1,2' + +table-cell= 'Row 1,3' + +table-row + +table-cell= 'Row 2,1' + +table-cell= 'Row 2,2' + +table-cell= 'Row 2,3' + +table-row + +table-cell= 'Row 3,1' + +table-cell= 'Row 3,2' + +table-cell= 'Row 3,3' + +table-row + +table-cell= 'Row 4,1' + +table-cell= 'Row 4,2' + +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 @@ +mixin view-text-field + +view('text-field', 'Text field') + .c-box + div(style={ display: 'flex', gap: '1rem' }) + +text-field(placeholder='Placeholder') + +text-field(value='Just landed in L.A.') + +text-field(value='Readonly' readonly=true) + +text-field(value='Incorrect input' pattern='a+' required=true) + br + div(style={ display: 'flex', gap: '1rem' }) + +text-field(placeholder='Placeholder' disabled=true) + +text-field(value='Just landed in L.A.' disabled=true) + +text-field(value='Readonly' readonly=true disabled=true) + +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) + br + div + +text-field(placeholder='Just landed in L.A.') + +slot('pre') + +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon' + +slot('post') + +action-button(quiet=true icon='smile' class='l-card__block') + +action-button(quiet=true icon='send' class='l-card__block') -- cgit v1.2.3-70-g09d2