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.scss157
1 files changed, 79 insertions, 78 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 2b4abad..a173d57 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,40 +1,40 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:meta"; 2@use 'sass:meta';
3@use "sass:string"; 3@use 'sass:string';
4@use "pkg:iro-sass/bem"; 4@use 'pkg:iro-sass/src/bem';
5@use "pkg:iro-sass/props"; 5@use 'pkg:iro-sass/src/props';
6@use "../props" as *; 6@use '../props' as *;
7 7
8@forward "lightbox.vars"; 8@forward 'lightbox.vars';
9@use "lightbox.vars" as vars; 9@use 'lightbox.vars' as vars;
10 10
11@use "button.vars" as button; 11@use 'button.vars' as button;
12@use "backdrop.vars" as backdrop; 12@use 'backdrop.vars' as backdrop;
13@use "thumbnail.vars" as thumbnail; 13@use 'thumbnail.vars' as thumbnail;
14 14
15@mixin styles { 15@mixin styles {
16 @include materialize-at-root(meta.module-variables("vars")); 16 @include materialize-at-root(meta.module-variables('vars'));
17 17
18 @include bem.object("lightbox") { 18 @include bem.object('lightbox') {
19 box-sizing: border-box; 19 box-sizing: border-box;
20 display: none; 20 display: none;
21 flex: 1 1 auto; 21 flex: 1 1 auto;
22 grid-template-areas: "image" "thumbnails"; 22 grid-template-areas: 'image' 'thumbnails';
23 grid-template-rows: 1fr auto; 23 grid-template-rows: 1fr auto;
24 grid-template-columns: 1fr; 24 grid-template-columns: 1fr;
25 align-items: center; 25 align-items: center;
26 justify-items: center; 26 justify-items: center;
27 inline-size: 100%; 27 inline-size: 100%;
28 max-inline-size: none; 28 max-inline-size: none;
29 block-size: 100%; 29 block-size: 100%;
30 min-block-size: 0; 30 min-block-size: 0;
31 max-block-size: none; 31 max-block-size: none;
32 padding: 0; 32 padding: 0;
33 margin: 0; 33 margin: 0;
34 overflow: hidden; 34 overflow: hidden;
35 background-color: transparent; 35 background-color: transparent;
36 border: 0; 36 border: 0;
37 pointer-events: none; 37 pointer-events: none;
38 38
39 &::backdrop { 39 &::backdrop {
40 background-color: props.get(backdrop.$bg-color); 40 background-color: props.get(backdrop.$bg-color);
@@ -42,7 +42,7 @@
42 } 42 }
43 43
44 &[open], 44 &[open],
45 &:popover-open { 45 &:popover-open {
46 display: grid; 46 display: grid;
47 } 47 }
48 48
@@ -50,79 +50,80 @@
50 pointer-events: auto; 50 pointer-events: auto;
51 } 51 }
52 52
53 @include bem.elem("info", "controls") { 53 @include bem.elem('info', 'controls') {
54 position: absolute; 54 position: absolute;
55 inset-block-start: props.get(vars.$pad); 55 inset-block-start: props.get(vars.$pad);
56 z-index: 20; 56 z-index: 20;
57 display: flex; 57 display: flex;
58 align-items: center; 58 align-items: center;
59 block-size: props.get(vars.$controls--block-size); 59 block-size: props.get(vars.$controls--block-size);
60 padding-inline: props.get(vars.$controls--pad-i); 60 padding-inline: props.get(vars.$controls--pad-i);
61 background-color: props.get(vars.$controls--bg); 61 background-color: props.get(vars.$controls--bg);
62 border-radius: 10em; 62 border-radius: 10em;
63 box-shadow: props.get(vars.$controls--shadow-x) props.get(vars.$controls--shadow-y) 63 box-shadow:
64 props.get(vars.$controls--shadow-blur) props.get(vars.$controls--shadow-grow) 64 props.get(vars.$controls--shadow-x)
65 props.get(vars.$controls--shadow-y)
66 props.get(vars.$controls--shadow-blur)
67 props.get(vars.$controls--shadow-grow)
65 props.get(vars.$controls--shadow-color); 68 props.get(vars.$controls--shadow-color);
66 } 69 }
67 70
68 @include bem.elem("info") { 71 @include bem.elem('info') {
69 inset-inline-start: props.get(vars.$pad); 72 inset-inline-start: props.get(vars.$pad);
70 font-variant-numeric: tabular-nums; 73 font-variant-numeric: tabular-nums;
71 } 74 }
72 75
73 @include bem.elem("controls") { 76 @include bem.elem('controls') {
74 inset-inline-end: props.get(vars.$pad); 77 inset-inline-end: props.get(vars.$pad);
75 } 78 }
76 79
77 @include bem.elem("img") { 80 @include bem.elem('img') {
78 position: relative; 81 position: relative;
79 z-index: 10; 82 z-index: 10;
80 display: block; 83 display: block;
81 grid-area: image; 84 grid-area: image;
82 inline-size: auto; 85 inline-size: auto;
83 min-inline-size: 0; 86 min-inline-size: 0;
84 max-inline-size: 100%; 87 max-inline-size: 100%;
85 block-size: auto; 88 block-size: auto;
86 min-block-size: 0; 89 min-block-size: 0;
87 max-block-size: 100%; 90 max-block-size: 100%;
88 user-select: none; 91 user-select: none;
89 object-fit: contain; 92 object-fit: contain;
90 93
91 @include bem.is("hidden") { 94 @include bem.is('hidden') {
92 display: none; 95 display: none;
93 96
94 @include bem.next-elem("placeholder") { 97 @include bem.next-elem('placeholder') {
95 display: block; 98 display: block;
96 } 99 }
97 } 100 }
98 } 101 }
99 102
100 @include bem.elem("placeholder") { 103 @include bem.elem('placeholder') {
101 position: absolute; 104 position: absolute;
102 inset-block-start: 50%; 105 inset-block-start: 50%;
103 inset-inline-start: 50%; 106 inset-inline-start: 50%;
104 z-index: 5; 107 z-index: 5;
105 display: none; 108 display: none;
106 transform: translate(-50, -50); 109 transform: translate(-50, -50);
107 } 110 }
108 111
109 @include bem.elem("thumbnails") { 112 @include bem.elem('thumbnails') {
110 display: flex; 113 display: flex;
111 grid-area: thumbnails; 114 grid-area: thumbnails;
112 gap: props.get(vars.$thumbnail--spacing); 115 gap: props.get(vars.$thumbnail--spacing);
113 justify-content: center; 116 justify-content: center;
114 padding: props.get(vars.$pad); 117 padding: props.get(vars.$pad);
115 overflow: auto; 118 overflow: auto;
116 } 119 }
117 120
118 @include bem.elem("thumbnail") { 121 @include bem.elem('thumbnail') {
119 inline-size: props.get(vars.$thumbnail--width); 122 inline-size: props.get(vars.$thumbnail--width);
120 transition: 123 transition: inline-size .2s ease, margin-inline .2s ease;
121 inline-size 0.2s ease,
122 margin-inline 0.2s ease;
123 124
124 @include bem.is("selected") { 125 @include bem.is('selected') {
125 inline-size: props.get(vars.$thumbnail--active--width); 126 inline-size: props.get(vars.$thumbnail--active--width);
126 margin-inline: props.get(vars.$thumbnail--active--spacing); 127 margin-inline: props.get(vars.$thumbnail--active--spacing);
127 } 128 }
128 } 129 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 18:35:59 +0000