diff options
Diffstat (limited to 'tpl')
-rw-r--r-- | tpl/objects/lightbox.pug | 21 |
1 files changed, 14 insertions, 7 deletions
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 85c468f..842d44a 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug | |||
@@ -9,10 +9,14 @@ mixin lightbox(images) | |||
9 | let linksClasses = { | 9 | let linksClasses = { |
10 | 's-links': true, | 10 | 's-links': true, |
11 | } | 11 | } |
12 | let thumbnailClasses = { | ||
13 | 'o-thumbnail': true, | ||
14 | } | ||
12 | 15 | ||
13 | if (attributes.theme) { | 16 | if (attributes.theme) { |
14 | classes[`o-lightbox--${attributes.theme}`] = true; | 17 | classes[`o-lightbox--${attributes.theme}`] = true; |
15 | linksClasses[`s-links--${attributes.theme}`] = true; | 18 | linksClasses[`s-links--${attributes.theme}`] = true; |
19 | thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true; | ||
16 | } | 20 | } |
17 | 21 | ||
18 | div(class=classes) | 22 | div(class=classes) |
@@ -30,10 +34,13 @@ mixin lightbox(images) | |||
30 | 34 | ||
31 | .o-lightbox__thumbnails | 35 | .o-lightbox__thumbnails |
32 | each img, i in images | 36 | each img, i in images |
33 | - classes = i === 0 ? 'is-selected' : '' | 37 | - |
34 | a.o-lightbox__thumbnail(class=classes href='#image-' + i) | 38 | let classes = { 'is-selected': i === 0 } |
35 | img.o-lightbox__thumbnail-img(src=img) | 39 | Object.assign(classes, thumbnailClasses) |
36 | button.o-lightbox__thumbnail | 40 | |
37 | +icon('volume-2')(class='o-lightbox__thumbnail-icon') | 41 | a.o-thumbnail(class=classes href='#image-' + i) |
38 | button.o-lightbox__thumbnail | 42 | img.o-thumbnail__image(src=img) |
39 | +icon('video')(class='o-lightbox__thumbnail-icon') | 43 | button(class=thumbnailClasses) |
44 | +icon('volume-2')(class='o-thumbnail__icon') | ||
45 | button(class=thumbnailClasses) | ||
46 | +icon('video')(class='o-thumbnail__icon') | ||