@asd20/ui 3.2.353 → 3.2.354
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -58,8 +58,7 @@
|
|
|
58
58
|
>
|
|
59
59
|
<slot name="aside" />
|
|
60
60
|
</aside>
|
|
61
|
-
|
|
62
|
-
<div v-if="fullscreen" class="scroll-down-indicator"></div>
|
|
61
|
+
<div class="scroll-down-indicator"></div>
|
|
63
62
|
<slot />
|
|
64
63
|
</header>
|
|
65
64
|
</template>
|
|
@@ -251,6 +250,69 @@ export default {
|
|
|
251
250
|
}
|
|
252
251
|
}
|
|
253
252
|
}
|
|
253
|
+
.scroll-down-indicator {
|
|
254
|
+
position: relative;
|
|
255
|
+
z-index: 3;
|
|
256
|
+
text-transform: uppercase;
|
|
257
|
+
display: none;
|
|
258
|
+
flex-direction: column;
|
|
259
|
+
align-items: center;
|
|
260
|
+
padding-bottom: space(2.125);
|
|
261
|
+
text-align: center;
|
|
262
|
+
font-weight: 400;
|
|
263
|
+
color: transparent;
|
|
264
|
+
bottom: 15vh;
|
|
265
|
+
left:45vw;
|
|
266
|
+
&::before {
|
|
267
|
+
content: '';
|
|
268
|
+
position: absolute;
|
|
269
|
+
display: block;
|
|
270
|
+
width: space(2);
|
|
271
|
+
height: space(2);
|
|
272
|
+
bottom: space(0.15);
|
|
273
|
+
border-radius: 100%;
|
|
274
|
+
background: var(--color__accent);
|
|
275
|
+
box-shadow: 0 5px 5px 0 rgba(black, 0.125);
|
|
276
|
+
transform: translateX(0) translateY(0);
|
|
277
|
+
transform-origin: 50% 50%;
|
|
278
|
+
animation: slide-top 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite
|
|
279
|
+
alternate-reverse both;
|
|
280
|
+
}
|
|
281
|
+
&::after {
|
|
282
|
+
content: '';
|
|
283
|
+
position: absolute;
|
|
284
|
+
display: block;
|
|
285
|
+
width: space(0.5);
|
|
286
|
+
height: space(0.5);
|
|
287
|
+
bottom: space(1);
|
|
288
|
+
left: space(0.57);
|
|
289
|
+
border: 5px solid var(--color__on-accent);
|
|
290
|
+
border-top-color: transparent;
|
|
291
|
+
border-left-color: transparent;
|
|
292
|
+
transform: translateX(0) translateY(0) rotate(45deg);
|
|
293
|
+
transform-origin: 50% 50%;
|
|
294
|
+
animation: slide-top-rotate 1s cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
|
295
|
+
infinite alternate-reverse both;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
@keyframes slide-top {
|
|
300
|
+
0% {
|
|
301
|
+
transform: translateX(0) translateY(0);
|
|
302
|
+
}
|
|
303
|
+
100% {
|
|
304
|
+
transform: translateX(0) translateY(space(1));
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
@keyframes slide-top-rotate {
|
|
309
|
+
0% {
|
|
310
|
+
transform: translateX(0) translateY(0) rotate(45deg);
|
|
311
|
+
}
|
|
312
|
+
100% {
|
|
313
|
+
transform: translateX(0) translateY(space(1)) rotate(45deg);
|
|
314
|
+
}
|
|
315
|
+
}
|
|
254
316
|
}
|
|
255
317
|
|
|
256
318
|
$min: 3rem;
|
|
@@ -422,6 +484,9 @@ $max: 4rem;
|
|
|
422
484
|
border-radius: var(--website-shape__radius-l);
|
|
423
485
|
}
|
|
424
486
|
}
|
|
487
|
+
.scroll-down-indicator {
|
|
488
|
+
display: block;
|
|
489
|
+
}
|
|
425
490
|
}
|
|
426
491
|
}
|
|
427
492
|
</style>
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
</video>
|
|
23
23
|
|
|
24
24
|
<img class="background-image" :src="imageUrl" alt="" />
|
|
25
|
-
|
|
25
|
+
<div class="scroll-down-indicator"></div>
|
|
26
26
|
<slot />
|
|
27
27
|
</header>
|
|
28
28
|
</template>
|
|
@@ -134,6 +134,69 @@ export default {
|
|
|
134
134
|
margin-right: 0;
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
|
+
.scroll-down-indicator {
|
|
138
|
+
position: relative;
|
|
139
|
+
z-index: 3;
|
|
140
|
+
text-transform: uppercase;
|
|
141
|
+
display: none;
|
|
142
|
+
flex-direction: column;
|
|
143
|
+
align-items: center;
|
|
144
|
+
padding-bottom: space(2.125);
|
|
145
|
+
text-align: center;
|
|
146
|
+
font-weight: 400;
|
|
147
|
+
color: transparent;
|
|
148
|
+
bottom: 15vh;
|
|
149
|
+
left:45vw;
|
|
150
|
+
&::before {
|
|
151
|
+
content: '';
|
|
152
|
+
position: absolute;
|
|
153
|
+
display: block;
|
|
154
|
+
width: space(2);
|
|
155
|
+
height: space(2);
|
|
156
|
+
bottom: space(0.15);
|
|
157
|
+
border-radius: 100%;
|
|
158
|
+
background: var(--color__accent);
|
|
159
|
+
box-shadow: 0 5px 5px 0 rgba(black, 0.125);
|
|
160
|
+
transform: translateX(0) translateY(0);
|
|
161
|
+
transform-origin: 50% 50%;
|
|
162
|
+
animation: slide-top 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite
|
|
163
|
+
alternate-reverse both;
|
|
164
|
+
}
|
|
165
|
+
&::after {
|
|
166
|
+
content: '';
|
|
167
|
+
position: absolute;
|
|
168
|
+
display: block;
|
|
169
|
+
width: space(0.5);
|
|
170
|
+
height: space(0.5);
|
|
171
|
+
bottom: space(1);
|
|
172
|
+
left: space(0.57);
|
|
173
|
+
border: 5px solid var(--color__on-accent);
|
|
174
|
+
border-top-color: transparent;
|
|
175
|
+
border-left-color: transparent;
|
|
176
|
+
transform: translateX(0) translateY(0) rotate(45deg);
|
|
177
|
+
transform-origin: 50% 50%;
|
|
178
|
+
animation: slide-top-rotate 1s cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
|
179
|
+
infinite alternate-reverse both;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@keyframes slide-top {
|
|
184
|
+
0% {
|
|
185
|
+
transform: translateX(0) translateY(0);
|
|
186
|
+
}
|
|
187
|
+
100% {
|
|
188
|
+
transform: translateX(0) translateY(space(1));
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@keyframes slide-top-rotate {
|
|
193
|
+
0% {
|
|
194
|
+
transform: translateX(0) translateY(0) rotate(45deg);
|
|
195
|
+
}
|
|
196
|
+
100% {
|
|
197
|
+
transform: translateX(0) translateY(space(1)) rotate(45deg);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
137
200
|
}
|
|
138
201
|
|
|
139
202
|
@media (min-width: 1024px) {
|
|
@@ -184,6 +247,9 @@ export default {
|
|
|
184
247
|
margin: space(2) space(2) space(2) space(2);
|
|
185
248
|
width: 92%;
|
|
186
249
|
}
|
|
250
|
+
.scroll-down-indicator {
|
|
251
|
+
display: block;
|
|
252
|
+
}
|
|
187
253
|
}
|
|
188
254
|
}
|
|
189
255
|
</style>
|