From 12d9a0795dbf95212b15bcd7f3116bfa33d694e4 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 17 Jun 2022 23:56:19 +0200
Subject: Better lightbox

---
 src/objects/_lightbox.scss | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

(limited to 'src/objects/_lightbox.scss')

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 131db29..14aa302 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -6,20 +6,20 @@
 @include iro.props-namespace('lightbox') {
     @include iro.props-store((
         --dims: (
-            --pad-x:   fn.global-dim(--size --150),
-            --pad-y:   fn.global-dim(--size --150),
+            --pad:     fn.global-dim(--size --150),
             --spacing: fn.global-dim(--size --200),
             --thumbnail: (
-                --size:     fn.global-dim(--size --800),
+                --size:     fn.global-dim(--size --700),
                 --spacing:  fn.global-dim(--size --100),
-                --selected: 2px, //fn.global-dim(--border --medium),
+                --selected: 2px,
             ),
-            --button: (
+            --close-button: (
                 --font-size: fn.global-dim(--font-size --200),
             ),
-            --nav-btn: (
-                --width:  fn.global-dim(--size --3800),
-                --height: fn.global-dim(--size --3800),
+            --nav-button: (
+                --width:     fn.global-dim(--size --3800),
+                --height:    fn.global-dim(--size --3800),
+                --font-size: fn.global-dim(--font-size --400),
             ),
         ),
     ), 'dims');
@@ -29,7 +29,7 @@
             --thumbnail: (
                 --size: fn.global-dim(--size --600),
             ),
-            --nav-btn: (
+            --nav-button: (
                 --width:  fn.global-dim(--size --2500),
                 --height: fn.global-dim(--size --2500),
             ),
@@ -52,6 +52,7 @@
         gap:                   fn.dim(--spacing);
         position:              relative;
         height:                100%;
+        padding:               fn.dim(--pad);
 
         @include iro.bem-elem('footer') {
             grid-area: footer;
@@ -74,7 +75,7 @@
             max-width:  100%;
             max-height: 100%;
             margin:     auto;
-            padding:    0 calc(fn.dim(--button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px);
+            padding:    0 calc(fn.dim(--nav-button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px);
         }
 
         @include iro.bem-elem('thumbnail') {
@@ -100,7 +101,7 @@
 
         @include iro.bem-elem('close-btn') {
             grid-area: close;
-            font-size: fn.dim(--button --font-size);
+            font-size: fn.dim(--close-button --font-size);
         }
 
         @include iro.bem-elem('prev-btn', 'next-btn') {
@@ -108,7 +109,7 @@
             top:       50%;
             overflow:  visible;
             transform: translate(0, -50%);
-            font-size: fn.dim(--button --font-size);
+            font-size: fn.dim(--nav-button --font-size);
 
             &::after {
                 content:   '';
@@ -117,8 +118,8 @@
                 z-index:   -1;
                 top:       50%;
                 left:      50%;
-                width:     fn.dim(--nav-btn --width);
-                height:    fn.dim(--nav-btn --height);
+                width:     fn.dim(--nav-button --width);
+                height:    fn.dim(--nav-button --height);
                 transform: translate(-50%, -50%);
             }
         }
-- 
cgit v1.2.3-70-g09d2