From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 21 Jun 2024 23:07:50 +0200
Subject: WIP: Refactoring

---
 src/objects/_lightbox.scss | 206 ---------------------------------------------
 1 file changed, 206 deletions(-)
 delete mode 100644 src/objects/_lightbox.scss

(limited to 'src/objects/_lightbox.scss')

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
deleted file mode 100644
index 31d3398..0000000
--- a/src/objects/_lightbox.scss
+++ /dev/null
@@ -1,206 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@use 'action-button';
-
-@include iro.props-namespace('lightbox') {
-    @include iro.props-store((
-        --dims: (
-            --pad: fn.global-dim(--size --150),
-            --thumbnail: (
-                --size:     fn.global-dim(--size --700),
-                --spacing:  fn.global-dim(--size --100),
-                --idle:     1px,
-                --selected: 2px,
-            ),
-            --close-button: (
-                --font-size: fn.global-dim(--font-size --200),
-            ),
-            --nav-button: (
-                --width:     fn.global-dim(--size --3800),
-                --height:    fn.global-dim(--size --3800),
-                --font-size: fn.global-dim(--font-size --200),
-            ),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --dims: (
-            --thumbnail: (
-                --size: fn.global-dim(--size --600),
-            ),
-            --nav-button: (
-                --width:  fn.global-dim(--size --2500),
-                --height: fn.global-dim(--size --2500),
-            ),
-        ),
-    ), 'md');
-
-    @include iro.props-store((
-        --colors: (
-            --thumbnail: (
-                --idle:     fn.global-color(--fg-hi2),
-                --selected: fn.global-color(--fg-lo),
-            ),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:               grid;
-        grid-template-rows:    auto minmax(0, 1fr) auto auto;
-        grid-template-columns: auto minmax(0, 1fr) auto;
-        grid-template-areas:
-            'header     header     header'
-            'prev       content    next'
-            'thumbnails thumbnails thumbnails'
-            'footer     footer     footer';
-        box-sizing:            border-box;
-        height:                100%;
-        overflow:              hidden;
-
-        @include iro.bem-elem('header') {
-            grid-area:   header;
-            display:     flex;
-            align-items: flex-start;
-            padding:     fn.dim(--pad) fn.dim(--pad) 0;
-        }
-
-        @include iro.bem-elem('img') {
-            display:    none;
-            box-sizing: border-box;
-            grid-area:  content;
-            width:      100%;
-            height:     100%;
-            padding:    fn.dim(--pad);
-            object-fit: scale-down;
-
-            @include iro.bem-sibling-elem('img') {
-                @include iro.bem-modifier('default') {
-                    display: block;
-
-                    @include iro.bem-next-elem('nav-btn') {
-                        display: block;
-    
-                        @include iro.bem-next-elem('nav-btn') {
-                            display: block;
-                        }
-                    }
-                }
-            }
-
-            @include iro.bem-multi('&:target', 'is' 'visible') {
-                display: block;
-
-                @include iro.bem-next-elem('nav-btn') {
-                    display: block;
-
-                    @include iro.bem-next-elem('nav-btn') {
-                        display: block;
-                    }
-                }
-
-                @include iro.bem-sibling-elem('img') {
-                    @include iro.bem-modifier('default') {
-                        display: none;
-
-                        @include iro.bem-next-elem('nav-btn') {
-                            display: none;
-        
-                            @include iro.bem-next-elem('nav-btn') {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        @include iro.bem-elem('thumbnails') {
-            grid-area: thumbnails;
-            display:   flex;
-            gap:       fn.dim(--thumbnail --spacing);
-            padding:   fn.dim(--thumbnail --selected) fn.dim(--pad) fn.dim(--pad);
-            overflow:  auto;
-        }
-
-        @include iro.bem-elem('footer') {
-            grid-area:   footer;
-            display:     flex;
-            align-items: flex-start;
-            padding:     0 fn.dim(--pad) fn.dim(--pad);
-        }
-
-        @include iro.bem-elem('thumbnail') {
-            position:  relative;
-            flex:      0 0 auto;
-            width:     fn.dim(--thumbnail --size);
-            height:    fn.dim(--thumbnail --size);
-            opacity:   .75;
-            box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset;
-
-            &:hover {
-                opacity: 1;
-            }
-
-            @include iro.bem-is('selected') {
-                opacity:    1;
-                box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected);
-            }
-        }
-
-        @include iro.bem-elem('thumbnail-img') {
-            display:         block;
-            position:        absolute;
-            top:             0;
-            left:            0;
-            width:           100%;
-            height:          100%;
-            object-fit:      cover;
-            object-position: center center;
-        }
-
-        @include iro.bem-elem('thumbnail-icon') {
-            position:  absolute;
-            top:       50%;
-            left:      50%;
-            transform: translate(-50%, -50%);
-        }
-
-        @include iro.bem-elem('close-btn') {
-            flex:      0 0 auto;
-            margin:    calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
-            font-size: fn.dim(--close-button --font-size);
-        }
-
-        @include iro.bem-elem('nav-btn') {
-            display:    none;
-            position:   relative;
-            align-self: center;
-            overflow:   visible;
-            font-size:  fn.dim(--nav-button --font-size);
-
-            &::after {
-                content:   '';
-                display:   block;
-                position:  absolute;
-                top:       50%;
-                left:      50%;
-                width:     fn.dim(--nav-button --width);
-                height:    fn.dim(--nav-button --height);
-                transform: translate(-50%, -50%);
-            }
-
-            @include iro.bem-modifier('prev') {
-                grid-area:    prev;
-                margin-right: calc(-1 * fn.dim(--pad));
-                margin-left:  calc(.5 * fn.dim(--pad));
-            }
-    
-            @include iro.bem-modifier('next') {
-                grid-area:    next;
-                margin-right: calc(.5 * fn.dim(--pad));
-                margin-left:  calc(-1 * fn.dim(--pad));
-            }
-        }
-    }
-}
-- 
cgit v1.2.3-70-g09d2