Added nav buttons to lightbox

1 files changed, 36 insertions, 0 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 9d5fb2f..9a79ee8 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -12,10 +12,28 @@
                 --spacing:  fn.global-dim(--size --100),
                 --selected: 3px,
             ),
+            --nav-btn: (
+                --font-size: fn.global-dim(--font-size --400),
+                --pad-x:     fn.global-dim(--size --300),
+                --pad-y:     fn.global-dim(--size --300),
+            ),
         ),
     ), 'dims');
 
     @include iro.props-store((
+        --dims: (
+            --thumbnail: (
+                --size: fn.global-dim(--size --600),
+            ),
+            --nav-btn: (
+                --font-size: fn.global-dim(--font-size --300),
+                --pad-x:     fn.global-dim(--size --150),
+                --pad-y:     fn.global-dim(--size --150),
+            ),
+        ),
+    ), 'md');
+
+    @include iro.props-store((
         --colors: (
             --thumbnail: (
                 --selected: fn.global-color(--fg-lo),
@@ -47,10 +65,12 @@
         }
 
         @include iro.bem-elem('img') {
+            box-sizing: border-box;
             grid-area:  content;
             max-width:  100%;
             max-height: 100%;
             margin:     auto;
+            padding:    0 calc(fn.dim(--nav-btn --font-size) + fn.dim(--nav-btn --pad-x));
         }
 
         @include iro.bem-elem('thumbnail') {
@@ -80,5 +100,21 @@
             grid-area: close;
             font-size: fn.global-dim(--font-size --150);
         }
+
+        @include iro.bem-elem('prev-btn', 'next-btn') {
+            position:  absolute;
+            top:       50%;
+            padding:   fn.dim(--nav-btn --pad-y) fn.dim(--nav-btn --pad-x);
+            transform: translate(0, -50%);
+            font-size: fn.dim(--nav-btn --font-size);
+        }
+
+        @include iro.bem-elem('prev-btn') {
+            left: 0;
+        }
+
+        @include iro.bem-elem('next-btn') {
+            right: 0;
+        }
     }
 }