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 |