summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug54
-rw-r--r--tpl/objects/checkbox.pug18
-rw-r--r--tpl/objects/icon.pug6
-rw-r--r--tpl/objects/radio.pug8
-rw-r--r--tpl/objects/switch.pug12
5 files changed, 94 insertions, 4 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index 93c2057..8595be0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -9,6 +9,8 @@ include objects/button.pug
9include objects/text-field.pug 9include objects/text-field.pug
10include objects/field-label.pug 10include objects/field-label.pug
11include objects/radio.pug 11include objects/radio.pug
12include objects/checkbox.pug
13include objects/switch.pug
12 14
13mixin box 15mixin box
14 +container(padX=true padY=true inPage=true theme="raised") 16 +container(padX=true padY=true inPage=true theme="raised")
@@ -214,3 +216,55 @@ html
214 +radio(name="radio-demo-2" disabled=true)= 'Cats' 216 +radio(name="radio-demo-2" disabled=true)= 'Cats'
215 +radio(name="radio-demo-2" disabled=true)= 'Dogs' 217 +radio(name="radio-demo-2" disabled=true)= 'Dogs'
216 +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes' 218 +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
219 br
220 +radio(accent=true name="radio-demo-3")= 'Cats'
221 +radio(accent=true name="radio-demo-3")= 'Dogs'
222 +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes'
223 br
224 +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats'
225 +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs'
226 +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes'
227
228 //-----------------------------------------
229
230 +h1-heading(level='xl')= 'Checkbox'
231 +rule(level='medium')
232
233 +box
234 +checkbox(indeterminate=true)= 'Cats'
235 +checkbox= 'Dogs'
236 +checkbox(checked=true)= 'Foxes'
237 br
238 +checkbox(indeterminate=true disabled=true)= 'Cats'
239 +checkbox(disabled=true)= 'Dogs'
240 +checkbox(checked=true disabled=true)= 'Foxes'
241 br
242 +checkbox(accent=true indeterminate=true)= 'Cats'
243 +checkbox(accent=true)= 'Dogs'
244 +checkbox(accent=true checked=true)= 'Foxes'
245 br
246 +checkbox(accent=true indeterminate=true disabled=true)= 'Cats'
247 +checkbox(accent=true disabled=true)= 'Dogs'
248 +checkbox(accent=true checked=true disabled=true)= 'Foxes'
249
250 //-----------------------------------------
251
252 +h1-heading(level='xl')= 'Switch'
253 +rule(level='medium')
254
255 +box
256 +switch= 'Cats'
257 +switch= 'Dogs'
258 +switch(checked=true)= 'Foxes'
259 br
260 +switch(disabled=true)= 'Cats'
261 +switch(disabled=true)= 'Dogs'
262 +switch(checked=true disabled=true)= 'Foxes'
263 br
264 +switch(accent=true)= 'Cats'
265 +switch(accent=true)= 'Dogs'
266 +switch(accent=true checked=true)= 'Foxes'
267 br
268 +switch(accent=true disabled=true)= 'Cats'
269 +switch(accent=true disabled=true)= 'Dogs'
270 +switch(accent=true checked=true disabled=true)= 'Foxes'
diff --git a/tpl/objects/checkbox.pug b/tpl/objects/checkbox.pug
new file mode 100644
index 0000000..874505b
--- /dev/null
+++ b/tpl/objects/checkbox.pug
@@ -0,0 +1,18 @@
1include icon.pug
2
3mixin checkbox
4 -
5 let classes = {
6 'o-checkbox': true,
7 'o-checkbox--accent': attributes.accent,
8 }
9
10 label(class=classes)
11 input.o-checkbox__native(
12 type='checkbox'
13 class={ 'is-indeterminate': attributes.indeterminate }
14 )&attributes(attributes)
15 .o-checkbox__box
16 +icon('check')(class='o-checkbox__check-icon')
17 .o-checkbox__label
18 block
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
index a77a3ed..0e444f9 100644
--- a/tpl/objects/icon.pug
+++ b/tpl/objects/icon.pug
@@ -1,7 +1,7 @@
1mixin icon(id) 1mixin icon(id)
2 - 2 -
3 let href = '../node_modules/iro-icons/src/icons/' + id + '.svg' 3 let href = 'icons.svg#' + id
4 let classes = attributes.class ? attributes.class : '' 4 let classes = attributes.class ? attributes.class : ''
5 5
6 svg(class=['o-icon', 'o-icon--iro', 'o-icon--iro-' + id, classes] width='1em' height='1em') 6 svg(class=['o-icon', classes] width='1em' height='1em')
7 use(xlink:href=href) 7 use(href=href)
diff --git a/tpl/objects/radio.pug b/tpl/objects/radio.pug
index da6a026..8cb1b1f 100644
--- a/tpl/objects/radio.pug
+++ b/tpl/objects/radio.pug
@@ -1,5 +1,11 @@
1mixin radio 1mixin radio
2 label.o-radio 2 -
3 let classes = {
4 'o-radio': true,
5 'o-radio--accent': attributes.accent,
6 }
7
8 label(class=classes)
3 input.o-radio__native(type='radio')&attributes(attributes) 9 input.o-radio__native(type='radio')&attributes(attributes)
4 .o-radio__circle 10 .o-radio__circle
5 .o-radio__label 11 .o-radio__label
diff --git a/tpl/objects/switch.pug b/tpl/objects/switch.pug
new file mode 100644
index 0000000..0c9c1ab
--- /dev/null
+++ b/tpl/objects/switch.pug
@@ -0,0 +1,12 @@
1mixin switch
2 -
3 let classes = {
4 'o-switch': true,
5 'o-switch--accent': attributes.accent,
6 }
7
8 label(class=classes)
9 input.o-switch__native(type='checkbox')&attributes(attributes)
10 .o-switch__indicator
11 .o-switch__label
12 block