blob: 2084a44c8b2186677e4fd342f178d6d70b3336f6 (
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
|
@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 '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;
flex-direction: column;
align-items: center;
justify-content: center;
inline-size: 100%;
max-inline-size: none;
block-size: 100%;
min-block-size: 0;
max-block-size: none;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
&::backdrop {
background-color: props.get(backdrop.$bg-color);
backdrop-filter: blur(props.get(backdrop.$blur));
}
&[open] {
display: flex;
}
@include bem.elem('controls') {
position: absolute;
inset-block-start: props.get(vars.$pad);
inset-inline-end: props.get(vars.$pad);
z-index: 20;
padding: props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
border-radius: 10em;
}
@include bem.elem('img') {
position: relative;
z-index: 10;
display: block;
flex: 1 1 auto;
inline-size: auto;
min-inline-size: 0;
max-inline-size: 100%;
block-size: auto;
min-block-size: 0;
max-block-size: 100%;
margin: auto;
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;
flex: 0 0 auto;
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 .1s ease, margin-inline .1s 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);
@include bem.elem('controls') {
background-color: props.get(vars.$static-themes, $theme, --controls-bg);
}
}
}
}
}
|
