diff options
Diffstat (limited to 'tpl/objects')
-rw-r--r-- | tpl/objects/avatar.pug | 26 | ||||
-rw-r--r-- | tpl/objects/card.pug | 43 | ||||
-rw-r--r-- | tpl/objects/menu.pug | 2 | ||||
-rw-r--r-- | tpl/objects/message.pug | 2 | ||||
-rw-r--r-- | tpl/objects/side-nav.pug | 2 | ||||
-rw-r--r-- | tpl/objects/text-field.pug | 1 |
6 files changed, 45 insertions, 31 deletions
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug index 19439bb..ca3de07 100644 --- a/tpl/objects/avatar.pug +++ b/tpl/objects/avatar.pug | |||
@@ -20,11 +20,21 @@ mixin avatar | |||
20 | styles['--avatar--colors--h'] = attributes.hue; | 20 | styles['--avatar--colors--h'] = attributes.hue; |
21 | } | 21 | } |
22 | 22 | ||
23 | a(class=classes style=styles href=attributes.href) | 23 | if attributes.href |
24 | if attributes.status | 24 | a(class=classes style=styles href=attributes.href) |
25 | +status-indicator(attributes.status)(class='o-avatar__status') | 25 | if attributes.status |
26 | if attributes.src | 26 | +status-indicator(attributes.status)(class='o-avatar__status') |
27 | img.o-avatar__content(src=attributes.src) | 27 | if attributes.src |
28 | else | 28 | img.o-avatar__content(src=attributes.src) |
29 | .o-avatar__content | 29 | else |
30 | block | 30 | .o-avatar__content |
31 | block | ||
32 | else | ||
33 | div(class=classes style=styles) | ||
34 | if attributes.status | ||
35 | +status-indicator(attributes.status)(class='o-avatar__status') | ||
36 | if attributes.src | ||
37 | img.o-avatar__content(src=attributes.src) | ||
38 | else | ||
39 | .o-avatar__content | ||
40 | block | ||
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index d6516be..d61393d 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug | |||
@@ -1,29 +1,34 @@ | |||
1 | mixin card | 1 | mixin card |
2 | - const slots = {} | ||
3 | |||
4 | mixin slot(key) | ||
5 | - slots[key] = block | ||
6 | |||
7 | - | 2 | - |
8 | block ? block() : undefined | ||
9 | |||
10 | let classes = { | 3 | let classes = { |
11 | 'o-card': true, | 4 | 'o-card': true, |
12 | } | 5 | } |
13 | 6 | ||
14 | if attributes.href | 7 | if attributes.href |
15 | a(href=attributes.href class=classes) | 8 | a(href=attributes.href class=classes) |
16 | if slots.body | 9 | block |
17 | .o-card__body | ||
18 | - slots.body() | ||
19 | if slots.footer | ||
20 | .o-card__footer | ||
21 | - slots.footer() | ||
22 | else | 10 | else |
23 | div(class=classes) | 11 | div(class=classes) |
24 | if slots.body | 12 | block |
25 | .o-card__body | 13 | |
26 | - slots.body() | 14 | mixin card-image |
27 | if slots.footer | 15 | .o-card__image |
28 | .o-card__footer | 16 | img.o-card__image-img(src=attributes.src) |
29 | - slots.footer() | 17 | |
18 | mixin card-body | ||
19 | .o-card__body | ||
20 | block | ||
21 | |||
22 | mixin card-title | ||
23 | h1.o-card__title | ||
24 | block | ||
25 | |||
26 | mixin card-avatar | ||
27 | +avatar(class='o-card__avatar' src=attributes.src size='xl') | ||
28 | |||
29 | mixin card-content | ||
30 | .o-card__content | ||
31 | block | ||
32 | mixin card-footer | ||
33 | footer.o-card__footer | ||
34 | block | ||
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index a8b20d7..578f9bc 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug | |||
@@ -19,7 +19,7 @@ mixin menu-item | |||
19 | let classes = { | 19 | let classes = { |
20 | 'o-menu__item': true, | 20 | 'o-menu__item': true, |
21 | 'l-media': true, | 21 | 'l-media': true, |
22 | 'l-media--75': true, | 22 | 'l-media--sm': true, |
23 | 'o-menu__header': attributes.header, | 23 | 'o-menu__header': attributes.header, |
24 | 'is-selected': attributes.selected, | 24 | 'is-selected': attributes.selected, |
25 | } | 25 | } |
diff --git a/tpl/objects/message.pug b/tpl/objects/message.pug index d644347..6b64a40 100644 --- a/tpl/objects/message.pug +++ b/tpl/objects/message.pug | |||
@@ -45,7 +45,7 @@ mixin message(user) | |||
45 | 45 | ||
46 | article(class=classes) | 46 | article(class=classes) |
47 | if user && attributes.avatar | 47 | if user && attributes.avatar |
48 | .l-media.l-media--flush.l-flex--align-start | 48 | .l-media.l-flex--align-start |
49 | .l-media__block.u-mt-50.u-p-sticky-top | 49 | .l-media__block.u-mt-50.u-p-sticky-top |
50 | +avatar= user.slice(0, 2) | 50 | +avatar= user.slice(0, 2) |
51 | .l-media__block.l-media__block--main | 51 | .l-media__block.l-media__block--main |
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug index 511f298..ccd24e4 100644 --- a/tpl/objects/side-nav.pug +++ b/tpl/objects/side-nav.pug | |||
@@ -19,7 +19,7 @@ mixin side-nav-item | |||
19 | let classes = { | 19 | let classes = { |
20 | 'o-side-nav__item': true, | 20 | 'o-side-nav__item': true, |
21 | 'l-media': true, | 21 | 'l-media': true, |
22 | 'l-media--75': true, | 22 | 'l-media--sm': true, |
23 | 'o-side-nav__header': attributes.header, | 23 | 'o-side-nav__header': attributes.header, |
24 | 'is-selected': attributes.selected, | 24 | 'is-selected': attributes.selected, |
25 | } | 25 | } |
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index f8e5263..0342f01 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug | |||
@@ -15,7 +15,6 @@ mixin text-field | |||
15 | 'is-invalid': attributes.invalid, | 15 | 'is-invalid': attributes.invalid, |
16 | 'is-disabled': attributes.disabled, | 16 | 'is-disabled': attributes.disabled, |
17 | 'l-media': !!block, | 17 | 'l-media': !!block, |
18 | 'l-media--flush': !!block, | ||
19 | 'l-media--gapless': !!block, | 18 | 'l-media--gapless': !!block, |
20 | } | 19 | } |
21 | if (attributes.class) { | 20 | if (attributes.class) { |