Improved lightbox

2 files changed, 64 insertions, 15 deletions

diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9ab140e..a0ec11e 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -18,7 +18,7 @@
 
     @include iro.props-store((
         --colors: (
-            --bg: rgba(#000, .75),
+            --bg: rgba(#000, .85),
         ),
     ), 'colors-dark');
 
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 3ba9744..59ae03f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -4,32 +4,81 @@
 @include iro.props-namespace('lightbox') {
     @include iro.props-store((
         --dims: (
-            
+            --pad-x:   fn.global-dim(--size --150),
+            --pad-y:   fn.global-dim(--size --150),
+            --spacing: fn.global-dim(--size --200),
+            --thumbnail: (
+                --size:     fn.global-dim(--size --800),
+                --spacing:  fn.global-dim(--size --100),
+                --selected: 3px,
+            ),
         ),
     ), 'dims');
 
+    @include iro.props-store((
+        --colors: (
+            --thumbnail: (
+                --selected: fn.global-color(--fg-lo),
+            ),
+        ),
+    ), 'colors');
+
     @include iro.bem-object(iro.props-namespace()) {
-        display: contents;
+        display:               grid;
+        grid-template-rows:    auto minmax(0, 1fr) auto;
+        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-areas:   'header close' 'content content' 'footer footer';
+        gap:                   fn.dim(--spacing);
+        min-height:            0;
+
+        @include iro.bem-elem('footer') {
+            grid-area: footer;
+            display:   flex;
+            gap:       fn.dim(--thumbnail --spacing);
+            padding:   fn.dim(--thumbnail --selected);
+            overflow:  auto;
+        }
 
         @include iro.bem-elem('header') {
-            display:     flex;
-            box-sizing:  border-box;
-            flex:        0 0 auto;
-            align-items: center;
-            width:       100%;
+            grid-area:     header;
+            overflow:      hidden;
+            text-overflow: ellipsis;
+            white-space:   nowrap;
         }
 
         @include iro.bem-elem('img') {
-            align-self:    center;
-            max-width:     100%;
-            min-height:    0;
-            max-height:    100%;
-            margin-top:    auto;
-            margin-bottom: auto;
+            grid-area:    content;
+            justify-self: center;
+            max-width:    100%;
+            max-height:   100%;
+        }
+
+        @include iro.bem-elem('thumbnail') {
+            opacity: .75;
+
+            &: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;
+            width:           fn.dim(--thumbnail --size);
+            height:          fn.dim(--thumbnail --size);
+            object-fit:      cover;
+            object-position: center center;
         }
 
         @include iro.bem-elem('close-btn') {
-            margin-left: auto;
+            --icon-stroke-width: 2px;
+
+            grid-area: close;
+            font-size: fn.global-dim(--font-size --150);
         }
     }
 }