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
---
src/objects/_backdrop.scss | 1 +
src/objects/_lightbox.scss | 35 +++++++++++++++++++++++++++++++++++
2 files changed, 36 insertions(+)
create mode 100644 src/objects/_lightbox.scss
(limited to 'src/objects')
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 5957ffa..9ab140e 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -40,5 +40,6 @@
flex-direction: column;
padding: fn.dim(--pad-y) fn.dim(--pad-x);
background-color: fn.color(--bg);
+ color: fn.global-color(--fg);
}
}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
new file mode 100644
index 0000000..3ba9744
--- /dev/null
+++ b/src/objects/_lightbox.scss
@@ -0,0 +1,35 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('lightbox') {
+ @include iro.props-store((
+ --dims: (
+
+ ),
+ ), 'dims');
+
+ @include iro.bem-object(iro.props-namespace()) {
+ display: contents;
+
+ @include iro.bem-elem('header') {
+ display: flex;
+ box-sizing: border-box;
+ flex: 0 0 auto;
+ align-items: center;
+ width: 100%;
+ }
+
+ @include iro.bem-elem('img') {
+ align-self: center;
+ max-width: 100%;
+ min-height: 0;
+ max-height: 100%;
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+
+ @include iro.bem-elem('close-btn') {
+ margin-left: auto;
+ }
+ }
+}
--
cgit v1.2.3-70-g09d2