diff options
Diffstat (limited to 'tpl')
| -rw-r--r-- | tpl/objects/button.pug | 1 | ||||
| -rw-r--r-- | tpl/views/button.pug | 24 |
2 files changed, 25 insertions, 0 deletions
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index c356bfe..3b5de2b 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug | |||
| @@ -11,6 +11,7 @@ mixin button | |||
| 11 | 'o-button--badge': attributes.badge, | 11 | 'o-button--badge': attributes.badge, |
| 12 | 'o-button--icon': !!attributes.icon && !block, | 12 | 'o-button--icon': !!attributes.icon && !block, |
| 13 | 'is-selected': attributes.selected, | 13 | 'is-selected': attributes.selected, |
| 14 | 'is-highlighted': attributes.highlighted, | ||
| 14 | } | 15 | } |
| 15 | if (attributes.theme) { | 16 | if (attributes.theme) { |
| 16 | classes['o-button--' + attributes.theme] = true | 17 | classes['o-button--' + attributes.theme] = true |
diff --git a/tpl/views/button.pug b/tpl/views/button.pug index 2e54458..4b8c59f 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug | |||
| @@ -71,6 +71,8 @@ mixin view-button | |||
| 71 | .c-box | 71 | .c-box |
| 72 | +button= 'Idle' | 72 | +button= 'Idle' |
| 73 | = ' ' | 73 | = ' ' |
| 74 | +button(highlighted=true)= 'Highlighted' | ||
| 75 | = ' ' | ||
| 74 | +button(selected=true)= 'Selected' | 76 | +button(selected=true)= 'Selected' |
| 75 | = ' ' | 77 | = ' ' |
| 76 | +button(disabled=true)= 'Disabled' | 78 | +button(disabled=true)= 'Disabled' |
| @@ -80,6 +82,8 @@ mixin view-button | |||
| 80 | br | 82 | br |
| 81 | +button(badge=true)= 'Idle' | 83 | +button(badge=true)= 'Idle' |
| 82 | = ' ' | 84 | = ' ' |
| 85 | +button(badge=true highlighted=true)= 'Highlighted' | ||
| 86 | = ' ' | ||
| 83 | +button(badge=true selected=true)= 'Selected' | 87 | +button(badge=true selected=true)= 'Selected' |
| 84 | = ' ' | 88 | = ' ' |
| 85 | +button(badge=true disabled=true)= 'Disabled' | 89 | +button(badge=true disabled=true)= 'Disabled' |
| @@ -89,6 +93,8 @@ mixin view-button | |||
| 89 | br | 93 | br |
| 90 | +button(quiet=true)= 'Idle' | 94 | +button(quiet=true)= 'Idle' |
| 91 | = ' ' | 95 | = ' ' |
| 96 | +button(quiet=true highlighted=true)= 'Highlighted' | ||
| 97 | = ' ' | ||
| 92 | +button(quiet=true selected=true)= 'Selected' | 98 | +button(quiet=true selected=true)= 'Selected' |
| 93 | = ' ' | 99 | = ' ' |
| 94 | +button(quiet=true disabled=true)= 'Disabled' | 100 | +button(quiet=true disabled=true)= 'Disabled' |
| @@ -98,6 +104,8 @@ mixin view-button | |||
| 98 | .c-box | 104 | .c-box |
| 99 | +button(pill=true)= 'Idle' | 105 | +button(pill=true)= 'Idle' |
| 100 | = ' ' | 106 | = ' ' |
| 107 | +button(pill=true highlighted=true)= 'Highlighted' | ||
| 108 | = ' ' | ||
| 101 | +button(pill=true selected=true)= 'Selected' | 109 | +button(pill=true selected=true)= 'Selected' |
| 102 | = ' ' | 110 | = ' ' |
| 103 | +button(pill=true disabled=true)= 'Disabled' | 111 | +button(pill=true disabled=true)= 'Disabled' |
| @@ -107,6 +115,8 @@ mixin view-button | |||
| 107 | br | 115 | br |
| 108 | +button(pill=true badge=true)= 'Idle' | 116 | +button(pill=true badge=true)= 'Idle' |
| 109 | = ' ' | 117 | = ' ' |
| 118 | +button(pill=true badge=true highlighted=true)= 'Highlighted' | ||
| 119 | = ' ' | ||
| 110 | +button(pill=true badge=true selected=true)= 'Selected' | 120 | +button(pill=true badge=true selected=true)= 'Selected' |
| 111 | = ' ' | 121 | = ' ' |
| 112 | +button(pill=true badge=true disabled=true)= 'Disabled' | 122 | +button(pill=true badge=true disabled=true)= 'Disabled' |
| @@ -116,6 +126,8 @@ mixin view-button | |||
| 116 | br | 126 | br |
| 117 | +button(pill=true quiet=true)= 'Idle' | 127 | +button(pill=true quiet=true)= 'Idle' |
| 118 | = ' ' | 128 | = ' ' |
| 129 | +button(pill=true quiet=true highlighted=true)= 'Highlighted' | ||
| 130 | = ' ' | ||
| 119 | +button(pill=true quiet=true selected=true)= 'Selected' | 131 | +button(pill=true quiet=true selected=true)= 'Selected' |
| 120 | = ' ' | 132 | = ' ' |
| 121 | +button(pill=true quiet=true disabled=true)= 'Disabled' | 133 | +button(pill=true quiet=true disabled=true)= 'Disabled' |
| @@ -126,6 +138,8 @@ mixin view-button | |||
| 126 | .c-box | 138 | .c-box |
| 127 | +button(theme=theme)= 'Idle' | 139 | +button(theme=theme)= 'Idle' |
| 128 | = ' ' | 140 | = ' ' |
| 141 | +button(theme=theme highlighted=true)= 'Highlighted' | ||
| 142 | = ' ' | ||
| 129 | +button(theme=theme selected=true)= 'Selected' | 143 | +button(theme=theme selected=true)= 'Selected' |
| 130 | = ' ' | 144 | = ' ' |
| 131 | +button(theme=theme disabled=true)= 'Disabled' | 145 | +button(theme=theme disabled=true)= 'Disabled' |
| @@ -135,6 +149,8 @@ mixin view-button | |||
| 135 | br | 149 | br |
| 136 | +button(theme=theme badge=true)= 'Idle' | 150 | +button(theme=theme badge=true)= 'Idle' |
| 137 | = ' ' | 151 | = ' ' |
| 152 | +button(theme=theme badge=true highlighted=true)= 'Highlighted' | ||
| 153 | = ' ' | ||
| 138 | +button(theme=theme badge=true selected=true)= 'Selected' | 154 | +button(theme=theme badge=true selected=true)= 'Selected' |
| 139 | = ' ' | 155 | = ' ' |
| 140 | +button(theme=theme badge=true disabled=true)= 'Disabled' | 156 | +button(theme=theme badge=true disabled=true)= 'Disabled' |
| @@ -144,6 +160,8 @@ mixin view-button | |||
| 144 | br | 160 | br |
| 145 | +button(theme=theme quiet=true)= 'Idle' | 161 | +button(theme=theme quiet=true)= 'Idle' |
| 146 | = ' ' | 162 | = ' ' |
| 163 | +button(theme=theme quiet=true highlighted=true)= 'Highlighted' | ||
| 164 | = ' ' | ||
| 147 | +button(theme=theme quiet=true selected=true)= 'Selected' | 165 | +button(theme=theme quiet=true selected=true)= 'Selected' |
| 148 | = ' ' | 166 | = ' ' |
| 149 | +button(theme=theme quiet=true disabled=true)= 'Disabled' | 167 | +button(theme=theme quiet=true disabled=true)= 'Disabled' |
| @@ -157,6 +175,8 @@ mixin view-button | |||
| 157 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) | 175 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) |
| 158 | +button(theme=theme)= 'Idle' | 176 | +button(theme=theme)= 'Idle' |
| 159 | = ' ' | 177 | = ' ' |
| 178 | +button(theme=theme highlighted=true)= 'Highlighted' | ||
| 179 | = ' ' | ||
| 160 | +button(theme=theme selected=true)= 'Selected' | 180 | +button(theme=theme selected=true)= 'Selected' |
| 161 | = ' ' | 181 | = ' ' |
| 162 | +button(theme=theme disabled=true)= 'Disabled' | 182 | +button(theme=theme disabled=true)= 'Disabled' |
| @@ -166,6 +186,8 @@ mixin view-button | |||
| 166 | br | 186 | br |
| 167 | +button(theme=theme badge=true)= 'Idle' | 187 | +button(theme=theme badge=true)= 'Idle' |
| 168 | = ' ' | 188 | = ' ' |
| 189 | +button(theme=theme badge=true highlighted=true)= 'Highlighted' | ||
| 190 | = ' ' | ||
| 169 | +button(theme=theme badge=true selected=true)= 'Selected' | 191 | +button(theme=theme badge=true selected=true)= 'Selected' |
| 170 | = ' ' | 192 | = ' ' |
| 171 | +button(theme=theme badge=true disabled=true)= 'Disabled' | 193 | +button(theme=theme badge=true disabled=true)= 'Disabled' |
| @@ -175,6 +197,8 @@ mixin view-button | |||
| 175 | br | 197 | br |
| 176 | +button(theme=theme quiet=true)= 'Idle' | 198 | +button(theme=theme quiet=true)= 'Idle' |
| 177 | = ' ' | 199 | = ' ' |
| 200 | +button(theme=theme quiet=true highlighted=true)= 'Highlighted' | ||
| 201 | = ' ' | ||
| 178 | +button(theme=theme quiet=true selected=true)= 'Selected' | 202 | +button(theme=theme quiet=true selected=true)= 'Selected' |
| 179 | = ' ' | 203 | = ' ' |
| 180 | +button(theme=theme quiet=true disabled=true)= 'Disabled' | 204 | +button(theme=theme quiet=true disabled=true)= 'Disabled' |
