diff options
Diffstat (limited to 'tpl')
| -rw-r--r-- | tpl/objects/badge.pug | 1 | ||||
| -rw-r--r-- | tpl/objects/palette.pug | 3 | ||||
| -rw-r--r-- | tpl/views/badge.pug | 88 | ||||
| -rw-r--r-- | tpl/views/button.pug | 55 | ||||
| -rw-r--r-- | tpl/views/palette.pug | 3 |
5 files changed, 85 insertions, 65 deletions
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug index 04fd8eb..500f062 100644 --- a/tpl/objects/badge.pug +++ b/tpl/objects/badge.pug | |||
| @@ -3,6 +3,7 @@ mixin badge(variant) | |||
| 3 | let classes = { | 3 | let classes = { |
| 4 | 'o-badge': true, | 4 | 'o-badge': true, |
| 5 | 'o-badge--pill': !!attributes.pill, | 5 | 'o-badge--pill': !!attributes.pill, |
| 6 | 'o-badge--quiet': !!attributes.quiet, | ||
| 6 | 'o-menu__badge': !!attributes.menu, | 7 | 'o-menu__badge': !!attributes.menu, |
| 7 | } | 8 | } |
| 8 | if (attributes.size) { | 9 | if (attributes.size) { |
diff --git a/tpl/objects/palette.pug b/tpl/objects/palette.pug index 77e6e9e..303265d 100644 --- a/tpl/objects/palette.pug +++ b/tpl/objects/palette.pug | |||
| @@ -1,7 +1,8 @@ | |||
| 1 | mixin palette(palette) | 1 | mixin palette(palette) |
| 2 | - | 2 | - |
| 3 | let classes = { | 3 | let classes = { |
| 4 | 'o-palette': true, | 4 | 'o-palette': true, |
| 5 | 'o-palette--static': !!attributes.static, | ||
| 5 | } | 6 | } |
| 6 | classes['o-palette--' + palette] = true | 7 | classes['o-palette--' + palette] = true |
| 7 | 8 | ||
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index a3c4eed..1e1b88f 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug | |||
| @@ -1,51 +1,75 @@ | |||
| 1 | mixin view-badge | 1 | mixin view-badge |
| 2 | +view('badge', 'Badge') | 2 | +view('badge', 'Badge') |
| 3 | .c-box | 3 | .c-box |
| 4 | +badge= '100' | 4 | +badge(size=50 href='#')= '50' |
| 5 | = ' ' | ||
| 6 | +badge('primary')= 'new' | ||
| 7 | = ' ' | ||
| 8 | +badge('accent')= 'new' | ||
| 9 | = ' ' | 5 | = ' ' |
| 10 | +badge('accent-quiet')= 'new' | 6 | +badge= '100' |
| 11 | = ' ' | 7 | = ' ' |
| 12 | +badge(size=200 href='#')= '200' | 8 | +badge(size=200 href='#')= '200' |
| 13 | = ' ' | 9 | = ' ' |
| 14 | +badge('primary')(size=200 href='#')= 'new' | ||
| 15 | = ' ' | ||
| 16 | +badge('accent')(size=200 href='#')= 'new' | ||
| 17 | = ' ' | ||
| 18 | +badge('accent-quiet')(size=200 href='#')= 'new' | ||
| 19 | = ' ' | ||
| 20 | +badge(size=300 href='#')= '300' | 10 | +badge(size=300 href='#')= '300' |
| 21 | = ' ' | ||
| 22 | +badge('primary')(size=300 href='#')= 'new' | ||
| 23 | = ' ' | ||
| 24 | +badge('accent')(size=300 href='#')= 'new' | ||
| 25 | = ' ' | ||
| 26 | +badge('accent-quiet')(size=300 href='#')= 'new' | ||
| 27 | 11 | ||
| 28 | .c-box | 12 | .c-box |
| 29 | +badge(pill=true)= '100' | 13 | +badge(size=50 href='#' quiet=true)= '50' |
| 30 | = ' ' | 14 | = ' ' |
| 31 | +badge('primary')(pill=true)= 'new' | 15 | +badge(quiet=true)= '100' |
| 32 | = ' ' | 16 | = ' ' |
| 33 | +badge('accent')(pill=true)= 'new' | 17 | +badge(size=200 href='#' quiet=true)= '200' |
| 34 | = ' ' | 18 | = ' ' |
| 35 | +badge('accent-quiet')(pill=true)= 'new' | 19 | +badge(size=300 href='#' quiet=true)= '300' |
| 36 | = ' ' | 20 | |
| 37 | +badge(size=200, pill=true)= '200' | 21 | each theme in ['accent', 'positive', 'negative', 'warning'] |
| 38 | = ' ' | 22 | .c-box |
| 39 | +badge('primary')(size=200, pill=true)= 'new' | 23 | +badge(theme)(size=50 href='#')= 'new' |
| 24 | = ' ' | ||
| 25 | +badge(theme)= 'new' | ||
| 26 | = ' ' | ||
| 27 | +badge(theme)(size=200 href='#')= 'new' | ||
| 28 | = ' ' | ||
| 29 | +badge(theme)(size=300 href='#')= 'new' | ||
| 30 | |||
| 31 | .c-box | ||
| 32 | +badge(theme)(size=50 href='#' quiet=true)= 'new' | ||
| 33 | = ' ' | ||
| 34 | +badge(theme)(quiet=true)= 'new' | ||
| 35 | = ' ' | ||
| 36 | +badge(theme)(size=200 href='#' quiet=true)= 'new' | ||
| 37 | = ' ' | ||
| 38 | +badge(theme)(size=300 href='#' quiet=true)= 'new' | ||
| 39 | |||
| 40 | .c-box | ||
| 41 | +badge(size=50, pill=true)= '50' | ||
| 40 | = ' ' | 42 | = ' ' |
| 41 | +badge('accent')(size=200, pill=true)= 'new' | 43 | +badge(pill=true)= '100' |
| 42 | = ' ' | 44 | = ' ' |
| 43 | +badge('accent-quiet')(size=200, pill=true)= 'new' | 45 | +badge(size=200 pill=true)= '200' |
| 44 | = ' ' | 46 | = ' ' |
| 45 | +badge(size=300, pill=true)= '300' | 47 | +badge(size=300 pill=true)= '300' |
| 48 | |||
| 49 | .c-box | ||
| 50 | +badge(size=50 pill=true quiet=true)= 'new' | ||
| 46 | = ' ' | 51 | = ' ' |
| 47 | +badge('primary')(size=300, pill=true)= 'new' | 52 | +badge(pill=true quiet=true)= 'new' |
| 48 | = ' ' | 53 | = ' ' |
| 49 | +badge('accent')(size=300, pill=true)= 'new' | 54 | +badge(size=200 pill=true quiet=true)= 'new' |
| 50 | = ' ' | 55 | = ' ' |
| 51 | +badge('accent-quiet')(size=300, pill=true)= 'new' | 56 | +badge(size=300 pill=true quiet=true)= 'new' |
| 57 | |||
| 58 | each theme in ['accent', 'positive', 'negative', 'warning'] | ||
| 59 | .c-box | ||
| 60 | +badge(theme)(size=50 pill=true href='#')= 'new' | ||
| 61 | = ' ' | ||
| 62 | +badge(theme)(pill=true)= 'new' | ||
| 63 | = ' ' | ||
| 64 | +badge(theme)(size=200 pill=true href='#')= 'new' | ||
| 65 | = ' ' | ||
| 66 | +badge(theme)(size=300 pill=true href='#')= 'new' | ||
| 67 | |||
| 68 | .c-box | ||
| 69 | +badge(theme)(size=50 pill=true href='#' quiet=true)= 'new' | ||
| 70 | = ' ' | ||
| 71 | +badge(theme)(pill=true quiet=true)= 'new' | ||
| 72 | = ' ' | ||
| 73 | +badge(theme)(size=200 pill=true href='#' quiet=true)= 'new' | ||
| 74 | = ' ' | ||
| 75 | +badge(theme)(size=300 pill=true href='#' quiet=true)= 'new' | ||
diff --git a/tpl/views/button.pug b/tpl/views/button.pug index 2a1bd57..7c96419 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug | |||
| @@ -2,37 +2,28 @@ mixin view-button | |||
| 2 | +view('button', 'Button') | 2 | +view('button', 'Button') |
| 3 | .c-box | 3 | .c-box |
| 4 | .l-button-group | 4 | .l-button-group |
| 5 | +a-button(variant='accent')= 'Button' | 5 | +a-button= 'Button' |
| 6 | +a-button(variant='accent' disabled=true)= 'Button' | 6 | +a-button(disabled=true)= 'Button' |
| 7 | +a-button(variant='accent' outline=true)= 'Button' | 7 | +a-button(outline=true)= 'Button' |
| 8 | +a-button(variant='accent' outline=true disabled=true)= 'Button' | 8 | +a-button(outline=true disabled=true)= 'Button' |
| 9 | br | 9 | br |
| 10 | .l-button-group | 10 | .l-button-group |
| 11 | +a-button(variant='accent' icon='trash') | 11 | +a-button(icon='trash') |
| 12 | +a-button(variant='accent' disabled=true icon='trash') | 12 | +a-button(disabled=true icon='trash') |
| 13 | +a-button(variant='accent' outline=true icon='trash') | 13 | +a-button(outline=true icon='trash') |
| 14 | +a-button(variant='accent' outline=true disabled=true icon='trash') | 14 | +a-button(outline=true disabled=true icon='trash') |
| 15 | br | 15 | |
| 16 | .l-button-group | 16 | each theme in ['primary', 'accent', 'positive', 'negative', 'warning'] |
| 17 | +a-button(variant='primary')= 'Button' | 17 | .c-box |
| 18 | +a-button(variant='primary' disabled=true)= 'Button' | 18 | .l-button-group |
| 19 | +a-button(variant='primary' outline=true)= 'Button' | 19 | +a-button(variant=theme)= 'Button' |
| 20 | +a-button(variant='primary' outline=true disabled=true)= 'Button' | 20 | +a-button(variant=theme disabled=true)= 'Button' |
| 21 | br | 21 | +a-button(variant=theme outline=true)= 'Button' |
| 22 | .l-button-group | 22 | +a-button(variant=theme outline=true disabled=true)= 'Button' |
| 23 | +a-button(variant='primary' icon='trash') | 23 | br |
| 24 | +a-button(variant='primary' disabled=true icon='trash') | 24 | .l-button-group |
| 25 | +a-button(variant='primary' outline=true icon='trash') | 25 | +a-button(variant=theme icon='trash') |
| 26 | +a-button(variant='primary' outline=true disabled=true icon='trash') | 26 | +a-button(variant=theme disabled=true icon='trash') |
| 27 | br | 27 | +a-button(variant=theme outline=true icon='trash') |
| 28 | .l-button-group | 28 | +a-button(variant=theme outline=true disabled=true icon='trash') |
| 29 | +a-button(variant='secondary')= 'Button' | 29 | |
| 30 | +a-button(variant='secondary' disabled=true)= 'Button' | ||
| 31 | +a-button(variant='secondary' outline=true)= 'Button' | ||
| 32 | +a-button(variant='secondary' outline=true disabled=true)= 'Button' | ||
| 33 | br | ||
| 34 | .l-button-group | ||
| 35 | +a-button(variant='secondary' icon='trash') | ||
| 36 | +a-button(variant='secondary' disabled=true icon='trash') | ||
| 37 | +a-button(variant='secondary' outline=true icon='trash') | ||
| 38 | +a-button(variant='secondary' outline=true disabled=true icon='trash') | ||
diff --git a/tpl/views/palette.pug b/tpl/views/palette.pug index 384fe03..c63dea8 100644 --- a/tpl/views/palette.pug +++ b/tpl/views/palette.pug | |||
| @@ -3,3 +3,6 @@ mixin view-palette | |||
| 3 | each palette in ['base', 'blue', 'purple', 'red', 'green', 'yellow'] | 3 | each palette in ['base', 'blue', 'purple', 'red', 'green', 'yellow'] |
| 4 | .c-box | 4 | .c-box |
| 5 | +palette(palette) | 5 | +palette(palette) |
| 6 | each palette in ['blue', 'purple', 'red', 'green', 'yellow'] | ||
| 7 | .c-box | ||
| 8 | +palette(palette)(static=true) | ||
