diff options
| -rw-r--r-- | src/objects/_lightbox.scss | 14 | ||||
| -rw-r--r-- | tpl/objects/lightbox.pug | 1 |
2 files changed, 12 insertions, 3 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 2af8b0a..93256a1 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
| @@ -77,12 +77,20 @@ | |||
| 77 | margin: auto; | 77 | margin: auto; |
| 78 | padding: fn.dim(--pad); | 78 | padding: fn.dim(--pad); |
| 79 | 79 | ||
| 80 | &:target { | 80 | @include iro.bem-sibling-elem('img') { |
| 81 | display: block; | 81 | @include iro.bem-modifier('default') { |
| 82 | display: block; | ||
| 83 | } | ||
| 82 | } | 84 | } |
| 83 | 85 | ||
| 84 | @include iro.bem-is('visible') { | 86 | @include iro.bem-multi('&:target', 'is' 'visible') { |
| 85 | display: block; | 87 | display: block; |
| 88 | |||
| 89 | @include iro.bem-sibling-elem('img') { | ||
| 90 | @include iro.bem-modifier('default') { | ||
| 91 | display: none; | ||
| 92 | } | ||
| 93 | } | ||
| 86 | } | 94 | } |
| 87 | } | 95 | } |
| 88 | 96 | ||
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 5091565..633cf3f 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug | |||
| @@ -8,6 +8,7 @@ mixin lightbox(images) | |||
| 8 | +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') | 8 | +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') |
| 9 | each img, i in images | 9 | each img, i in images |
| 10 | img.o-lightbox__img(src=images[i] id='image-' + i) | 10 | img.o-lightbox__img(src=images[i] id='image-' + i) |
| 11 | img.o-lightbox__img.o-lightbox__img--default(src=images[0]) | ||
| 11 | if images.length > 1 | 12 | if images.length > 1 |
| 12 | +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') | 13 | +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') |
| 13 | +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') | 14 | +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') |
