codecheck

1
// core
2
.p-galleria-content {
3
    display: flex;
4
    flex-direction: column;
5
}
6

7
.p-galleria-item-wrapper {
8
    display: flex;
9
    flex-direction: column;
10
    position: relative;
11
}
12

13
.p-galleria-item-container {
14
    position: relative;
15
    display: flex;
16
    height: 100%;
17
}
18

19
.p-galleria-item-nav {
20
    position: absolute;
21
    top: 50%;
22
    margin-top: -0.5rem;
23
    display: inline-flex;
24
    justify-content: center;
25
    align-items: center;
26
    overflow: hidden;
27
}
28

29
.p-galleria-item-prev {
30
    left: 0;
31
    border-top-left-radius: 0;
32
    border-bottom-left-radius: 0;
33
}
34

35
.p-galleria-item-next {
36
    right: 0;
37
    border-top-right-radius: 0;
38
    border-bottom-right-radius: 0;
39
}
40

41
.p-galleria-item {
42
    display: flex;
43
    justify-content: center;
44
    align-items: center;
45
    height: 100%;
46
    width: 100%;
47
}
48

49
.p-galleria-item-nav-onhover .p-galleria-item-nav {
50
    pointer-events: none;
51
    opacity: 0;
52
    transition: opacity 0.2s ease-in-out;
53
}
54

55
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
56
    pointer-events: all;
57
    opacity: 1;
58
}
59

60
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
61
    pointer-events: none;
62
}
63

64
.p-galleria-caption {
65
    position: absolute;
66
    bottom: 0;
67
    left: 0;
68
    width: 100%;
69
}
70

71
/* Thumbnails */
72
.p-galleria-thumbnail-wrapper {
73
    display: flex;
74
    flex-direction: column;
75
    overflow: auto;
76
    flex-shrink: 0;
77
}
78

79
.p-galleria-thumbnail-prev,
80
.p-galleria-thumbnail-next {
81
    align-self: center;
82
    flex: 0 0 auto;
83
    display: flex;
84
    justify-content: center;
85
    align-items: center;
86
    overflow: hidden;
87
    position: relative;
88
}
89

90
.p-galleria-thumbnail-prev span,
91
.p-galleria-thumbnail-next span {
92
    display: flex;
93
    justify-content: center;
94
    align-items: center;
95
}
96

97
.p-galleria-thumbnail-container {
98
    display: flex;
99
    flex-direction: row;
100
}
101

102
.p-galleria-thumbnail-items-container {
103
    overflow: hidden;
104
    width: 100%;
105
}
106

107
.p-galleria-thumbnail-items {
108
    display: flex;
109
}
110

111
.p-galleria-thumbnail-item {
112
    overflow: auto;
113
    display: flex;
114
    align-items: center;
115
    justify-content: center;
116
    cursor: pointer;
117
    opacity: 0.5;
118
}
119

120
.p-galleria-thumbnail-item:hover {
121
    opacity: 1;
122
    transition: opacity 0.3s;
123
}
124

125
.p-galleria-thumbnail-item-current {
126
    opacity: 1;
127
}
128

129
/* Positions */
130
/* Thumbnails */
131
.p-galleria-thumbnails-left .p-galleria-content,
132
.p-galleria-thumbnails-right .p-galleria-content {
133
    flex-direction: row;
134
}
135

136
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
137
.p-galleria-thumbnails-right .p-galleria-item-wrapper {
138
    flex-direction: row;
139
}
140

141
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
142
.p-galleria-thumbnails-top .p-galleria-item-wrapper {
143
    order: 2;
144
}
145

146
.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
147
.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
148
    order: 1;
149
}
150

151
.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
152
.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
153
    flex-direction: column;
154
    flex-grow: 1;
155
}
156

157
.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
158
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
159
    flex-direction: column;
160
    height: 100%;
161
}
162

