1 files changed, 104 insertions, 104 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b62c353..b95148f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -9,127 +9,127 @@
 @use 'lightbox.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('lightbox') {
+        @include bem.object('lightbox') {
-        flex:           1 1 auto;
+                flex:           1 1 auto;
-        min-block-size: 0;
+                min-block-size: 0;
-        @include bem.elem('header') {
+                @include bem.elem('header') {
-            display:             flex;
+                        display:             flex;
-            grid-area:           header;
+                        grid-area:           header;
-            align-items:         flex-start;
+                        align-items:         flex-start;
-            padding-block-start: props.get(vars.$pad);
+                        padding-block-start: props.get(vars.$pad);
-            padding-inline:      props.get(vars.$pad);
+                        padding-inline:      props.get(vars.$pad);
-        }
+                }
-        @include bem.elem('img') {
+                @include bem.elem('img') {
-            box-sizing:      border-box;
+                        box-sizing:      border-box;
-            display:         block;
+                        display:         block;
-            grid-area:       content;
+                        grid-area:       content;
-            place-self:      center;
+                        place-self:      center;
-            inline-size:     auto;
+                        inline-size:     auto;
-            max-inline-size: 100%;
+                        max-inline-size: 100%;
-            block-size:      auto;
+                        block-size:      auto;
-            max-block-size:  props.get(vars.$image--max-height);
+                        max-block-size:  props.get(vars.$image--max-height);
-            padding:         props.get(vars.$pad);
+                        padding:         props.get(vars.$pad);
-            margin-inline:   auto;
+                        margin-inline:   auto;
-            border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
+                        border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
-        }
+                }
-        @include bem.elem('thumbnails') {
+                @include bem.elem('thumbnails') {
-            display:            none;
+                        display:            none;
-            grid-area:          thumbnails;
+                        grid-area:          thumbnails;
-            gap:                props.get(vars.$thumbnails--spacing);
+                        gap:                props.get(vars.$thumbnails--spacing);
-            padding:            props.get(vars.$pad);
+                        padding:            props.get(vars.$pad);
-            margin-block-start: calc(-1 * props.get(vars.$pad));
+                        margin-block-start: calc(-1 * props.get(vars.$pad));
-            overflow:           auto;
+                        overflow:           auto;
-        }
+                }
-        @include bem.elem('close-btn') {
+                @include bem.elem('close-btn') {
-            display:            none;
+                        display:            none;
-            flex:               0 0 auto;
+                        flex:               0 0 auto;
-            margin-block-start: calc(-.5 * props.get(vars.$pad));
+                        margin-block-start: calc(-.5 * props.get(vars.$pad));
-            margin-inline:      auto calc(-.5 * props.get(vars.$pad));
+                        margin-inline:      auto calc(-.5 * props.get(vars.$pad));
-            font-size:          props.get(vars.$close-button--font-size);
+                        font-size:          props.get(vars.$close-button--font-size);
-        }
+                }
-        @include bem.elem('nav-btn') {
+                @include bem.elem('nav-btn') {
-            position:   relative;
+                        position:   relative;
-            display:    none;
+                        display:    none;
-            align-self: center;
+                        align-self: center;
-            overflow:   visible;
+                        overflow:   visible;
-            font-size:  props.get(vars.$nav-button--font-size);
+                        font-size:  props.get(vars.$nav-button--font-size);
-            &::before {
+                        &::before {
-                position:           absolute;
+                                position:           absolute;
-                inset-block-start:  50%;
+                                inset-block-start:  50%;
-                display:            block;
+                                display:            block;
-                inline-size:        props.get(vars.$nav-button--inline-size);
+                                inline-size:        props.get(vars.$nav-button--inline-size);
-                block-size:         props.get(vars.$nav-button--block-size);
+                                block-size:         props.get(vars.$nav-button--block-size);
-                content:            '';
+                                content:            '';
-                transform:          translateY(-50%);
+                                transform:          translateY(-50%);
-            }
+                        }
-            @include bem.modifier('prev') {
+                        @include bem.modifier('prev') {
-                grid-area:     prev;
+                                grid-area:     prev;
-                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
+                                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
-                &::before {
+                                &::before {
-                    inset-inline-start: 0;
+                                        inset-inline-start: 0;
-                }
+                                }
-            }
+                        }
    
-            @include bem.modifier('next') {
+                        @include bem.modifier('next') {
-                grid-area:     next;
+                                grid-area:     next;
-                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
+                                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
-                &::before {
+                                &::before {
-                    inset-inline-end: 0;
+                                        inset-inline-end: 0;
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('interactive') {
+                @include bem.modifier('interactive') {
-            display:               grid;
+                        display:               grid;
-            grid-template-areas:
+                        grid-template-areas:
-                'header     header     header'
+                                'header     header     header'
-                'prev       content    next'
+                                'prev       content    next'
-                'thumbnails thumbnails thumbnails';
+                                'thumbnails thumbnails thumbnails';
-            grid-template-rows:    auto minmax(0, 1fr) auto auto;
+                        grid-template-rows:    auto minmax(0, 1fr) auto auto;
-            grid-template-columns: auto minmax(0, 1fr) auto;
+                        grid-template-columns: auto minmax(0, 1fr) auto;
-            @include bem.modifier('fullscreen') {
+                        @include bem.modifier('fullscreen') {
-                block-size: props.get(vars.$fullscreen--height);
+                                block-size: props.get(vars.$fullscreen--height);
-            }
+                        }
-            @include bem.elem('img') {
+                        @include bem.elem('img') {
-                display:        none;
+                                display:        none;
-                max-block-size: 100%;
+                                max-block-size: 100%;
-                margin-inline:  0;
+                                margin-inline:  0;
-                @include bem.multi('&:target', 'is' 'visible') {
+                                @include bem.multi('&:target', 'is' 'visible') {
-                    display: block;
+                                        display: block;
-                }
+                                }
-            }
+                        }
-            @include bem.elem('thumbnails') {
+                        @include bem.elem('thumbnails') {
-                display: flex;
+                                display: flex;
-            }
+                        }
-            @include bem.elem('close-btn') {
+                        @include bem.elem('close-btn') {
-                display: block;
+                                display: block;
-            }
+                        }
-            @include bem.elem('nav-btn') {
+                        @include bem.elem('nav-btn') {
-                display: block;
+                                display: block;
-            }
+                        }
-        }
+                }
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
-                color: props.get(vars.$static-themes, $theme, --text);
+                                color: props.get(vars.$static-themes, $theme, --text);
-            }
+                        }
-        }
+                }
-    }
+        }
 }

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index b62c353..b95148f 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss
@@ -9,127 +9,127 @@
9	@use 'lightbox.vars' as vars;	9	@use 'lightbox.vars' as vars;
10		10
11	@mixin styles {	11	@mixin styles {
12	@include materialize-at-root(meta.module-variables('vars'));	12	@include materialize-at-root(meta.module-variables('vars'));
13		13
14	@include bem.object('lightbox') {	14	@include bem.object('lightbox') {
15	flex: 1 1 auto;	15	flex: 1 1 auto;
16	min-block-size: 0;	16	min-block-size: 0;
17		17
18	@include bem.elem('header') {	18	@include bem.elem('header') {
19	display: flex;	19	display: flex;
20	grid-area: header;	20	grid-area: header;
21	align-items: flex-start;	21	align-items: flex-start;
22	padding-block-start: props.get(vars.$pad);	22	padding-block-start: props.get(vars.$pad);
23	padding-inline: props.get(vars.$pad);	23	padding-inline: props.get(vars.$pad);
24	}	24	}
25		25
26	@include bem.elem('img') {	26	@include bem.elem('img') {
27	box-sizing: border-box;	27	box-sizing: border-box;
28	display: block;	28	display: block;
29	grid-area: content;	29	grid-area: content;
30	place-self: center;	30	place-self: center;
31	inline-size: auto;	31	inline-size: auto;
32	max-inline-size: 100%;	32	max-inline-size: 100%;
33	block-size: auto;	33	block-size: auto;
34	max-block-size: props.get(vars.$image--max-height);	34	max-block-size: props.get(vars.$image--max-height);
35	padding: props.get(vars.$pad);	35	padding: props.get(vars.$pad);
36	margin-inline: auto;	36	margin-inline: auto;
37	border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));	37	border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
38	}	38	}
39		39
40	@include bem.elem('thumbnails') {	40	@include bem.elem('thumbnails') {
41	display: none;	41	display: none;
42	grid-area: thumbnails;	42	grid-area: thumbnails;
43	gap: props.get(vars.$thumbnails--spacing);	43	gap: props.get(vars.$thumbnails--spacing);
44	padding: props.get(vars.$pad);	44	padding: props.get(vars.$pad);
45	margin-block-start: calc(-1 * props.get(vars.$pad));	45	margin-block-start: calc(-1 * props.get(vars.$pad));
46	overflow: auto;	46	overflow: auto;
47	}	47	}
48		48
49	@include bem.elem('close-btn') {	49	@include bem.elem('close-btn') {
50	display: none;	50	display: none;
51	flex: 0 0 auto;	51	flex: 0 0 auto;
52	margin-block-start: calc(-.5 * props.get(vars.$pad));	52	margin-block-start: calc(-.5 * props.get(vars.$pad));
53	margin-inline: auto calc(-.5 * props.get(vars.$pad));	53	margin-inline: auto calc(-.5 * props.get(vars.$pad));
54	font-size: props.get(vars.$close-button--font-size);	54	font-size: props.get(vars.$close-button--font-size);
55	}	55	}
56		56
57	@include bem.elem('nav-btn') {	57	@include bem.elem('nav-btn') {
58	position: relative;	58	position: relative;
59	display: none;	59	display: none;
60	align-self: center;	60	align-self: center;
61	overflow: visible;	61	overflow: visible;
62	font-size: props.get(vars.$nav-button--font-size);	62	font-size: props.get(vars.$nav-button--font-size);
63		63
64	&::before {	64	&::before {
65	position: absolute;	65	position: absolute;
66	inset-block-start: 50%;	66	inset-block-start: 50%;
67	display: block;	67	display: block;
68	inline-size: props.get(vars.$nav-button--inline-size);	68	inline-size: props.get(vars.$nav-button--inline-size);
69	block-size: props.get(vars.$nav-button--block-size);	69	block-size: props.get(vars.$nav-button--block-size);
70	content: '';	70	content: '';
71	transform: translateY(-50%);	71	transform: translateY(-50%);
72	}	72	}
73		73
74	@include bem.modifier('prev') {	74	@include bem.modifier('prev') {
75	grid-area: prev;	75	grid-area: prev;
76	margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));	76	margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
77		77
78	&::before {	78	&::before {
79	inset-inline-start: 0;	79	inset-inline-start: 0;
80	}	80	}
81	}	81	}
82		82
83	@include bem.modifier('next') {	83	@include bem.modifier('next') {
84	grid-area: next;	84	grid-area: next;
85	margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));	85	margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
86		86
87	&::before {	87	&::before {
88	inset-inline-end: 0;	88	inset-inline-end: 0;
89	}	89	}
90	}	90	}
91	}	91	}
92		92
93	@include bem.modifier('interactive') {	93	@include bem.modifier('interactive') {
94	display: grid;	94	display: grid;
95	grid-template-areas:	95	grid-template-areas:
96	'header header header'	96	'header header header'
97	'prev content next'	97	'prev content next'
98	'thumbnails thumbnails thumbnails';	98	'thumbnails thumbnails thumbnails';
99	grid-template-rows: auto minmax(0, 1fr) auto auto;	99	grid-template-rows: auto minmax(0, 1fr) auto auto;
100	grid-template-columns: auto minmax(0, 1fr) auto;	100	grid-template-columns: auto minmax(0, 1fr) auto;
101		101
102	@include bem.modifier('fullscreen') {	102	@include bem.modifier('fullscreen') {
103	block-size: props.get(vars.$fullscreen--height);	103	block-size: props.get(vars.$fullscreen--height);
104	}	104	}
105		105
106	@include bem.elem('img') {	106	@include bem.elem('img') {
107	display: none;	107	display: none;
108	max-block-size: 100%;	108	max-block-size: 100%;
109	margin-inline: 0;	109	margin-inline: 0;
110		110
111	@include bem.multi('&:target', 'is' 'visible') {	111	@include bem.multi('&:target', 'is' 'visible') {
112	display: block;	112	display: block;
113	}	113	}
114	}	114	}
115		115
116	@include bem.elem('thumbnails') {	116	@include bem.elem('thumbnails') {
117	display: flex;	117	display: flex;
118	}	118	}
119		119
120	@include bem.elem('close-btn') {	120	@include bem.elem('close-btn') {
121	display: block;	121	display: block;
122	}	122	}
123		123
124	@include bem.elem('nav-btn') {	124	@include bem.elem('nav-btn') {
125	display: block;	125	display: block;
126	}	126	}
127	}	127	}
128		128
129	@each $theme in map.keys(props.get(vars.$static-themes)) {	129	@each $theme in map.keys(props.get(vars.$static-themes)) {
130	@include bem.modifier(string.slice($theme, 3)) {	130	@include bem.modifier(string.slice($theme, 3)) {
131	color: props.get(vars.$static-themes, $theme, --text);	131	color: props.get(vars.$static-themes, $theme, --text);
132	}	132	}
133	}	133	}
134	}	134	}
135	}	135	}