diff options
Diffstat (limited to 'tpl/objects/button.pug')
-rw-r--r-- | tpl/objects/button.pug | 27 |
1 files changed, 18 insertions, 9 deletions
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index 0884c8d..3b5de2b 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug | |||
@@ -1,22 +1,31 @@ | |||
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, | ||
14 | 'is-highlighted': attributes.highlighted, | ||
9 | } | 15 | } |
10 | if (attributes.variant) { | 16 | if (attributes.theme) { |
11 | classes['o-button--' + attributes.variant] = true | 17 | classes['o-button--' + attributes.theme] = true |
12 | } | 18 | } |
13 | if (attributes.size) { | 19 | if (attributes.size) { |
14 | classes['o-button--' + attributes.size] = true | 20 | classes['o-button--' + attributes.size] = true |
15 | } | 21 | } |
22 | if (attributes.class) { | ||
23 | classes[attributes.class] = true; | ||
24 | } | ||
16 | 25 | ||
17 | let href = attributes.disabled ? null : '#'; | 26 | let href = attributes.disabled ? null : '#'; |
18 | 27 | ||
19 | a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) | 28 | a(class=classes href=href) |
20 | if attributes.icon | 29 | if attributes.icon |
21 | +icon(attributes.icon) | 30 | +icon(attributes.icon) |
22 | = ' ' | 31 | = ' ' |