diff options
Diffstat (limited to 'tpl/objects')
-rw-r--r-- | tpl/objects/action-button.pug | 36 | ||||
-rw-r--r-- | tpl/objects/badge.pug | 37 | ||||
-rw-r--r-- | tpl/objects/button.pug | 26 | ||||
-rw-r--r-- | tpl/objects/card.pug | 8 | ||||
-rw-r--r-- | tpl/objects/dialog.pug | 6 | ||||
-rw-r--r-- | tpl/objects/icon-nav.pug | 8 | ||||
-rw-r--r-- | tpl/objects/lightbox.pug | 6 | ||||
-rw-r--r-- | tpl/objects/menu.pug | 2 | ||||
-rw-r--r-- | tpl/objects/navbar.pug | 2 | ||||
-rw-r--r-- | tpl/objects/side-nav.pug | 2 |
10 files changed, 35 insertions, 98 deletions
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug deleted file mode 100644 index 0e77e58..0000000 --- a/tpl/objects/action-button.pug +++ /dev/null | |||
@@ -1,36 +0,0 @@ | |||
1 | include icon.pug | ||
2 | |||
3 | mixin action-button | ||
4 | - | ||
5 | let classes = { | ||
6 | 'o-action-button': true, | ||
7 | 'u-d-block': attributes.block, | ||
8 | 'o-action-button--secondary': attributes.secondary, | ||
9 | 'o-action-button--quiet': attributes.quiet, | ||
10 | 'o-action-button--pill': attributes.pill, | ||
11 | 'o-action-button--static': attributes.static, | ||
12 | 'o-action-button--icon': !!attributes.icon && !block, | ||
13 | 'is-selected': attributes.selected, | ||
14 | } | ||
15 | if (attributes.theme) { | ||
16 | classes['o-action-button--' + attributes.theme] = true | ||
17 | } | ||
18 | if (attributes.size) { | ||
19 | classes['o-action-button--' + attributes.size] = true | ||
20 | } | ||
21 | if (attributes.class) { | ||
22 | classes[attributes.class] = true; | ||
23 | } | ||
24 | |||
25 | let href = attributes.disabled ? null : '#'; | ||
26 | |||
27 | a(class=classes href=href) | ||
28 | if attributes.icon | ||
29 | +icon(attributes.icon) | ||
30 | = ' ' | ||
31 | if block | ||
32 | span.o-action-button__label | ||
33 | block | ||
34 | if attributes.postIcon | ||
35 | = ' ' | ||
36 | +icon(attributes.postIcon) | ||
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 @@ | |||
1 | mixin 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..c356bfe 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug | |||
@@ -1,22 +1,30 @@ | |||
1 | mixin a-button | 1 | include icon.pug |
2 | |||
3 | mixin 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, | ||
9 | } | 14 | } |
10 | if (attributes.variant) { | 15 | if (attributes.theme) { |
11 | classes['o-button--' + attributes.variant] = true | 16 | classes['o-button--' + attributes.theme] = true |
12 | } | 17 | } |
13 | if (attributes.size) { | 18 | if (attributes.size) { |
14 | classes['o-button--' + attributes.size] = true | 19 | classes['o-button--' + attributes.size] = true |
15 | } | 20 | } |
21 | if (attributes.class) { | ||
22 | classes[attributes.class] = true; | ||
23 | } | ||
16 | 24 | ||
17 | let href = attributes.disabled ? null : '#'; | 25 | let href = attributes.disabled ? null : '#'; |
18 | 26 | ||
19 | a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) | 27 | a(class=classes href=href) |
20 | if attributes.icon | 28 | if attributes.icon |
21 | +icon(attributes.icon) | 29 | +icon(attributes.icon) |
22 | = ' ' | 30 | = ' ' |
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index 1db2fe5..feb1441 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug | |||
@@ -1,9 +1,11 @@ | |||
1 | mixin card | 1 | mixin 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--thumbnail': !!attributes.thumbnail, | 6 | 'o-card--shadow': !!attributes.shadow, |
7 | 'o-card--quiet': !!attributes.quiet, | ||
8 | 'o-card--thumbnail': !!attributes.thumbnail, | ||
7 | } | 9 | } |
8 | 10 | ||
9 | if (attributes.class) { | 11 | if (attributes.class) { |
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/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 @@ | |||
1 | include icon.pug | 1 | include icon.pug |
2 | include status-indicator.pug | 2 | include status-indicator.pug |
3 | include action-button.pug | 3 | include button.pug |
4 | 4 | ||
5 | mixin icon-nav | 5 | mixin 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 842d44a..2d520b5 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug | |||
@@ -23,14 +23,14 @@ mixin lightbox(images) | |||
23 | header.o-lightbox__header | 23 | header.o-lightbox__header |
24 | div(class=linksClasses) | 24 | div(class=linksClasses) |
25 | block | 25 | block |
26 | +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 | 27 | ||
28 | each img, i in images | 28 | each img, i in images |
29 | img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) | 29 | img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) |
30 | 30 | ||
31 | if images.length > 1 | 31 | if images.length > 1 |
32 | +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') |
33 | +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 | 34 | ||
35 | .o-lightbox__thumbnails | 35 | .o-lightbox__thumbnails |
36 | each img, i in images | 36 | each img, i in images |
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 @@ | |||
1 | include icon.pug | 1 | include icon.pug |
2 | include status-indicator.pug | 2 | include status-indicator.pug |
3 | include action-button.pug | 3 | include button.pug |
4 | 4 | ||
5 | mixin menu | 5 | mixin menu |
6 | - | 6 | - |
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug index 5c7642c..14ec9d3 100644 --- a/tpl/objects/navbar.pug +++ b/tpl/objects/navbar.pug | |||
@@ -1,6 +1,6 @@ | |||
1 | include icon.pug | 1 | include icon.pug |
2 | include status-indicator.pug | 2 | include status-indicator.pug |
3 | include action-button.pug | 3 | include button.pug |
4 | 4 | ||
5 | mixin navbar | 5 | mixin navbar |
6 | - | 6 | - |
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 @@ | |||
1 | include icon.pug | 1 | include icon.pug |
2 | include status-indicator.pug | 2 | include status-indicator.pug |
3 | include action-button.pug | 3 | include button.pug |
4 | 4 | ||
5 | mixin side-nav | 5 | mixin side-nav |
6 | - | 6 | - |