summaryrefslogtreecommitdiffstats
path: root/src/objects/_lightbox.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
committerVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
commit48cb00040763459fc46d4aa108bf72c12f48f422 (patch)
tree9609470d56bb31d55697ef0c42f1c908804dd3f1 /src/objects/_lightbox.scss
parentUpdate (diff)
downloadiro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip
WIP: Refactoring
Diffstat (limited to 'src/objects/_lightbox.scss')
-rw-r--r--src/objects/_lightbox.scss206
1 files changed, 0 insertions, 206 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
deleted file mode 100644
index 31d3398..0000000
--- a/src/objects/_lightbox.scss
+++ /dev/null
@@ -1,206 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use 'action-button';
5
6@include iro.props-namespace('lightbox') {
7 @include iro.props-store((
8 --dims: (
9 --pad: fn.global-dim(--size --150),
10 --thumbnail: (
11 --size: fn.global-dim(--size --700),
12 --spacing: fn.global-dim(--size --100),
13 --idle: 1px,
14 --selected: 2px,
15 ),
16 --close-button: (
17 --font-size: fn.global-dim(--font-size --200),
18 ),
19 --nav-button: (
20 --width: fn.global-dim(--size --3800),
21 --height: fn.global-dim(--size --3800),
22 --font-size: fn.global-dim(--font-size --200),
23 ),
24 ),
25 ), 'dims');
26
27 @include iro.props-store((
28 --dims: (
29 --thumbnail: (
30 --size: fn.global-dim(--size --600),
31 ),
32 --nav-button: (
33 --width: fn.global-dim(--size --2500),
34 --height: fn.global-dim(--size --2500),
35 ),
36 ),
37 ), 'md');
38
39 @include iro.props-store((
40 --colors: (
41 --thumbnail: (
42 --idle: fn.global-color(--fg-hi2),
43 --selected: fn.global-color(--fg-lo),
44 ),
45 ),
46 ), 'colors');
47
48 @include iro.bem-object(iro.props-namespace()) {
49 display: grid;
50 grid-template-rows: auto minmax(0, 1fr) auto auto;
51 grid-template-columns: auto minmax(0, 1fr) auto;
52 grid-template-areas:
53 'header header header'
54 'prev content next'
55 'thumbnails thumbnails thumbnails'
56 'footer footer footer';
57 box-sizing: border-box;
58 height: 100%;
59 overflow: hidden;
60
61 @include iro.bem-elem('header') {
62 grid-area: header;
63 display: flex;
64 align-items: flex-start;
65 padding: fn.dim(--pad) fn.dim(--pad) 0;
66 }
67
68 @include iro.bem-elem('img') {
69 display: none;
70 box-sizing: border-box;
71 grid-area: content;
72 width: 100%;
73 height: 100%;
74 padding: fn.dim(--pad);
75 object-fit: scale-down;
76
77 @include iro.bem-sibling-elem('img') {
78 @include iro.bem-modifier('default') {
79 display: block;
80
81 @include iro.bem-next-elem('nav-btn') {
82 display: block;
83
84 @include iro.bem-next-elem('nav-btn') {
85 display: block;
86 }
87 }
88 }
89 }
90
91 @include iro.bem-multi('&:target', 'is' 'visible') {
92 display: block;
93
94 @include iro.bem-next-elem('nav-btn') {
95 display: block;
96
97 @include iro.bem-next-elem('nav-btn') {
98 display: block;
99 }
100 }
101
102 @include iro.bem-sibling-elem('img') {
103 @include iro.bem-modifier('default') {
104 display: none;
105
106 @include iro.bem-next-elem('nav-btn') {
107 display: none;
108
109 @include iro.bem-next-elem('nav-btn') {
110 display: none;
111 }
112 }
113 }
114 }
115 }
116 }
117
118 @include iro.bem-elem('thumbnails') {
119 grid-area: thumbnails;
120 display: flex;
121 gap: fn.dim(--thumbnail --spacing);
122 padding: fn.dim(--thumbnail --selected) fn.dim(--pad) fn.dim(--pad);
123 overflow: auto;
124 }
125
126 @include iro.bem-elem('footer') {
127 grid-area: footer;
128 display: flex;
129 align-items: flex-start;
130 padding: 0 fn.dim(--pad) fn.dim(--pad);
131 }
132
133 @include iro.bem-elem('thumbnail') {
134 position: relative;
135 flex: 0 0 auto;
136 width: fn.dim(--thumbnail --size);
137 height: fn.dim(--thumbnail --size);
138 opacity: .75;
139 box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset;
140
141 &:hover {
142 opacity: 1;
143 }
144
145 @include iro.bem-is('selected') {
146 opacity: 1;
147 box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected);
148 }
149 }
150
151 @include iro.bem-elem('thumbnail-img') {
152 display: block;
153 position: absolute;
154 top: 0;
155 left: 0;
156 width: 100%;
157 height: 100%;
158 object-fit: cover;
159 object-position: center center;
160 }
161
162 @include iro.bem-elem('thumbnail-icon') {
163 position: absolute;
164 top: 50%;
165 left: 50%;
166 transform: translate(-50%, -50%);
167 }
168
169 @include iro.bem-elem('close-btn') {
170 flex: 0 0 auto;
171 margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
172 font-size: fn.dim(--close-button --font-size);
173 }
174
175 @include iro.bem-elem('nav-btn') {
176 display: none;
177 position: relative;
178 align-self: center;
179 overflow: visible;
180 font-size: fn.dim(--nav-button --font-size);
181
182 &::after {
183 content: '';
184 display: block;
185 position: absolute;
186 top: 50%;
187 left: 50%;
188 width: fn.dim(--nav-button --width);
189 height: fn.dim(--nav-button --height);
190 transform: translate(-50%, -50%);
191 }
192
193 @include iro.bem-modifier('prev') {
194 grid-area: prev;
195 margin-right: calc(-1 * fn.dim(--pad));
196 margin-left: calc(.5 * fn.dim(--pad));
197 }
198
199 @include iro.bem-modifier('next') {
200 grid-area: next;
201 margin-right: calc(.5 * fn.dim(--pad));
202 margin-left: calc(-1 * fn.dim(--pad));
203 }
204 }
205 }
206}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-11 03:37:55 +0000