Better lightbox

2 files changed, 15 insertions, 24 deletions

diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 164b487..e7f2cfd 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -5,8 +5,6 @@
     @include iro.props-store((
         --dims: (
             --z-index: 10000,
-            --pad-x:   fn.global-dim(--size --150),
-            --pad-y:   fn.global-dim(--size --150),
         ),
     ), 'dims');
 
@@ -22,13 +20,6 @@
         ),
     ), 'colors-dark');
 
-    @include iro.props-store((
-        --dims: (
-            --pad-x: fn.global-dim(--size --100),
-            --pad-y: fn.global-dim(--size --100),
-        )
-    ), 'sm');
-
     @include iro.bem-object(iro.props-namespace()) {
         display:          flex;
         position:         fixed;
@@ -39,7 +30,6 @@
         left:             0;
         box-sizing:       border-box;
         flex-direction:   column;
-        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
         background-color: fn.color(--bg);
         color:            fn.global-color(--fg);
     }
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%);
             }
         }