From 27616aff3eaa1fb8baecfcfec1f0542473d1fb36 Mon Sep 17 00:00:00 2001 From: Volpeon 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-54-g00ecf