diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_lightbox.scss | 101 |
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); |