From bcee1a0f4615d90bd714adf8bea79baffe006579 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 29 Dec 2021 19:16:35 +0100 Subject: Added lightbox --- assets/css/components/_gallery.scss | 25 ---------- assets/css/components/_lightbox.scss | 93 ++++++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+), 25 deletions(-) delete mode 100644 assets/css/components/_gallery.scss create mode 100644 assets/css/components/_lightbox.scss (limited to 'assets/css/components') diff --git a/assets/css/components/_gallery.scss b/assets/css/components/_gallery.scss deleted file mode 100644 index 651d873..0000000 --- a/assets/css/components/_gallery.scss +++ /dev/null @@ -1,25 +0,0 @@ -@include namespace('gallery') { - @include store(( - --dims: ( - --col-width: 17em - ) - )); - - @include component(namespace()) { - margin-top: $line-height * 1rem; - - @include element('items') { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); - gap: 20px; - } - - @include element('item') { - display: block; - } - - @include element('img') { - display: block; - } - } -} diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss new file mode 100644 index 0000000..ece2b4b --- /dev/null +++ b/assets/css/components/_lightbox.scss @@ -0,0 +1,93 @@ +@include namespace('lightbox') { + @include store(( + --colors: ( + --bg: prop(--colors --bg-hi, $global: true), + --button: ( + --idle: prop(--colors --fg-hi, $global: true), + --hover: prop(--colors --fg-lo, $global: true), + ) + ), + --dims: ( + --col-width: 17em + ) + )); + + @include component(namespace()) { + display: flex; + visibility: hidden; + position: fixed; + z-index: 5000; + top: 0; + left: 0; + box-sizing: border-box; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 2em calc(3em + 1rem); + transition: opacity .2s, visibility .2s; + opacity: 0; + + @include element('bg') { + position: absolute; + z-index: -10; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .95; + background-color: prop(--colors --bg); + } + + @include is('shown') { + visibility: visible; + transition: opacity .2s, visibility 0 .2s; + opacity: 1; + } + + @include element('img') { + max-width: 100%; + max-height: 100%; + } + + @include element('close', 'prev', 'next') { + margin: 0; + transition: color .2s; + border: 0; + background-color: transparent; + color: currentColor; + + &:hover { + color: prop(--colors --button --hover); + } + } + + @include element('close') { + position: absolute; + top: 0; + right: 0; + padding: 1rem; + font-size: 1.5em; + } + + @include element('prev', 'next') { + position: absolute; + top: 50%; + padding: .5rem; + transform: translate(0, -50%); + font-size: 3em; + + > * { + stroke-width: .75px; + } + } + + @include element('prev') { + left: 0; + } + + @include element('next') { + right: 0; + } + } +} -- cgit v1.2.3-54-g00ecf