From 575278aba99139635adc3b1f9385befe57102541 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 11 Jun 2022 09:44:04 +0200 Subject: Re-implemented design via iro-design --- assets/css/components/_lightbox.scss | 116 ----------------------------------- 1 file changed, 116 deletions(-) delete mode 100644 assets/css/components/_lightbox.scss (limited to 'assets/css/components/_lightbox.scss') diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss deleted file mode 100644 index f497a5e..0000000 --- a/assets/css/components/_lightbox.scss +++ /dev/null @@ -1,116 +0,0 @@ -@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), - --bg: prop(--colors --bg-hi, $global: true), - ) - ), - --dims: ( - --pad: 1rem, - ), - )); - - @include component(namespace()) { - display: flex; - visibility: hidden; - position: fixed; - z-index: 5000; - top: 0; - left: 0; - box-sizing: border-box; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - padding-bottom: 3vh; - transition: opacity .2s, visibility .2s; - opacity: 0; - - @include element('bg') { - position: absolute; - z-index: -10; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .85; - background-color: prop(--colors --bg); - } - - @include is('shown') { - visibility: visible; - transition: opacity .2s, visibility 0 .2s; - opacity: 1; - } - - @include element('infobar') { - display: flex; - box-sizing: border-box; - flex: 0 0 auto; - align-items: center; - width: 100%; - padding: 0 prop(--dims --pad); - } - - @include element('img') { - max-width: 100%; - min-height: 0; - max-height: 100%; - margin-top: auto; - margin-bottom: auto; - } - - @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') { - margin: 0 calc(-1 * #{prop(--dims --pad)}) 0 auto; - padding: prop(--dims --pad); - font-size: 1.5em; - } - - @include element('prev', 'next') { - position: absolute; - top: 50%; - padding: 2rem .5rem; - transform: translate(0, -50%); - font-size: 3em; - --icon-stroke-width: .75px; - - &::before { - content: ''; - display: block; - position: absolute; - z-index: -1; - top: 50%; - left: 50%; - width: 1.2em; - height: 1.2em; - transform: translate(-50%, -50%); - opacity: .25; - background-color: prop(--colors --button --bg); - } - } - - @include element('prev') { - left: 0; - } - - @include element('next') { - right: 0; - } - } -} -- cgit v1.2.3-54-g00ecf