summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug11
-rw-r--r--tpl/layouts/container.pug8
-rw-r--r--tpl/objects/action-button.pug29
-rw-r--r--tpl/objects/backdrop.pug5
-rw-r--r--tpl/objects/badge.pug37
-rw-r--r--tpl/objects/button.pug27
-rw-r--r--tpl/objects/card.pug18
-rw-r--r--tpl/objects/dialog.pug6
-rw-r--r--tpl/objects/divider.pug2
-rw-r--r--tpl/objects/field-label.pug2
-rw-r--r--tpl/objects/icon-nav.pug8
-rw-r--r--tpl/objects/lightbox.pug35
-rw-r--r--tpl/objects/menu.pug2
-rw-r--r--tpl/objects/navbar.pug37
-rw-r--r--tpl/objects/side-nav.pug2
-rw-r--r--tpl/objects/text-field.pug1
-rw-r--r--tpl/views/action-button.pug109
-rw-r--r--tpl/views/badge.pug69
-rw-r--r--tpl/views/button.pug231
-rw-r--r--tpl/views/card.pug76
-rw-r--r--tpl/views/dialog.pug4
-rw-r--r--tpl/views/divider.pug25
-rw-r--r--tpl/views/emoji.pug8
-rw-r--r--tpl/views/form.pug2
-rw-r--r--tpl/views/lightbox.pug14
-rw-r--r--tpl/views/menu.pug2
-rw-r--r--tpl/views/navbar.pug19
-rw-r--r--tpl/views/popover.pug2
-rw-r--r--tpl/views/text-field.pug6
29 files changed, 426 insertions, 371 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index c4baa64..0f1b5b0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -9,7 +9,6 @@ include layouts/container.pug
9include objects/palette.pug 9include objects/palette.pug
10include objects/heading.pug 10include objects/heading.pug
11include objects/divider.pug 11include objects/divider.pug
12include objects/badge.pug
13include objects/button.pug 12include objects/button.pug
14include objects/text-field.pug 13include objects/text-field.pug
15include objects/field-label.pug 14include objects/field-label.pug
@@ -17,13 +16,13 @@ include objects/radio.pug
17include objects/checkbox.pug 16include objects/checkbox.pug
18include objects/switch.pug 17include objects/switch.pug
19include objects/form.pug 18include objects/form.pug
20include objects/action-button.pug
21include objects/overflow-button.pug 19include objects/overflow-button.pug
22include objects/status-indicator.pug 20include objects/status-indicator.pug
23include objects/avatar.pug 21include objects/avatar.pug
24include objects/card.pug 22include objects/card.pug
25include objects/popover.pug 23include objects/popover.pug
26include objects/menu.pug 24include objects/menu.pug
25include objects/navbar.pug
27include objects/side-nav.pug 26include objects/side-nav.pug
28include objects/icon-nav.pug 27include objects/icon-nav.pug
29include objects/emoji.pug 28include objects/emoji.pug
@@ -40,7 +39,7 @@ mixin view(id, title)
40 - 39 -
41 views.push({ id, title }); 40 views.push({ id, title });
42 41
43 +container(narrow=!attributes.wide class='u-p-700 c-view' id=id) 42 +container(fixed=!attributes.wide class='u-p-700 c-view' id=id)
44 +h1-heading('xl')(class='u-mt-0')= title 43 +h1-heading('xl')(class='u-mt-0')= title
45 +divider('medium') 44 +divider('medium')
46 block 45 block
@@ -61,7 +60,6 @@ include views/links.pug
61include views/code.pug 60include views/code.pug
62include views/blockquote.pug 61include views/blockquote.pug
63include views/list.pug 62include views/list.pug
64include views/badge.pug
65include views/button.pug 63include views/button.pug
66include views/text-field.pug 64include views/text-field.pug
67include views/field-label.pug 65include views/field-label.pug
@@ -69,13 +67,13 @@ include views/radio.pug
69include views/checkbox.pug 67include views/checkbox.pug
70include views/switch.pug 68include views/switch.pug
71include views/form.pug 69include views/form.pug
72include views/action-button.pug
73include views/overflow-button.pug 70include views/overflow-button.pug
74include views/status-indicator.pug 71include views/status-indicator.pug
75include views/avatar.pug 72include views/avatar.pug
76include views/card.pug 73include views/card.pug
77include views/popover.pug 74include views/popover.pug
78include views/menu.pug 75include views/menu.pug
76include views/navbar.pug
79include views/side-nav.pug 77include views/side-nav.pug
80include views/icon-nav.pug 78include views/icon-nav.pug
81include views/backdrop.pug 79include views/backdrop.pug
@@ -108,7 +106,6 @@ html
108 +view-blockquote 106 +view-blockquote
109 +view-list 107 +view-list
110 +view-emoji 108 +view-emoji
111 +view-badge
112 +view-button 109 +view-button
113 +view-text-field 110 +view-text-field
114 +view-field-label 111 +view-field-label
@@ -116,7 +113,6 @@ html
116 +view-checkbox 113 +view-checkbox
117 +view-switch 114 +view-switch
118 +view-form 115 +view-form
119 +view-action-button
120 //+view-overflow-button 116 //+view-overflow-button
121 +view-status-indicator 117 +view-status-indicator
122 +view-avatar 118 +view-avatar
@@ -124,6 +120,7 @@ html
124 +view-side-nav 120 +view-side-nav
125 +view-popover 121 +view-popover
126 +view-menu 122 +view-menu
123 +view-navbar
127 //+view-icon-nav 124 //+view-icon-nav
128 +view-backdrop 125 +view-backdrop
129 //+view-dialog 126 //+view-dialog
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index 56c0b86..522eb1a 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -1,10 +1,10 @@
1mixin container 1mixin container
2 - 2 -
3 let classes = { 3 let classes = {
4 'l-container': true, 4 'l-container': true,
5 'l-container--narrow': attributes.narrow, 5 'l-container--fixed': attributes.fixed,
6 'l-container--narrow-75': attributes.narrow50, 6 'l-container--fixed-75': attributes.fixed50,
7 'u-themed': !!attributes.theme 7 'u-themed': !!attributes.theme
8 } 8 }
9 if (!!attributes.theme) { 9 if (!!attributes.theme) {
10 classes['t-' + attributes.theme] = true 10 classes['t-' + attributes.theme] = true
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
deleted file mode 100644
index c3a9b53..0000000
--- a/tpl/objects/action-button.pug
+++ /dev/null
@@ -1,29 +0,0 @@
1include icon.pug
2
3mixin action-button
4 -
5 let classes = {
6 'o-action-button': true,
7 'u-d-block': attributes.block,
8 'o-action-button--quiet': attributes.quiet,
9 'o-action-button--pill': attributes.pill,
10 'o-action-button--icon': !!attributes.icon && !block,
11 'is-selected': attributes.selected
12 }
13 if (attributes.theme) {
14 classes['o-action-button--' + attributes.theme] = true
15 }
16 if (attributes.size) {
17 classes['o-action-button--' + attributes.size] = true
18 }
19 if (attributes.class) {
20 classes[attributes.class] = true;
21 }
22
23 let href = attributes.disabled ? null : '#';
24
25 a(class=classes href=href)
26 if attributes.icon
27 +icon(attributes.icon)
28 = ' '
29 block
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 227700c..f577961 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -8,7 +8,10 @@ mixin backdrop
8 classes[attributes.class] = true; 8 classes[attributes.class] = true;
9 } 9 }
10 10
11 let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' } 11 let styles = { width: '100%', 'min-height': '5em' }
12 if (attributes.maxHeight) {
13 styles['max-height'] = '40em';
14 }
12 if (attributes.pad) { 15 if (attributes.pad) {
13 styles['padding'] = '2em'; 16 styles['padding'] = '2em';
14 } 17 }
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
deleted file mode 100644
index 48e4029..0000000
--- a/tpl/objects/badge.pug
+++ /dev/null
@@ -1,37 +0,0 @@
1mixin badge(variant)
2 -
3 let classes = {
4 'o-badge': true,
5 'o-badge--pill': !!attributes.pill,
6 'o-badge--quiet': !!attributes.quiet,
7 'o-menu__badge': !!attributes.menu,
8 }
9 if (attributes.size) {
10 classes['o-badge--' + attributes.size] = true
11 }
12 if (variant) {
13 classes['o-badge--' + variant] = true
14 }
15
16 if attributes.href
17 a(href=attributes.href class=classes)
18 if attributes.icon
19 +icon(attributes.icon)
20 = ' '
21 if block
22 span.o-badge__label
23 block
24 if attributes.postIcon
25 = ' '
26 +icon(attributes.postIcon)
27 else
28 span(class=classes)
29 if attributes.icon
30 +icon(attributes.icon)
31 = ' '
32 if block
33 span.o-badge__label
34 block
35 if attributes.postIcon
36 = ' '
37 +icon(attributes.postIcon)
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 0884c8d..3b5de2b 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -1,22 +1,31 @@
1mixin a-button 1include icon.pug
2
3mixin button
2 - 4 -
3 let classes = { 5 let classes = {
4 'o-button': true, 6 'o-button': true,
5 'o-button--block': attributes.block, 7 'u-d-block': attributes.block,
6 'o-button--primary': attributes.primary, 8 'o-button--secondary': attributes.secondary,
7 'o-button--outline': attributes.outline, 9 'o-button--quiet': attributes.quiet,
8 'o-button--round': !!attributes.icon && !block 10 'o-button--pill': attributes.pill,
11 'o-button--badge': attributes.badge,
12 'o-button--icon': !!attributes.icon && !block,
13 'is-selected': attributes.selected,
14 'is-highlighted': attributes.highlighted,
9 } 15 }
10 if (attributes.variant) { 16 if (attributes.theme) {
11 classes['o-button--' + attributes.variant] = true 17 classes['o-button--' + attributes.theme] = true
12 } 18 }
13 if (attributes.size) { 19 if (attributes.size) {
14 classes['o-button--' + attributes.size] = true 20 classes['o-button--' + attributes.size] = true
15 } 21 }
22 if (attributes.class) {
23 classes[attributes.class] = true;
24 }
16 25
17 let href = attributes.disabled ? null : '#'; 26 let href = attributes.disabled ? null : '#';
18 27
19 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) 28 a(class=classes href=href)
20 if attributes.icon 29 if attributes.icon
21 +icon(attributes.icon) 30 +icon(attributes.icon)
22 = ' ' 31 = ' '
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index 2ab9bef..feb1441 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,8 +1,11 @@
1mixin card 1mixin card
2 - 2 -
3 let classes = { 3 let classes = {
4 'o-card': true, 4 'o-card': true,
5 'o-card--quiet': !!attributes.quiet, 5 'o-card--borderless': !!attributes.borderless,
6 'o-card--shadow': !!attributes.shadow,
7 'o-card--quiet': !!attributes.quiet,
8 'o-card--thumbnail': !!attributes.thumbnail,
6 } 9 }
7 10
8 if (attributes.class) { 11 if (attributes.class) {
@@ -26,7 +29,16 @@ mixin card-image
26 classes[attributes.class] = true; 29 classes[attributes.class] = true;
27 } 30 }
28 31
29 img(class=classes src=attributes.src style=attributes.style) 32 let imgClasses = {
33 'o-card__image-img': true,
34 'l-card-list__card-image': attributes.list
35 }
36
37 div(class=classes)
38 img(class=imgClasses src=attributes.src style=attributes.style)
39 if block
40 .o-card__image-overlay
41 block
30 42
31mixin card-body 43mixin card-body
32 .o-card__body(style=attributes.style) 44 .o-card__body(style=attributes.style)
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 3ceae69..1a2f061 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -54,13 +54,13 @@ mixin dialog(title)
54 else 54 else
55 if title 55 if title
56 +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title 56 +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title
57 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') 57 +button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block')
58 58
59 section(class=bodyClass) 59 section(class=bodyClass)
60 if slots.body 60 if slots.body
61 - slots.body() 61 - slots.body()
62 62
63 footer.o-dialog__footer.l-button-group 63 footer.o-dialog__footer.l-button-group
64 +a-button(outline=true)= 'Cancel' 64 +button(outline=true)= 'Cancel'
65 = ' ' 65 = ' '
66 +a-button(variant='accent')= 'Continue' 66 +button(variant='accent')= 'Continue'
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
index 46425cd..ed4d27a 100644
--- a/tpl/objects/divider.pug
+++ b/tpl/objects/divider.pug
@@ -3,6 +3,8 @@ mixin divider(level)
3 let classes = { 3 let classes = {
4 'o-divider': true, 4 'o-divider': true,
5 'o-divider--labelled': !!block, 5 'o-divider--labelled': !!block,
6 'o-divider--vertical': !!attributes.vertical,
7 'o-divider--dot': !!attributes.dot,
6 ['o-divider--' + level]: true, 8 ['o-divider--' + level]: true,
7 ['o-divider--' + attributes.color]: !!attributes.color 9 ['o-divider--' + attributes.color]: !!attributes.color
8 } 10 }
diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug
index fb96443..192780d 100644
--- a/tpl/objects/field-label.pug
+++ b/tpl/objects/field-label.pug
@@ -16,7 +16,7 @@ mixin field-label(label, hint=null)
16 16
17 let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : ''; 17 let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : '';
18 18
19 div(class=classes) 19 label(class=classes)
20 .o-field-label__label(style=labelStyle class=attributes.labelClass)= label 20 .o-field-label__label(style=labelStyle class=attributes.labelClass)= label
21 .o-field-label__content(class=attributes.contentClass) 21 .o-field-label__content(class=attributes.contentClass)
22 block 22 block
diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug
index f1c7d8a..afdf2db 100644
--- a/tpl/objects/icon-nav.pug
+++ b/tpl/objects/icon-nav.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin icon-nav 5mixin icon-nav
6 - 6 -
@@ -19,9 +19,9 @@ mixin icon-nav-item(icon)
19 - 19 -
20 let classes = { 20 let classes = {
21 'o-icon-nav__item': true, 21 'o-icon-nav__item': true,
22 'o-action-button': true, 22 'o-button': true,
23 'o-action-button--round': true, 23 'o-button--round': true,
24 'o-action-button--quiet': true, 24 'o-button--quiet': true,
25 'is-selected': attributes.selected, 25 'is-selected': attributes.selected,
26 } 26 }
27 if (attributes.class) { 27 if (attributes.class) {
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 02a3200..2d520b5 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -4,36 +4,43 @@ mixin lightbox(images)
4 - 4 -
5 let classes = { 5 let classes = {
6 'o-lightbox': true, 6 'o-lightbox': true,
7 'o-lightbox--interactive': attributes.interactive,
7 } 8 }
8 let linksClasses = { 9 let linksClasses = {
9 's-links': true, 10 's-links': true,
10 } 11 }
12 let thumbnailClasses = {
13 'o-thumbnail': true,
14 }
11 15
12 if (attributes.theme) { 16 if (attributes.theme) {
13 classes[`o-lightbox--${attributes.theme}`] = true; 17 classes[`o-lightbox--${attributes.theme}`] = true;
14 linksClasses[`s-links--${attributes.theme}`] = true; 18 linksClasses[`s-links--${attributes.theme}`] = true;
19 thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true;
15 } 20 }
16 21
17 div(class=classes) 22 div(class=classes)
18 header.o-lightbox__header 23 header.o-lightbox__header
19 div(class=linksClasses) 24 div(class=linksClasses)
20 block 25 block
21 +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') 26 +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
27
22 each img, i in images 28 each img, i in images
23 img.o-lightbox__img(src=images[i] id='image-' + i) 29 img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
24 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
25 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
26 30
27 img.o-lightbox__img.o-lightbox__img--default(src=images[0])
28 if images.length > 1 31 if images.length > 1
29 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 32 +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
30 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') 33 +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
34
31 .o-lightbox__thumbnails 35 .o-lightbox__thumbnails
32 each img, i in images 36 each img, i in images
33 - classes = i === 0 ? 'is-selected' : '' 37 -
34 a.o-lightbox__thumbnail(class=classes href='#image-' + i) 38 let classes = { 'is-selected': i === 0 }
35 img.o-lightbox__thumbnail-img(src=img) 39 Object.assign(classes, thumbnailClasses)
36 button.o-lightbox__thumbnail 40
37 +icon('volume-2')(class='o-lightbox__thumbnail-icon') 41 a.o-thumbnail(class=classes href='#image-' + i)
38 button.o-lightbox__thumbnail 42 img.o-thumbnail__image(src=img)
39 +icon('video')(class='o-lightbox__thumbnail-icon') 43 button(class=thumbnailClasses)
44 +icon('volume-2')(class='o-thumbnail__icon')
45 button(class=thumbnailClasses)
46 +icon('video')(class='o-thumbnail__icon')
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 578f9bc..802f9bd 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin menu 5mixin menu
6 - 6 -
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
new file mode 100644
index 0000000..14ec9d3
--- /dev/null
+++ b/tpl/objects/navbar.pug
@@ -0,0 +1,37 @@
1include icon.pug
2include status-indicator.pug
3include button.pug
4
5mixin navbar
6 -
7 let classes = {
8 'o-navbar': true,
9 'o-navbar--quiet': attributes.quiet,
10 }
11 if (attributes.class) {
12 classes[attributes.class] = true;
13 }
14
15 div(class=classes)&attributes(attributes)
16 block
17
18mixin navbar-item
19 -
20 let classes = {
21 'o-navbar__item': true,
22 'is-selected': attributes.selected,
23 }
24 if (attributes.class) {
25 classes[attributes.class] = true;
26 }
27
28 #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
29 .o-navbar__item-content
30 if attributes.icon
31 +icon(attributes.icon)
32 = ' '
33 span.o-navbar__item-content-text
34 block
35 if attributes.postIcon
36 = ' '
37 +icon(attributes.postIcon)
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
index ccd24e4..2dcbd84 100644
--- a/tpl/objects/side-nav.pug
+++ b/tpl/objects/side-nav.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin side-nav 5mixin side-nav
6 - 6 -
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 0342f01..6de30e9 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -12,6 +12,7 @@ mixin text-field
12 let classes = { 12 let classes = {
13 'o-text-field': true, 13 'o-text-field': true,
14 'o-text-field--extended': !!block, 14 'o-text-field--extended': !!block,
15 'o-text-field--pill': attributes.pill,
15 'is-invalid': attributes.invalid, 16 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled, 17 'is-disabled': attributes.disabled,
17 'l-media': !!block, 18 'l-media': !!block,
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
deleted file mode 100644
index 8fbf9ea..0000000
--- a/tpl/views/action-button.pug
+++ /dev/null
@@ -1,109 +0,0 @@
1mixin view-action-button
2 +view('action-button', 'Action button')
3 .c-box
4 +action-button(size='sm')= 'Idle'
5 = ' '
6 +action-button= 'Idle'
7 = ' '
8 +action-button(size='lg')= 'Idle'
9 = ' '
10 +action-button(size='xl')= 'Idle'
11
12 .c-box
13 +action-button(icon='trash' size='sm')
14 = ' '
15 +action-button(icon='trash')
16 = ' '
17 +action-button(icon='trash' size='lg')
18 = ' '
19 +action-button(icon='trash' size='xl')
20
21 .c-box
22 +action-button(pill=true size='sm')= 'Idle'
23 = ' '
24 +action-button(pill=true)= 'Idle'
25 = ' '
26 +action-button(pill=true size='lg')= 'Idle'
27 = ' '
28 +action-button(pill=true size='xl')= 'Idle'
29
30 .c-box
31 +action-button(pill=true icon='trash' size='sm')
32 = ' '
33 +action-button(pill=true icon='trash')
34 = ' '
35 +action-button(pill=true icon='trash' size='lg')
36 = ' '
37 +action-button(pill=true icon='trash' size='xl')
38
39 .c-box
40 +action-button= 'Label'
41 = ' '
42 +action-button(icon='trash')= 'Label'
43 = ' '
44 +action-button(icon='trash')
45
46 .c-box
47 +action-button(quiet=true)= 'Label'
48 = ' '
49 +action-button(quiet=true icon='trash')= 'Label'
50 = ' '
51 +action-button(quiet=true icon='trash')
52
53 .c-box
54 +action-button= 'Idle'
55 = ' '
56 +action-button(selected=true)= 'Selected'
57 = ' '
58 +action-button(disabled=true)= 'Disabled'
59 = ' '
60 +action-button(selected=true disabled=true)= 'Selected + disabled'
61
62 .c-box
63 +action-button(quiet=true )= 'Idle'
64 = ' '
65 +action-button(quiet=true selected=true)= 'Selected'
66 = ' '
67 +action-button(quiet=true disabled=true)= 'Disabled'
68 = ' '
69 +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
70
71 .c-box
72 +action-button(pill=true)= 'Idle'
73 = ' '
74 +action-button(pill=true selected=true)= 'Selected'
75 = ' '
76 +action-button(pill=true disabled=true)= 'Disabled'
77 = ' '
78 +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'
79
80 .c-box
81 +action-button(pill=true quiet=true)= 'Idle'
82 = ' '
83 +action-button(pill=true quiet=true selected=true)= 'Selected'
84 = ' '
85 +action-button(pill=true quiet=true disabled=true)= 'Disabled'
86 = ' '
87 +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
88
89 each theme in ['static-black', 'static-white']
90 -
91 const bg = theme.startsWith('static-black') ? 500 : 1000;
92
93 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
94 +action-button(theme=theme)= 'Idle'
95 = ' '
96 +action-button(theme=theme selected=true)= 'Selected'
97 = ' '
98 +action-button(theme=theme disabled=true)= 'Disabled'
99 = ' '
100 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
101
102 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
103 +action-button(theme=theme quiet=true)= 'Idle'
104 = ' '
105 +action-button(theme=theme quiet=true selected=true)= 'Selected'
106 = ' '
107 +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
108 = ' '
109 +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
deleted file mode 100644
index cc1f346..0000000
--- a/tpl/views/badge.pug
+++ /dev/null
@@ -1,69 +0,0 @@
1mixin view-badge
2 +view('badge', 'Badge')
3 .c-box
4 +badge(size='sm' href='#')= '50'
5 = ' '
6 +badge(href='#')= '100'
7 = ' '
8 +badge(size='lg' href='#')= '200'
9 = ' '
10 +badge(size='xl' href='#')= '300'
11
12 .c-box
13 +badge(pill=true size='sm' href='#')= '50'
14 = ' '
15 +badge(pill=true href='#')= '100'
16 = ' '
17 +badge(pill=true size='lg' href='#')= '200'
18 = ' '
19 +badge(pill=true size='xl' href='#')= '300'
20
21 .c-box
22 +badge(icon='image' size='sm' href='#')= '50'
23 = ' '
24 +badge(icon='image' href='#')= '100'
25 = ' '
26 +badge(icon='image' size='lg' href='#')= '200'
27 = ' '
28 +badge(icon='image' size='xl' href='#')= '300'
29
30 .c-box
31 +badge(pill=true icon='image' size='sm' href='#')= '50'
32 = ' '
33 +badge(pill=true icon='image' href='#')= '100'
34 = ' '
35 +badge(pill=true icon='image' size='lg' href='#')= '200'
36 = ' '
37 +badge(pill=true icon='image' size='xl' href='#')= '300'
38
39 .c-box
40 +badge(href='#')= '100'
41 = ' '
42 +badge(quiet=true href='#')= '100'
43 = ' '
44 +badge(pill=true href='#')= '100'
45 = ' '
46 +badge(quiet=true pill=true href='#')= '100'
47
48 each theme in ['accent', 'positive', 'negative', 'warning']
49 .c-box
50 +badge(theme)(href='#')= 'new'
51 = ' '
52 +badge(theme)(quiet=true href='#')= 'new'
53 = ' '
54 +badge(theme)(pill=true href='#')= 'new'
55 = ' '
56 +badge(theme)(quiet=true pill=true href='#')= 'new'
57
58 each theme in ['static-black', 'static-white']
59 -
60 const bg = theme.startsWith('static-black') ? 500 : 1000;
61
62 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
63 +badge(theme)(href='#')= 'new'
64 = ' '
65 +badge(theme)(quiet=true href='#')= 'new'
66 = ' '
67 +badge(theme)(pill=true href='#')= 'new'
68 = ' '
69 +badge(theme)(quiet=true pill=true href='#')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index edd8ef6..4b8c59f 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -1,85 +1,206 @@
1mixin view-button 1mixin view-button
2 +view('button', 'Button') 2 +view('button', 'Button')
3 .c-box 3 .c-box
4 +a-button(size='sm')= 'Button' 4 +button(size='sm')= 'Idle'
5 = ' ' 5 = ' '
6 +a-button= 'Button' 6 +button= 'Idle'
7 = ' ' 7 = ' '
8 +a-button(size='lg')= 'Button' 8 +button(size='lg')= 'Idle'
9 = ' ' 9 = ' '
10 +a-button(size='xl')= 'Button' 10 +button(size='xl')= 'Idle'
11 br
12 br
13 +button(icon='trash' size='sm')
14 = ' '
15 +button(icon='trash')
16 = ' '
17 +button(icon='trash' size='lg')
18 = ' '
19 +button(icon='trash' size='xl')
20 br
21 br
22 +button(icon='user' size='sm')= 'Idle'
23 = ' '
24 +button(icon='user')= 'Idle'
25 = ' '
26 +button(icon='user' size='lg')= 'Idle'
27 = ' '
28 +button(icon='user' size='xl')= 'Idle'
11 29
12 .c-box 30 .c-box
13 +a-button(size='sm' outline=true)= 'Button' 31 +button(pill=true size='sm')= 'Idle'
32 = ' '
33 +button(pill=true)= 'Idle'
34 = ' '
35 +button(pill=true size='lg')= 'Idle'
36 = ' '
37 +button(pill=true size='xl')= 'Idle'
38 br
39 br
40 +button(pill=true icon='trash' size='sm')
41 = ' '
42 +button(pill=true icon='trash')
14 = ' ' 43 = ' '
15 +a-button(outline=true)= 'Button' 44 +button(pill=true icon='trash' size='lg')
16 = ' ' 45 = ' '
17 +a-button(size='lg' outline=true)= 'Button' 46 +button(pill=true icon='trash' size='xl')
47 br
48 br
49 +button(pill=true icon='user' size='sm')= 'Idle'
50 = ' '
51 +button(pill=true icon='user')= 'Idle'
52 = ' '
53 +button(pill=true icon='user' size='lg')= 'Idle'
18 = ' ' 54 = ' '
19 +a-button(size='xl' outline=true)= 'Button' 55 +button(pill=true icon='user' size='xl')= 'Idle'
20 56
21 .c-box 57 .c-box
22 +a-button(postIcon='arrow-right' size='sm')= 'Button' 58 +button= 'Label'
23 = ' ' 59 = ' '
24 +a-button(postIcon='arrow-right')= 'Button' 60 +button(icon='trash')= 'Label'
25 = ' ' 61 = ' '
26 +a-button(postIcon='arrow-right' size='lg')= 'Button' 62 +button(icon='trash')
63 br
64 br
65 +button(quiet=true)= 'Label'
27 = ' ' 66 = ' '
28 +a-button(postIcon='arrow-right' size='xl')= 'Button' 67 +button(quiet=true icon='trash')= 'Label'
68 = ' '
69 +button(quiet=true icon='trash')
29 70
30 .c-box 71 .c-box
31 .l-button-group 72 +button= 'Idle'
32 +a-button= 'Button' 73 = ' '
33 +a-button(disabled=true)= 'Button' 74 +button(highlighted=true)= 'Highlighted'
34 +a-button(outline=true)= 'Button' 75 = ' '
35 +a-button(outline=true disabled=true)= 'Button' 76 +button(selected=true)= 'Selected'
77 = ' '
78 +button(disabled=true)= 'Disabled'
79 = ' '
80 +button(selected=true disabled=true)= 'Selected + disabled'
81 br
36 br 82 br
37 .l-button-group 83 +button(badge=true)= 'Idle'
38 +a-button(icon='trash') 84 = ' '
39 +a-button(disabled=true icon='trash') 85 +button(badge=true highlighted=true)= 'Highlighted'
40 +a-button(outline=true icon='trash') 86 = ' '
41 +a-button(outline=true disabled=true icon='trash') 87 +button(badge=true selected=true)= 'Selected'
88 = ' '
89 +button(badge=true disabled=true)= 'Disabled'
90 = ' '
91 +button(badge=true selected=true disabled=true)= 'Selected + disabled'
92 br
93 br
94 +button(quiet=true)= 'Idle'
95 = ' '
96 +button(quiet=true highlighted=true)= 'Highlighted'
97 = ' '
98 +button(quiet=true selected=true)= 'Selected'
99 = ' '
100 +button(quiet=true disabled=true)= 'Disabled'
101 = ' '
102 +button(quiet=true selected=true disabled=true)= 'Selected + disabled'
42 103
43 each theme in ['primary', 'accent', 'negative'] 104 .c-box
105 +button(pill=true)= 'Idle'
106 = ' '
107 +button(pill=true highlighted=true)= 'Highlighted'
108 = ' '
109 +button(pill=true selected=true)= 'Selected'
110 = ' '
111 +button(pill=true disabled=true)= 'Disabled'
112 = ' '
113 +button(pill=true selected=true disabled=true)= 'Selected + disabled'
114 br
115 br
116 +button(pill=true badge=true)= 'Idle'
117 = ' '
118 +button(pill=true badge=true highlighted=true)= 'Highlighted'
119 = ' '
120 +button(pill=true badge=true selected=true)= 'Selected'
121 = ' '
122 +button(pill=true badge=true disabled=true)= 'Disabled'
123 = ' '
124 +button(pill=true badge=true selected=true disabled=true)= 'Selected + disabled'
125 br
126 br
127 +button(pill=true quiet=true)= 'Idle'
128 = ' '
129 +button(pill=true quiet=true highlighted=true)= 'Highlighted'
130 = ' '
131 +button(pill=true quiet=true selected=true)= 'Selected'
132 = ' '
133 +button(pill=true quiet=true disabled=true)= 'Disabled'
134 = ' '
135 +button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
136
137 each theme, i in ['accent', 'positive', 'negative', 'warning']
44 .c-box 138 .c-box
45 .l-button-group 139 +button(theme=theme)= 'Idle'
46 +a-button(variant=theme)= 'Button' 140 = ' '
47 +a-button(variant=theme disabled=true)= 'Button' 141 +button(theme=theme highlighted=true)= 'Highlighted'
48 +a-button(variant=theme outline=true)= 'Button' 142 = ' '
49 +a-button(variant=theme outline=true disabled=true)= 'Button' 143 +button(theme=theme selected=true)= 'Selected'
144 = ' '
145 +button(theme=theme disabled=true)= 'Disabled'
146 = ' '
147 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
50 br 148 br
51 .l-button-group 149 br
52 +a-button(variant=theme icon='trash') 150 +button(theme=theme badge=true)= 'Idle'
53 +a-button(variant=theme disabled=true icon='trash') 151 = ' '
54 +a-button(variant=theme outline=true icon='trash') 152 +button(theme=theme badge=true highlighted=true)= 'Highlighted'
55 +a-button(variant=theme outline=true disabled=true icon='trash') 153 = ' '
154 +button(theme=theme badge=true selected=true)= 'Selected'
155 = ' '
156 +button(theme=theme badge=true disabled=true)= 'Disabled'
157 = ' '
158 +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled'
159 br
160 br
161 +button(theme=theme quiet=true)= 'Idle'
162 = ' '
163 +button(theme=theme quiet=true highlighted=true)= 'Highlighted'
164 = ' '
165 +button(theme=theme quiet=true selected=true)= 'Selected'
166 = ' '
167 +button(theme=theme quiet=true disabled=true)= 'Disabled'
168 = ' '
169 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
56 170
57 each theme in ['static-black', 'static-white'] 171 each theme in ['static-black', 'static-white']
58 - 172 -
59 const bg = theme.startsWith('static-black') ? 500 : 1000; 173 const bg = theme.startsWith('static-black') ? 500 : 1000;
60 174
61 .c-box(style=`background-color: var(--colors--blue-static--${bg});`) 175 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
62 .l-button-group 176 +button(theme=theme)= 'Idle'
63 +a-button(variant=theme)= 'Button' 177 = ' '
64 +a-button(variant=theme disabled=true)= 'Button' 178 +button(theme=theme highlighted=true)= 'Highlighted'
65 +a-button(variant=theme outline=true)= 'Button' 179 = ' '
66 +a-button(variant=theme outline=true disabled=true)= 'Button' 180 +button(theme=theme selected=true)= 'Selected'
181 = ' '
182 +button(theme=theme disabled=true)= 'Disabled'
183 = ' '
184 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
185 br
186 br
187 +button(theme=theme badge=true)= 'Idle'
188 = ' '
189 +button(theme=theme badge=true highlighted=true)= 'Highlighted'
190 = ' '
191 +button(theme=theme badge=true selected=true)= 'Selected'
192 = ' '
193 +button(theme=theme badge=true disabled=true)= 'Disabled'
194 = ' '
195 +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled'
67 br 196 br
68 .l-button-group
69 +a-button(variant=theme icon='trash')
70 +a-button(variant=theme disabled=true icon='trash')
71 +a-button(variant=theme outline=true icon='trash')
72 +a-button(variant=theme outline=true disabled=true icon='trash')
73
74 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
75 .l-button-group
76 +a-button(variant=theme primary=true)= 'Button'
77 +a-button(variant=theme primary=true disabled=true)= 'Button'
78 +a-button(variant=theme primary=true outline=true)= 'Button'
79 +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
80 br 197 br
81 .l-button-group 198 +button(theme=theme quiet=true)= 'Idle'
82 +a-button(variant=theme primary=true icon='trash') 199 = ' '
83 +a-button(variant=theme primary=true disabled=true icon='trash') 200 +button(theme=theme quiet=true highlighted=true)= 'Highlighted'
84 +a-button(variant=theme primary=true outline=true icon='trash') 201 = ' '
85 +a-button(variant=theme primary=true outline=true disabled=true icon='trash') 202 +button(theme=theme quiet=true selected=true)= 'Selected'
203 = ' '
204 +button(theme=theme quiet=true disabled=true)= 'Disabled'
205 = ' '
206 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 3163b00..e982925 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,6 +1,63 @@
1mixin view-card 1mixin view-card
2 +view('card', 'Card')(wide=true) 2 +view('card', 'Card')(wide=true)
3 .l-card-list
4 +card(href='#' class='l-card-list__card')
5 +card-body
6 strong= 'Lorem ipsum dolor'
7 = 'sit amet'
8 +card(href='#' class='l-card-list__card' shadow=true)
9 +card-body
10 strong= 'Lorem ipsum dolor'
11 = 'sit amet'
12 +card(href='#' class='l-card-list__card' borderless=true)
13 +card-body
14 strong= 'Lorem ipsum dolor'
15 = 'sit amet'
16 +card(href='#' class='l-card-list__card' shadow=true borderless=true)
17 +card-body
18 strong= 'Lorem ipsum dolor'
19 = 'sit amet'
20
21 +divider('faint')(class='u-mb-700')
22
23 .l-card-list.l-card-list--merge
24 +card(href='#' class='l-card-list__card' borderless=true)
25 +card-body
26 strong= 'Lorem ipsum dolor'
27 = 'sit amet'
28 +card(href='#' class='l-card-list__card' borderless=true)
29 +card-body
30 strong= 'Lorem ipsum dolor'
31 = 'sit amet'
32 +card(href='#' class='l-card-list__card' borderless=true)
33 +card-body
34 strong= 'Lorem ipsum dolor'
35 = 'sit amet'
36
37 +divider('faint')(class='u-mb-700')
38
39 .l-card-list.l-card-list--merge.l-card-list--borderless.l-card-list--shadow
40 +card(href='#' class='l-card-list__card' borderless=true)
41 +card-body
42 strong= 'Lorem ipsum dolor'
43 = 'sit amet'
44 +card(href='#' class='l-card-list__card' borderless=true)
45 +card-body
46 strong= 'Lorem ipsum dolor'
47 = 'sit amet'
48 +card(href='#' class='l-card-list__card' borderless=true)
49 +card-body
50 strong= 'Lorem ipsum dolor'
51 = 'sit amet'
52
53 +divider('faint')(class='u-mb-700')
54
3 .l-card-list.l-card-list--masonry 55 .l-card-list.l-card-list--masonry
56 +card(thumbnail=true href='#' class='l-card-list__card')
57 +card-image(src='Drawing_Half.png')
58 +card-body
59 +card-title= 'XS Heading'
60
4 +card(href='#' class='l-card-list__card') 61 +card(href='#' class='l-card-list__card')
5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 62 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
6 +card-avatar(src='avatar.png') 63 +card-avatar(src='avatar.png')
@@ -26,31 +83,30 @@ mixin view-card
26 +card-body 83 +card-body
27 .l-media 84 .l-media
28 .l-media__block 85 .l-media__block
29 +badge('positive')(quiet=true icon='repeat' href='#') 86 +button(theme='positive' badge=true pill=true size='sm' icon='repeat' href='#')
30 +icon('repeat') 87 strong= '12'
31 strong.u-mis-50= '12'
32 .l-media__block 88 .l-media__block
33 +badge('warning')(quiet=true icon='star' href='#') 89 +button(theme='warning' badge=true pill=true size='sm' icon='star' href='#')
34 +icon('star') 90 strong= '34'
35 strong.u-mis-50= '34'
36 .l-media__block.u-mis-auto 91 .l-media__block.u-mis-auto
37 +a-button(primary=true)= 'Reply' 92 +button(selected=true)= 'Reply'
38 93
39 +card(quiet=true href='#' class='l-card-list__card') 94 +card(quiet=true href='#' class='l-card-list__card')
40 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 95 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
96 +button(badge=true selected=true)= 'Drawings'
41 +card-body 97 +card-body
42 +card-title= 'XS Heading' 98 +card-title= 'XS Heading'
43 +card-content 99 +card-content
44 p= loremIpsum 100 p= loremIpsum
45 p= loremIpsum 101 p= loremIpsum
46 102
47 each layout in ['grid', 'masonry', 'masonry-h'] 103 each layout in ['grid', 'grid-sm', 'masonry', 'masonry-h']
48 - 104 -
49 let quiet = true 105 let quiet = true
50 106
51 let classes = { 107 let classes = {
52 'l-card-list': true, 108 'l-card-list': true,
53 'l-card-list--aspect-5/4': layout === 'grid', 109 'l-card-list--aspect-5/4': ['grid', 'grid-sm'].includes(layout),
54 'l-card-list--quiet': quiet, 110 'l-card-list--quiet': quiet,
55 } 111 }
56 classes[`l-card-list--${layout}`] = true; 112 classes[`l-card-list--${layout}`] = true;
@@ -61,7 +117,7 @@ mixin view-card
61 div(class=classes) 117 div(class=classes)
62 each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] 118 each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
63 +card(quiet=quiet href='#' class='l-card-list__card') 119 +card(quiet=quiet href='#' class='l-card-list__card')
64 +card-image(src=img class='l-card-list__card-image') 120 +card-image(src=img list=true)
65 +card-body 121 +card-body
66 .l-media 122 .l-media
67 .l-media__block.l-media__block--main 123 .l-media__block.l-media__block--main
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 5a659dd..9c2e520 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -53,8 +53,8 @@ mixin view-dialog
53 +dialog 53 +dialog
54 +slot('header') 54 +slot('header')
55 .l-media__block.l-flex 55 .l-media__block.l-flex
56 +action-button(quiet=true icon='chevron-left') 56 +button(quiet=true icon='chevron-left')
57 +action-button(quiet=true icon='chevron-right') 57 +button(quiet=true icon='chevron-right')
58 .l-media__block.l-media__block--main 58 .l-media__block.l-media__block--main
59 +div-heading('xl')(class="u-mt-0")= 'Tags' 59 +div-heading('xl')(class="u-mt-0")= 'Tags'
60 +slot('sidebar') 60 +slot('sidebar')
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index ee7b372..5429ab5 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -12,24 +12,45 @@ mixin view-divider
12 12
13 .c-box 13 .c-box
14 +div-heading('xs')= 'Heading' 14 +div-heading('xs')= 'Heading'
15 +divider('quiet')
16 p= loremIpsum
17
18 .c-box
19 +div-heading('xs')= 'Heading'
15 +divider('faint') 20 +divider('faint')
16 p= loremIpsum 21 p= loremIpsum
17 22
18 .c-box 23 .c-box
19 +divider('strong')= 'Strong' 24 +divider('strong')= 'Strong'
20 +divider('medium')= 'Medium' 25 +divider('medium')= 'Medium'
26 +divider('quiet')= 'Quiet'
21 +divider('faint')= 'Faint' 27 +divider('faint')= 'Faint'
22 +divider('strong') 28 +divider('strong')
23 +divider('medium') 29 +divider('medium')
30 +divider('quiet')
24 +divider('faint') 31 +divider('faint')
25 32
26 each theme in ['blue', 'purple', 'red', 'green', 'yellow'] 33 .c-box
34 .l-media(style="height: 1em")
35 +divider('strong')(vertical=true class="l-media__block")
36 +divider('medium')(vertical=true class="l-media__block")
37 +divider('quiet')(vertical=true class="l-media__block")
38 +divider('faint')(vertical=true class="l-media__block")
39 .l-media(style="height: 1em")
40 +divider('strong')(dot=true class="l-media__block")
41 +divider('medium')(dot=true class="l-media__block")
42 +divider('quiet')(dot=true class="l-media__block")
43 +divider('faint')(dot=true class="l-media__block")
44
45 each theme in ['accent', 'negative']
27 .c-box 46 .c-box
28 +divider('strong')(color=theme)= 'Strong' 47 +divider('strong')(color=theme)= 'Strong'
29 +divider('medium')(color=theme)= 'Medium' 48 +divider('medium')(color=theme)= 'Medium'
49 +divider('quiet')(color=theme)= 'Quiet'
30 +divider('faint')(color=theme)= 'Faint' 50 +divider('faint')(color=theme)= 'Faint'
31 +divider('strong')(color=theme) 51 +divider('strong')(color=theme)
32 +divider('medium')(color=theme) 52 +divider('medium')(color=theme)
53 +divider('quiet')(color=theme)
33 +divider('faint')(color=theme) 54 +divider('faint')(color=theme)
34 55
35 each theme in ['static-black', 'static-white'] 56 each theme in ['static-black', 'static-white']
@@ -39,7 +60,9 @@ mixin view-divider
39 .c-box(style=`background-color: var(--colors--blue-static--${bg});`) 60 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
40 +divider('strong')(color=theme)= 'Strong' 61 +divider('strong')(color=theme)= 'Strong'
41 +divider('medium')(color=theme)= 'Medium' 62 +divider('medium')(color=theme)= 'Medium'
63 +divider('quiet')(color=theme)= 'Quiet'
42 +divider('faint')(color=theme)= 'Faint' 64 +divider('faint')(color=theme)= 'Faint'
43 +divider('strong')(color=theme) 65 +divider('strong')(color=theme)
44 +divider('medium')(color=theme) 66 +divider('medium')(color=theme)
67 +divider('quiet')(color=theme)
45 +divider('faint')(color=theme) 68 +divider('faint')(color=theme)
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
index 3d01ca7..d6e2b56 100644
--- a/tpl/views/emoji.pug
+++ b/tpl/views/emoji.pug
@@ -1,14 +1,14 @@
1mixin view-emoji 1mixin view-emoji
2 +view('emoji', 'Emoji') 2 +view('emoji', 'Emoji')
3 .c-box 3 .c-box
4 +action-button(icon='trash') 4 +button(icon='trash')
5 = ' ' 5 = ' '
6 +action-button 6 +button
7 +emoji('drgn')(size='icon') 7 +emoji('drgn')(size='icon')
8 = ' ' 8 = ' '
9 +action-button(icon='trash' quiet=true) 9 +button(icon='trash' quiet=true)
10 = ' ' 10 = ' '
11 +action-button(quiet=true) 11 +button(quiet=true)
12 +emoji('drgn')(size='icon') 12 +emoji('drgn')(size='icon')
13 13
14 .c-box 14 .c-box
diff --git a/tpl/views/form.pug b/tpl/views/form.pug
index 5b24757..ca9e224 100644
--- a/tpl/views/form.pug
+++ b/tpl/views/form.pug
@@ -27,4 +27,4 @@ mixin view-form
27 +checkbox= 'I\'ve read and accept the terms and conditions' 27 +checkbox= 'I\'ve read and accept the terms and conditions'
28 28
29 +form-item('') 29 +form-item('')
30 +a-button(variant='primary')= 'Register' 30 +button(variant='primary')= 'Register'
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 4eb234a..7e366c0 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -1,5 +1,5 @@
1mixin view-lightbox 1mixin view-lightbox
2 +view('lightbox', 'Lightbox') 2 +view('lightbox', 'Lightbox')(wide=true)
3 .c-box 3 .c-box
4 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) 4 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
5 = "Let's try multiple links! " 5 = "Let's try multiple links! "
@@ -37,3 +37,15 @@ mixin view-lightbox
37 = ' ' 37 = ' '
38 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") 38 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
39 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" 39 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
40
41 +backdrop(maxHeight=true)
42 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true)
43 = "Let's try multiple links! "
44 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
45 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
46 = ' '
47 a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
48 = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
49 = ' '
50 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
51 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 7c5df03..682f8bb 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -2,7 +2,7 @@ mixin view-menu
2 +view('menu', 'Menu') 2 +view('menu', 'Menu')
3 .c-box 3 .c-box
4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) 4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
5 +action-button(quiet=true selected=true)= 'Menu' 5 +button(quiet=true selected=true)= 'Menu'
6 +popover 6 +popover
7 +menu 7 +menu
8 +menu-slot(class='l-media') 8 +menu-slot(class='l-media')
diff --git a/tpl/views/navbar.pug b/tpl/views/navbar.pug
new file mode 100644
index 0000000..345a22b
--- /dev/null
+++ b/tpl/views/navbar.pug
@@ -0,0 +1,19 @@
1mixin view-navbar
2 +view('navbar', 'Navbar')
3 .c-box
4 +navbar
5 +navbar-item= 'Home'
6 +navbar-item(selected=true)= 'Art'
7 +navbar-item= 'Emojis'
8
9 .c-box
10 +navbar(quiet=true)
11 +navbar-item= 'Home'
12 +navbar-item(selected=true)= 'Art'
13 +navbar-item= 'Emojis'
14
15 .c-box
16 +navbar(quiet=true)
17 +navbar-item(selected=true icon="arrow-left")= 'Home'
18 +navbar-item= 'Art'
19 +navbar-item= 'Emojis'
diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug
index b269596..bd78471 100644
--- a/tpl/views/popover.pug
+++ b/tpl/views/popover.pug
@@ -1,6 +1,6 @@
1mixin view-popover 1mixin view-popover
2 +view('popover', 'Popover') 2 +view('popover', 'Popover')
3 .c-box 3 .c-box
4 +action-button(quiet=true selected=true)= 'Popover' 4 +button(quiet=true selected=true)= 'Popover'
5 +popover 5 +popover
6 = loremIpsum 6 = loremIpsum
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 165e2ce..4309ff6 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -16,8 +16,8 @@ mixin view-text-field
16 div 16 div
17 +text-field(placeholder='Just landed in L.A.' class="u-p-50") 17 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
18 +slot('pre') 18 +slot('pre')
19 +action-button(quiet=true class='l-media__block')= 'Volpeon' 19 +button(quiet=true class='l-media__block')= 'Volpeon'
20 +divider('vertical')(class='u-mis-50') 20 +divider('vertical')(class='u-mis-50')
21 +slot('post') 21 +slot('post')
22 +action-button(quiet=true icon='smile' class='l-media__block') 22 +button(quiet=true icon='smile' class='l-media__block')
23 +action-button(quiet=true icon='send' class='l-media__block') 23 +button(quiet=true icon='send' class='l-media__block')
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-09-14 00:10:57 +0000