summaryrefslogtreecommitdiffstats
path: root/src/objects/_lightbox.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-22 08:23:33 +0200
committerVolpeon <git@volpeon.ink>2024-10-22 08:23:33 +0200
commit5855a6821cf5585378a70f9bee13563bdbfe2d86 (patch)
tree0ee25906c9e73912137a56b7d6214c89bf43e8a6 /src/objects/_lightbox.scss
parentUpdate (diff)
downloadiro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.gz
iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.bz2
iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.zip
Less broad imports
Diffstat (limited to 'src/objects/_lightbox.scss')
-rw-r--r--src/objects/_lightbox.scss56
1 files changed, 28 insertions, 28 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 0ced4c6..341ed3d 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,7 +1,7 @@
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 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/bem' as bem;
5@use 'iro-sass/src/props'; 5@use 'iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7 7
@@ -11,7 +11,7 @@
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 iro.bem-object('lightbox') { 14 @include bem.object('lightbox') {
15 box-sizing: border-box; 15 box-sizing: border-box;
16 display: grid; 16 display: grid;
17 flex: 1 1 auto; 17 flex: 1 1 auto;
@@ -24,7 +24,7 @@
24 grid-template-columns: auto minmax(0, 1fr) auto; 24 grid-template-columns: auto minmax(0, 1fr) auto;
25 min-block-size: 0; 25 min-block-size: 0;
26 26
27 @include iro.bem-elem('header') { 27 @include bem.elem('header') {
28 display: flex; 28 display: flex;
29 grid-area: header; 29 grid-area: header;
30 align-items: flex-start; 30 align-items: flex-start;
@@ -32,7 +32,7 @@
32 padding-inline: props.get(vars.$pad); 32 padding-inline: props.get(vars.$pad);
33 } 33 }
34 34
35 @include iro.bem-elem('img') { 35 @include bem.elem('img') {
36 box-sizing: border-box; 36 box-sizing: border-box;
37 display: none; 37 display: none;
38 grid-area: content; 38 grid-area: content;
@@ -41,39 +41,39 @@
41 max-block-size: 100%; 41 max-block-size: 100%;
42 padding: props.get(vars.$pad); 42 padding: props.get(vars.$pad);
43 43
44 @include iro.bem-sibling-elem('img') { 44 @include bem.sibling-elem('img') {
45 @include iro.bem-modifier('default') { 45 @include bem.modifier('default') {
46 display: block; 46 display: block;
47 47
48 @include iro.bem-next-elem('nav-btn') { 48 @include bem.next-elem('nav-btn') {
49 display: block; 49 display: block;
50 50
51 @include iro.bem-next-elem('nav-btn') { 51 @include bem.next-elem('nav-btn') {
52 display: block; 52 display: block;
53 } 53 }
54 } 54 }
55 } 55 }
56 } 56 }
57 57
58 @include iro.bem-multi('&:target', 'is' 'visible') { 58 @include bem.multi('&:target', 'is' 'visible') {
59 display: block; 59 display: block;
60 60
61 @include iro.bem-next-elem('nav-btn') { 61 @include bem.next-elem('nav-btn') {
62 display: block; 62 display: block;
63 63
64 @include iro.bem-next-elem('nav-btn') { 64 @include bem.next-elem('nav-btn') {
65 display: block; 65 display: block;
66 } 66 }
67 } 67 }
68 68
69 @include iro.bem-sibling-elem('img') { 69 @include bem.sibling-elem('img') {
70 @include iro.bem-modifier('default') { 70 @include bem.modifier('default') {
71 display: none; 71 display: none;
72 72
73 @include iro.bem-next-elem('nav-btn') { 73 @include bem.next-elem('nav-btn') {
74 display: none; 74 display: none;
75 75
76 @include iro.bem-next-elem('nav-btn') { 76 @include bem.next-elem('nav-btn') {
77 display: none; 77 display: none;
78 } 78 }
79 } 79 }
@@ -82,7 +82,7 @@
82 } 82 }
83 } 83 }
84 84
85 @include iro.bem-elem('thumbnails') { 85 @include bem.elem('thumbnails') {
86 display: flex; 86 display: flex;
87 grid-area: thumbnails; 87 grid-area: thumbnails;
88 gap: props.get(vars.$thumbnail--spacing); 88 gap: props.get(vars.$thumbnail--spacing);
@@ -91,7 +91,7 @@
91 overflow: auto; 91 overflow: auto;
92 } 92 }
93 93
94 @include iro.bem-elem('footer') { 94 @include bem.elem('footer') {
95 display: flex; 95 display: flex;
96 grid-area: footer; 96 grid-area: footer;
97 align-items: flex-start; 97 align-items: flex-start;
@@ -99,7 +99,7 @@
99 padding-inline: props.get(vars.$pad); 99 padding-inline: props.get(vars.$pad);
100 } 100 }
101 101
102 @include iro.bem-elem('thumbnail') { 102 @include bem.elem('thumbnail') {
103 position: relative; 103 position: relative;
104 flex: 0 0 auto; 104 flex: 0 0 auto;
105 inline-size: props.get(vars.$thumbnail--size); 105 inline-size: props.get(vars.$thumbnail--size);
@@ -117,7 +117,7 @@
117 opacity: 1; 117 opacity: 1;
118 } 118 }
119 119
120 @include iro.bem-is('selected') { 120 @include bem.is('selected') {
121 $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width)); 121 $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width));
122 122
123 margin: $focus-border-offset; 123 margin: $focus-border-offset;
@@ -144,7 +144,7 @@
144 } 144 }
145 } 145 }
146 146
147 @include iro.bem-elem('thumbnail-img') { 147 @include bem.elem('thumbnail-img') {
148 position: absolute; 148 position: absolute;
149 inset-block-start: 0; 149 inset-block-start: 0;
150 inset-inline-start: 0; 150 inset-inline-start: 0;
@@ -155,21 +155,21 @@
155 object-position: center center; 155 object-position: center center;
156 } 156 }
157 157
158 @include iro.bem-elem('thumbnail-icon') { 158 @include bem.elem('thumbnail-icon') {
159 position: absolute; 159 position: absolute;
160 inset-block-start: 50%; 160 inset-block-start: 50%;
161 inset-inline-start: 50%; 161 inset-inline-start: 50%;
162 transform: translate(-50%, -50%); 162 transform: translate(-50%, -50%);
163 } 163 }
164 164
165 @include iro.bem-elem('close-btn') { 165 @include bem.elem('close-btn') {
166 flex: 0 0 auto; 166 flex: 0 0 auto;
167 margin-block-start: calc(-.5 * props.get(vars.$pad)); 167 margin-block-start: calc(-.5 * props.get(vars.$pad));
168 margin-inline: auto calc(-.5 * props.get(vars.$pad)); 168 margin-inline: auto calc(-.5 * props.get(vars.$pad));
169 font-size: props.get(vars.$close-button--font-size); 169 font-size: props.get(vars.$close-button--font-size);
170 } 170 }
171 171
172 @include iro.bem-elem('nav-btn') { 172 @include bem.elem('nav-btn') {
173 position: relative; 173 position: relative;
174 display: none; 174 display: none;
175 align-self: center; 175 align-self: center;
@@ -186,7 +186,7 @@
186 transform: translateY(-50%); 186 transform: translateY(-50%);
187 } 187 }
188 188
189 @include iro.bem-modifier('prev') { 189 @include bem.modifier('prev') {
190 grid-area: prev; 190 grid-area: prev;
191 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); 191 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
192 192
@@ -195,7 +195,7 @@
195 } 195 }
196 } 196 }
197 197
198 @include iro.bem-modifier('next') { 198 @include bem.modifier('next') {
199 grid-area: next; 199 grid-area: next;
200 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); 200 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
201 201
@@ -206,10 +206,10 @@
206 } 206 }
207 207
208 @each $theme in map.keys(props.get(vars.$static-themes)) { 208 @each $theme in map.keys(props.get(vars.$static-themes)) {
209 @include iro.bem-modifier(string.slice($theme, 3)) { 209 @include bem.modifier(string.slice($theme, 3)) {
210 color: props.get(vars.$static-themes, $theme, --text); 210 color: props.get(vars.$static-themes, $theme, --text);
211 211
212 @include iro.bem-elem('thumbnail') { 212 @include bem.elem('thumbnail') {
213 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border); 213 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border);
214 214
215 &:hover, 215 &:hover,
@@ -218,7 +218,7 @@
218 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border); 218 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border);
219 } 219 }
220 220
221 @include iro.bem-is('selected') { 221 @include bem.is('selected') {
222 border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border); 222 border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border);
223 } 223 }
224 224