summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/objects/_lightbox.scss38
1 files changed, 25 insertions, 13 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 9a79ee8..6d83f01 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -10,12 +10,14 @@
10 --thumbnail: ( 10 --thumbnail: (
11 --size: fn.global-dim(--size --800), 11 --size: fn.global-dim(--size --800),
12 --spacing: fn.global-dim(--size --100), 12 --spacing: fn.global-dim(--size --100),
13 --selected: 3px, 13 --selected: 3px, //fn.global-dim(--border-width --medium),
14 ),
15 --button: (
16 --font-size: fn.global-dim(--font-size --200),
14 ), 17 ),
15 --nav-btn: ( 18 --nav-btn: (
16 --font-size: fn.global-dim(--font-size --400), 19 --width: fn.global-dim(--size --3800),
17 --pad-x: fn.global-dim(--size --300), 20 --height: fn.global-dim(--size --3800),
18 --pad-y: fn.global-dim(--size --300),
19 ), 21 ),
20 ), 22 ),
21 ), 'dims'); 23 ), 'dims');
@@ -26,9 +28,8 @@
26 --size: fn.global-dim(--size --600), 28 --size: fn.global-dim(--size --600),
27 ), 29 ),
28 --nav-btn: ( 30 --nav-btn: (
29 --font-size: fn.global-dim(--font-size --300), 31 --width: fn.global-dim(--size --2500),
30 --pad-x: fn.global-dim(--size --150), 32 --height: fn.global-dim(--size --2500),
31 --pad-y: fn.global-dim(--size --150),
32 ), 33 ),
33 ), 34 ),
34 ), 'md'); 35 ), 'md');
@@ -47,6 +48,7 @@
47 grid-template-columns: minmax(0, 1fr) auto; 48 grid-template-columns: minmax(0, 1fr) auto;
48 grid-template-areas: 'header close' 'content content' 'footer footer'; 49 grid-template-areas: 'header close' 'content content' 'footer footer';
49 gap: fn.dim(--spacing); 50 gap: fn.dim(--spacing);
51 position: relative;
50 height: 100%; 52 height: 100%;
51 53
52 @include iro.bem-elem('footer') { 54 @include iro.bem-elem('footer') {
@@ -70,7 +72,7 @@
70 max-width: 100%; 72 max-width: 100%;
71 max-height: 100%; 73 max-height: 100%;
72 margin: auto; 74 margin: auto;
73 padding: 0 calc(fn.dim(--nav-btn --font-size) + fn.dim(--nav-btn --pad-x)); 75 padding: 0 calc(fn.dim(--button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px);
74 } 76 }
75 77
76 @include iro.bem-elem('thumbnail') { 78 @include iro.bem-elem('thumbnail') {
@@ -95,18 +97,28 @@
95 } 97 }
96 98
97 @include iro.bem-elem('close-btn') { 99 @include iro.bem-elem('close-btn') {
98 --icon-stroke-width: 2px;
99
100 grid-area: close; 100 grid-area: close;
101 font-size: fn.global-dim(--font-size --150); 101 font-size: fn.dim(--button --font-size);
102 } 102 }
103 103
104 @include iro.bem-elem('prev-btn', 'next-btn') { 104 @include iro.bem-elem('prev-btn', 'next-btn') {
105 position: absolute; 105 position: absolute;
106 top: 50%; 106 top: 50%;
107 padding: fn.dim(--nav-btn --pad-y) fn.dim(--nav-btn --pad-x); 107 overflow: visible;
108 transform: translate(0, -50%); 108 transform: translate(0, -50%);
109 font-size: fn.dim(--nav-btn --font-size); 109 font-size: fn.dim(--button --font-size);
110
111 &::after {
112 content: '';
113 display: block;
114 position: absolute;
115 z-index: -1;
116 top: 50%;
117 left: 50%;
118 width: fn.dim(--nav-btn --width);
119 height: fn.dim(--nav-btn --height);
120 transform: translate(-50%, -50%);
121 }
110 } 122 }
111 123
112 @include iro.bem-elem('prev-btn') { 124 @include iro.bem-elem('prev-btn') {