Move lightbox thumbnail to own object

1 files changed, 14 insertions, 7 deletions

diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 85c468f..842d44a 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -9,10 +9,14 @@ mixin lightbox(images)
         let linksClasses = {
             's-links': true,
         }
+        let thumbnailClasses = {
+            'o-thumbnail': true,
+        }
 
         if (attributes.theme) {
             classes[`o-lightbox--${attributes.theme}`] = true;
             linksClasses[`s-links--${attributes.theme}`] = true;
+            thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true;
         }
 
     div(class=classes)
@@ -30,10 +34,13 @@ mixin lightbox(images)
 
         .o-lightbox__thumbnails
             each img, i in images
-                - classes = i === 0 ? 'is-selected' : ''
-                a.o-lightbox__thumbnail(class=classes href='#image-' + i)
-                    img.o-lightbox__thumbnail-img(src=img)
-            button.o-lightbox__thumbnail
-                +icon('volume-2')(class='o-lightbox__thumbnail-icon')
-            button.o-lightbox__thumbnail
-                +icon('video')(class='o-lightbox__thumbnail-icon')
+                -
+                    let classes = { 'is-selected': i === 0 }
+                    Object.assign(classes, thumbnailClasses)
+
+                a.o-thumbnail(class=classes href='#image-' + i)
+                    img.o-thumbnail__image(src=img)
+            button(class=thumbnailClasses)
+                +icon('volume-2')(class='o-thumbnail__icon')
+            button(class=thumbnailClasses)
+                +icon('video')(class='o-thumbnail__icon')