diff options
Diffstat (limited to 'tpl')
| -rw-r--r-- | tpl/objects/button.pug | 38 | ||||
| -rw-r--r-- | tpl/views/button.pug | 34 | ||||
| -rw-r--r-- | tpl/views/card.pug | 6 |
3 files changed, 33 insertions, 45 deletions
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index b9b4cbd..c356bfe 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug | |||
| @@ -4,13 +4,13 @@ mixin button | |||
| 4 | - | 4 | - |
| 5 | let classes = { | 5 | let classes = { |
| 6 | 'o-button': true, | 6 | 'o-button': true, |
| 7 | 'u-d-block': attributes.block, | 7 | 'u-d-block': attributes.block, |
| 8 | 'o-button--secondary': attributes.secondary, | 8 | 'o-button--secondary': attributes.secondary, |
| 9 | 'o-button--quiet': attributes.quiet, | 9 | 'o-button--quiet': attributes.quiet, |
| 10 | 'o-button--pill': attributes.pill, | 10 | 'o-button--pill': attributes.pill, |
| 11 | 'o-button--static': attributes.static, | 11 | 'o-button--badge': attributes.badge, |
| 12 | 'o-button--icon': !!attributes.icon && !block, | 12 | 'o-button--icon': !!attributes.icon && !block, |
| 13 | 'is-selected': attributes.selected, | 13 | 'is-selected': attributes.selected, |
| 14 | } | 14 | } |
| 15 | if (attributes.theme) { | 15 | if (attributes.theme) { |
| 16 | classes['o-button--' + attributes.theme] = true | 16 | classes['o-button--' + attributes.theme] = true |
| @@ -24,25 +24,13 @@ mixin button | |||
| 24 | 24 | ||
| 25 | let href = attributes.disabled ? null : '#'; | 25 | let href = attributes.disabled ? null : '#'; |
| 26 | 26 | ||
| 27 | if attributes.badge | 27 | a(class=classes href=href) |
| 28 | span(class=classes href=href) | 28 | if attributes.icon |
| 29 | if attributes.icon | 29 | +icon(attributes.icon) |
| 30 | +icon(attributes.icon) | 30 | = ' ' |
| 31 | = ' ' | 31 | if block |
| 32 | if block | 32 | span.o-button__label |
| 33 | span.o-button__label | 33 | block |
| 34 | block | 34 | if attributes.postIcon |
| 35 | if attributes.postIcon | 35 | = ' ' |
| 36 | = ' ' | 36 | +icon(attributes.postIcon) |
| 37 | +icon(attributes.postIcon) | ||
| 38 | else | ||
| 39 | a(class=classes href=href) | ||
| 40 | if attributes.icon | ||
| 41 | +icon(attributes.icon) | ||
| 42 | = ' ' | ||
| 43 | if block | ||
| 44 | span.o-button__label | ||
| 45 | block | ||
| 46 | if attributes.postIcon | ||
| 47 | = ' ' | ||
| 48 | +icon(attributes.postIcon) | ||
diff --git a/tpl/views/button.pug b/tpl/views/button.pug index 7e03e04..2e54458 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug | |||
| @@ -78,16 +78,16 @@ mixin view-button | |||
| 78 | +button(selected=true disabled=true)= 'Selected + disabled' | 78 | +button(selected=true disabled=true)= 'Selected + disabled' |
| 79 | br | 79 | br |
| 80 | br | 80 | br |
| 81 | +button(static=true )= 'Idle' | 81 | +button(badge=true)= 'Idle' |
| 82 | = ' ' | 82 | = ' ' |
| 83 | +button(static=true selected=true)= 'Selected' | 83 | +button(badge=true selected=true)= 'Selected' |
| 84 | = ' ' | 84 | = ' ' |
| 85 | +button(static=true disabled=true)= 'Disabled' | 85 | +button(badge=true disabled=true)= 'Disabled' |
| 86 | = ' ' | 86 | = ' ' |
| 87 | +button(static=true selected=true disabled=true)= 'Selected + disabled' | 87 | +button(badge=true selected=true disabled=true)= 'Selected + disabled' |
| 88 | br | 88 | br |
| 89 | br | 89 | br |
| 90 | +button(quiet=true )= 'Idle' | 90 | +button(quiet=true)= 'Idle' |
| 91 | = ' ' | 91 | = ' ' |
| 92 | +button(quiet=true selected=true)= 'Selected' | 92 | +button(quiet=true selected=true)= 'Selected' |
| 93 | = ' ' | 93 | = ' ' |
| @@ -105,13 +105,13 @@ mixin view-button | |||
| 105 | +button(pill=true selected=true disabled=true)= 'Selected + disabled' | 105 | +button(pill=true selected=true disabled=true)= 'Selected + disabled' |
| 106 | br | 106 | br |
| 107 | br | 107 | br |
| 108 | +button(pill=true static=true)= 'Idle' | 108 | +button(pill=true badge=true)= 'Idle' |
| 109 | = ' ' | 109 | = ' ' |
| 110 | +button(pill=true static=true selected=true)= 'Selected' | 110 | +button(pill=true badge=true selected=true)= 'Selected' |
| 111 | = ' ' | 111 | = ' ' |
| 112 | +button(pill=true static=true disabled=true)= 'Disabled' | 112 | +button(pill=true badge=true disabled=true)= 'Disabled' |
| 113 | = ' ' | 113 | = ' ' |
| 114 | +button(pill=true static=true selected=true disabled=true)= 'Selected + disabled' | 114 | +button(pill=true badge=true selected=true disabled=true)= 'Selected + disabled' |
| 115 | br | 115 | br |
| 116 | br | 116 | br |
| 117 | +button(pill=true quiet=true)= 'Idle' | 117 | +button(pill=true quiet=true)= 'Idle' |
| @@ -133,13 +133,13 @@ mixin view-button | |||
| 133 | +button(theme=theme selected=true disabled=true)= 'Selected + disabled' | 133 | +button(theme=theme selected=true disabled=true)= 'Selected + disabled' |
| 134 | br | 134 | br |
| 135 | br | 135 | br |
| 136 | +button(theme=theme static=true)= 'Idle' | 136 | +button(theme=theme badge=true)= 'Idle' |
| 137 | = ' ' | 137 | = ' ' |
| 138 | +button(theme=theme static=true selected=true)= 'Selected' | 138 | +button(theme=theme badge=true selected=true)= 'Selected' |
| 139 | = ' ' | 139 | = ' ' |
| 140 | +button(theme=theme static=true disabled=true)= 'Disabled' | 140 | +button(theme=theme badge=true disabled=true)= 'Disabled' |
| 141 | = ' ' | 141 | = ' ' |
| 142 | +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' | 142 | +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled' |
| 143 | br | 143 | br |
| 144 | br | 144 | br |
| 145 | +button(theme=theme quiet=true)= 'Idle' | 145 | +button(theme=theme quiet=true)= 'Idle' |
| @@ -164,13 +164,13 @@ mixin view-button | |||
| 164 | +button(theme=theme selected=true disabled=true)= 'Selected + disabled' | 164 | +button(theme=theme selected=true disabled=true)= 'Selected + disabled' |
| 165 | br | 165 | br |
| 166 | br | 166 | br |
| 167 | +button(theme=theme static=true)= 'Idle' | 167 | +button(theme=theme badge=true)= 'Idle' |
| 168 | = ' ' | 168 | = ' ' |
| 169 | +button(theme=theme static=true selected=true)= 'Selected' | 169 | +button(theme=theme badge=true selected=true)= 'Selected' |
| 170 | = ' ' | 170 | = ' ' |
| 171 | +button(theme=theme static=true disabled=true)= 'Disabled' | 171 | +button(theme=theme badge=true disabled=true)= 'Disabled' |
| 172 | = ' ' | 172 | = ' ' |
| 173 | +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' | 173 | +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled' |
| 174 | br | 174 | br |
| 175 | br | 175 | br |
| 176 | +button(theme=theme quiet=true)= 'Idle' | 176 | +button(theme=theme quiet=true)= 'Idle' |
diff --git a/tpl/views/card.pug b/tpl/views/card.pug index f030abf..e982925 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug | |||
| @@ -83,17 +83,17 @@ mixin view-card | |||
| 83 | +card-body | 83 | +card-body |
| 84 | .l-media | 84 | .l-media |
| 85 | .l-media__block | 85 | .l-media__block |
| 86 | +button(theme='positive' static=true pill=true size='sm' icon='repeat' href='#') | 86 | +button(theme='positive' badge=true pill=true size='sm' icon='repeat' href='#') |
| 87 | strong= '12' | 87 | strong= '12' |
| 88 | .l-media__block | 88 | .l-media__block |
| 89 | +button(theme='warning' static=true pill=true size='sm' icon='star' href='#') | 89 | +button(theme='warning' badge=true pill=true size='sm' icon='star' href='#') |
| 90 | strong= '34' | 90 | strong= '34' |
| 91 | .l-media__block.u-mis-auto | 91 | .l-media__block.u-mis-auto |
| 92 | +button(selected=true)= 'Reply' | 92 | +button(selected=true)= 'Reply' |
| 93 | 93 | ||
| 94 | +card(quiet=true href='#' class='l-card-list__card') | 94 | +card(quiet=true href='#' class='l-card-list__card') |
| 95 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) | 95 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) |
| 96 | +button(badge=true static=true selected=true)= 'Drawings' | 96 | +button(badge=true selected=true)= 'Drawings' |
| 97 | +card-body | 97 | +card-body |
| 98 | +card-title= 'XS Heading' | 98 | +card-title= 'XS Heading' |
| 99 | +card-content | 99 | +card-content |
