summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug16
-rw-r--r--tpl/objects/action-button.pug2
-rw-r--r--tpl/objects/dialog.pug29
-rw-r--r--tpl/objects/divider.pug12
-rw-r--r--tpl/objects/header.pug12
-rw-r--r--tpl/objects/list-group.pug4
-rw-r--r--tpl/objects/rule.pug12
-rw-r--r--tpl/objects/sidebar.pug12
-rw-r--r--tpl/objects/text-field.pug32
-rw-r--r--tpl/views/dialog.pug34
-rw-r--r--tpl/views/divider.pug (renamed from tpl/views/rule.pug)16
-rw-r--r--tpl/views/list-group.pug8
-rw-r--r--tpl/views/text-field.pug5
13 files changed, 134 insertions, 60 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index 400ec64..14bfa10 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -7,7 +7,7 @@
7include layouts/container.pug 7include layouts/container.pug
8 8
9include objects/heading.pug 9include objects/heading.pug
10include objects/rule.pug 10include objects/divider.pug
11include objects/badge.pug 11include objects/badge.pug
12include objects/button.pug 12include objects/button.pug
13include objects/text-field.pug 13include objects/text-field.pug
@@ -27,14 +27,16 @@ include objects/lightbox.pug
27include objects/list-group.pug 27include objects/list-group.pug
28include objects/table.pug 28include objects/table.pug
29include objects/alert.pug 29include objects/alert.pug
30include objects/header.pug
31include objects/sidebar.pug
30 32
31mixin view(id, title) 33mixin view(id, title)
32 - 34 -
33 views.push({ id, title }); 35 views.push({ id, title });
34 36
35 +container(padX=true padY=true narrow=true)(class='c-view' id=id) 37 +container(padX=true padY=true narrow=true class='c-view' id=id)
36 +h1-heading('xl')= title 38 +h1-heading('xl')= title
37 +rule('medium') 39 +divider('medium')
38 block 40 block
39 41
40mixin user-card(name, hue) 42mixin user-card(name, hue)
@@ -47,7 +49,7 @@ mixin user-card(name, hue)
47 = name 49 = name
48 50
49include views/heading.pug 51include views/heading.pug
50include views/rule.pug 52include views/divider.pug
51include views/colored-links.pug 53include views/colored-links.pug
52include views/badge.pug 54include views/badge.pug
53include views/button.pug 55include views/button.pug
@@ -80,9 +82,9 @@ html
80 script(src="script.js") 82 script(src="script.js")
81 83
82 body 84 body
83 .c-content 85 .c-content.l-overflow
84 +view-heading 86 +view-heading
85 +view-rule 87 +view-divider
86 +view-colored-links 88 +view-colored-links
87 +view-badge 89 +view-badge
88 +view-button 90 +view-button
@@ -104,7 +106,7 @@ html
104 +view-table 106 +view-table
105 +view-alert 107 +view-alert
106 108
107 .c-sidebar 109 +sidebar(class='c-sidebar')
108 +menu 110 +menu
109 each view in views 111 each view in views
110 +menu-item(tag='a' href='#' + view.id)= view.title 112 +menu-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 0467bd7..f99d789 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -4,7 +4,7 @@ mixin action-button
4 - 4 -
5 let classes = { 5 let classes = {
6 'o-action-button': true, 6 'o-action-button': true,
7 'o-action-button--block': attributes.block, 7 'u-d-block': attributes.block,
8 'o-action-button--quiet': attributes.quiet, 8 'o-action-button--quiet': attributes.quiet,
9 'o-action-button--round': attributes.round, 9 'o-action-button--round': attributes.round,
10 'is-selected': attributes.selected 10 'is-selected': attributes.selected
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2823e41..2474cc3 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -1,7 +1,6 @@
1include rule.pug
2include button.pug
3include heading.pug 1include heading.pug
4include action-button.pug 2include header.pug
3include sidebar.pug
5 4
6mixin dialog(title) 5mixin dialog(title)
7 - const slots = {} 6 - const slots = {}
@@ -13,9 +12,7 @@ mixin dialog(title)
13 block ? block() : undefined 12 block ? block() : undefined
14 13
15 let classes = { 14 let classes = {
16 'o-dialog': true, 15 'o-dialog': true,
17 't-raised': true,
18 'o-dialog--split': !!slots.sidebar,
19 } 16 }
20 17
21 let bodyClass = { 18 let bodyClass = {
@@ -26,16 +23,26 @@ mixin dialog(title)
26 } 23 }
27 24
28 div(class=classes) 25 div(class=classes)
26 if slots['sidebar-header']
27 +header(class='o-dialog__sidebar-header')
28 - slots['sidebar-header']()
29
29 if slots.sidebar 30 if slots.sidebar
30 .o-dialog__sidebar 31 +sidebar(class='o-dialog__sidebar')
31 - slots.sidebar() 32 - slots.sidebar()
32 header.o-dialog__header 33
33 +div-heading('md')(class='o-dialog__title') 34 +header(class='o-dialog__header')
34 = title 35 if slots.header
35 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') 36 - slots.header()
37 else
38 if title
39 +div-heading('sm')(class='o-dialog__label')= title
40 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
41
36 section(class=bodyClass) 42 section(class=bodyClass)
37 if slots.body 43 if slots.body
38 - slots.body() 44 - slots.body()
45
39 footer.o-dialog__footer.l-button-group 46 footer.o-dialog__footer.l-button-group
40 +a-button(outline=true)= 'Cancel' 47 +a-button(outline=true)= 'Cancel'
41 = ' ' 48 = ' '
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
new file mode 100644
index 0000000..094df07
--- /dev/null
+++ b/tpl/objects/divider.pug
@@ -0,0 +1,12 @@
1mixin divider(level)
2 -
3 let classes = {
4 'o-divider': true,
5 'o-divider--labelled': !!block,
6 ['o-divider--' + level]: true
7 }
8
9 div(class=classes)&attributes(attributes)
10 if block
11 .o-divider__label
12 block
diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug
new file mode 100644
index 0000000..4518afc
--- /dev/null
+++ b/tpl/objects/header.pug
@@ -0,0 +1,12 @@
1mixin header
2 -
3 let classes = {
4 'o-header': true
5 }
6 if (attributes.class) {
7 classes[attributes.class] = true;
8 }
9
10 header(class=classes)
11 .o-header__content.t-lowered
12 block
diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug
index 36be264..ad3c212 100644
--- a/tpl/objects/list-group.pug
+++ b/tpl/objects/list-group.pug
@@ -5,8 +5,8 @@ mixin list-group
5mixin list-group-item 5mixin list-group-item
6 - 6 -
7 let classes = { 7 let classes = {
8 'o-list-group__item': true, 8 'o-list-group__item': true,
9 'o-list-group__item--action': attributes.action, 9 'o-list-group__item--interactive': attributes.interactive,
10 } 10 }
11 11
12 div(class=classes) 12 div(class=classes)
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug
deleted file mode 100644
index b2f3a38..0000000
--- a/tpl/objects/rule.pug
+++ /dev/null
@@ -1,12 +0,0 @@
1mixin rule(level)
2 -
3 let classes = {
4 'o-rule': true,
5 'o-rule--labelled': !!block,
6 ['o-rule--' + level]: true
7 }
8
9 div(class=classes)&attributes(attributes)
10 if block
11 .o-rule__label
12 block
diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug
new file mode 100644
index 0000000..caa0f1f
--- /dev/null
+++ b/tpl/objects/sidebar.pug
@@ -0,0 +1,12 @@
1mixin sidebar
2 -
3 let classes = {
4 'o-sidebar': true
5 }
6 if (attributes.class) {
7 classes[attributes.class] = true;
8 }
9
10 aside(class=classes)
11 .o-sidebar__content.l-overflow
12 block
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index cbdb8c4..673aa27 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -10,23 +10,33 @@ mixin text-field
10 block ? block() : undefined 10 block ? block() : undefined
11 11
12 let classes = { 12 let classes = {
13 'o-text-field': true, 13 'o-text-field': true,
14 'o-text-field--ext': attributes.ext, 14 'o-text-field--extended': !!block,
15 'is-invalid': attributes.invalid, 15 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled, 16 'is-disabled': attributes.disabled,
17 'l-card': !!block, 17 'l-card': !!block,
18 'l-card--flush': !!block, 18 'l-card--flush': !!block,
19 'l-card--gapless': !!block 19 'l-card--gapless': !!block
20 }
21 if (attributes.class) {
22 classes[attributes.class] = true;
23 }
24
25 const attr = {
26 placeholder: attributes.placeholder,
27 disabled: attributes.disabled
20 } 28 }
21 29
22 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) 30 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
23 if !!block 31 if !!block
24 if slots.pre 32 if slots.pre
25 - slots.pre() 33 .u-d-contents.t-raised
26 input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes) 34 - slots.pre()
35 input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr)
27 if slots.post 36 if slots.post
28 - slots.post() 37 .u-d-contents.t-raised
38 - slots.post()
29 .o-text-field__bg 39 .o-text-field__bg
30 else 40 else
31 input.o-text-field__native&attributes(attributes) 41 input.o-text-field__native&attributes(attr)
32 .o-text-field__bg 42 .o-text-field__bg
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 6aaead5..0b6f8e7 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -18,10 +18,40 @@ mixin view-dialog
18 18
19 .c-box 19 .c-box
20 +backdrop 20 +backdrop
21 +dialog('Lorem ipsum')(noRule=true) 21 +dialog('Tags')
22 +slot('sidebar-header')
23 +div-heading('sm')(class='o-dialog__label')= '#channel'
24 +slot('sidebar')
25 +menu(style={ 'min-width': '10em' })
26 +menu-item(icon='bookmark')= 'Bookmark'
27 +menu-item(icon='tags', selected=true)= 'Tags'
28 +menu-item(icon='hash')= 'achannel'
29 +slot('body')
30 p.u-mt-0= loremIpsum
31
32 .c-box
33 +backdrop
34 +dialog('#channel')
35 +slot('sidebar')
36 +menu(style={ 'min-width': '10em' })
37 +menu-item(icon='bookmark')= 'Bookmark'
38 +menu-item(icon='tags', selected=true)= 'Tags'
39 +menu-item(icon='hash')= 'achannel'
40 +slot('body')
41 p.u-mt-0= loremIpsum
42
43 .c-box
44 +backdrop
45 +dialog
46 +slot('header')
47 .l-card.l-card--flush
48 .l-card__block.l-flex
49 +action-button(quiet=true icon='chevron-left')
50 +action-button(quiet=true icon='chevron-right')
51 .l-card__block.l-card__block--main
52 +div-heading('sm')= 'Tags'
22 +slot('sidebar') 53 +slot('sidebar')
23 +menu(style={ 'min-width': '10em' }) 54 +menu(style={ 'min-width': '10em' })
24 +menu-header= '#channel'
25 +menu-item(icon='bookmark')= 'Bookmark' 55 +menu-item(icon='bookmark')= 'Bookmark'
26 +menu-item(icon='tags', selected=true)= 'Tags' 56 +menu-item(icon='tags', selected=true)= 'Tags'
27 +menu-item(icon='hash')= 'achannel' 57 +menu-item(icon='hash')= 'achannel'
diff --git a/tpl/views/rule.pug b/tpl/views/divider.pug
index 495c804..8c3ec0c 100644
--- a/tpl/views/rule.pug
+++ b/tpl/views/divider.pug
@@ -1,21 +1,21 @@
1mixin view-rule 1mixin view-divider
2 +view('rule', 'Rule') 2 +view('divider', 'Divider')
3 .c-box 3 .c-box
4 +div-heading('lg')= 'Heading' 4 +div-heading('lg')= 'Heading'
5 +rule('strong') 5 +divider('strong')
6 p= loremIpsum 6 p= loremIpsum
7 7
8 .c-box 8 .c-box
9 +div-heading('sm')= 'Heading' 9 +div-heading('sm')= 'Heading'
10 +rule('medium') 10 +divider('medium')
11 p= loremIpsum 11 p= loremIpsum
12 12
13 .c-box 13 .c-box
14 +div-heading('xs')= 'Heading' 14 +div-heading('xs')= 'Heading'
15 +rule('faint') 15 +divider('faint')
16 p= loremIpsum 16 p= loremIpsum
17 17
18 .c-box 18 .c-box
19 +rule('strong')= 'Strong' 19 +divider('strong')= 'Strong'
20 +rule('medium')= 'Medium' 20 +divider('medium')= 'Medium'
21 +rule('faint')= 'Faint' 21 +divider('faint')= 'Faint'
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug
index 970f0fb..9acef31 100644
--- a/tpl/views/list-group.pug
+++ b/tpl/views/list-group.pug
@@ -9,7 +9,7 @@ mixin view-list-group
9 9
10 .c-box 10 .c-box
11 +list-group 11 +list-group
12 +list-group-item(action=true)= 'First item' 12 +list-group-item(interactive=true)= 'First item'
13 +list-group-item(action=true)= 'Second item' 13 +list-group-item(interactive=true)= 'Second item'
14 +list-group-item(action=true)= 'Third item' 14 +list-group-item(interactive=true)= 'Third item'
15 +list-group-item(action=true)= 'Fourth item' 15 +list-group-item(interactive=true)= 'Fourth item'
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 0ba84be..262195d 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -14,9 +14,10 @@ mixin view-text-field
14 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) 14 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
15 br 15 br
16 div 16 div
17 +text-field(placeholder='Just landed in L.A.') 17 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
18 +slot('pre') 18 +slot('pre')
19 +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon' 19 +action-button(quiet=true class='l-card__block')= 'Volpeon'
20 +divider('vertical')(class='u-ml-50')
20 +slot('post') 21 +slot('post')
21 +action-button(quiet=true icon='smile' class='l-card__block') 22 +action-button(quiet=true icon='smile' class='l-card__block')
22 +action-button(quiet=true icon='send' class='l-card__block') 23 +action-button(quiet=true icon='send' class='l-card__block')