summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/objects/badge.pug1
-rw-r--r--tpl/objects/palette.pug3
-rw-r--r--tpl/views/badge.pug88
-rw-r--r--tpl/views/button.pug55
-rw-r--r--tpl/views/palette.pug3
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 @@
1mixin palette(palette) 1mixin 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 @@
1mixin view-badge 1mixin 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)