Consolidating button, action-button and badge; change design to have some 3D components

1 files changed, 56 insertions, 12 deletions

diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 8fbf9ea..025bd78 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -8,8 +8,8 @@ mixin view-action-button
             +action-button(size='lg')= 'Idle'
             = ' '
             +action-button(size='xl')= 'Idle'
-
-        .c-box
+            br
+            br
             +action-button(icon='trash' size='sm')
             = ' '
             +action-button(icon='trash')
@@ -17,6 +17,15 @@ mixin view-action-button
             +action-button(icon='trash' size='lg')
             = ' '
             +action-button(icon='trash' size='xl')
+            br
+            br
+            +action-button(icon='user' size='sm')= 'Idle'
+            = ' '
+            +action-button(icon='user')= 'Idle'
+            = ' '
+            +action-button(icon='user' size='lg')= 'Idle'
+            = ' '
+            +action-button(icon='user' size='xl')= 'Idle'
 
         .c-box
             +action-button(pill=true size='sm')= 'Idle'
@@ -26,8 +35,8 @@ mixin view-action-button
             +action-button(pill=true size='lg')= 'Idle'
             = ' '
             +action-button(pill=true size='xl')= 'Idle'
-
-        .c-box
+            br
+            br
             +action-button(pill=true icon='trash' size='sm')
             = ' '
             +action-button(pill=true icon='trash')
@@ -35,6 +44,15 @@ mixin view-action-button
             +action-button(pill=true icon='trash' size='lg')
             = ' '
             +action-button(pill=true icon='trash' size='xl')
+            br
+            br
+            +action-button(pill=true icon='user' size='sm')= 'Idle'
+            = ' '
+            +action-button(pill=true icon='user')= 'Idle'
+            = ' '
+            +action-button(pill=true icon='user' size='lg')= 'Idle'
+            = ' '
+            +action-button(pill=true icon='user' size='xl')= 'Idle'
 
         .c-box
             +action-button= 'Label'
@@ -42,8 +60,15 @@ mixin view-action-button
             +action-button(icon='trash')= 'Label'
             = ' '
             +action-button(icon='trash')
-
-        .c-box
+            br
+            br
+            +action-button(secondary=true)= 'Label'
+            = ' '
+            +action-button(secondary=true icon='trash')= 'Label'
+            = ' '
+            +action-button(secondary=true icon='trash')
+            br
+            br
             +action-button(quiet=true)= 'Label'
             = ' '
             +action-button(quiet=true icon='trash')= 'Label'
@@ -58,8 +83,8 @@ mixin view-action-button
             +action-button(disabled=true)= 'Disabled'
             = ' '
             +action-button(selected=true disabled=true)= 'Selected + disabled'
-
-        .c-box
+            br
+            br
             +action-button(quiet=true )= 'Idle'
             = ' '
             +action-button(quiet=true selected=true)= 'Selected'
@@ -76,8 +101,8 @@ mixin view-action-button
             +action-button(pill=true disabled=true)= 'Disabled'
             = ' '
             +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'
-
-        .c-box
+            br
+            br
             +action-button(pill=true quiet=true)= 'Idle'
             = ' '
             +action-button(pill=true quiet=true selected=true)= 'Selected'
@@ -86,6 +111,25 @@ mixin view-action-button
             = ' '
             +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
 
+        each theme, i in ['accent', 'positive', 'negative', 'warning']
+            .c-box
+                +action-button(theme=theme)= 'Idle'
+                = ' '
+                +action-button(theme=theme selected=true)= 'Selected'
+                = ' '
+                +action-button(theme=theme disabled=true)= 'Disabled'
+                = ' '
+                +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +action-button(theme=theme quiet=true)= 'Idle'
+                = ' '
+                +action-button(theme=theme quiet=true selected=true)= 'Selected'
+                = ' '
+                +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
+                = ' '
+                +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
+
         each theme in ['static-black', 'static-white']
             -
                 const bg = theme.startsWith('static-black') ? 500 : 1000;
@@ -98,8 +142,8 @@ mixin view-action-button
                 +action-button(theme=theme disabled=true)= 'Disabled'
                 = ' '
                 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
-
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                br
+                br
                 +action-button(theme=theme quiet=true)= 'Idle'
                 = ' '
                 +action-button(theme=theme quiet=true selected=true)= 'Selected'