- 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.'; include layouts/container.pug include objects/heading.pug include objects/rule.pug include objects/button.pug include objects/text-field.pug include objects/field-label.pug include objects/radio.pug include objects/checkbox.pug include objects/switch.pug include objects/form.pug include objects/action-button.pug include objects/status-indicator.pug include objects/avatar.pug include objects/action-menu.pug include objects/menu.pug include objects/backdrop.pug include objects/dialog.pug mixin box +container(padX=true padY=true inPage=true theme="raised") block mixin user-card(name, hue) - const avaName = name.slice(0, 1) .l-card.l-card--flush +avatar(block=true size='xs' class='l-card__block' hue=hue) = avaName = name doctype html html head meta(charset='utf-8') meta(name='viewport' content='width=device-width, initial-scale=1') title iro-design link(rel="stylesheet" href="style.css") 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')= '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 br +field-label('Password', 'At least 6 characters required') +text-field(placeholder='Placeholder' type='password') br br +field-label('Password', 'At least 6 characters required')(invalid=true) +text-field(placeholder='Placeholder' type='password' invalid=true) br br +field-label('First name')(disabled=true) +text-field(placeholder='Placeholder' disabled=true) br br +field-label('Password', 'At least 6 characters required')(disabled=true) +text-field(placeholder='Placeholder' type='password' disabled=true) br 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 br +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px') +text-field(placeholder='Placeholder' type='password') br br +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true) +text-field(placeholder='Placeholder' type='password' invalid=true) br br +field-label('First name')(align='left' labelWidth='100px' disabled=true) +text-field(placeholder='Placeholder' disabled=true) br br +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true) +text-field(placeholder='Placeholder' type='password' disabled=true) br 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 br +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px') +text-field(placeholder='Placeholder' type='password') br br +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true) +text-field(placeholder='Placeholder' type='password' invalid=true) br br +field-label('First name')(align='right' labelWidth='100px' disabled=true) +text-field(placeholder='Placeholder' disabled=true) br br +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true) +text-field(placeholder='Placeholder' type='password' disabled=true) br 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='sm' hue=90) = 'eo' +avatar(size='sm' status='green' hue=135) = 'n' +avatar(size='sm' src='avatar.png') +avatar(size='sm' src='avatar.png' status='red') br br div(style={ display: 'flex', gap: '.3em' }) +avatar(size='xs' hue=180) = 'V' +avatar(size='xs' hue=225) = 'o' +avatar(size='xs' 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='sm' hue=90) = 'eo' +avatar(circle=true size='sm' status='green' hue=135) = 'n' +avatar(circle=true size='sm' src='avatar.png') +avatar(circle=true size='sm' src='avatar.png' status='red') br br div(style={ display: 'flex', gap: '.3em' }) +avatar(circle=true size='xs' hue=180) = 'V' +avatar(circle=true size='xs' hue=225) = 'o' +avatar(circle=true size='xs' 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='sm' src='avatar.png' class='l-card__block') .l-card__block.l-card__block--main strong.u-db= 'Volpeon' small.u-db= '@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') = loremIpsum +box +backdrop +dialog('Lorem ipsum') p.u-mt-0= loremIpsum p= loremIpsum p= loremIpsum p= loremIpsum p= loremIpsum