diff options
-rw-r--r-- | src/objects/_lightbox.scss | 25 | ||||
-rw-r--r-- | tpl/objects/lightbox.pug | 3 |
2 files changed, 28 insertions, 0 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 09a228b..f2f83ef 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
@@ -80,15 +80,39 @@ | |||
80 | @include iro.bem-sibling-elem('img') { | 80 | @include iro.bem-sibling-elem('img') { |
81 | @include iro.bem-modifier('default') { | 81 | @include iro.bem-modifier('default') { |
82 | display: block; | 82 | display: block; |
83 | |||
84 | @include iro.bem-next-elem('nav-btn') { | ||
85 | display: block; | ||
86 | |||
87 | @include iro.bem-next-elem('nav-btn') { | ||
88 | display: block; | ||
89 | } | ||
90 | } | ||
83 | } | 91 | } |
84 | } | 92 | } |
85 | 93 | ||
86 | @include iro.bem-multi('&:target', 'is' 'visible') { | 94 | @include iro.bem-multi('&:target', 'is' 'visible') { |
87 | display: block; | 95 | display: block; |
88 | 96 | ||
97 | @include iro.bem-next-elem('nav-btn') { | ||
98 | display: block; | ||
99 | |||
100 | @include iro.bem-next-elem('nav-btn') { | ||
101 | display: block; | ||
102 | } | ||
103 | } | ||
104 | |||
89 | @include iro.bem-sibling-elem('img') { | 105 | @include iro.bem-sibling-elem('img') { |
90 | @include iro.bem-modifier('default') { | 106 | @include iro.bem-modifier('default') { |
91 | display: none; | 107 | display: none; |
108 | |||
109 | @include iro.bem-next-elem('nav-btn') { | ||
110 | display: none; | ||
111 | |||
112 | @include iro.bem-next-elem('nav-btn') { | ||
113 | display: none; | ||
114 | } | ||
115 | } | ||
92 | } | 116 | } |
93 | } | 117 | } |
94 | } | 118 | } |
@@ -150,6 +174,7 @@ | |||
150 | } | 174 | } |
151 | 175 | ||
152 | @include iro.bem-elem('nav-btn') { | 176 | @include iro.bem-elem('nav-btn') { |
177 | display: none; | ||
153 | position: relative; | 178 | position: relative; |
154 | align-self: center; | 179 | align-self: center; |
155 | overflow: visible; | 180 | overflow: visible; |
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 633cf3f..58abdae 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug | |||
@@ -8,6 +8,9 @@ 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 | +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') | ||
13 | |||
11 | img.o-lightbox__img.o-lightbox__img--default(src=images[0]) | 14 | img.o-lightbox__img.o-lightbox__img--default(src=images[0]) |
12 | if images.length > 1 | 15 | if images.length > 1 |
13 | +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') | 16 | +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') |