tpl/views/action-button.pug


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

mixin view-action-button 
    +view('action-button', 'Action button')
        .c-box
            +action-button(size='sm')= 'Idle'
            = ' '
            +action-button= 'Idle'
            = ' '
            +action-button(size='lg')= 'Idle'
            = ' '
            +action-button(size='xl')= 'Idle'

        .c-box
            +action-button(icon='trash' size='sm')
            = ' '
            +action-button(icon='trash')
            = ' '
            +action-button(icon='trash' size='lg')
            = ' '
            +action-button(icon='trash' size='xl')

        .c-box
            +action-button(pill=true size='sm')= 'Idle'
            = ' '
            +action-button(pill=true)= 'Idle'
            = ' '
            +action-button(pill=true size='lg')= 'Idle'
            = ' '
            +action-button(pill=true size='xl')= 'Idle'

        .c-box
            +action-button(pill=true icon='trash' size='sm')
            = ' '
            +action-button(pill=true icon='trash')
            = ' '
            +action-button(pill=true icon='trash' size='lg')
            = ' '
            +action-button(pill=true icon='trash' size='xl')

        .c-box
            +action-button= 'Label'
            = ' '
            +action-button(icon='trash')= 'Label'
            = ' '
            +action-button(icon='trash')

        .c-box
            +action-button(quiet=true)= 'Label'
            = ' '
            +action-button(quiet=true icon='trash')= 'Label'
            = ' '
            +action-button(quiet=true icon='trash')

        .c-box
            +action-button= 'Idle'
            = ' '
            +action-button(selected=true)= 'Selected'
            = ' '
            +action-button(disabled=true)= 'Disabled'
            = ' '
            +action-button(selected=true disabled=true)= 'Selected + disabled'

        .c-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'

        .c-box
            +action-button(pill=true)= 'Idle'
            = ' '
            +action-button(pill=true selected=true)= 'Selected'
            = ' '
            +action-button(pill=true disabled=true)= 'Disabled'
            = ' '
            +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'

        .c-box
            +action-button(pill=true quiet=true)= 'Idle'
            = ' '
            +action-button(pill=true quiet=true selected=true)= 'Selected'
            = ' '
            +action-button(pill=true quiet=true disabled=true)= 'Disabled'
            = ' '
            +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'

        each theme in ['static-black', 'static-white']
            -
                const bg = theme.startsWith('static-black') ? 500 : 1000;

            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                +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'

            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                +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'