Added action button

2 files changed, 82 insertions, 0 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 6971faa..2980016 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -12,6 +12,7 @@ include objects/radio.pug
 include objects/checkbox.pug
 include objects/switch.pug
 include objects/form.pug
+include objects/action-button.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -302,3 +303,63 @@ html
 
                     +form-item('')
                         +a-button(variant='primary')= 'Register'
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Action button'
+            +rule(level='medium')
+
+            +box
+                +action-button= 'Idle'
+                = ' '
+                +action-button(selected=true)= 'Selected'
+                = ' '
+                +action-button(disabled=true)= 'Disabled'
+                = ' '
+                +action-button(selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +action-button(icon='trash')= 'Idle'
+                = ' '
+                +action-button(icon='trash' selected=true)= 'Selected'
+                = ' '
+                +action-button(icon='trash' disabled=true)= 'Disabled'
+                = ' '
+                +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +action-button(icon='trash')
+                = ' '
+                +action-button(icon='trash' selected=true)
+                = ' '
+                +action-button(icon='trash' disabled=true)
+                = ' '
+                +action-button(icon='trash' selected=true disabled=true)
+
+            +box
+                +action-button(quiet=true )= 'Idle'
+                = ' '
+                +action-button(quiet=true selected=true)= 'Selected'
+                = ' '
+                +action-button(quiet=true disabled=true)= 'Disabled'
+                = ' '
+                +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +action-button(quiet=true icon='trash')= 'Idle'
+                = ' '
+                +action-button(quiet=true icon='trash' selected=true)= 'Selected'
+                = ' '
+                +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
+                = ' '
+                +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +action-button(quiet=true icon='trash')
+                = ' '
+                +action-button(quiet=true icon='trash' selected=true)
+                = ' '
+                +action-button(quiet=true icon='trash' disabled=true)
+                = ' '
+                +action-button(quiet=true icon='trash' selected=true disabled=true)
+
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
new file mode 100644
index 0000000..0afe1ea
--- /dev/null
+++ b/tpl/objects/action-button.pug
@@ -0,0 +1,21 @@
+include icon.pug
+
+mixin action-button
+  -
+    let classes = {
+      'o-action-button':        true,
+      'o-action-button--block': attributes.block,
+      'o-action-button--quiet': attributes.quiet,
+      'is-disabled':            attributes.disabled,
+      'is-selected':            attributes.selected
+    }
+    
+    let href = attributes.disabled ? null : '#';
+
+  a(class=classes href=href)
+    if attributes.icon
+      +icon(attributes.icon)
+      = ' '
+    if block
+      span.o-action-button__label
+        block