summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/objects/action-button.pug3
-rw-r--r--tpl/objects/button.pug1
-rw-r--r--tpl/views/action-button.pug22
-rw-r--r--tpl/views/button.pug15
4 files changed, 40 insertions, 1 deletions
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 976a646..c3a9b53 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -10,6 +10,9 @@ mixin action-button
10 'o-action-button--icon': !!attributes.icon && !block, 10 'o-action-button--icon': !!attributes.icon && !block,
11 'is-selected': attributes.selected 11 'is-selected': attributes.selected
12 } 12 }
13 if (attributes.theme) {
14 classes['o-action-button--' + attributes.theme] = true
15 }
13 if (attributes.size) { 16 if (attributes.size) {
14 classes['o-action-button--' + attributes.size] = true 17 classes['o-action-button--' + attributes.size] = true
15 } 18 }
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 61ba0b6..b5fb8da 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -3,6 +3,7 @@ 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--primary': attributes.primary,
6 'o-button--outline': attributes.outline, 7 'o-button--outline': attributes.outline,
7 'o-button--round': !!attributes.icon 8 'o-button--round': !!attributes.icon
8 } 9 }
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 2c94c68..8fbf9ea 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -85,3 +85,25 @@ mixin view-action-button
85 +action-button(pill=true quiet=true disabled=true)= 'Disabled' 85 +action-button(pill=true quiet=true disabled=true)= 'Disabled'
86 = ' ' 86 = ' '
87 +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' 87 +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
88
89 each theme in ['static-black', 'static-white']
90 -
91 const bg = theme.startsWith('static-black') ? 500 : 1000;
92
93 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
94 +action-button(theme=theme)= 'Idle'
95 = ' '
96 +action-button(theme=theme selected=true)= 'Selected'
97 = ' '
98 +action-button(theme=theme disabled=true)= 'Disabled'
99 = ' '
100 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
101
102 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
103 +action-button(theme=theme quiet=true)= 'Idle'
104 = ' '
105 +action-button(theme=theme quiet=true selected=true)= 'Selected'
106 = ' '
107 +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
108 = ' '
109 +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index c476d9b..eacf302 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -45,7 +45,7 @@ mixin view-button
45 +a-button(variant=theme outline=true icon='trash') 45 +a-button(variant=theme outline=true icon='trash')
46 +a-button(variant=theme outline=true disabled=true icon='trash') 46 +a-button(variant=theme outline=true disabled=true icon='trash')
47 47
48 each theme in ['static-black', 'static-black-primary', 'static-white', 'static-white-primary'] 48 each theme in ['static-black', 'static-white']
49 - 49 -
50 const bg = theme.startsWith('static-black') ? 500 : 1000; 50 const bg = theme.startsWith('static-black') ? 500 : 1000;
51 51
@@ -61,3 +61,16 @@ mixin view-button
61 +a-button(variant=theme disabled=true icon='trash') 61 +a-button(variant=theme disabled=true icon='trash')
62 +a-button(variant=theme outline=true icon='trash') 62 +a-button(variant=theme outline=true icon='trash')
63 +a-button(variant=theme outline=true disabled=true icon='trash') 63 +a-button(variant=theme outline=true disabled=true icon='trash')
64
65 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
66 .l-button-group
67 +a-button(variant=theme primary=true)= 'Button'
68 +a-button(variant=theme primary=true disabled=true)= 'Button'
69 +a-button(variant=theme primary=true outline=true)= 'Button'
70 +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
71 br
72 .l-button-group
73 +a-button(variant=theme primary=true icon='trash')
74 +a-button(variant=theme primary=true disabled=true icon='trash')
75 +a-button(variant=theme primary=true outline=true icon='trash')
76 +a-button(variant=theme primary=true outline=true disabled=true icon='trash')