summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_lightbox.scss84
-rw-r--r--tpl/objects/lightbox.pug6
2 files changed, 48 insertions, 42 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index de962e0..3f3bf59 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -6,8 +6,7 @@
6@include iro.props-namespace('lightbox') { 6@include iro.props-namespace('lightbox') {
7 @include iro.props-store(( 7 @include iro.props-store((
8 --dims: ( 8 --dims: (
9 --pad: fn.global-dim(--size --150), 9 --pad: fn.global-dim(--size --150),
10 --spacing: fn.global-dim(--size --200),
11 --thumbnail: ( 10 --thumbnail: (
12 --size: fn.global-dim(--size --700), 11 --size: fn.global-dim(--size --700),
13 --spacing: fn.global-dim(--size --100), 12 --spacing: fn.global-dim(--size --100),
@@ -41,36 +40,28 @@
41 --thumbnail: ( 40 --thumbnail: (
42 --selected: fn.global-color(--fg-lo), 41 --selected: fn.global-color(--fg-lo),
43 ), 42 ),
43 --footer: (
44 --bg: fn.global-color(--bg-hi),
45 ),
44 ), 46 ),
45 ), 'colors'); 47 ), 'colors');
46 48
47 @include iro.bem-object(iro.props-namespace()) { 49 @include iro.bem-object(iro.props-namespace()) {
48 display: grid; 50 display: grid;
49 grid-template-rows: auto minmax(0, 1fr) auto; 51 grid-template-rows: auto minmax(0, 1fr) auto auto;
50 grid-template-columns: minmax(0, 1fr) auto; 52 grid-template-columns: auto minmax(0, 1fr) auto;
51 grid-template-areas: 53 grid-template-areas:
52 'header close' 54 'header header close'
53 'content content' 55 'prev content next'
54 'footer footer'; 56 'thumbnails thumbnails thumbnails'
55 gap: fn.dim(--spacing); 57 'footer footer footer';
56 position: relative;
57 box-sizing: border-box; 58 box-sizing: border-box;
58 height: 100%; 59 height: 100%;
59 padding: fn.dim(--pad); 60 overflow: hidden;
60
61 @include iro.bem-elem('footer') {
62 grid-area: footer;
63 display: flex;
64 gap: fn.dim(--thumbnail --spacing);
65 padding: fn.dim(--thumbnail --selected);
66 overflow: auto;
67 }
68 61
69 @include iro.bem-elem('header') { 62 @include iro.bem-elem('header') {
70 grid-area: header; 63 grid-area: header;
71 overflow: hidden; 64 padding: fn.dim(--pad);
72 text-overflow: ellipsis;
73 white-space: nowrap;
74 } 65 }
75 66
76 @include iro.bem-elem('img') { 67 @include iro.bem-elem('img') {
@@ -79,7 +70,19 @@
79 max-width: 100%; 70 max-width: 100%;
80 max-height: 100%; 71 max-height: 100%;
81 margin: auto; 72 margin: auto;
82 padding: 0 calc(fn.dim(--nav-button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px); 73 }
74
75 @include iro.bem-elem('thumbnails') {
76 grid-area: thumbnails;
77 display: flex;
78 gap: fn.dim(--thumbnail --spacing);
79 padding: fn.dim(--pad);
80 overflow: auto;
81 }
82
83 @include iro.bem-elem('footer') {
84 grid-area: footer;
85 background-color: fn.color(--footer --bg);
83 } 86 }
84 87
85 @include iro.bem-elem('thumbnail') { 88 @include iro.bem-elem('thumbnail') {
@@ -104,36 +107,39 @@
104 } 107 }
105 108
106 @include iro.bem-elem('close-btn') { 109 @include iro.bem-elem('close-btn') {
107 grid-area: close; 110 grid-area: close;
108 font-size: fn.dim(--close-button --font-size); 111 align-self: start;
112 margin-top: calc(.5 * fn.dim(--pad));
113 margin-right: calc(.5 * fn.dim(--pad));
114 font-size: fn.dim(--close-button --font-size);
109 } 115 }
110 116
111 @include iro.bem-elem('prev-btn', 'next-btn') { 117 @include iro.bem-elem('nav-btn') {
112 position: absolute; 118 position: relative;
113 top: 50%; 119 align-self: center;
114 overflow: visible; 120 overflow: visible;
115 transform: translate(0, -50%); 121 font-size: fn.dim(--nav-button --font-size);
116 font-size: fn.dim(--nav-button --font-size);
117 122
118 &::after { 123 &::after {
119 content: ''; 124 content: '';
120 display: block; 125 display: block;
121 position: absolute; 126 position: absolute;
122 z-index: -1;
123 top: 50%; 127 top: 50%;
124 left: 50%; 128 left: 50%;
125 width: fn.dim(--nav-button --width); 129 width: fn.dim(--nav-button --width);
126 height: fn.dim(--nav-button --height); 130 height: fn.dim(--nav-button --height);
127 transform: translate(-50%, -50%); 131 transform: translate(-50%, -50%);
128 } 132 }
129 }
130
131 @include iro.bem-elem('prev-btn') {
132 left: fn.dim(--pad);
133 }
134 133
135 @include iro.bem-elem('next-btn') { 134 @include iro.bem-modifier('prev') {
136 right: fn.dim(--pad); 135 grid-area: prev;
136 margin-left: calc(.5 * fn.dim(--pad));
137 }
138
139 @include iro.bem-modifier('next') {
140 grid-area: next;
141 margin-right: calc(.5 * fn.dim(--pad));
142 }
137 } 143 }
138 } 144 }
139} 145}
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index c335fdb..5ba8c57 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -6,9 +6,9 @@ mixin lightbox(images)
6 block 6 block
7 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') 7 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
8 img.o-lightbox__img(src=images[0]) 8 img.o-lightbox__img(src=images[0])
9 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__prev-btn') 9 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
10 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__next-btn') 10 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
11 footer.o-lightbox__footer 11 .o-lightbox__thumbnails
12 each img, i in images 12 each img, i in images
13 - classes = i === 0 ? 'is-selected' : '' 13 - classes = i === 0 ? 'is-selected' : ''
14 button.o-lightbox__thumbnail(class=classes) 14 button.o-lightbox__thumbnail(class=classes)