summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/objects/_lightbox.scss101
1 files changed, 39 insertions, 62 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 02714d7..5562696 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -12,17 +12,8 @@
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('lightbox') { 14 @include bem.object('lightbox') {
15 box-sizing: border-box; 15 flex: 1 1 auto;
16 display: grid; 16 min-block-size: 0;
17 flex: 1 1 auto;
18 grid-template-areas:
19 'header header header'
20 'prev content next'
21 'thumbnails thumbnails thumbnails'
22 'footer footer footer';
23 grid-template-rows: auto minmax(0, 1fr) auto auto;
24 grid-template-columns: auto minmax(0, 1fr) auto;
25 min-block-size: 0;
26 17
27 @include bem.elem('header') { 18 @include bem.elem('header') {
28 display: flex; 19 display: flex;
@@ -34,56 +25,17 @@
34 25
35 @include bem.elem('img') { 26 @include bem.elem('img') {
36 box-sizing: border-box; 27 box-sizing: border-box;
37 display: none; 28 display: block;
38 grid-area: content; 29 grid-area: content;
39 place-self: center; 30 place-self: center;
40 max-inline-size: 100%; 31 max-inline-size: 100%;
41 max-block-size: 100%; 32 max-block-size: 80vh;
42 padding: props.get(vars.$pad); 33 padding: props.get(vars.$pad);
43 34 margin-inline: auto;
44 @include bem.sibling-elem('img') {
45 @include bem.modifier('default') {
46 display: block;
47
48 @include bem.next-elem('nav-btn') {
49 display: block;
50
51 @include bem.next-elem('nav-btn') {
52 display: block;
53 }
54 }
55 }
56 }
57
58 @include bem.multi('&:target', 'is' 'visible') {
59 display: block;
60
61 @include bem.next-elem('nav-btn') {
62 display: block;
63
64 @include bem.next-elem('nav-btn') {
65 display: block;
66 }
67 }
68
69 @include bem.sibling-elem('img') {
70 @include bem.modifier('default') {
71 display: none;
72
73 @include bem.next-elem('nav-btn') {
74 display: none;
75
76 @include bem.next-elem('nav-btn') {
77 display: none;
78 }
79 }
80 }
81 }
82 }
83 } 35 }
84 36
85 @include bem.elem('thumbnails') { 37 @include bem.elem('thumbnails') {
86 display: flex; 38 display: none;
87 grid-area: thumbnails; 39 grid-area: thumbnails;
88 gap: props.get(vars.$thumbnail--spacing); 40 gap: props.get(vars.$thumbnail--spacing);
89 padding: props.get(vars.$pad); 41 padding: props.get(vars.$pad);
@@ -91,14 +43,6 @@
91 overflow: auto; 43 overflow: auto;
92 } 44 }
93 45
94 @include bem.elem('footer') {
95 display: flex;
96 grid-area: footer;
97 align-items: flex-start;
98 padding-block: 0 props.get(vars.$pad);
99 padding-inline: props.get(vars.$pad);
100 }
101
102 @include bem.elem('thumbnail') { 46 @include bem.elem('thumbnail') {
103 position: relative; 47 position: relative;
104 flex: 0 0 auto; 48 flex: 0 0 auto;
@@ -163,6 +107,7 @@
163 } 107 }
164 108
165 @include bem.elem('close-btn') { 109 @include bem.elem('close-btn') {
110 display: none;
166 flex: 0 0 auto; 111 flex: 0 0 auto;
167 margin-block-start: calc(-.5 * props.get(vars.$pad)); 112 margin-block-start: calc(-.5 * props.get(vars.$pad));
168 margin-inline: auto calc(-.5 * props.get(vars.$pad)); 113 margin-inline: auto calc(-.5 * props.get(vars.$pad));
@@ -205,6 +150,38 @@
205 } 150 }
206 } 151 }
207 152
153 @include bem.modifier('interactive') {
154 display: grid;
155 grid-template-areas:
156 'header header header'
157 'prev content next'
158 'thumbnails thumbnails thumbnails';
159 grid-template-rows: auto minmax(0, 1fr) auto auto;
160 grid-template-columns: auto minmax(0, 1fr) auto;
161
162 @include bem.elem('img') {
163 display: none;
164 max-block-size: 100%;
165 margin-inline: 0;
166
167 @include bem.multi('&:target', 'is' 'visible') {
168 display: block;
169 }
170 }
171
172 @include bem.elem('thumbnails') {
173 display: flex;
174 }
175
176 @include bem.elem('close-btn') {
177 display: block;
178 }
179
180 @include bem.elem('nav-btn') {
181 display: block;
182 }
183 }
184
208 @each $theme in map.keys(props.get(vars.$static-themes)) { 185 @each $theme in map.keys(props.get(vars.$static-themes)) {
209 @include bem.modifier(string.slice($theme, 3)) { 186 @include bem.modifier(string.slice($theme, 3)) {
210 color: props.get(vars.$static-themes, $theme, --text); 187 color: props.get(vars.$static-themes, $theme, --text);