Added nav buttons to lightbox

3 files changed, 41 insertions, 1 deletions

diff --git a/package.json b/package.json
index fa4f082..22207c8 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
         "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
         "build:assets": "cp -r static/* public/",
         "build:app": "pug tpl/index.pug -p tpl --out public/",
-        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x send smile public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-left chevron-right hash x send smile public/icons.svg",
         "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
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;
+        }
     }
 }
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index bfb4f49..c335fdb 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -1,9 +1,13 @@
+include icon.pug
+
 mixin lightbox(images)
     .o-lightbox 
         header.o-lightbox__header.s-colored-links
             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
             each img, i in images
                 - classes = i === 0 ? 'is-selected' : ''