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') |