163
/* Indicators */
164
.p-galleria-indicators {
165
    display: flex;
166
    align-items: center;
167
    justify-content: center;
168
}
169

170
.p-galleria-indicator > button {
171
    display: inline-flex;
172
    align-items: center;
173
}
174

175
.p-galleria-indicators-left .p-galleria-item-wrapper,
176
.p-galleria-indicators-right .p-galleria-item-wrapper {
177
    flex-direction: row;
178
    align-items: center;
179
}
180

181
.p-galleria-indicators-left .p-galleria-item-container,
182
.p-galleria-indicators-top .p-galleria-item-container {
183
    order: 2;
184
}
185

186
.p-galleria-indicators-left .p-galleria-indicators,
187
.p-galleria-indicators-top .p-galleria-indicators {
188
    order: 1;
189
}
190

191
.p-galleria-indicators-left .p-galleria-indicators,
192
.p-galleria-indicators-right .p-galleria-indicators {
193
    flex-direction: column;
194
}
195

196
.p-galleria-indicator-onitem .p-galleria-indicators {
197
    position: absolute;
198
    display: flex;
199
    z-index: 1;
200
}
201

202
.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
203
    top: 0;
204
    left: 0;
205
    width: 100%;
206
    align-items: flex-start;
207
}
208

209
.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
210
    right: 0;
211
    top: 0;
212
    height: 100%;
213
    align-items: flex-end;
214
}
215

216
.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
217
    bottom: 0;
218
    left: 0;
219
    width: 100%;
220
    align-items: flex-end;
221
}
222

223
.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
224
    left: 0;
225
    top: 0;
226
    height: 100%;
227
    align-items: flex-start;
228
}
229

230
/* FullScreen */
231
.p-galleria-mask {
232
    position: fixed;
233
    top: 0;
234
    left: 0;
235
    width: 100%;
236
    height: 100%;
237
    display: flex;
238
    align-items: center;
239
    justify-content: center;
240
}
241

242
.p-galleria-close {
243
    position: absolute;
244
    top: 0;
245
    right: 0;
246
    display: flex;
247
    justify-content: center;
248
    align-items: center;
249
    overflow: hidden;
250
}
251

252
.p-galleria-mask .p-galleria-item-nav {
253
    position: fixed;
254
    top: 50%;
255
    margin-top: -0.5rem;
256
}
257

258
/* Animation */
259
.p-galleria-enter-active {
260
    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
261
}
262

263
.p-galleria-leave-active {
264
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
265
}
266

267
.p-galleria-enter-from,
268
.p-galleria-leave-to {
269
    opacity: 0;
270
    transform: scale(0.7);
271
}
272

273
.p-galleria-enter-active .p-galleria-item-nav {
274
    opacity: 0;
275
}
276

277
/* Keyboard Support */
278
.p-items-hidden .p-galleria-thumbnail-item {
279
    visibility: hidden;
280
}
281

282
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
283
    visibility: visible;
284
}
285

