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 --- package.json | 2 +- src/layouts/_container.scss | 6 - src_demo/_base.scss | 5 + src_demo/components/_box.scss | 16 + src_demo/components/_content.scss | 7 + src_demo/components/_sidebar.scss | 29 ++ src_demo/components/_view.scss | 12 + src_demo/index.scss | 17 + tpl/index.pug | 736 ++++---------------------------------- tpl/layouts/container.pug | 5 +- tpl/objects/dialog.pug | 2 +- tpl/objects/menu.pug | 2 +- 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 ++ 34 files changed, 737 insertions(+), 684 deletions(-) create mode 100644 src_demo/_base.scss create mode 100644 src_demo/components/_box.scss create mode 100644 src_demo/components/_content.scss create mode 100644 src_demo/components/_sidebar.scss create mode 100644 src_demo/components/_view.scss create mode 100644 src_demo/index.scss 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 diff --git a/package.json b/package.json index 13c1056..6047b47 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "build:assets": "cp -r static/* public/", "build:app": "pug tpl/index.pug -p tpl --out public/", "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-left chevron-right hash x send smile public/icons.svg", - "build:style": "sass --load-path=node_modules src/index.scss public/style.css", + "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", "lint:style": "stylelint \"src/**/*.scss\"", "fix:style": "stylelint \"src/**/*.scss\" --fix", "serve": "python -m http.server --bind 127.0.0.1 --directory public 8000" diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index 26ba16f..3f81758 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -9,7 +9,6 @@ --sm-content-width: iro.fn-px-to-rem(360px), --pad-x: fn.global-dim(--size --700), --pad-y: fn.global-dim(--size --700), - --in-page-spacing-y: fn.global-dim(--size --700), ) ), 'dims'); @@ -78,10 +77,5 @@ } } } - - @include iro.bem-modifier('in-page') { - margin-top: fn.dim(--in-page-spacing-y); - margin-bottom: fn.dim(--in-page-spacing-y); - } } } diff --git a/src_demo/_base.scss b/src_demo/_base.scss new file mode 100644 index 0000000..8dcd789 --- /dev/null +++ b/src_demo/_base.scss @@ -0,0 +1,5 @@ +body { + display: grid; + grid-template-columns: auto 1fr; + grid-template-areas: 'sidebar content'; +} diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss new file mode 100644 index 0000000..e983f2c --- /dev/null +++ b/src_demo/components/_box.scss @@ -0,0 +1,16 @@ +@use 'iro-sass/src/index' as iro; +@use '../../src/functions' as fn; + +@include iro.props-namespace('box') { + @include iro.props-store(( + --colors: ( + --border: fn.global-color(--obj), + ), + ), 'colors'); + + @include iro.bem-component(iro.props-namespace()) { + margin: 2em 0; + padding: 2em; + border: 1px solid fn.color(--border); + } +} diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss new file mode 100644 index 0000000..6045e4b --- /dev/null +++ b/src_demo/components/_content.scss @@ -0,0 +1,7 @@ +@use 'iro-sass/src/index' as iro; + +@include iro.props-namespace('content') { + @include iro.bem-component(iro.props-namespace()) { + grid-area: content; + } +} diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss new file mode 100644 index 0000000..9cff3c8 --- /dev/null +++ b/src_demo/components/_sidebar.scss @@ -0,0 +1,29 @@ +@use 'iro-sass/src/index' as iro; +@use '../../src/functions' as fn; + +@include iro.props-namespace('sidebar') { + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--bg), + --border: fn.global-color(--obj), + --icon: fn.global-color(--fg-hi), + --group-header-fg: fn.global-color(--fg-hi), + ), + ), 'colors'); + + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--bg-hi), + --border: fn.global-color(--bg-hi), + ), + ), 'colors-dark'); + + @include iro.bem-component(iro.props-namespace()) { + grid-area: sidebar; + min-width: 10em; + padding: .6em; + overflow: auto; + border-right: 1px solid fn.color(--border); + background-color: fn.color(--bg); + } +} diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss new file mode 100644 index 0000000..8086280 --- /dev/null +++ b/src_demo/components/_view.scss @@ -0,0 +1,12 @@ +@use 'iro-sass/src/index' as iro; +@use '../../src/functions' as fn; + +@include iro.props-namespace('view') { + @include iro.bem-component(iro.props-namespace()) { + display: none; + + &:target { + display: block; + } + } +} diff --git a/src_demo/index.scss b/src_demo/index.scss new file mode 100644 index 0000000..2a442bd --- /dev/null +++ b/src_demo/index.scss @@ -0,0 +1,17 @@ +@use '../src/declare-vars'; + +@use '../src/base'; +@use 'base' as demo-base; + +@use 'components/sidebar'; +@use 'components/content'; +@use 'components/box'; +@use 'components/view'; + +@use '../src/layouts'; +@use '../src/objects'; +@use '../src/scopes'; +@use '../src/utils'; + +@use '../src/apply-vars'; + diff --git a/tpl/index.pug b/tpl/index.pug index 7c0c3ff..400ec64 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -1,5 +1,8 @@ - - let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'; + const loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'; + + const views = []; + include layouts/container.pug @@ -25,8 +28,13 @@ include objects/list-group.pug include objects/table.pug include objects/alert.pug -mixin box - +container(padX=true padY=true inPage=true) +mixin view(id, title) + - + views.push({ id, title }); + + +container(padX=true padY=true narrow=true)(class='c-view' id=id) + +h1-heading('xl')= title + +rule('medium') block mixin user-card(name, hue) @@ -38,6 +46,29 @@ mixin user-card(name, hue) = avaName = name +include views/heading.pug +include views/rule.pug +include views/colored-links.pug +include views/badge.pug +include views/button.pug +include views/text-field.pug +include views/field-label.pug +include views/radio.pug +include views/checkbox.pug +include views/switch.pug +include views/form.pug +include views/action-button.pug +include views/status-indicator.pug +include views/avatar.pug +include views/action-menu.pug +include views/menu.pug +include views/backdrop.pug +include views/dialog.pug +include views/lightbox.pug +include views/list-group.pug +include views/table.pug +include views/alert.pug + doctype html html @@ -49,674 +80,31 @@ html script(src="script.js") body - +container(padX=true padY=true narrow=true) - - +h1-heading('xl')= 'Heading' - +rule('medium') - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Rule' - +rule('medium') - - +box - +div-heading('lg')= 'Heading' - +rule('strong') - p= loremIpsum - - +box - +div-heading('sm')= 'Heading' - +rule('medium') - p= loremIpsum - - +box - +div-heading('xs')= 'Heading' - +rule('faint') - p= loremIpsum - - +box - +rule('strong')= 'Strong' - +rule('medium')= 'Medium' - +rule('faint')= 'Faint' - - //----------------------------------------- - - +h1-heading('xl')= 'Colored links' - +rule('medium') - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Badge' - +rule('medium') - - +box - +badge= '100' - = ' ' - +badge('accent')= 'new' - - //----------------------------------------- - - +h1-heading('xl')= 'Button' - +rule('medium') - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Text field' - +rule('medium') - - +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') - - //----------------------------------------- - - +h1-heading('xl')= 'Field label' - +rule('medium') - - +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) - - +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) - - +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) - - //----------------------------------------- - - +h1-heading('xl')= 'Radio' - +rule('medium') - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Checkbox' - +rule('medium') - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Switch' - +rule('medium') - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Form' - +rule('medium') - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Action button' - +rule('medium') - - +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) - - +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) - - //----------------------------------------- - - +h1-heading('xl')= 'Status indicator' - +rule('medium') - - +box - +status-indicator - = ' ' - +status-indicator('green') - = ' ' - +status-indicator('yellow') - = ' ' - +status-indicator('red') - - //----------------------------------------- - - +h1-heading('xl')= 'Avatar' - +rule('medium') - - +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') - - +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') - - //----------------------------------------- - - +h1-heading('xl')= 'Action menu' - +rule('medium') - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Menu' - +rule('medium') - - +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) - - //----------------------------------------- - - +h1-heading('xl')= 'Backdrop' - +rule('medium') - - +box - +backdrop - - //----------------------------------------- - - +h1-heading('xl')= 'Dialog' - +rule('medium') - - +box - +backdrop - +dialog('Lorem ipsum') - +slot('body') - = loremIpsum - - +box - +backdrop - +dialog('Lorem ipsum')(bodyClass='l-overflow') - +slot('body') - p.u-mt-0= loremIpsum - p= loremIpsum - p= loremIpsum - p= loremIpsum - p= loremIpsum - - +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 - - //----------------------------------------- - - +h1-heading('xl')= 'Lightbox' - +rule('medium') - - +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" - - //----------------------------------------- - - +h1-heading('xl')= 'List group' - +rule('medium') - - +box - +list-group - +list-group-item= 'First item' - +list-group-item= 'Second item' - +list-group-item= 'Third item' - +list-group-item= 'Fourth item' - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Table' - +rule('medium') - - +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' - - +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' - - +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' - - +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' - - //----------------------------------------- - - +h1-heading('xl')= 'Alert' - +rule('medium') - - +box - +alert= loremIpsum - br - +alert('primary')= loremIpsum - br - +alert('error')= loremIpsum - br - +alert('success')= loremIpsum - br - +alert('warning')= loremIpsum - - + .c-content + +view-heading + +view-rule + +view-colored-links + +view-badge + +view-button + +view-text-field + +view-field-label + +view-radio + +view-checkbox + +view-switch + +view-form + +view-action-button + +view-status-indicator + +view-avatar + +view-action-menu + +view-menu + +view-backdrop + +view-dialog + +view-lightbox + +view-list-group + +view-table + +view-alert + + .c-sidebar + +menu + each view in views + +menu-item(tag='a' href='#' + view.id)= view.title diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug index 0c9b6ec..c1affc4 100644 --- a/tpl/layouts/container.pug +++ b/tpl/layouts/container.pug @@ -12,7 +12,10 @@ mixin container if (!!attributes.theme) { classes['t-' + attributes.theme] = true } + if (attributes.class) { + classes[attributes.class] = true + } - div(class=classes) + div(class=classes)&attributes(attributes) .l-container__inner block diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 12726a3..2823e41 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -30,7 +30,7 @@ mixin dialog(title) .o-dialog__sidebar - slots.sidebar() header.o-dialog__header - +div-heading('lg')(class='o-dialog__title') + +div-heading('md')(class='o-dialog__title') = title +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') section(class=bodyClass) diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 84321d7..c6e8223 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -18,7 +18,7 @@ mixin menu-item 'is-selected': attributes.selected, } - button(class=classes, disabled=attributes.disabled) + #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) .l-card.l-card--flush.l-card--75 if attributes.icon .l-card__block.o-menu__icon-slot 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-54-g00ecf