summaryrefslogtreecommitdiffstats
path: root/src/objects/_lightbox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_lightbox.scss')
-rw-r--r--src/objects/_lightbox.scss165
1 files changed, 71 insertions, 94 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b95148f..5ff6d93 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -8,127 +8,104 @@
8@forward 'lightbox.vars'; 8@forward 'lightbox.vars';
9@use 'lightbox.vars' as vars; 9@use 'lightbox.vars' as vars;
10 10
11@use 'backdrop.vars' as backdrop;
12@use 'thumbnail.vars' as thumbnail;
13
11@mixin styles { 14@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 15 @include materialize-at-root(meta.module-variables('vars'));
13 16
14 @include bem.object('lightbox') { 17 @include bem.object('lightbox') {
15 flex: 1 1 auto; 18 box-sizing: border-box;
16 min-block-size: 0; 19 display: none;
20 flex: 1 1 auto;
21 flex-direction: column;
22 justify-content: flex-end;
23 inline-size: 100%;
24 max-inline-size: none;
25 block-size: 100%;
26 min-block-size: 0;
27 max-block-size: none;
28 padding: 0;
29 margin: 0;
30 background-color: transparent;
31 border: 0;
32
33 &::backdrop {
34 background-color: props.get(backdrop.$bg-color);
35 backdrop-filter: blur(props.get(backdrop.$blur));
36 }
37
38 &[open] {
39 display: flex;
40 }
17 41
18 @include bem.elem('header') { 42 @include bem.elem('controls') {
19 display: flex; 43 position: absolute;
20 grid-area: header; 44 inset-block-start: props.get(vars.$pad);
21 align-items: flex-start; 45 inset-inline-end: props.get(vars.$pad);
22 padding-block-start: props.get(vars.$pad); 46 z-index: 20;
23 padding-inline: props.get(vars.$pad); 47 padding: props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
48 border-radius: 10em;
24 } 49 }
25 50
26 @include bem.elem('img') { 51 @include bem.elem('img') {
27 box-sizing: border-box; 52 position: relative;
53 z-index: 10;
28 display: block; 54 display: block;
29 grid-area: content; 55 flex: 1 1 auto;
30 place-self: center;
31 inline-size: auto; 56 inline-size: auto;
57 min-inline-size: 0;
32 max-inline-size: 100%; 58 max-inline-size: 100%;
33 block-size: auto; 59 block-size: auto;
34 max-block-size: props.get(vars.$image--max-height); 60 min-block-size: 0;
35 padding: props.get(vars.$pad); 61 max-block-size: 100%;
36 margin-inline: auto; 62 margin: auto;
37 border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); 63 object-fit: contain;
38 }
39 64
40 @include bem.elem('thumbnails') { 65 @include bem.is('hidden') {
41 display: none; 66 display: none;
42 grid-area: thumbnails;
43 gap: props.get(vars.$thumbnails--spacing);
44 padding: props.get(vars.$pad);
45 margin-block-start: calc(-1 * props.get(vars.$pad));
46 overflow: auto;
47 }
48 67
49 @include bem.elem('close-btn') { 68 @include bem.next-elem('placeholder') {
50 display: none; 69 display: block;
51 flex: 0 0 auto;
52 margin-block-start: calc(-.5 * props.get(vars.$pad));
53 margin-inline: auto calc(-.5 * props.get(vars.$pad));
54 font-size: props.get(vars.$close-button--font-size);
55 }
56
57 @include bem.elem('nav-btn') {
58 position: relative;
59 display: none;
60 align-self: center;
61 overflow: visible;
62 font-size: props.get(vars.$nav-button--font-size);
63
64 &::before {
65 position: absolute;
66 inset-block-start: 50%;
67 display: block;
68 inline-size: props.get(vars.$nav-button--inline-size);
69 block-size: props.get(vars.$nav-button--block-size);
70 content: '';
71 transform: translateY(-50%);
72 }
73
74 @include bem.modifier('prev') {
75 grid-area: prev;
76 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
77
78 &::before {
79 inset-inline-start: 0;
80 }
81 }
82
83 @include bem.modifier('next') {
84 grid-area: next;
85 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
86
87 &::before {
88 inset-inline-end: 0;
89 } 70 }
90 } 71 }
91 } 72 }
92 73
93 @include bem.modifier('interactive') { 74 @include bem.elem('placeholder') {
94 display: grid; 75 position: absolute;
95 grid-template-areas: 76 inset-block-start: 50%;
96 'header header header' 77 inset-inline-start: 50%;
97 'prev content next' 78 z-index: 5;
98 'thumbnails thumbnails thumbnails'; 79 display: none;
99 grid-template-rows: auto minmax(0, 1fr) auto auto; 80 transform: translate(-50, -50);
100 grid-template-columns: auto minmax(0, 1fr) auto; 81 }
101
102 @include bem.modifier('fullscreen') {
103 block-size: props.get(vars.$fullscreen--height);
104 }
105
106 @include bem.elem('img') {
107 display: none;
108 max-block-size: 100%;
109 margin-inline: 0;
110
111 @include bem.multi('&:target', 'is' 'visible') {
112 display: block;
113 }
114 }
115 82
116 @include bem.elem('thumbnails') { 83 @include bem.elem('thumbnails') {
117 display: flex; 84 display: flex;
118 } 85 flex: 0 0 auto;
86 gap: props.get(vars.$thumbnail--spacing);
87 justify-content: center;
88 padding: props.get(vars.$pad);
89 overflow: auto;
90 }
119 91
120 @include bem.elem('close-btn') { 92 @include bem.elem('thumbnail') {
121 display: block; 93 inline-size: props.get(vars.$thumbnail--width);
122 } 94 transition: inline-size .1s ease, margin-inline .1s ease;
123 95
124 @include bem.elem('nav-btn') { 96 @include bem.is('selected') {
125 display: block; 97 inline-size: props.get(vars.$thumbnail--active--width);
98 margin-inline: props.get(vars.$thumbnail--active--spacing);
126 } 99 }
127 } 100 }
128 101
129 @each $theme in map.keys(props.get(vars.$static-themes)) { 102 @each $theme in map.keys(props.get(vars.$static-themes)) {
130 @include bem.modifier(string.slice($theme, 3)) { 103 @include bem.modifier(string.slice($theme, 3)) {
131 color: props.get(vars.$static-themes, $theme, --text); 104 color: props.get(vars.$static-themes, $theme, --text);
105
106 @include bem.elem('controls') {
107 background-color: props.get(vars.$static-themes, $theme, --controls-bg);
108 }
132 } 109 }
133 } 110 }
134 } 111 }
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2026-02-07 23:06:06 +0000