summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-15 18:57:05 +0100
committerVolpeon <git@volpeon.ink>2022-02-15 18:57:05 +0100
commit27616aff3eaa1fb8baecfcfec1f0542473d1fb36 (patch)
tree771e0f36783a5c17ed0821378bd869bf7ee2f5a7 /tpl
parentBrighter accents in dark mode (diff)
downloadiro-design-27616aff3eaa1fb8baecfcfec1f0542473d1fb36.tar.gz
iro-design-27616aff3eaa1fb8baecfcfec1f0542473d1fb36.tar.bz2
iro-design-27616aff3eaa1fb8baecfcfec1f0542473d1fb36.zip
Added lightbox
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug10
-rw-r--r--tpl/layouts/container.pug2
-rw-r--r--tpl/objects/backdrop.pug12
-rw-r--r--tpl/objects/lightbox.pug5
4 files changed, 27 insertions, 2 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index a073280..fde71fd 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -19,6 +19,7 @@ include objects/action-menu.pug
19include objects/menu.pug 19include objects/menu.pug
20include objects/backdrop.pug 20include objects/backdrop.pug
21include objects/dialog.pug 21include objects/dialog.pug
22include objects/lightbox.pug
22 23
23mixin box 24mixin box
24 +container(padX=true padY=true inPage=true theme="raised") 25 +container(padX=true padY=true inPage=true theme="raised")
@@ -547,4 +548,13 @@ html
547 p= loremIpsum 548 p= loremIpsum
548 p= loremIpsum 549 p= loremIpsum
549 550
551 //-----------------------------------------
552
553 +h1-heading('xl')= 'Lightbox'
554 +rule('medium')
555
556 +box
557 +backdrop(class='t-dark' center=true)
558 +lightbox('avatar.png')
559
550 560
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index c64de11..0c9b6ec 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -7,7 +7,7 @@ mixin container
7 'l-container--narrow': attributes.narrow, 7 'l-container--narrow': attributes.narrow,
8 'l-container--sm-narrow': attributes.smNarrow, 8 'l-container--sm-narrow': attributes.smNarrow,
9 'l-container--in-page': attributes.inPage, 9 'l-container--in-page': attributes.inPage,
10 'l-container--themed': !!attributes.theme 10 'u-themed': !!attributes.theme
11 } 11 }
12 if (!!attributes.theme) { 12 if (!!attributes.theme) {
13 classes['t-' + attributes.theme] = true 13 classes['t-' + attributes.theme] = true
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 5d0c9e8..3de1f99 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -1,3 +1,13 @@
1mixin backdrop 1mixin backdrop
2 .o-backdrop.u-p-static(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' }) 2 -
3 let classes = {
4 'o-backdrop': true,
5 'u-p-relative': true,
6 'o-backdrop--center': attributes.center
7 }
8 if (attributes.class) {
9 classes[attributes.class] = true;
10 }
11
12 div(class=classes, style={ width: '100%', 'min-height': '5em', 'max-height': '40em' })
3 block 13 block
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
new file mode 100644
index 0000000..ba68299
--- /dev/null
+++ b/tpl/objects/lightbox.pug
@@ -0,0 +1,5 @@
1mixin lightbox(src)
2 .o-lightbox
3 header.o-lightbox__header
4 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
5 img.o-lightbox__img(src=src)