From 27616aff3eaa1fb8baecfcfec1f0542473d1fb36 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 15 Feb 2022 18:57:05 +0100
Subject: Added lightbox

---
 tpl/index.pug             | 10 ++++++++++
 tpl/layouts/container.pug |  2 +-
 tpl/objects/backdrop.pug  | 12 +++++++++++-
 tpl/objects/lightbox.pug  |  5 +++++
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 tpl/objects/lightbox.pug

(limited to 'tpl')

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
 include objects/menu.pug
 include objects/backdrop.pug
 include objects/dialog.pug
+include objects/lightbox.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -547,4 +548,13 @@ html
                         p= loremIpsum
                         p= loremIpsum
 
+            //-----------------------------------------
+
+            +h1-heading('xl')= 'Lightbox'
+            +rule('medium')
+
+            +box
+                +backdrop(class='t-dark' center=true)
+                    +lightbox('avatar.png')
+
 
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
             'l-container--narrow':    attributes.narrow,
             'l-container--sm-narrow': attributes.smNarrow,
             'l-container--in-page':   attributes.inPage,
-            'l-container--themed':    !!attributes.theme
+            'u-themed':               !!attributes.theme
         }
         if (!!attributes.theme) {
             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 @@
 mixin backdrop
-    .o-backdrop.u-p-static(style={ width: '100%', 'min-height': '5em', 'max-height': '40em' })
+    -
+        let classes = {
+            'o-backdrop':         true,
+            'u-p-relative':       true,
+            'o-backdrop--center': attributes.center
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes, style={ width: '100%', 'min-height': '5em', 'max-height': '40em' })
         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 @@
+mixin lightbox(src)
+    .o-lightbox 
+        header.o-lightbox__header
+            +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
+        img.o-lightbox__img(src=src)
-- 
cgit v1.2.3-54-g00ecf