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) | ||