diff options
Diffstat (limited to 'tpl')
| -rw-r--r-- | tpl/index.pug | 4 | ||||
| -rw-r--r-- | tpl/objects/action-menu.pug | 8 | ||||
| -rw-r--r-- | tpl/objects/bubble.pug | 6 | ||||
| -rw-r--r-- | tpl/objects/dialog.pug | 8 | ||||
| -rw-r--r-- | tpl/objects/menu.pug | 10 | ||||
| -rw-r--r-- | tpl/objects/text-field.pug | 8 | ||||
| -rw-r--r-- | tpl/views/action-menu.pug | 6 | ||||
| -rw-r--r-- | tpl/views/bubble-group.pug | 6 | ||||
| -rw-r--r-- | tpl/views/bubble.pug | 6 | ||||
| -rw-r--r-- | tpl/views/dialog.pug | 4 | ||||
| -rw-r--r-- | tpl/views/text-field.pug | 6 | 
11 files changed, 36 insertions, 36 deletions
diff --git a/tpl/index.pug b/tpl/index.pug index 7bb59a0..f5d2f25 100644 --- a/tpl/index.pug +++ b/tpl/index.pug  | |||
| @@ -44,8 +44,8 @@ mixin user-card(name, hue) | |||
| 44 | - | 44 | - | 
| 45 | const avaName = name.slice(0, 1) | 45 | const avaName = name.slice(0, 1) | 
| 46 | 46 | ||
| 47 | .l-card.l-card--flush.l-card--75 | 47 | .l-media.l-media--flush.l-media--75 | 
| 48 | +avatar(block=true size='50' class='l-card__block' hue=hue) | 48 | +avatar(block=true size='50' class='l-media__block' hue=hue) | 
| 49 | = avaName | 49 | = avaName | 
| 50 | = name | 50 | = name | 
| 51 | 51 | ||
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug index 751e29d..bb21d9e 100644 --- a/tpl/objects/action-menu.pug +++ b/tpl/objects/action-menu.pug  | |||
| @@ -7,16 +7,16 @@ mixin action-menu | |||
| 7 | 7 | ||
| 8 | mixin action-menu-item | 8 | mixin action-menu-item | 
| 9 | button.o-action-menu__item(disabled=attributes.disabled) | 9 | button.o-action-menu__item(disabled=attributes.disabled) | 
| 10 | .l-card.l-card--flush | 10 | .l-media.l-media--flush | 
| 11 | .l-card__block.o-action-menu__icon-slot | 11 | .l-media__block.o-action-menu__icon-slot | 
| 12 | if attributes.icon | 12 | if attributes.icon | 
| 13 | if attributes.iconIsStatus | 13 | if attributes.iconIsStatus | 
| 14 | +status-indicator(attributes.icon)(class='o-action-menu__icon') | 14 | +status-indicator(attributes.icon)(class='o-action-menu__icon') | 
| 15 | else | 15 | else | 
| 16 | +icon(attributes.icon)(class='o-action-menu__icon') | 16 | +icon(attributes.icon)(class='o-action-menu__icon') | 
| 17 | .l-card__block.l-card__block--main | 17 | .l-media__block.l-media__block--main | 
| 18 | block | 18 | block | 
| 19 | .l-card__block.o-action-menu__icon-slot | 19 | .l-media__block.o-action-menu__icon-slot | 
| 20 | if attributes.postIcon | 20 | if attributes.postIcon | 
| 21 | +icon(attributes.postIcon)(class='o-action-menu__icon') | 21 | +icon(attributes.postIcon)(class='o-action-menu__icon') | 
| 22 | 22 | ||
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug index fad7242..bec6e9e 100644 --- a/tpl/objects/bubble.pug +++ b/tpl/objects/bubble.pug  | |||
| @@ -42,10 +42,10 @@ mixin bubble(user) | |||
| 42 | 42 | ||
| 43 | article(class=classes) | 43 | article(class=classes) | 
| 44 | if user && attributes.avatar | 44 | if user && attributes.avatar | 
| 45 | .l-card.l-card--flush.l-flex--align-start | 45 | .l-media.l-media--flush.l-flex--align-start | 
| 46 | .l-card__block.u-mt-50.u-sticky-top | 46 | .l-media__block.u-mt-50.u-sticky-top | 
| 47 | +avatar= user.slice(0, 2) | 47 | +avatar= user.slice(0, 2) | 
| 48 | .l-card__block.l-card__block--main | 48 | .l-media__block.l-media__block--main | 
| 49 | +content | 49 | +content | 
| 50 | else | 50 | else | 
| 51 | +content | 51 | +content | 
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 91b99d9..95aa41c 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug  | |||
| @@ -18,7 +18,7 @@ mixin dialog(title) | |||
| 18 | 'o-dialog__header': true, | 18 | 'o-dialog__header': true, | 
| 19 | 'u-themed': !attributes.flat, | 19 | 'u-themed': !attributes.flat, | 
| 20 | 't-lowered': !attributes.flat, | 20 | 't-lowered': !attributes.flat, | 
| 21 | 'l-card': true, | 21 | 'l-media': true, | 
| 22 | } | 22 | } | 
| 23 | 23 | ||
| 24 | let sidebarHeaderClass = { | 24 | let sidebarHeaderClass = { | 
| @@ -40,7 +40,7 @@ mixin dialog(title) | |||
| 40 | if slots['sidebar-header'] | 40 | if slots['sidebar-header'] | 
| 41 | - slots['sidebar-header']() | 41 | - slots['sidebar-header']() | 
| 42 | else | 42 | else | 
| 43 | +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= attributes.sidebarTitle | 43 | +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle | 
| 44 | 44 | ||
| 45 | if slots.sidebar | 45 | if slots.sidebar | 
| 46 | .o-dialog__sidebar.l-overflow | 46 | .o-dialog__sidebar.l-overflow | 
| @@ -51,8 +51,8 @@ mixin dialog(title) | |||
| 51 | - slots.header() | 51 | - slots.header() | 
| 52 | else | 52 | else | 
| 53 | if title | 53 | if title | 
| 54 | +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= title | 54 | +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= title | 
| 55 | +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-card__block') | 55 | +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') | 
| 56 | 56 | ||
| 57 | section(class=bodyClass) | 57 | section(class=bodyClass) | 
| 58 | if slots.body | 58 | if slots.body | 
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 3cc092a..52cbe5e 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug  | |||
| @@ -18,8 +18,8 @@ mixin menu-item | |||
| 18 | - | 18 | - | 
| 19 | let classes = { | 19 | let classes = { | 
| 20 | 'o-menu__item': true, | 20 | 'o-menu__item': true, | 
| 21 | 'l-card': true, | 21 | 'l-media': true, | 
| 22 | 'l-card--75': true, | 22 | 'l-media--75': true, | 
| 23 | 'is-selected': attributes.selected, | 23 | 'is-selected': attributes.selected, | 
| 24 | } | 24 | } | 
| 25 | if (attributes.class) { | 25 | if (attributes.class) { | 
| @@ -28,15 +28,15 @@ mixin menu-item | |||
| 28 | 28 | ||
| 29 | #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) | 29 | #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) | 
| 30 | if attributes.icon | 30 | if attributes.icon | 
| 31 | .l-card__block.o-menu__icon-slot | 31 | .l-media__block.o-menu__icon-slot | 
| 32 | if attributes.iconIsStatus | 32 | if attributes.iconIsStatus | 
| 33 | +status-indicator(attributes.icon)(class='o-menu__icon') | 33 | +status-indicator(attributes.icon)(class='o-menu__icon') | 
| 34 | else | 34 | else | 
| 35 | +icon(attributes.icon)(class='o-menu__icon') | 35 | +icon(attributes.icon)(class='o-menu__icon') | 
| 36 | .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass }) | 36 | .l-media__block.l-media__block--main&attributes({ class: attributes.contentClass }) | 
| 37 | block | 37 | block | 
| 38 | if attributes.postIcon | 38 | if attributes.postIcon | 
| 39 | .l-card__block.o-menu__icon-slot | 39 | .l-media__block.o-menu__icon-slot | 
| 40 | +icon(attributes.postIcon)(class='o-menu__icon') | 40 | +icon(attributes.postIcon)(class='o-menu__icon') | 
| 41 | 41 | ||
| 42 | mixin menu-header | 42 | mixin menu-header | 
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index 53d1362..d5c4444 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug  | |||
| @@ -14,9 +14,9 @@ mixin text-field | |||
| 14 | 'o-text-field--extended': !!block, | 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-media': !!block, | 
| 18 | 'l-card--flush': !!block, | 18 | 'l-media--flush': !!block, | 
| 19 | 'l-card--gapless': !!block, | 19 | 'l-media--gapless': !!block, | 
| 20 | } | 20 | } | 
| 21 | if (attributes.class) { | 21 | if (attributes.class) { | 
| 22 | classes[attributes.class] = true; | 22 | classes[attributes.class] = true; | 
| @@ -32,7 +32,7 @@ mixin text-field | |||
| 32 | if slots.pre | 32 | if slots.pre | 
| 33 | .u-d-contents.t-hi | 33 | .u-d-contents.t-hi | 
| 34 | - slots.pre() | 34 | - slots.pre() | 
| 35 | input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr) | 35 | input.o-text-field__native.l-media__block.l-media__block--main&attributes(attr) | 
| 36 | if slots.post | 36 | if slots.post | 
| 37 | .u-d-contents.t-hi | 37 | .u-d-contents.t-hi | 
| 38 | - slots.post() | 38 | - slots.post() | 
diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug index 4f96934..3357caa 100644 --- a/tpl/views/action-menu.pug +++ b/tpl/views/action-menu.pug  | |||
| @@ -4,9 +4,9 @@ mixin view-action-menu | |||
| 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 | +action-button(quiet=true selected=true)= 'Menu' | 
| 6 | +action-menu | 6 | +action-menu | 
| 7 | +action-menu-slot(class='l-card l-card--flush') | 7 | +action-menu-slot(class='l-media l-media--flush') | 
| 8 | +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block') | 8 | +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') | 
| 9 | .l-card__block.l-card__block--main | 9 | .l-media__block.l-media__block--main | 
| 10 | strong.u-d-block= 'Volpeon' | 10 | strong.u-d-block= 'Volpeon' | 
| 11 | small.u-d-block= '@volpeon@mk.vulpes.one' | 11 | small.u-d-block= '@volpeon@mk.vulpes.one' | 
| 12 | +action-menu-separator | 12 | +action-menu-separator | 
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug index 19b06c4..8464bc7 100644 --- a/tpl/views/bubble-group.pug +++ b/tpl/views/bubble-group.pug  | |||
| @@ -22,11 +22,11 @@ mixin view-bubble-group | |||
| 22 | +bubble-group('Volpeon') | 22 | +bubble-group('Volpeon') | 
| 23 | +bubble()(class='l-bubble-group__bubble') | 23 | +bubble()(class='l-bubble-group__bubble') | 
| 24 | +slot('header') | 24 | +slot('header') | 
| 25 | .l-card.l-card--flush | 25 | .l-media.l-media--flush | 
| 26 | .l-card__block.l-card__block--main | 26 | .l-media__block.l-media__block--main | 
| 27 | strong= 'Volpeon' | 27 | strong= 'Volpeon' | 
| 28 | small.u-ml-100= '@volpeon@mk.vulpes.one' | 28 | small.u-ml-100= '@volpeon@mk.vulpes.one' | 
| 29 | small.l-card__block | 29 | small.l-media__block | 
| 30 | = '5 minutes ago' | 30 | = '5 minutes ago' | 
| 31 | +icon('lock')(class='u-ml-100') | 31 | +icon('lock')(class='u-ml-100') | 
| 32 | +slot('body')= 'Full width bubbles test' | 32 | +slot('body')= 'Full width bubbles test' | 
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug index 0e65635..be9cf38 100644 --- a/tpl/views/bubble.pug +++ b/tpl/views/bubble.pug  | |||
| @@ -14,11 +14,11 @@ mixin view-bubble | |||
| 14 | .c-box.l-overflow(style='resize: vertical') | 14 | .c-box.l-overflow(style='resize: vertical') | 
| 15 | +bubble('Volpeon')(avatar=true) | 15 | +bubble('Volpeon')(avatar=true) | 
| 16 | +slot('header') | 16 | +slot('header') | 
| 17 | .l-card.l-card--flush | 17 | .l-media.l-media--flush | 
| 18 | .l-card__block.l-card__block--main | 18 | .l-media__block.l-media__block--main | 
| 19 | strong= 'Volpeon' | 19 | strong= 'Volpeon' | 
| 20 | small.u-ml-100= '@volpeon@mk.vulpes.one' | 20 | small.u-ml-100= '@volpeon@mk.vulpes.one' | 
| 21 | small.l-card__block | 21 | small.l-media__block | 
| 22 | = '5 minutes ago' | 22 | = '5 minutes ago' | 
| 23 | +icon('lock')(class='u-ml-100') | 23 | +icon('lock')(class='u-ml-100') | 
| 24 | +slot('body') | 24 | +slot('body') | 
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index f90ef21..9d6061d 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug  | |||
| @@ -42,10 +42,10 @@ mixin view-dialog | |||
| 42 | +backdrop | 42 | +backdrop | 
| 43 | +dialog | 43 | +dialog | 
| 44 | +slot('header') | 44 | +slot('header') | 
| 45 | .l-card__block.l-flex | 45 | .l-media__block.l-flex | 
| 46 | +action-button(quiet=true icon='chevron-left') | 46 | +action-button(quiet=true icon='chevron-left') | 
| 47 | +action-button(quiet=true icon='chevron-right') | 47 | +action-button(quiet=true icon='chevron-right') | 
| 48 | .l-card__block.l-card__block--main | 48 | .l-media__block.l-media__block--main | 
| 49 | +div-heading('sm')= 'Tags' | 49 | +div-heading('sm')= 'Tags' | 
| 50 | +slot('sidebar') | 50 | +slot('sidebar') | 
| 51 | +menu(style={ 'min-width': '10em' }) | 51 | +menu(style={ 'min-width': '10em' }) | 
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 262195d..9a60741 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-card__block')= 'Volpeon' | 19 | +action-button(quiet=true class='l-media__block')= 'Volpeon' | 
| 20 | +divider('vertical')(class='u-ml-50') | 20 | +divider('vertical')(class='u-ml-50') | 
| 21 | +slot('post') | 21 | +slot('post') | 
| 22 | +action-button(quiet=true icon='smile' class='l-card__block') | 22 | +action-button(quiet=true icon='smile' class='l-media__block') | 
| 23 | +action-button(quiet=true icon='send' class='l-card__block') | 23 | +action-button(quiet=true icon='send' class='l-media__block') | 