286
// theme
287
.p-galleria {
288
    .p-galleria-close {
289
        margin: $galleriaCloseIconMargin;
290
        background: $galleriaCloseIconBg;
291
        color: $galleriaCloseIconColor;
292
        width: $galleriaCloseIconWidth;
293
        height: $galleriaCloseIconHeight;
294
        transition: $actionIconTransition;
295
        border-radius: $galleriaCloseIconBorderRadius;
296

297
        .p-galleria-close-icon {
298
            font-size: $galleriaCloseIconFontSize;
299
        }
300

301
        .p-icon {
302
            width: $galleriaCloseIconFontSize;
303
            height: $galleriaCloseIconFontSize;
304
        }
305

306
        &:hover {
307
            background: $galleriaCloseIconHoverBg;
308
            color: $galleriaCloseIconHoverColor;
309
        }
310
    }
311

312
    .p-galleria-item-nav {
313
        background: $galleriaItemNavigatorBg;
314
        color: $galleriaItemNavigatorColor;
315
        width: $galleriaItemNavigatorWidth;
316
        height: $galleriaItemNavigatorHeight;
317
        transition: $actionIconTransition;
318
        border-radius: $galleriaItemNavigatorBorderRadius;
319
        margin: $galleriaItemNavigatorMargin;
320

321
        .p-galleria-item-prev-icon,
322
        .p-galleria-item-next-icon {
323
            font-size: $galleriaItemNavigatorFontSize;
324
        }
325

326
        .p-icon {
327
            width: $galleriaCloseIconFontSize;
328
            height: $galleriaCloseIconFontSize;
329
        }
330

331
        &:not(.p-disabled) {
332
            &:hover {
333
                background: $galleriaItemNavigatorHoverBg;
334
                color: $galleriaItemNavigatorHoverColor;
335
            }
336
        }
337
    }
338

339
    .p-galleria-caption {
340
        background: $galleriaCaptionBg;
341
        color: $galleriaCaptionTextColor;
342
        padding: $galleriaCaptionPadding;
343
    }
344

345
    .p-galleria-indicators {
346
        padding: $galleriaIndicatorsPadding;
347

348
        .p-galleria-indicator {
349
            button {
350
                background-color: $galleriaIndicatorBg;
351
                width: $galleriaIndicatorWidth;
352
                height: $galleriaIndicatorHeight;
353
                transition: $actionIconTransition;
354
                border-radius: $galleriaIndicatorBorderRadius;
355

356
                &:hover {
357
                    background: $galleriaIndicatorHoverBg;
358
                }
359
            }
360

361
            &.p-highlight {
362
                button {
363
                    background: $highlightBg;
364
                    color: $highlightTextColor;
365
                }
366
            }
367
        }
368
    }
369

370
    &.p-galleria-indicators-bottom,
371
    &.p-galleria-indicators-top {
372
        .p-galleria-indicator {
373
            margin-right: $inlineSpacing;
374
        }
375
    }
376

377
    &.p-galleria-indicators-left,
378
    &.p-galleria-indicators-right {
379
        .p-galleria-indicator {
380
            margin-bottom: $inlineSpacing;
381
        }
382
    }
383

384
    &.p-galleria-indicator-onitem {
385
        .p-galleria-indicators {
386
            background: $galleriaIndicatorsBgOnItem;
387

388
            .p-galleria-indicator {
389
                button {
390
                    background: $galleriaIndicatorBgOnItem;
391

392
                    &:hover {
393
                        background: $galleriaIndicatorHoverBgOnItem;
394
                    }
395
                }
396

397
                &.p-highlight {
398
                    button {
399
                        background: $highlightBg;
400
                        color: $highlightTextColor;
401
                    }
402
                }
403
            }
404
        }
405
    }
406

407
    .p-galleria-thumbnail-container {
408
        background: $galleriaThumbnailContainerBg;
409
        padding: $galleriaThumbnailContainerPadding;
410

411
        .p-galleria-thumbnail-prev,
412
        .p-galleria-thumbnail-next {
413
            margin: $inlineSpacing;
414
            background-color: $galleriaThumbnailNavigatorBg;
415
            color: $galleriaThumbnailNavigatorColor;
416
            width: $galleriaThumbnailNavigatorWidth;
417
            height: $galleriaThumbnailNavigatorHeight;
418
            transition: $actionIconTransition;
419
            border-radius: $galleriaThumbnailNavigatorBorderRadius;
420

421
            &:hover {
422
                background: $galleriaThumbnailNavigatorHoverBg;
423
                color: $galleriaThumbnailNavigatorHoverColor;
424
            }
425
        }
426

427
        .p-galleria-thumbnail-item-content {
428
            outline-color: transparent;
429
            
430
            &:focus-visible {
431
                @include focused();
432
            }
433
        }
434
    }
435
}
436

437
.p-galleria-mask {
438
    --maskbg: #{$galleriaMaskBg};
439
}
440