diff options
author | Volpeon <git@volpeon.ink> | 2024-06-29 10:01:02 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-29 10:01:02 +0200 |
commit | 6376f1a5225b2fa45f6c861d4a265bf13b56d038 (patch) | |
tree | 7c2ec8bea63df05b6a533fdfa6dab4b2f17f7a1f /src/objects/_lightbox.scss | |
parent | Update (diff) | |
download | iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.gz iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.bz2 iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.zip |
Update
Diffstat (limited to 'src/objects/_lightbox.scss')
-rw-r--r-- | src/objects/_lightbox.scss | 243 |
1 files changed, 243 insertions, 0 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss new file mode 100644 index 0000000..7844eae --- /dev/null +++ b/src/objects/_lightbox.scss | |||
@@ -0,0 +1,243 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @use 'action-button'; | ||
5 | |||
6 | $static-themes: 'black' 'white' !default; | ||
7 | |||
8 | @include iro.props-namespace('lightbox') { | ||
9 | @include iro.props-store(( | ||
10 | --dims: ( | ||
11 | --pad: fn.global-dim(--size --150), | ||
12 | --thumbnail: ( | ||
13 | --size: fn.global-dim(--size --700), | ||
14 | --spacing: fn.global-dim(--size --100), | ||
15 | --idle: fn.global-dim(--border --thin), | ||
16 | --selected: fn.global-dim(--border --medium), | ||
17 | ), | ||
18 | --close-button: ( | ||
19 | --font-size: fn.global-dim(--font-size --200), | ||
20 | ), | ||
21 | --nav-button: ( | ||
22 | --width: fn.global-dim(--size --2000), | ||
23 | --height: fn.global-dim(--size --3800), | ||
24 | --font-size: fn.global-dim(--font-size --200), | ||
25 | ), | ||
26 | ), | ||
27 | --colors: ( | ||
28 | --thumbnail: ( | ||
29 | --idle: fn.global-color(--border-strong), | ||
30 | --selected: fn.global-color(--heading), | ||
31 | ), | ||
32 | ), | ||
33 | )); | ||
34 | |||
35 | @each $theme in $static-themes { | ||
36 | @include iro.props-store(( | ||
37 | --colors: ( | ||
38 | --static-#{$theme}: ( | ||
39 | --text: fn.global-color(--white-transparent --800), | ||
40 | --thumbnail: ( | ||
41 | --idle: fn.global-color(--white-transparent --400), | ||
42 | --selected: fn.global-color(--white-transparent --900), | ||
43 | ), | ||
44 | ) | ||
45 | ) | ||
46 | )); | ||
47 | } | ||
48 | |||
49 | @include iro.props-store(( | ||
50 | --dims: ( | ||
51 | --thumbnail: ( | ||
52 | --size: fn.global-dim(--size --600), | ||
53 | ), | ||
54 | --nav-button: ( | ||
55 | --width: fn.global-dim(--size --2500), | ||
56 | --height: fn.global-dim(--size --2500), | ||
57 | ), | ||
58 | ), | ||
59 | ), 'md'); | ||
60 | |||
61 | @include iro.bem-object(iro.props-namespace()) { | ||
62 | display: grid; | ||
63 | grid-template-rows: auto minmax(0, 1fr) auto auto; | ||
64 | grid-template-columns: auto minmax(0, 1fr) auto; | ||
65 | grid-template-areas: | ||
66 | 'header header header' | ||
67 | 'prev content next' | ||
68 | 'thumbnails thumbnails thumbnails' | ||
69 | 'footer footer footer'; | ||
70 | box-sizing: border-box; | ||
71 | block-size: 100%; | ||
72 | min-block-size: 0; | ||
73 | |||
74 | @include iro.bem-elem('header') { | ||
75 | grid-area: header; | ||
76 | display: flex; | ||
77 | align-items: flex-start; | ||
78 | padding-block-start: fn.dim(--pad); | ||
79 | padding-inline: fn.dim(--pad); | ||
80 | } | ||
81 | |||
82 | @include iro.bem-elem('img') { | ||
83 | display: none; | ||
84 | box-sizing: border-box; | ||
85 | grid-area: content; | ||
86 | inline-size: 100%; | ||
87 | block-size: 100%; | ||
88 | padding: fn.dim(--pad); | ||
89 | object-fit: scale-down; | ||
90 | |||
91 | @include iro.bem-sibling-elem('img') { | ||
92 | @include iro.bem-modifier('default') { | ||
93 | display: block; | ||
94 | |||
95 | @include iro.bem-next-elem('nav-btn') { | ||
96 | display: block; | ||
97 | |||
98 | @include iro.bem-next-elem('nav-btn') { | ||
99 | display: block; | ||
100 | } | ||
101 | } | ||
102 | } | ||
103 | } | ||
104 | |||
105 | @include iro.bem-multi('&:target', 'is' 'visible') { | ||
106 | display: block; | ||
107 | |||
108 | @include iro.bem-next-elem('nav-btn') { | ||
109 | display: block; | ||
110 | |||
111 | @include iro.bem-next-elem('nav-btn') { | ||
112 | display: block; | ||
113 | } | ||
114 | } | ||
115 | |||
116 | @include iro.bem-sibling-elem('img') { | ||
117 | @include iro.bem-modifier('default') { | ||
118 | display: none; | ||
119 | |||
120 | @include iro.bem-next-elem('nav-btn') { | ||
121 | display: none; | ||
122 | |||
123 | @include iro.bem-next-elem('nav-btn') { | ||
124 | display: none; | ||
125 | } | ||
126 | } | ||
127 | } | ||
128 | } | ||
129 | } | ||
130 | } | ||
131 | |||
132 | @include iro.bem-elem('thumbnails') { | ||
133 | grid-area: thumbnails; | ||
134 | display: flex; | ||
135 | gap: fn.dim(--thumbnail --spacing); | ||
136 | padding-block: fn.dim(--thumbnail --selected) fn.dim(--pad); | ||
137 | padding-inline: fn.dim(--pad); | ||
138 | overflow: auto; | ||
139 | } | ||
140 | |||
141 | @include iro.bem-elem('footer') { | ||
142 | grid-area: footer; | ||
143 | display: flex; | ||
144 | align-items: flex-start; | ||
145 | padding-block: 0 fn.dim(--pad); | ||
146 | padding-inline: fn.dim(--pad); | ||
147 | } | ||
148 | |||
149 | @include iro.bem-elem('thumbnail') { | ||
150 | position: relative; | ||
151 | flex: 0 0 auto; | ||
152 | inline-size: fn.dim(--thumbnail --size); | ||
153 | block-size: fn.dim(--thumbnail --size); | ||
154 | outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); | ||
155 | opacity: .75; | ||
156 | |||
157 | &:hover, | ||
158 | &:focus-visible { | ||
159 | opacity: 1; | ||
160 | } | ||
161 | |||
162 | @include iro.bem-is('selected') { | ||
163 | outline: fn.dim(--thumbnail --selected) solid fn.color(--thumbnail --selected); | ||
164 | opacity: 1; | ||
165 | } | ||
166 | } | ||
167 | |||
168 | @include iro.bem-elem('thumbnail-img') { | ||
169 | display: block; | ||
170 | position: absolute; | ||
171 | inset-block-start: 0; | ||
172 | inset-inline-start: 0; | ||
173 | inline-size: 100%; | ||
174 | block-size: 100%; | ||
175 | object-fit: cover; | ||
176 | object-position: center center; | ||
177 | } | ||
178 | |||
179 | @include iro.bem-elem('thumbnail-icon') { | ||
180 | position: absolute; | ||
181 | inset-block-start: 50%; | ||
182 | inset-inline-start: 50%; | ||
183 | transform: translate(-50%, -50%); | ||
184 | } | ||
185 | |||
186 | @include iro.bem-elem('close-btn') { | ||
187 | flex: 0 0 auto; | ||
188 | margin-block-start: calc(-.5 * fn.dim(--pad)); | ||
189 | margin-inline: auto calc(-.5 * fn.dim(--pad)); | ||
190 | font-size: fn.dim(--close-button --font-size); | ||
191 | } | ||
192 | |||
193 | @include iro.bem-elem('nav-btn') { | ||
194 | display: none; | ||
195 | position: relative; | ||
196 | align-self: center; | ||
197 | overflow: visible; | ||
198 | font-size: fn.dim(--nav-button --font-size); | ||
199 | |||
200 | &::before { | ||
201 | content: ''; | ||
202 | display: block; | ||
203 | position: absolute; | ||
204 | inset-block-start: 50%; | ||
205 | inline-size: fn.dim(--nav-button --width); | ||
206 | block-size: fn.dim(--nav-button --height); | ||
207 | transform: translateY(-50%); | ||
208 | } | ||
209 | |||
210 | @include iro.bem-modifier('prev') { | ||
211 | grid-area: prev; | ||
212 | margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad)); | ||
213 | |||
214 | &::before { | ||
215 | inset-inline-start: 0; | ||
216 | } | ||
217 | } | ||
218 | |||
219 | @include iro.bem-modifier('next') { | ||
220 | grid-area: next; | ||
221 | margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad)); | ||
222 | |||
223 | &::before { | ||
224 | inset-inline-end: 0; | ||
225 | } | ||
226 | } | ||
227 | } | ||
228 | |||
229 | @each $theme in $static-themes { | ||
230 | @include iro.bem-modifier(static-#{$theme}) { | ||
231 | color: fn.color(--static-#{$theme} --text); | ||
232 | |||
233 | @include iro.bem-elem('thumbnail') { | ||
234 | outline-color: fn.color(--static-#{$theme} --thumbnail --idle); | ||
235 | |||
236 | @include iro.bem-is('selected') { | ||
237 | outline-color: fn.color(--static-#{$theme} --thumbnail --selected); | ||
238 | } | ||
239 | } | ||
240 | } | ||
241 | } | ||
242 | } | ||
243 | } | ||