diff options
Diffstat (limited to 'tpl/views')
| -rw-r--r-- | tpl/views/action-button.pug | 22 | ||||
| -rw-r--r-- | tpl/views/button.pug | 15 |
2 files changed, 36 insertions, 1 deletions
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') | ||
