Improved lightbox

2 files changed, 48 insertions, 42 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index de962e0..3f3bf59 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -6,8 +6,7 @@
 @include iro.props-namespace('lightbox') {
     @include iro.props-store((
         --dims: (
-            --pad:     fn.global-dim(--size --150),
-            --spacing: fn.global-dim(--size --200),
+            --pad: fn.global-dim(--size --150),
             --thumbnail: (
                 --size:     fn.global-dim(--size --700),
                 --spacing:  fn.global-dim(--size --100),
@@ -41,36 +40,28 @@
             --thumbnail: (
                 --selected: fn.global-color(--fg-lo),
             ),
+            --footer: (
+                --bg: fn.global-color(--bg-hi),
+            ),
         ),
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
         display:               grid;
-        grid-template-rows:    auto minmax(0, 1fr) auto;
-        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-rows:    auto minmax(0, 1fr) auto auto;
+        grid-template-columns: auto minmax(0, 1fr) auto;
         grid-template-areas:
-            'header  close'
-            'content content'
-            'footer  footer';
-        gap:                   fn.dim(--spacing);
-        position:              relative;
+            'header     header     close'
+            'prev       content    next'
+            'thumbnails thumbnails thumbnails'
+            'footer     footer     footer';
         box-sizing:            border-box;
         height:                100%;
-        padding:               fn.dim(--pad);
-
-        @include iro.bem-elem('footer') {
-            grid-area: footer;
-            display:   flex;
-            gap:       fn.dim(--thumbnail --spacing);
-            padding:   fn.dim(--thumbnail --selected);
-            overflow:  auto;
-        }
+        overflow:              hidden;
 
         @include iro.bem-elem('header') {
-            grid-area:     header;
-            overflow:      hidden;
-            text-overflow: ellipsis;
-            white-space:   nowrap;
+            grid-area: header;
+            padding:   fn.dim(--pad);
         }
 
         @include iro.bem-elem('img') {
@@ -79,7 +70,19 @@
             max-width:  100%;
             max-height: 100%;
             margin:     auto;
-            padding:    0 calc(fn.dim(--nav-button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px);
+        }
+
+        @include iro.bem-elem('thumbnails') {
+            grid-area: thumbnails;
+            display:   flex;
+            gap:       fn.dim(--thumbnail --spacing);
+            padding:   fn.dim(--pad);
+            overflow:  auto;
+        }
+
+        @include iro.bem-elem('footer') {
+            grid-area:        footer;
+            background-color: fn.color(--footer --bg);
         }
 
         @include iro.bem-elem('thumbnail') {
@@ -104,36 +107,39 @@
         }
 
         @include iro.bem-elem('close-btn') {
-            grid-area: close;
-            font-size: fn.dim(--close-button --font-size);
+            grid-area:    close;
+            align-self:   start;
+            margin-top:   calc(.5 * fn.dim(--pad));
+            margin-right: calc(.5 * fn.dim(--pad));
+            font-size:    fn.dim(--close-button --font-size);
         }
 
-        @include iro.bem-elem('prev-btn', 'next-btn') {
-            position:  absolute;
-            top:       50%;
-            overflow:  visible;
-            transform: translate(0, -50%);
-            font-size: fn.dim(--nav-button --font-size);
+        @include iro.bem-elem('nav-btn') {
+            position:   relative;
+            align-self: center;
+            overflow:   visible;
+            font-size:  fn.dim(--nav-button --font-size);
 
             &::after {
                 content:   '';
                 display:   block;
                 position:  absolute;
-                z-index:   -1;
                 top:       50%;
                 left:      50%;
                 width:     fn.dim(--nav-button --width);
                 height:    fn.dim(--nav-button --height);
                 transform: translate(-50%, -50%);
             }
-        }
-
-        @include iro.bem-elem('prev-btn') {
-            left: fn.dim(--pad);
-        }
 
-        @include iro.bem-elem('next-btn') {
-            right: fn.dim(--pad);
+            @include iro.bem-modifier('prev') {
+                grid-area:   prev;
+                margin-left: calc(.5 * fn.dim(--pad));
+            }
+    
+            @include iro.bem-modifier('next') {
+                grid-area:    next;
+                margin-right: calc(.5 * fn.dim(--pad));
+            }
         }
     }
 }
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index c335fdb..5ba8c57 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -6,9 +6,9 @@ mixin lightbox(images)
             block
         +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
         img.o-lightbox__img(src=images[0])
-        +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__prev-btn')
-        +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__next-btn')
-        footer.o-lightbox__footer
+        +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
+        +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+        .o-lightbox__thumbnails
             each img, i in images
                 - classes = i === 0 ? 'is-selected' : ''
                 button.o-lightbox__thumbnail(class=classes)