summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_lightbox.scss16
-rw-r--r--tpl/objects/lightbox.pug12
-rw-r--r--tpl/views/lightbox.pug13
3 files changed, 28 insertions, 13 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 568265e..a5f077f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -51,7 +51,7 @@
51 grid-template-rows: auto minmax(0, 1fr) auto auto; 51 grid-template-rows: auto minmax(0, 1fr) auto auto;
52 grid-template-columns: auto minmax(0, 1fr) auto; 52 grid-template-columns: auto minmax(0, 1fr) auto;
53 grid-template-areas: 53 grid-template-areas:
54 'header header close' 54 'header header header'
55 'prev content next' 55 'prev content next'
56 'thumbnails thumbnails thumbnails' 56 'thumbnails thumbnails thumbnails'
57 'footer footer footer'; 57 'footer footer footer';
@@ -60,8 +60,10 @@
60 overflow: hidden; 60 overflow: hidden;
61 61
62 @include iro.bem-elem('header') { 62 @include iro.bem-elem('header') {
63 grid-area: header; 63 grid-area: header;
64 padding: fn.dim(--pad) fn.dim(--pad) 0; 64 display: flex;
65 align-items: flex-start;
66 padding: fn.dim(--pad) fn.dim(--pad) 0;
65 } 67 }
66 68
67 @include iro.bem-elem('img') { 69 @include iro.bem-elem('img') {
@@ -108,11 +110,9 @@
108 } 110 }
109 111
110 @include iro.bem-elem('close-btn') { 112 @include iro.bem-elem('close-btn') {
111 grid-area: close; 113 flex: 0 0 auto;
112 align-self: start; 114 margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
113 margin-top: calc(.5 * fn.dim(--pad)); 115 font-size: fn.dim(--close-button --font-size);
114 margin-right: calc(.5 * fn.dim(--pad));
115 font-size: fn.dim(--close-button --font-size);
116 } 116 }
117 117
118 @include iro.bem-elem('nav-btn') { 118 @include iro.bem-elem('nav-btn') {
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 5ba8c57..faf7fa2 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -2,12 +2,14 @@ include icon.pug
2 2
3mixin lightbox(images) 3mixin lightbox(images)
4 .o-lightbox 4 .o-lightbox
5 header.o-lightbox__header.s-colored-links 5 header.o-lightbox__header
6 block 6 .s-colored-links
7 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') 7 block
8 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
8 img.o-lightbox__img(src=images[0]) 9 img.o-lightbox__img(src=images[0])
9 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 10 if images.length > 1
10 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') 11 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
12 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
11 .o-lightbox__thumbnails 13 .o-lightbox__thumbnails
12 each img, i in images 14 each img, i in images
13 - classes = i === 0 ? 'is-selected' : '' 15 - classes = i === 0 ? 'is-selected' : ''
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 174e904..c1e5054 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -12,3 +12,16 @@ mixin view-lightbox
12 = ' ' 12 = ' '
13 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") 13 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
14 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" 14 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
15
16 .c-box
17 +backdrop(class='t-dark')
18 +lightbox(['avatar.png'])
19 = "Let's try multiple links! "
20 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
21 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
22 = ' '
23 a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
24 = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
25 = ' '
26 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
27 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"