Lightbox

3 files changed, 25 insertions, 5 deletions

diff --git a/package.json b/package.json
index a278393..6cf8b90 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 cog logout tags lock user chevron-left chevron-right hash x send smile public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile public/icons.svg",
         "build:style": "sass --load-path=node_modules src_demo/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 c2894ee..74515c4 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -10,6 +10,7 @@
             --thumbnail: (
                 --size:     fn.global-dim(--size --700),
                 --spacing:  fn.global-dim(--size --100),
+                --idle:     1px,
                 --selected: 2px,
             ),
             --close-button: (
@@ -38,6 +39,7 @@
     @include iro.props-store((
         --colors: (
             --thumbnail: (
+                --idle:     fn.global-color(--fg-hi2),
                 --selected: fn.global-color(--fg-lo),
             ),
             --footer: (
@@ -89,7 +91,12 @@
         }
 
         @include iro.bem-elem('thumbnail') {
-            opacity: .75;
+            position:  relative;
+            flex:      0 0 auto;
+            width:     fn.dim(--thumbnail --size);
+            height:    fn.dim(--thumbnail --size);
+            opacity:   .75;
+            box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset;
 
             &:hover {
                 opacity: 1;
@@ -103,13 +110,22 @@
 
         @include iro.bem-elem('thumbnail-img') {
             display:         block;
-            width:           fn.dim(--thumbnail --size);
-            min-width:       fn.dim(--thumbnail --size);
-            height:          fn.dim(--thumbnail --size);
+            position:        absolute;
+            top:             0;
+            left:            0;
+            width:           100%;
+            height:          100%;
             object-fit:      cover;
             object-position: center center;
         }
 
+        @include iro.bem-elem('thumbnail-icon') {
+            position:  absolute;
+            top:       50%;
+            left:      50%;
+            transform: translate(-50%, -50%);
+        }
+
         @include iro.bem-elem('close-btn') {
             flex:      0 0 auto;
             margin:    calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index faf7fa2..ac7d886 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -15,3 +15,7 @@ mixin lightbox(images)
                 - classes = i === 0 ? 'is-selected' : ''
                 button.o-lightbox__thumbnail(class=classes)
                     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')