summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_button.scss6
-rw-r--r--tpl/objects/button.pug6
-rw-r--r--tpl/views/button.pug18
3 files changed, 29 insertions, 1 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index f35bc50..df1438f 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -157,5 +157,11 @@
157 color: fn.color(--any --key-focus --label); 157 color: fn.color(--any --key-focus --label);
158 } 158 }
159 } 159 }
160
161 @include iro.bem-modifier('round') {
162 padding-right: fn.dim(--pad-y);
163 padding-left: fn.dim(--pad-y);
164 border-radius: 100em;
165 }
160 } 166 }
161} 167}
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 8cae2f1..e99e5ab 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -3,7 +3,8 @@ mixin a-button
3 let classes = { 3 let classes = {
4 'o-button': true, 4 'o-button': true,
5 'o-button--block': attributes.block, 5 'o-button--block': attributes.block,
6 'o-button--outline': attributes.outline 6 'o-button--outline': attributes.outline,
7 'o-button--round': !!attributes.icon
7 } 8 }
8 if (attributes.variant) { 9 if (attributes.variant) {
9 classes['o-button--' + attributes.variant] = true 10 classes['o-button--' + attributes.variant] = true
@@ -12,4 +13,7 @@ mixin a-button
12 let href = attributes.disabled ? null : '#'; 13 let href = attributes.disabled ? null : '#';
13 14
14 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) 15 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled))
16 if attributes.icon
17 +icon(attributes.icon)(block=!block)
18 = ' '
15 block 19 block
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 9deba01..2a1bd57 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -8,13 +8,31 @@ mixin view-button
8 +a-button(variant='accent' outline=true disabled=true)= 'Button' 8 +a-button(variant='accent' outline=true disabled=true)= 'Button'
9 br 9 br
10 .l-button-group 10 .l-button-group
11 +a-button(variant='accent' icon='trash')
12 +a-button(variant='accent' disabled=true icon='trash')
13 +a-button(variant='accent' outline=true icon='trash')
14 +a-button(variant='accent' outline=true disabled=true icon='trash')
15 br
16 .l-button-group
11 +a-button(variant='primary')= 'Button' 17 +a-button(variant='primary')= 'Button'
12 +a-button(variant='primary' disabled=true)= 'Button' 18 +a-button(variant='primary' disabled=true)= 'Button'
13 +a-button(variant='primary' outline=true)= 'Button' 19 +a-button(variant='primary' outline=true)= 'Button'
14 +a-button(variant='primary' outline=true disabled=true)= 'Button' 20 +a-button(variant='primary' outline=true disabled=true)= 'Button'
15 br 21 br
16 .l-button-group 22 .l-button-group
23 +a-button(variant='primary' icon='trash')
24 +a-button(variant='primary' disabled=true icon='trash')
25 +a-button(variant='primary' outline=true icon='trash')
26 +a-button(variant='primary' outline=true disabled=true icon='trash')
27 br
28 .l-button-group
17 +a-button(variant='secondary')= 'Button' 29 +a-button(variant='secondary')= 'Button'
18 +a-button(variant='secondary' disabled=true)= 'Button' 30 +a-button(variant='secondary' disabled=true)= 'Button'
19 +a-button(variant='secondary' outline=true)= 'Button' 31 +a-button(variant='secondary' outline=true)= 'Button'
20 +a-button(variant='secondary' outline=true disabled=true)= 'Button' 32 +a-button(variant='secondary' outline=true disabled=true)= 'Button'
33 br
34 .l-button-group
35 +a-button(variant='secondary' icon='trash')
36 +a-button(variant='secondary' disabled=true icon='trash')
37 +a-button(variant='secondary' outline=true icon='trash')
38 +a-button(variant='secondary' outline=true disabled=true icon='trash')