tpl/views/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

mixin view-button 
    +view('button', 'Button')
        .c-box
            +a-button(size='sm')= 'Button'
            = ' '
            +a-button= 'Button'
            = ' '
            +a-button(size='lg')= 'Button'
            = ' '
            +a-button(size='xl')= 'Button'

        .c-box
            +a-button(size='sm' outline=true)= 'Button'
            = ' '
            +a-button(outline=true)= 'Button'
            = ' '
            +a-button(size='lg' outline=true)= 'Button'
            = ' '
            +a-button(size='xl' outline=true)= 'Button'

        .c-box
            +a-button(postIcon='arrow-right' size='sm')= 'Button'
            = ' '
            +a-button(postIcon='arrow-right')= 'Button'
            = ' '
            +a-button(postIcon='arrow-right' size='lg')= 'Button'
            = ' '
            +a-button(postIcon='arrow-right' size='xl')= 'Button'

        .c-box
            .l-button-group
                +a-button= 'Button'
                +a-button(disabled=true)= 'Button'
                +a-button(outline=true)= 'Button'
                +a-button(outline=true disabled=true)= 'Button'
            br
            .l-button-group
                +a-button(icon='trash')
                +a-button(disabled=true icon='trash')
                +a-button(outline=true icon='trash')
                +a-button(outline=true disabled=true icon='trash')

        each theme in ['primary', 'accent', 'negative']
            .c-box
                .l-button-group
                    +a-button(variant=theme)= 'Button'
                    +a-button(variant=theme disabled=true)= 'Button'
                    +a-button(variant=theme outline=true)= 'Button'
                    +a-button(variant=theme outline=true disabled=true)= 'Button'
                br
                .l-button-group
                    +a-button(variant=theme icon='trash')
                    +a-button(variant=theme disabled=true icon='trash')
                    +a-button(variant=theme outline=true icon='trash')
                    +a-button(variant=theme outline=true disabled=true icon='trash')

        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});`)
                .l-button-group
                    +a-button(variant=theme)= 'Button'
                    +a-button(variant=theme disabled=true)= 'Button'
                    +a-button(variant=theme outline=true)= 'Button'
                    +a-button(variant=theme outline=true disabled=true)= 'Button'
                br
                .l-button-group
                    +a-button(variant=theme icon='trash')
                    +a-button(variant=theme disabled=true icon='trash')
                    +a-button(variant=theme outline=true icon='trash')
                    +a-button(variant=theme outline=true disabled=true icon='trash')

            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                .l-button-group
                    +a-button(variant=theme primary=true)= 'Button'
                    +a-button(variant=theme primary=true disabled=true)= 'Button'
                    +a-button(variant=theme primary=true outline=true)= 'Button'
                    +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
                br
                .l-button-group
                    +a-button(variant=theme primary=true icon='trash')
                    +a-button(variant=theme primary=true disabled=true icon='trash')
                    +a-button(variant=theme primary=true outline=true icon='trash')
                    +a-button(variant=theme primary=true outline=true disabled=true icon='trash')