diff options
Diffstat (limited to 'tpl/objects/lightbox.pug')
| -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') | ||