diff options
| author | Volpeon <git@volpeon.ink> | 2024-06-26 09:19:02 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2024-06-26 09:19:02 +0200 |
| commit | 4e87fb46f2958ae28bdcfbc469118f14297b4d26 (patch) | |
| tree | 4b1a6c99a5e2273487eb3cff9db5c60007241d20 /tpl/views | |
| parent | Action button styling (diff) | |
| download | iro-design-4e87fb46f2958ae28bdcfbc469118f14297b4d26.tar.gz iro-design-4e87fb46f2958ae28bdcfbc469118f14297b4d26.tar.bz2 iro-design-4e87fb46f2958ae28bdcfbc469118f14297b4d26.zip | |
Pill version for action button
Diffstat (limited to 'tpl/views')
| -rw-r--r-- | tpl/views/action-button.pug | 89 |
1 files changed, 58 insertions, 31 deletions
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug index 8fb4e58..2c94c68 100644 --- a/tpl/views/action-button.pug +++ b/tpl/views/action-button.pug | |||
| @@ -1,31 +1,63 @@ | |||
| 1 | mixin view-action-button | 1 | mixin view-action-button |
| 2 | +view('action-button', 'Action button') | 2 | +view('action-button', 'Action button') |
| 3 | .c-box | 3 | .c-box |
| 4 | +action-button(size='sm')= 'Idle' | ||
| 5 | = ' ' | ||
| 4 | +action-button= 'Idle' | 6 | +action-button= 'Idle' |
| 5 | = ' ' | 7 | = ' ' |
| 6 | +action-button(selected=true)= 'Selected' | 8 | +action-button(size='lg')= 'Idle' |
| 7 | = ' ' | 9 | = ' ' |
| 8 | +action-button(disabled=true)= 'Disabled' | 10 | +action-button(size='xl')= 'Idle' |
| 11 | |||
| 12 | .c-box | ||
| 13 | +action-button(icon='trash' size='sm') | ||
| 9 | = ' ' | 14 | = ' ' |
| 10 | +action-button(selected=true disabled=true)= 'Selected + disabled' | 15 | +action-button(icon='trash') |
| 11 | br | 16 | = ' ' |
| 12 | br | 17 | +action-button(icon='trash' size='lg') |
| 13 | +action-button(icon='trash')= 'Idle' | 18 | = ' ' |
| 19 | +action-button(icon='trash' size='xl') | ||
| 20 | |||
| 21 | .c-box | ||
| 22 | +action-button(pill=true size='sm')= 'Idle' | ||
| 14 | = ' ' | 23 | = ' ' |
| 15 | +action-button(icon='trash' selected=true)= 'Selected' | 24 | +action-button(pill=true)= 'Idle' |
| 16 | = ' ' | 25 | = ' ' |
| 17 | +action-button(icon='trash' disabled=true)= 'Disabled' | 26 | +action-button(pill=true size='lg')= 'Idle' |
| 27 | = ' ' | ||
| 28 | +action-button(pill=true size='xl')= 'Idle' | ||
| 29 | |||
| 30 | .c-box | ||
| 31 | +action-button(pill=true icon='trash' size='sm') | ||
| 32 | = ' ' | ||
| 33 | +action-button(pill=true icon='trash') | ||
| 34 | = ' ' | ||
| 35 | +action-button(pill=true icon='trash' size='lg') | ||
| 36 | = ' ' | ||
| 37 | +action-button(pill=true icon='trash' size='xl') | ||
| 38 | |||
| 39 | .c-box | ||
| 40 | +action-button= 'Label' | ||
| 41 | = ' ' | ||
| 42 | +action-button(icon='trash')= 'Label' | ||
| 18 | = ' ' | 43 | = ' ' |
| 19 | +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled' | ||
| 20 | br | ||
| 21 | br | ||
| 22 | +action-button(icon='trash') | 44 | +action-button(icon='trash') |
| 45 | |||
| 46 | .c-box | ||
| 47 | +action-button(quiet=true)= 'Label' | ||
| 48 | = ' ' | ||
| 49 | +action-button(quiet=true icon='trash')= 'Label' | ||
| 50 | = ' ' | ||
| 51 | +action-button(quiet=true icon='trash') | ||
| 52 | |||
| 53 | .c-box | ||
| 54 | +action-button= 'Idle' | ||
| 23 | = ' ' | 55 | = ' ' |
| 24 | +action-button(icon='trash' selected=true) | 56 | +action-button(selected=true)= 'Selected' |
| 25 | = ' ' | 57 | = ' ' |
| 26 | +action-button(icon='trash' disabled=true) | 58 | +action-button(disabled=true)= 'Disabled' |
| 27 | = ' ' | 59 | = ' ' |
| 28 | +action-button(icon='trash' selected=true disabled=true) | 60 | +action-button(selected=true disabled=true)= 'Selected + disabled' |
| 29 | 61 | ||
| 30 | .c-box | 62 | .c-box |
| 31 | +action-button(quiet=true )= 'Idle' | 63 | +action-button(quiet=true )= 'Idle' |
| @@ -35,26 +67,21 @@ mixin view-action-button | |||
| 35 | +action-button(quiet=true disabled=true)= 'Disabled' | 67 | +action-button(quiet=true disabled=true)= 'Disabled' |
| 36 | = ' ' | 68 | = ' ' |
| 37 | +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' | 69 | +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' |
| 38 | br | 70 | |
| 39 | br | 71 | .c-box |
| 40 | +action-button(quiet=true icon='trash')= 'Idle' | 72 | +action-button(pill=true)= 'Idle' |
| 41 | = ' ' | ||
| 42 | +action-button(quiet=true icon='trash' selected=true)= 'Selected' | ||
| 43 | = ' ' | ||
| 44 | +action-button(quiet=true icon='trash' disabled=true)= 'Disabled' | ||
| 45 | = ' ' | ||
| 46 | +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled' | ||
| 47 | br | ||
| 48 | br | ||
| 49 | +action-button(quiet=true icon='trash') | ||
| 50 | = ' ' | 73 | = ' ' |
| 51 | +action-button(quiet=true icon='trash' selected=true) | 74 | +action-button(pill=true selected=true)= 'Selected' |
| 52 | = ' ' | 75 | = ' ' |
| 53 | +action-button(quiet=true icon='trash' disabled=true) | 76 | +action-button(pill=true disabled=true)= 'Disabled' |
| 54 | = ' ' | 77 | = ' ' |
| 55 | +action-button(quiet=true icon='trash' selected=true disabled=true) | 78 | +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' |
| 56 | 79 | ||
| 57 | .c-box | 80 | .c-box |
| 58 | +action-button= 'Idle' | 81 | +action-button(pill=true quiet=true)= 'Idle' |
| 59 | = ' ' | 82 | = ' ' |
| 60 | +action-button(icon='trash') | 83 | +action-button(pill=true quiet=true selected=true)= 'Selected' |
| 84 | = ' ' | ||
| 85 | +action-button(pill=true quiet=true disabled=true)= 'Disabled' | ||
| 86 | = ' ' | ||
| 87 | +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' | ||