summaryrefslogtreecommitdiffstats
path: root/tpl/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-26 14:40:11 +0100
committerVolpeon <git@volpeon.ink>2022-03-26 14:40:11 +0100
commite4255279ff72e5438d297888d808851cdf2178ed (patch)
tree52fbae2c67f65376eae97025b433038d9f4a0e35 /tpl/objects
parentSplit demo in :target views (diff)
downloadiro-design-e4255279ff72e5438d297888d808851cdf2178ed.tar.gz
iro-design-e4255279ff72e5438d297888d808851cdf2178ed.tar.bz2
iro-design-e4255279ff72e5438d297888d808851cdf2178ed.zip
Lots of updates, especially dialog
Diffstat (limited to 'tpl/objects')
-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
8 files changed, 78 insertions, 37 deletions
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