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/_backdrop.scss | 10 ----------
src/objects/_lightbox.scss | 29 +++++++++++++++--------------
2 files changed, 15 insertions(+), 24 deletions(-)
(limited to 'src')
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%);
}
}
--
cgit v1.2.3-70-g09d2