From ea8b0bc19219f6f931e3be757c25743c2c828b2e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 10:28:10 +0100 Subject: Added checkbox and switch --- tpl/objects/checkbox.pug | 18 ++++++++++++++++++ tpl/objects/icon.pug | 6 +++--- tpl/objects/radio.pug | 8 +++++++- tpl/objects/switch.pug | 12 ++++++++++++ 4 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 tpl/objects/checkbox.pug create mode 100644 tpl/objects/switch.pug (limited to 'tpl/objects') 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 @@ +include icon.pug + +mixin checkbox + - + let classes = { + 'o-checkbox': true, + 'o-checkbox--accent': attributes.accent, + } + + label(class=classes) + input.o-checkbox__native( + type='checkbox' + class={ 'is-indeterminate': attributes.indeterminate } + )&attributes(attributes) + .o-checkbox__box + +icon('check')(class='o-checkbox__check-icon') + .o-checkbox__label + 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 @@ mixin icon(id) - - let href = '../node_modules/iro-icons/src/icons/' + id + '.svg' + let href = 'icons.svg#' + id let classes = attributes.class ? attributes.class : '' - svg(class=['o-icon', 'o-icon--iro', 'o-icon--iro-' + id, classes] width='1em' height='1em') - use(xlink:href=href) + svg(class=['o-icon', classes] width='1em' height='1em') + 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 @@ mixin radio - label.o-radio + - + let classes = { + 'o-radio': true, + 'o-radio--accent': attributes.accent, + } + + label(class=classes) input.o-radio__native(type='radio')&attributes(attributes) .o-radio__circle .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 @@ +mixin switch + - + let classes = { + 'o-switch': true, + 'o-switch--accent': attributes.accent, + } + + label(class=classes) + input.o-switch__native(type='checkbox')&attributes(attributes) + .o-switch__indicator + .o-switch__label + block -- cgit v1.2.3-70-g09d2