diff options
-rw-r--r-- | src/objects/_lightbox.scss | 16 | ||||
-rw-r--r-- | tpl/objects/lightbox.pug | 12 | ||||
-rw-r--r-- | tpl/views/lightbox.pug | 13 |
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 | ||
3 | mixin lightbox(images) | 3 | mixin 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" | ||