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, 78 insertions, 79 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index a173d57..2b4abad 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/src/bem'; 4@use "pkg:iro-sass/bem";
5@use 'pkg:iro-sass/src/props'; 5@use "pkg:iro-sass/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,80 +50,79 @@
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: 63 box-shadow: props.get(vars.$controls--shadow-x) props.get(vars.$controls--shadow-y)
64 props.get(vars.$controls--shadow-x) 64 props.get(vars.$controls--shadow-blur) props.get(vars.$controls--shadow-grow)
65 props.get(vars.$controls--shadow-y)
66 props.get(vars.$controls--shadow-blur)
67 props.get(vars.$controls--shadow-grow)
68 props.get(vars.$controls--shadow-color); 65 props.get(vars.$controls--shadow-color);
69 } 66 }
70 67
71 @include bem.elem('info') { 68 @include bem.elem("info") {
72 inset-inline-start: props.get(vars.$pad); 69 inset-inline-start: props.get(vars.$pad);
73 font-variant-numeric: tabular-nums; 70 font-variant-numeric: tabular-nums;
74 } 71 }
75 72
76 @include bem.elem('controls') { 73 @include bem.elem("controls") {
77 inset-inline-end: props.get(vars.$pad); 74 inset-inline-end: props.get(vars.$pad);
78 } 75 }
79 76
80 @include bem.elem('img') { 77 @include bem.elem("img") {
81 position: relative; 78 position: relative;
82 z-index: 10; 79 z-index: 10;
83 display: block; 80 display: block;
84 grid-area: image; 81 grid-area: image;
85 inline-size: auto; 82 inline-size: auto;
86 min-inline-size: 0; 83 min-inline-size: 0;
87 max-inline-size: 100%; 84 max-inline-size: 100%;
88 block-size: auto; 85 block-size: auto;
89 min-block-size: 0; 86 min-block-size: 0;
90 max-block-size: 100%; 87 max-block-size: 100%;
91 user-select: none; 88 user-select: none;
92 object-fit: contain; 89 object-fit: contain;
93 90
94 @include bem.is('hidden') { 91 @include bem.is("hidden") {
95 display: none; 92 display: none;
96 93
97 @include bem.next-elem('placeholder') { 94 @include bem.next-elem("placeholder") {
98 display: block; 95 display: block;
99 } 96 }
100 } 97 }
101 } 98 }
102 99
103 @include bem.elem('placeholder') { 100 @include bem.elem("placeholder") {
104 position: absolute; 101 position: absolute;
105 inset-block-start: 50%; 102 inset-block-start: 50%;
106 inset-inline-start: 50%; 103 inset-inline-start: 50%;
107 z-index: 5; 104 z-index: 5;
108 display: none; 105 display: none;
109 transform: translate(-50, -50); 106 transform: translate(-50, -50);
110 } 107 }
111 108
112 @include bem.elem('thumbnails') { 109 @include bem.elem("thumbnails") {
113 display: flex; 110 display: flex;
114 grid-area: thumbnails; 111 grid-area: thumbnails;
115 gap: props.get(vars.$thumbnail--spacing); 112 gap: props.get(vars.$thumbnail--spacing);
116 justify-content: center; 113 justify-content: center;
117 padding: props.get(vars.$pad); 114 padding: props.get(vars.$pad);
118 overflow: auto; 115 overflow: auto;
119 } 116 }
120 117
121 @include bem.elem('thumbnail') { 118 @include bem.elem("thumbnail") {
122 inline-size: props.get(vars.$thumbnail--width); 119 inline-size: props.get(vars.$thumbnail--width);
123 transition: inline-size .2s ease, margin-inline .2s ease; 120 transition:
121 inline-size 0.2s ease,
122 margin-inline 0.2s ease;
124 123
125 @include bem.is('selected') { 124 @include bem.is("selected") {
126 inline-size: props.get(vars.$thumbnail--active--width); 125 inline-size: props.get(vars.$thumbnail--active--width);
127 margin-inline: props.get(vars.$thumbnail--active--spacing); 126 margin-inline: props.get(vars.$thumbnail--active--spacing);
128 } 127 }
129 } 128 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 15:42:25 +0000