diff options
Diffstat (limited to 'tpl/views')
| -rw-r--r-- | tpl/views/action-button.pug | 182 | ||||
| -rw-r--r-- | tpl/views/badge.pug | 69 | ||||
| -rw-r--r-- | tpl/views/button.pug | 203 | ||||
| -rw-r--r-- | tpl/views/card.pug | 8 | ||||
| -rw-r--r-- | tpl/views/dialog.pug | 4 | ||||
| -rw-r--r-- | tpl/views/emoji.pug | 8 | ||||
| -rw-r--r-- | tpl/views/form.pug | 2 | ||||
| -rw-r--r-- | tpl/views/menu.pug | 2 | ||||
| -rw-r--r-- | tpl/views/popover.pug | 2 | ||||
| -rw-r--r-- | tpl/views/text-field.pug | 6 |
10 files changed, 164 insertions, 322 deletions
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug deleted file mode 100644 index 4d2ffb6..0000000 --- a/tpl/views/action-button.pug +++ /dev/null | |||
| @@ -1,182 +0,0 @@ | |||
| 1 | mixin view-action-button | ||
| 2 | +view('action-button', 'Action button') | ||
| 3 | .c-box | ||
| 4 | +action-button(size='sm')= 'Idle' | ||
| 5 | = ' ' | ||
| 6 | +action-button= 'Idle' | ||
| 7 | = ' ' | ||
| 8 | +action-button(size='lg')= 'Idle' | ||
| 9 | = ' ' | ||
| 10 | +action-button(size='xl')= 'Idle' | ||
| 11 | br | ||
| 12 | br | ||
| 13 | +action-button(icon='trash' size='sm') | ||
| 14 | = ' ' | ||
| 15 | +action-button(icon='trash') | ||
| 16 | = ' ' | ||
| 17 | +action-button(icon='trash' size='lg') | ||
| 18 | = ' ' | ||
| 19 | +action-button(icon='trash' size='xl') | ||
| 20 | br | ||
| 21 | br | ||
| 22 | +action-button(icon='user' size='sm')= 'Idle' | ||
| 23 | = ' ' | ||
| 24 | +action-button(icon='user')= 'Idle' | ||
| 25 | = ' ' | ||
| 26 | +action-button(icon='user' size='lg')= 'Idle' | ||
| 27 | = ' ' | ||
| 28 | +action-button(icon='user' size='xl')= 'Idle' | ||
| 29 | |||
| 30 | .c-box | ||
| 31 | +action-button(pill=true size='sm')= 'Idle' | ||
| 32 | = ' ' | ||
| 33 | +action-button(pill=true)= 'Idle' | ||
| 34 | = ' ' | ||
| 35 | +action-button(pill=true size='lg')= 'Idle' | ||
| 36 | = ' ' | ||
| 37 | +action-button(pill=true size='xl')= 'Idle' | ||
| 38 | br | ||
| 39 | br | ||
| 40 | +action-button(pill=true icon='trash' size='sm') | ||
| 41 | = ' ' | ||
| 42 | +action-button(pill=true icon='trash') | ||
| 43 | = ' ' | ||
| 44 | +action-button(pill=true icon='trash' size='lg') | ||
| 45 | = ' ' | ||
| 46 | +action-button(pill=true icon='trash' size='xl') | ||
| 47 | br | ||
| 48 | br | ||
| 49 | +action-button(pill=true icon='user' size='sm')= 'Idle' | ||
| 50 | = ' ' | ||
| 51 | +action-button(pill=true icon='user')= 'Idle' | ||
| 52 | = ' ' | ||
| 53 | +action-button(pill=true icon='user' size='lg')= 'Idle' | ||
| 54 | = ' ' | ||
| 55 | +action-button(pill=true icon='user' size='xl')= 'Idle' | ||
| 56 | |||
| 57 | .c-box | ||
| 58 | +action-button= 'Label' | ||
| 59 | = ' ' | ||
| 60 | +action-button(icon='trash')= 'Label' | ||
| 61 | = ' ' | ||
| 62 | +action-button(icon='trash') | ||
| 63 | br | ||
| 64 | br | ||
| 65 | +action-button(quiet=true)= 'Label' | ||
| 66 | = ' ' | ||
| 67 | +action-button(quiet=true icon='trash')= 'Label' | ||
| 68 | = ' ' | ||
| 69 | +action-button(quiet=true icon='trash') | ||
| 70 | |||
| 71 | .c-box | ||
| 72 | +action-button= 'Idle' | ||
| 73 | = ' ' | ||
| 74 | +action-button(selected=true)= 'Selected' | ||
| 75 | = ' ' | ||
| 76 | +action-button(disabled=true)= 'Disabled' | ||
| 77 | = ' ' | ||
| 78 | +action-button(selected=true disabled=true)= 'Selected + disabled' | ||
| 79 | br | ||
| 80 | br | ||
| 81 | +action-button(static=true )= 'Idle' | ||
| 82 | = ' ' | ||
| 83 | +action-button(static=true selected=true)= 'Selected' | ||
| 84 | = ' ' | ||
| 85 | +action-button(static=true disabled=true)= 'Disabled' | ||
| 86 | = ' ' | ||
| 87 | +action-button(static=true selected=true disabled=true)= 'Selected + disabled' | ||
| 88 | br | ||
| 89 | br | ||
| 90 | +action-button(quiet=true )= 'Idle' | ||
| 91 | = ' ' | ||
| 92 | +action-button(quiet=true selected=true)= 'Selected' | ||
| 93 | = ' ' | ||
| 94 | +action-button(quiet=true disabled=true)= 'Disabled' | ||
| 95 | = ' ' | ||
| 96 | +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
| 97 | |||
| 98 | .c-box | ||
| 99 | +action-button(pill=true)= 'Idle' | ||
| 100 | = ' ' | ||
| 101 | +action-button(pill=true selected=true)= 'Selected' | ||
| 102 | = ' ' | ||
| 103 | +action-button(pill=true disabled=true)= 'Disabled' | ||
| 104 | = ' ' | ||
| 105 | +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' | ||
| 106 | br | ||
| 107 | br | ||
| 108 | +action-button(pill=true static=true)= 'Idle' | ||
| 109 | = ' ' | ||
| 110 | +action-button(pill=true static=true selected=true)= 'Selected' | ||
| 111 | = ' ' | ||
| 112 | +action-button(pill=true static=true disabled=true)= 'Disabled' | ||
| 113 | = ' ' | ||
| 114 | +action-button(pill=true static=true selected=true disabled=true)= 'Selected + disabled' | ||
| 115 | br | ||
| 116 | br | ||
| 117 | +action-button(pill=true quiet=true)= 'Idle' | ||
| 118 | = ' ' | ||
| 119 | +action-button(pill=true quiet=true selected=true)= 'Selected' | ||
| 120 | = ' ' | ||
| 121 | +action-button(pill=true quiet=true disabled=true)= 'Disabled' | ||
| 122 | = ' ' | ||
| 123 | +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
| 124 | |||
| 125 | each theme, i in ['accent', 'positive', 'negative', 'warning'] | ||
| 126 | .c-box | ||
| 127 | +action-button(theme=theme)= 'Idle' | ||
| 128 | = ' ' | ||
| 129 | +action-button(theme=theme selected=true)= 'Selected' | ||
| 130 | = ' ' | ||
| 131 | +action-button(theme=theme disabled=true)= 'Disabled' | ||
| 132 | = ' ' | ||
| 133 | +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' | ||
| 134 | br | ||
| 135 | br | ||
| 136 | +action-button(theme=theme static=true)= 'Idle' | ||
| 137 | = ' ' | ||
| 138 | +action-button(theme=theme static=true selected=true)= 'Selected' | ||
| 139 | = ' ' | ||
| 140 | +action-button(theme=theme static=true disabled=true)= 'Disabled' | ||
| 141 | = ' ' | ||
| 142 | +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' | ||
| 143 | br | ||
| 144 | br | ||
| 145 | +action-button(theme=theme quiet=true)= 'Idle' | ||
| 146 | = ' ' | ||
| 147 | +action-button(theme=theme quiet=true selected=true)= 'Selected' | ||
| 148 | = ' ' | ||
| 149 | +action-button(theme=theme quiet=true disabled=true)= 'Disabled' | ||
| 150 | = ' ' | ||
| 151 | +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
| 152 | |||
| 153 | each theme in ['static-black', 'static-white'] | ||
| 154 | - | ||
| 155 | const bg = theme.startsWith('static-black') ? 500 : 1000; | ||
| 156 | |||
| 157 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) | ||
| 158 | +action-button(theme=theme)= 'Idle' | ||
| 159 | = ' ' | ||
| 160 | +action-button(theme=theme selected=true)= 'Selected' | ||
| 161 | = ' ' | ||
| 162 | +action-button(theme=theme disabled=true)= 'Disabled' | ||
| 163 | = ' ' | ||
| 164 | +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' | ||
| 165 | br | ||
| 166 | br | ||
| 167 | +action-button(theme=theme static=true)= 'Idle' | ||
| 168 | = ' ' | ||
| 169 | +action-button(theme=theme static=true selected=true)= 'Selected' | ||
| 170 | = ' ' | ||
| 171 | +action-button(theme=theme static=true disabled=true)= 'Disabled' | ||
| 172 | = ' ' | ||
| 173 | +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' | ||
| 174 | br | ||
| 175 | br | ||
| 176 | +action-button(theme=theme quiet=true)= 'Idle' | ||
| 177 | = ' ' | ||
| 178 | +action-button(theme=theme quiet=true selected=true)= 'Selected' | ||
| 179 | = ' ' | ||
| 180 | +action-button(theme=theme quiet=true disabled=true)= 'Disabled' | ||
| 181 | = ' ' | ||
| 182 | +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug deleted file mode 100644 index cc1f346..0000000 --- a/tpl/views/badge.pug +++ /dev/null | |||
| @@ -1,69 +0,0 @@ | |||
| 1 | mixin view-badge | ||
| 2 | +view('badge', 'Badge') | ||
| 3 | .c-box | ||
| 4 | +badge(size='sm' href='#')= '50' | ||
| 5 | = ' ' | ||
| 6 | +badge(href='#')= '100' | ||
| 7 | = ' ' | ||
| 8 | +badge(size='lg' href='#')= '200' | ||
| 9 | = ' ' | ||
| 10 | +badge(size='xl' href='#')= '300' | ||
| 11 | |||
| 12 | .c-box | ||
| 13 | +badge(pill=true size='sm' href='#')= '50' | ||
| 14 | = ' ' | ||
| 15 | +badge(pill=true href='#')= '100' | ||
| 16 | = ' ' | ||
| 17 | +badge(pill=true size='lg' href='#')= '200' | ||
| 18 | = ' ' | ||
| 19 | +badge(pill=true size='xl' href='#')= '300' | ||
| 20 | |||
| 21 | .c-box | ||
| 22 | +badge(icon='image' size='sm' href='#')= '50' | ||
| 23 | = ' ' | ||
| 24 | +badge(icon='image' href='#')= '100' | ||
| 25 | = ' ' | ||
| 26 | +badge(icon='image' size='lg' href='#')= '200' | ||
| 27 | = ' ' | ||
| 28 | +badge(icon='image' size='xl' href='#')= '300' | ||
| 29 | |||
| 30 | .c-box | ||
| 31 | +badge(pill=true icon='image' size='sm' href='#')= '50' | ||
| 32 | = ' ' | ||
| 33 | +badge(pill=true icon='image' href='#')= '100' | ||
| 34 | = ' ' | ||
| 35 | +badge(pill=true icon='image' size='lg' href='#')= '200' | ||
| 36 | = ' ' | ||
| 37 | +badge(pill=true icon='image' size='xl' href='#')= '300' | ||
| 38 | |||
| 39 | .c-box | ||
| 40 | +badge(href='#')= '100' | ||
| 41 | = ' ' | ||
| 42 | +badge(quiet=true href='#')= '100' | ||
| 43 | = ' ' | ||
| 44 | +badge(pill=true href='#')= '100' | ||
| 45 | = ' ' | ||
| 46 | +badge(quiet=true pill=true href='#')= '100' | ||
| 47 | |||
| 48 | each theme in ['accent', 'positive', 'negative', 'warning'] | ||
| 49 | .c-box | ||
| 50 | +badge(theme)(href='#')= 'new' | ||
| 51 | = ' ' | ||
| 52 | +badge(theme)(quiet=true href='#')= 'new' | ||
| 53 | = ' ' | ||
| 54 | +badge(theme)(pill=true href='#')= 'new' | ||
| 55 | = ' ' | ||
| 56 | +badge(theme)(quiet=true pill=true href='#')= 'new' | ||
| 57 | |||
| 58 | each theme in ['static-black', 'static-white'] | ||
| 59 | - | ||
| 60 | const bg = theme.startsWith('static-black') ? 500 : 1000; | ||
| 61 | |||
| 62 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) | ||
| 63 | +badge(theme)(href='#')= 'new' | ||
| 64 | = ' ' | ||
| 65 | +badge(theme)(quiet=true href='#')= 'new' | ||
| 66 | = ' ' | ||
| 67 | +badge(theme)(pill=true href='#')= 'new' | ||
| 68 | = ' ' | ||
| 69 | +badge(theme)(quiet=true pill=true href='#')= 'new' | ||
diff --git a/tpl/views/button.pug b/tpl/views/button.pug index da7531b..7e03e04 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug | |||
| @@ -1,89 +1,182 @@ | |||
| 1 | mixin view-button | 1 | mixin view-button |
| 2 | +view('button', 'Button') | 2 | +view('button', 'Button') |
| 3 | .c-box | 3 | .c-box |
| 4 | +a-button(size='sm')= 'Button' | 4 | +button(size='sm')= 'Idle' |
| 5 | = ' ' | 5 | = ' ' |
| 6 | +a-button= 'Button' | 6 | +button= 'Idle' |
| 7 | = ' ' | 7 | = ' ' |
| 8 | +a-button(size='lg')= 'Button' | 8 | +button(size='lg')= 'Idle' |
| 9 | = ' ' | 9 | = ' ' |
| 10 | +a-button(size='xl')= 'Button' | 10 | +button(size='xl')= 'Idle' |
| 11 | br | ||
| 12 | br | ||
| 13 | +button(icon='trash' size='sm') | ||
| 14 | = ' ' | ||
| 15 | +button(icon='trash') | ||
| 16 | = ' ' | ||
| 17 | +button(icon='trash' size='lg') | ||
| 18 | = ' ' | ||
| 19 | +button(icon='trash' size='xl') | ||
| 20 | br | ||
| 21 | br | ||
| 22 | +button(icon='user' size='sm')= 'Idle' | ||
| 23 | = ' ' | ||
| 24 | +button(icon='user')= 'Idle' | ||
| 25 | = ' ' | ||
| 26 | +button(icon='user' size='lg')= 'Idle' | ||
| 27 | = ' ' | ||
| 28 | +button(icon='user' size='xl')= 'Idle' | ||
| 11 | 29 | ||
| 12 | .c-box | 30 | .c-box |
| 13 | +a-button(size='sm' outline=true)= 'Button' | 31 | +button(pill=true size='sm')= 'Idle' |
| 32 | = ' ' | ||
| 33 | +button(pill=true)= 'Idle' | ||
| 14 | = ' ' | 34 | = ' ' |
| 15 | +a-button(outline=true)= 'Button' | 35 | +button(pill=true size='lg')= 'Idle' |
| 36 | = ' ' | ||
| 37 | +button(pill=true size='xl')= 'Idle' | ||
| 38 | br | ||
| 39 | br | ||
| 40 | +button(pill=true icon='trash' size='sm') | ||
| 16 | = ' ' | 41 | = ' ' |
| 17 | +a-button(size='lg' outline=true)= 'Button' | 42 | +button(pill=true icon='trash') |
| 18 | = ' ' | 43 | = ' ' |
| 19 | +a-button(size='xl' outline=true)= 'Button' | 44 | +button(pill=true icon='trash' size='lg') |
| 45 | = ' ' | ||
| 46 | +button(pill=true icon='trash' size='xl') | ||
| 47 | br | ||
| 48 | br | ||
| 49 | +button(pill=true icon='user' size='sm')= 'Idle' | ||
| 50 | = ' ' | ||
| 51 | +button(pill=true icon='user')= 'Idle' | ||
| 52 | = ' ' | ||
| 53 | +button(pill=true icon='user' size='lg')= 'Idle' | ||
| 54 | = ' ' | ||
| 55 | +button(pill=true icon='user' size='xl')= 'Idle' | ||
| 20 | 56 | ||
| 21 | .c-box | 57 | .c-box |
| 22 | +a-button(postIcon='arrow-right' size='sm')= 'Button' | 58 | +button= 'Label' |
| 23 | = ' ' | 59 | = ' ' |
| 24 | +a-button(postIcon='arrow-right')= 'Button' | 60 | +button(icon='trash')= 'Label' |
| 25 | = ' ' | 61 | = ' ' |
| 26 | +a-button(postIcon='arrow-right' size='lg')= 'Button' | 62 | +button(icon='trash') |
| 63 | br | ||
| 64 | br | ||
| 65 | +button(quiet=true)= 'Label' | ||
| 66 | = ' ' | ||
| 67 | +button(quiet=true icon='trash')= 'Label' | ||
| 27 | = ' ' | 68 | = ' ' |
| 28 | +a-button(postIcon='arrow-right' size='xl')= 'Button' | 69 | +button(quiet=true icon='trash') |
| 29 | 70 | ||
| 30 | .c-box | 71 | .c-box |
| 31 | .l-button-group | 72 | +button= 'Idle' |
| 32 | +a-button= 'Button' | 73 | = ' ' |
| 33 | +a-button(disabled=true)= 'Button' | 74 | +button(selected=true)= 'Selected' |
| 34 | +a-button(outline=true)= 'Button' | 75 | = ' ' |
| 35 | +a-button(outline=true disabled=true)= 'Button' | 76 | +button(disabled=true)= 'Disabled' |
| 77 | = ' ' | ||
| 78 | +button(selected=true disabled=true)= 'Selected + disabled' | ||
| 36 | br | 79 | br |
| 37 | br | 80 | br |
| 38 | .l-button-group | 81 | +button(static=true )= 'Idle' |
| 39 | +a-button(icon='trash') | 82 | = ' ' |
| 40 | +a-button(disabled=true icon='trash') | 83 | +button(static=true selected=true)= 'Selected' |
| 41 | +a-button(outline=true icon='trash') | 84 | = ' ' |
| 42 | +a-button(outline=true disabled=true icon='trash') | 85 | +button(static=true disabled=true)= 'Disabled' |
| 86 | = ' ' | ||
| 87 | +button(static=true selected=true disabled=true)= 'Selected + disabled' | ||
| 88 | br | ||
| 89 | br | ||
| 90 | +button(quiet=true )= 'Idle' | ||
| 91 | = ' ' | ||
| 92 | +button(quiet=true selected=true)= 'Selected' | ||
| 93 | = ' ' | ||
| 94 | +button(quiet=true disabled=true)= 'Disabled' | ||
| 95 | = ' ' | ||
| 96 | +button(quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
| 97 | |||
| 98 | .c-box | ||
| 99 | +button(pill=true)= 'Idle' | ||
| 100 | = ' ' | ||
| 101 | +button(pill=true selected=true)= 'Selected' | ||
| 102 | = ' ' | ||
| 103 | +button(pill=true disabled=true)= 'Disabled' | ||
| 104 | = ' ' | ||
| 105 | +button(pill=true selected=true disabled=true)= 'Selected + disabled' | ||
| 106 | br | ||
| 107 | br | ||
| 108 | +button(pill=true static=true)= 'Idle' | ||
| 109 | = ' ' | ||
| 110 | +button(pill=true static=true selected=true)= 'Selected' | ||
| 111 | = ' ' | ||
| 112 | +button(pill=true static=true disabled=true)= 'Disabled' | ||
| 113 | = ' ' | ||
| 114 | +button(pill=true static=true selected=true disabled=true)= 'Selected + disabled' | ||
| 115 | br | ||
| 116 | br | ||
| 117 | +button(pill=true quiet=true)= 'Idle' | ||
| 118 | = ' ' | ||
| 119 | +button(pill=true quiet=true selected=true)= 'Selected' | ||
| 120 | = ' ' | ||
| 121 | +button(pill=true quiet=true disabled=true)= 'Disabled' | ||
| 122 | = ' ' | ||
| 123 | +button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
| 43 | 124 | ||
| 44 | each theme in ['primary', 'accent', 'negative'] | 125 | each theme, i in ['accent', 'positive', 'negative', 'warning'] |
| 45 | .c-box | 126 | .c-box |
| 46 | .l-button-group | 127 | +button(theme=theme)= 'Idle' |
| 47 | +a-button(variant=theme)= 'Button' | 128 | = ' ' |
| 48 | +a-button(variant=theme disabled=true)= 'Button' | 129 | +button(theme=theme selected=true)= 'Selected' |
| 49 | +a-button(variant=theme outline=true)= 'Button' | 130 | = ' ' |
| 50 | +a-button(variant=theme outline=true disabled=true)= 'Button' | 131 | +button(theme=theme disabled=true)= 'Disabled' |
| 132 | = ' ' | ||
| 133 | +button(theme=theme selected=true disabled=true)= 'Selected + disabled' | ||
| 134 | br | ||
| 51 | br | 135 | br |
| 136 | +button(theme=theme static=true)= 'Idle' | ||
| 137 | = ' ' | ||
| 138 | +button(theme=theme static=true selected=true)= 'Selected' | ||
| 139 | = ' ' | ||
| 140 | +button(theme=theme static=true disabled=true)= 'Disabled' | ||
| 141 | = ' ' | ||
| 142 | +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' | ||
| 52 | br | 143 | br |
| 53 | .l-button-group | 144 | br |
| 54 | +a-button(variant=theme icon='trash') | 145 | +button(theme=theme quiet=true)= 'Idle' |
| 55 | +a-button(variant=theme disabled=true icon='trash') | 146 | = ' ' |
| 56 | +a-button(variant=theme outline=true icon='trash') | 147 | +button(theme=theme quiet=true selected=true)= 'Selected' |
| 57 | +a-button(variant=theme outline=true disabled=true icon='trash') | 148 | = ' ' |
| 149 | +button(theme=theme quiet=true disabled=true)= 'Disabled' | ||
| 150 | = ' ' | ||
| 151 | +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
| 58 | 152 | ||
| 59 | each theme in ['static-black', 'static-white'] | 153 | each theme in ['static-black', 'static-white'] |
| 60 | - | 154 | - |
| 61 | const bg = theme.startsWith('static-black') ? 500 : 1000; | 155 | const bg = theme.startsWith('static-black') ? 500 : 1000; |
| 62 | 156 | ||
| 63 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) | 157 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) |
| 64 | .l-button-group | 158 | +button(theme=theme)= 'Idle' |
| 65 | +a-button(variant=theme)= 'Button' | 159 | = ' ' |
| 66 | +a-button(variant=theme disabled=true)= 'Button' | 160 | +button(theme=theme selected=true)= 'Selected' |
| 67 | +a-button(variant=theme outline=true)= 'Button' | 161 | = ' ' |
| 68 | +a-button(variant=theme outline=true disabled=true)= 'Button' | 162 | +button(theme=theme disabled=true)= 'Disabled' |
| 163 | = ' ' | ||
| 164 | +button(theme=theme selected=true disabled=true)= 'Selected + disabled' | ||
| 69 | br | 165 | br |
| 70 | br | 166 | br |
| 71 | .l-button-group | 167 | +button(theme=theme static=true)= 'Idle' |
| 72 | +a-button(variant=theme icon='trash') | 168 | = ' ' |
| 73 | +a-button(variant=theme disabled=true icon='trash') | 169 | +button(theme=theme static=true selected=true)= 'Selected' |
| 74 | +a-button(variant=theme outline=true icon='trash') | 170 | = ' ' |
| 75 | +a-button(variant=theme outline=true disabled=true icon='trash') | 171 | +button(theme=theme static=true disabled=true)= 'Disabled' |
| 76 | 172 | = ' ' | |
| 77 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) | 173 | +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' |
| 78 | .l-button-group | ||
| 79 | +a-button(variant=theme primary=true)= 'Button' | ||
| 80 | +a-button(variant=theme primary=true disabled=true)= 'Button' | ||
| 81 | +a-button(variant=theme primary=true outline=true)= 'Button' | ||
| 82 | +a-button(variant=theme primary=true outline=true disabled=true)= 'Button' | ||
| 83 | br | 174 | br |
| 84 | br | 175 | br |
| 85 | .l-button-group | 176 | +button(theme=theme quiet=true)= 'Idle' |
| 86 | +a-button(variant=theme primary=true icon='trash') | 177 | = ' ' |
| 87 | +a-button(variant=theme primary=true disabled=true icon='trash') | 178 | +button(theme=theme quiet=true selected=true)= 'Selected' |
| 88 | +a-button(variant=theme primary=true outline=true icon='trash') | 179 | = ' ' |
| 89 | +a-button(variant=theme primary=true outline=true disabled=true icon='trash') | 180 | +button(theme=theme quiet=true disabled=true)= 'Disabled' |
| 181 | = ' ' | ||
| 182 | +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 9a35b37..f030abf 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug | |||
| @@ -83,17 +83,17 @@ mixin view-card | |||
| 83 | +card-body | 83 | +card-body |
| 84 | .l-media | 84 | .l-media |
| 85 | .l-media__block | 85 | .l-media__block |
| 86 | +badge('positive')(quiet=true icon='repeat' href='#') | 86 | +button(theme='positive' static=true pill=true size='sm' icon='repeat' href='#') |
| 87 | strong= '12' | 87 | strong= '12' |
| 88 | .l-media__block | 88 | .l-media__block |
| 89 | +badge('warning')(quiet=true icon='star' href='#') | 89 | +button(theme='warning' static=true pill=true size='sm' icon='star' href='#') |
| 90 | strong= '34' | 90 | strong= '34' |
| 91 | .l-media__block.u-mis-auto | 91 | .l-media__block.u-mis-auto |
| 92 | +a-button(primary=true)= 'Reply' | 92 | +button(selected=true)= 'Reply' |
| 93 | 93 | ||
| 94 | +card(quiet=true href='#' class='l-card-list__card') | 94 | +card(quiet=true href='#' class='l-card-list__card') |
| 95 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) | 95 | +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) |
| 96 | +badge= 'Drawings' | 96 | +button(badge=true static=true selected=true)= 'Drawings' |
| 97 | +card-body | 97 | +card-body |
| 98 | +card-title= 'XS Heading' | 98 | +card-title= 'XS Heading' |
| 99 | +card-content | 99 | +card-content |
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index 5a659dd..9c2e520 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug | |||
| @@ -53,8 +53,8 @@ mixin view-dialog | |||
| 53 | +dialog | 53 | +dialog |
| 54 | +slot('header') | 54 | +slot('header') |
| 55 | .l-media__block.l-flex | 55 | .l-media__block.l-flex |
| 56 | +action-button(quiet=true icon='chevron-left') | 56 | +button(quiet=true icon='chevron-left') |
| 57 | +action-button(quiet=true icon='chevron-right') | 57 | +button(quiet=true icon='chevron-right') |
| 58 | .l-media__block.l-media__block--main | 58 | .l-media__block.l-media__block--main |
| 59 | +div-heading('xl')(class="u-mt-0")= 'Tags' | 59 | +div-heading('xl')(class="u-mt-0")= 'Tags' |
| 60 | +slot('sidebar') | 60 | +slot('sidebar') |
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug index 3d01ca7..d6e2b56 100644 --- a/tpl/views/emoji.pug +++ b/tpl/views/emoji.pug | |||
| @@ -1,14 +1,14 @@ | |||
| 1 | mixin view-emoji | 1 | mixin view-emoji |
| 2 | +view('emoji', 'Emoji') | 2 | +view('emoji', 'Emoji') |
| 3 | .c-box | 3 | .c-box |
| 4 | +action-button(icon='trash') | 4 | +button(icon='trash') |
| 5 | = ' ' | 5 | = ' ' |
| 6 | +action-button | 6 | +button |
| 7 | +emoji('drgn')(size='icon') | 7 | +emoji('drgn')(size='icon') |
| 8 | = ' ' | 8 | = ' ' |
| 9 | +action-button(icon='trash' quiet=true) | 9 | +button(icon='trash' quiet=true) |
| 10 | = ' ' | 10 | = ' ' |
| 11 | +action-button(quiet=true) | 11 | +button(quiet=true) |
| 12 | +emoji('drgn')(size='icon') | 12 | +emoji('drgn')(size='icon') |
| 13 | 13 | ||
| 14 | .c-box | 14 | .c-box |
diff --git a/tpl/views/form.pug b/tpl/views/form.pug index 5b24757..ca9e224 100644 --- a/tpl/views/form.pug +++ b/tpl/views/form.pug | |||
| @@ -27,4 +27,4 @@ mixin view-form | |||
| 27 | +checkbox= 'I\'ve read and accept the terms and conditions' | 27 | +checkbox= 'I\'ve read and accept the terms and conditions' |
| 28 | 28 | ||
| 29 | +form-item('') | 29 | +form-item('') |
| 30 | +a-button(variant='primary')= 'Register' | 30 | +button(variant='primary')= 'Register' |
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug index 7c5df03..682f8bb 100644 --- a/tpl/views/menu.pug +++ b/tpl/views/menu.pug | |||
| @@ -2,7 +2,7 @@ mixin view-menu | |||
| 2 | +view('menu', 'Menu') | 2 | +view('menu', 'Menu') |
| 3 | .c-box | 3 | .c-box |
| 4 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) | 4 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) |
| 5 | +action-button(quiet=true selected=true)= 'Menu' | 5 | +button(quiet=true selected=true)= 'Menu' |
| 6 | +popover | 6 | +popover |
| 7 | +menu | 7 | +menu |
| 8 | +menu-slot(class='l-media') | 8 | +menu-slot(class='l-media') |
diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug index b269596..bd78471 100644 --- a/tpl/views/popover.pug +++ b/tpl/views/popover.pug | |||
| @@ -1,6 +1,6 @@ | |||
| 1 | mixin view-popover | 1 | mixin view-popover |
| 2 | +view('popover', 'Popover') | 2 | +view('popover', 'Popover') |
| 3 | .c-box | 3 | .c-box |
| 4 | +action-button(quiet=true selected=true)= 'Popover' | 4 | +button(quiet=true selected=true)= 'Popover' |
| 5 | +popover | 5 | +popover |
| 6 | = loremIpsum | 6 | = loremIpsum |
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 165e2ce..4309ff6 100644 --- a/tpl/views/text-field.pug +++ b/tpl/views/text-field.pug | |||
| @@ -16,8 +16,8 @@ mixin view-text-field | |||
| 16 | div | 16 | div |
| 17 | +text-field(placeholder='Just landed in L.A.' class="u-p-50") | 17 | +text-field(placeholder='Just landed in L.A.' class="u-p-50") |
| 18 | +slot('pre') | 18 | +slot('pre') |
| 19 | +action-button(quiet=true class='l-media__block')= 'Volpeon' | 19 | +button(quiet=true class='l-media__block')= 'Volpeon' |
| 20 | +divider('vertical')(class='u-mis-50') | 20 | +divider('vertical')(class='u-mis-50') |
| 21 | +slot('post') | 21 | +slot('post') |
| 22 | +action-button(quiet=true icon='smile' class='l-media__block') | 22 | +button(quiet=true icon='smile' class='l-media__block') |
| 23 | +action-button(quiet=true icon='send' class='l-media__block') | 23 | +button(quiet=true icon='send' class='l-media__block') |
