summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-17 19:42:25 +0100
committerVolpeon <git@volpeon.ink>2022-02-17 19:42:25 +0100
commit387f71858790a79b896a34e9195cdf2856e89b55 (patch)
treea1719d60f6caae9c70905a48cd810d7e53ff4b86 /src
parentFix card layout (diff)
downloadiro-design-387f71858790a79b896a34e9195cdf2856e89b55.tar.gz
iro-design-387f71858790a79b896a34e9195cdf2856e89b55.tar.bz2
iro-design-387f71858790a79b896a34e9195cdf2856e89b55.zip
Added nav buttons to lightbox
Diffstat (limited to 'src')
-rw-r--r--src/objects/_lightbox.scss36
1 files changed, 36 insertions, 0 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 9d5fb2f..9a79ee8 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -12,10 +12,28 @@
12 --spacing: fn.global-dim(--size --100), 12 --spacing: fn.global-dim(--size --100),
13 --selected: 3px, 13 --selected: 3px,
14 ), 14 ),
15 --nav-btn: (
16 --font-size: fn.global-dim(--font-size --400),
17 --pad-x: fn.global-dim(--size --300),
18 --pad-y: fn.global-dim(--size --300),
19 ),
15 ), 20 ),
16 ), 'dims'); 21 ), 'dims');
17 22
18 @include iro.props-store(( 23 @include iro.props-store((
24 --dims: (
25 --thumbnail: (
26 --size: fn.global-dim(--size --600),
27 ),
28 --nav-btn: (
29 --font-size: fn.global-dim(--font-size --300),
30 --pad-x: fn.global-dim(--size --150),
31 --pad-y: fn.global-dim(--size --150),
32 ),
33 ),
34 ), 'md');
35
36 @include iro.props-store((
19 --colors: ( 37 --colors: (
20 --thumbnail: ( 38 --thumbnail: (
21 --selected: fn.global-color(--fg-lo), 39 --selected: fn.global-color(--fg-lo),
@@ -47,10 +65,12 @@
47 } 65 }
48 66
49 @include iro.bem-elem('img') { 67 @include iro.bem-elem('img') {
68 box-sizing: border-box;
50 grid-area: content; 69 grid-area: content;
51 max-width: 100%; 70 max-width: 100%;
52 max-height: 100%; 71 max-height: 100%;
53 margin: auto; 72 margin: auto;
73 padding: 0 calc(fn.dim(--nav-btn --font-size) + fn.dim(--nav-btn --pad-x));
54 } 74 }
55 75
56 @include iro.bem-elem('thumbnail') { 76 @include iro.bem-elem('thumbnail') {
@@ -80,5 +100,21 @@
80 grid-area: close; 100 grid-area: close;
81 font-size: fn.global-dim(--font-size --150); 101 font-size: fn.global-dim(--font-size --150);
82 } 102 }
103
104 @include iro.bem-elem('prev-btn', 'next-btn') {
105 position: absolute;
106 top: 50%;
107 padding: fn.dim(--nav-btn --pad-y) fn.dim(--nav-btn --pad-x);
108 transform: translate(0, -50%);
109 font-size: fn.dim(--nav-btn --font-size);
110 }
111
112 @include iro.bem-elem('prev-btn') {
113 left: 0;
114 }
115
116 @include iro.bem-elem('next-btn') {
117 right: 0;
118 }
83 } 119 }
84} 120}