diff options
author | Volpeon <git@volpeon.ink> | 2024-10-22 08:23:33 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-22 08:23:33 +0200 |
commit | 5855a6821cf5585378a70f9bee13563bdbfe2d86 (patch) | |
tree | 0ee25906c9e73912137a56b7d6214c89bf43e8a6 /src/objects/_lightbox.scss | |
parent | Update (diff) | |
download | iro-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.scss | 56 |
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 | ||