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.scss158
1 files changed, 60 insertions, 98 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b95148f..0d5e111 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -8,127 +8,89 @@
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 position: relative;
16 min-block-size: 0; 19 box-sizing: border-box;
17 20 display: flex;
18 @include bem.elem('header') { 21 flex: 1 1 auto;
19 display: flex; 22 flex-direction: column;
20 grid-area: header; 23 align-items: center;
21 align-items: flex-start; 24 justify-content: center;
22 padding-block-start: props.get(vars.$pad); 25 inline-size: 100%;
23 padding-inline: props.get(vars.$pad); 26 max-inline-size: none;
24 } 27 block-size: 100%;
28 min-block-size: 0;
29 max-block-size: none;
30 margin: 0;
31 background-color: transparent;
32 border: 0;
25 33
26 @include bem.elem('img') { 34 &::backdrop {
27 box-sizing: border-box; 35 background-color: props.get(backdrop.$bg-color);
28 display: block; 36 backdrop-filter: blur(props.get(backdrop.$blur));
29 grid-area: content;
30 place-self: center;
31 inline-size: auto;
32 max-inline-size: 100%;
33 block-size: auto;
34 max-block-size: props.get(vars.$image--max-height);
35 padding: props.get(vars.$pad);
36 margin-inline: auto;
37 border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
38 } 37 }
39 38
40 @include bem.elem('thumbnails') { 39 &[open] {
41 display: none; 40 display: flex;
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 } 41 }
48 42
49 @include bem.elem('close-btn') { 43 @include bem.elem('controls') {
50 display: none; 44 position: absolute;
51 flex: 0 0 auto; 45 inset-block-start: props.get(vars.$pad);
52 margin-block-start: calc(-.5 * props.get(vars.$pad)); 46 inset-inline-end: props.get(vars.$pad);
53 margin-inline: auto calc(-.5 * props.get(vars.$pad)); 47 z-index: 20;
54 font-size: props.get(vars.$close-button--font-size); 48 padding: props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
49 border-radius: 10em;
55 } 50 }
56 51
57 @include bem.elem('nav-btn') { 52 @include bem.elem('img') {
58 position: relative; 53 position: relative;
59 display: none; 54 z-index: 10;
60 align-self: center; 55 display: none;
61 overflow: visible; 56 flex: 1 1 auto;
62 font-size: props.get(vars.$nav-button--font-size); 57 inline-size: auto;
63 58 max-inline-size: 100%;
64 &::before { 59 block-size: auto;
65 position: absolute; 60 max-block-size: 100%;
66 inset-block-start: 50%; 61 margin: auto;
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 62
87 &::before { 63 @include bem.multi('&:target', 'is' 'visible') {
88 inset-inline-end: 0; 64 display: block;
89 }
90 } 65 }
91 } 66 }
92 67
93 @include bem.modifier('interactive') { 68 @include bem.elem('thumbnails') {
94 display: grid; 69 display: flex;
95 grid-template-areas: 70 flex: 0 0 auto;
96 'header header header' 71 gap: props.get(vars.$thumbnail--spacing);
97 'prev content next' 72 justify-content: center;
98 'thumbnails thumbnails thumbnails'; 73 padding: props.get(vars.$pad);
99 grid-template-rows: auto minmax(0, 1fr) auto auto; 74 overflow: auto;
100 grid-template-columns: auto minmax(0, 1fr) auto; 75 }
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
116 @include bem.elem('thumbnails') {
117 display: flex;
118 }
119 76
120 @include bem.elem('close-btn') { 77 @include bem.elem('thumbnail') {
121 display: block; 78 inline-size: props.get(vars.$thumbnail--width);
122 } 79 transition: inline-size .1s ease, margin-inline .1s ease;
123 80
124 @include bem.elem('nav-btn') { 81 @include bem.is('selected') {
125 display: block; 82 inline-size: props.get(vars.$thumbnail--active--width);
83 margin-inline: props.get(vars.$thumbnail--active--spacing);
126 } 84 }
127 } 85 }
128 86
129 @each $theme in map.keys(props.get(vars.$static-themes)) { 87 @each $theme in map.keys(props.get(vars.$static-themes)) {
130 @include bem.modifier(string.slice($theme, 3)) { 88 @include bem.modifier(string.slice($theme, 3)) {
131 color: props.get(vars.$static-themes, $theme, --text); 89 color: props.get(vars.$static-themes, $theme, --text);
90
91 @include bem.elem('controls') {
92 background-color: props.get(vars.$static-themes, $theme, --controls-bg);
93 }
132 } 94 }
133 } 95 }
134 } 96 }
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2026-02-08 05:50:09 +0000