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