diff options
-rw-r--r-- | src/objects/_button.scss | 6 | ||||
-rw-r--r-- | tpl/objects/button.pug | 6 | ||||
-rw-r--r-- | tpl/views/button.pug | 18 |
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') | ||