@asd20/ui 3.2.549 → 3.2.551
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
|
@@ -317,6 +317,17 @@ export default {
|
|
|
317
317
|
|
|
318
318
|
$min: 3rem;
|
|
319
319
|
$max: 4rem;
|
|
320
|
+
|
|
321
|
+
@keyframes slide_left {
|
|
322
|
+
from {
|
|
323
|
+
opacity: 0;
|
|
324
|
+
margin-left: 100px;
|
|
325
|
+
}
|
|
326
|
+
to {
|
|
327
|
+
opacity: 1;
|
|
328
|
+
margin-left: 0;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
320
331
|
@media (min-width: 667px) {
|
|
321
332
|
.asd20-school-homepage-video-header {
|
|
322
333
|
&__call-to-action {
|
|
@@ -346,7 +357,155 @@ $max: 4rem;
|
|
|
346
357
|
}
|
|
347
358
|
}
|
|
348
359
|
|
|
349
|
-
@media (min-width: 1024px) {
|
|
360
|
+
@media (min-width: 1024px) and (max-height: 700px) {
|
|
361
|
+
.asd20-school-homepage-video-header {
|
|
362
|
+
display: grid;
|
|
363
|
+
grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
|
|
364
|
+
grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(
|
|
365
|
+
3,
|
|
366
|
+
space(1)
|
|
367
|
+
);
|
|
368
|
+
margin-bottom: 0;
|
|
369
|
+
.background-video {
|
|
370
|
+
display: block;
|
|
371
|
+
}
|
|
372
|
+
.background-image {
|
|
373
|
+
display: none;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
video {
|
|
377
|
+
z-index: -1;
|
|
378
|
+
width: 100%;
|
|
379
|
+
height: 80vh;
|
|
380
|
+
object-fit: cover;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
& /deep/ .notification-group--status .notifications {
|
|
384
|
+
border-radius: 1em;
|
|
385
|
+
padding: 0.25em;
|
|
386
|
+
}
|
|
387
|
+
&::before {
|
|
388
|
+
content: '';
|
|
389
|
+
display: block;
|
|
390
|
+
position: relative;
|
|
391
|
+
top: auto;
|
|
392
|
+
bottom: auto;
|
|
393
|
+
left: auto;
|
|
394
|
+
right: auto;
|
|
395
|
+
grid-column: 1 / -1;
|
|
396
|
+
grid-row: 7 / -4;
|
|
397
|
+
z-index: 1;
|
|
398
|
+
// transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);
|
|
399
|
+
border-radius: var(--website-shape__radius-l);
|
|
400
|
+
border-top-left-radius: 0;
|
|
401
|
+
border-top-right-radius: 0;
|
|
402
|
+
border-bottom-left-radius: 0;
|
|
403
|
+
border-bottom-right-radius: 0;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
&::after {
|
|
407
|
+
content: '';
|
|
408
|
+
display: block;
|
|
409
|
+
position: relative;
|
|
410
|
+
top: auto;
|
|
411
|
+
bottom: auto;
|
|
412
|
+
left: auto;
|
|
413
|
+
right: auto;
|
|
414
|
+
margin-left: 0;
|
|
415
|
+
grid-column: 1 / -1;
|
|
416
|
+
grid-row: 7 / -1;
|
|
417
|
+
background: var(--website-quick-links__background-color);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
&::v-deep .asd20-logo {
|
|
421
|
+
& + .asd20-breadcrumb {
|
|
422
|
+
margin-top: space(2);
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
&__top {
|
|
427
|
+
margin: 0;
|
|
428
|
+
padding: space(1) space(3) space(1) space(3);
|
|
429
|
+
grid-column: 1/-1;
|
|
430
|
+
grid-row: 1/7;
|
|
431
|
+
background: transparent;
|
|
432
|
+
justify-content: space-between;
|
|
433
|
+
&::v-deep .asd20-picker {
|
|
434
|
+
display: flex;
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
&__content {
|
|
439
|
+
top: space(1);
|
|
440
|
+
left: space(1);
|
|
441
|
+
z-index: 100;
|
|
442
|
+
width: 60%;
|
|
443
|
+
min-width: space(15);
|
|
444
|
+
height: min-content;
|
|
445
|
+
background: rgba(0, 0, 0, 0.5);
|
|
446
|
+
padding: space(1);
|
|
447
|
+
border-radius: var(--website-shape__radius-m);
|
|
448
|
+
border-left: space(0.5) solid var(--color__accent);
|
|
449
|
+
border-top: space(0.5) solid var(--color__accent);
|
|
450
|
+
animation: slide_left 1s ease-in-out 0.5s both;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
h1 {
|
|
454
|
+
margin: 0 0 space(1) 0;
|
|
455
|
+
font-size: 40px !important;
|
|
456
|
+
color: var(--color__on-accent);
|
|
457
|
+
border-bottom: none;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
&__lead {
|
|
461
|
+
margin: space(-0.5) 0 0 0;
|
|
462
|
+
font-size: 20px !important;
|
|
463
|
+
color: var(--color__on-accent);
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
&__lead + &__call-to-action {
|
|
467
|
+
margin-top: 0;
|
|
468
|
+
}
|
|
469
|
+
&__call-to-action {
|
|
470
|
+
.asd20-button {
|
|
471
|
+
min-width: 60%;
|
|
472
|
+
max-width: 60%;
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
&__image {
|
|
477
|
+
display: block;
|
|
478
|
+
position: relative;
|
|
479
|
+
bottom: auto;
|
|
480
|
+
left: auto;
|
|
481
|
+
right: auto;
|
|
482
|
+
top: auto;
|
|
483
|
+
grid-column: 2 / 13;
|
|
484
|
+
grid-row: 6 / -3;
|
|
485
|
+
z-index: 1;
|
|
486
|
+
height: auto;
|
|
487
|
+
margin: 0;
|
|
488
|
+
padding: 0;
|
|
489
|
+
transform: translate3d(0, calc(-20% * var(--scroll-progress)), 0);
|
|
490
|
+
border-radius: var(--website-shape__radius-l);
|
|
491
|
+
overflow: hidden;
|
|
492
|
+
|
|
493
|
+
img {
|
|
494
|
+
display: block;
|
|
495
|
+
width: 100%;
|
|
496
|
+
height: 80vh;
|
|
497
|
+
object-fit: cover;
|
|
498
|
+
object-position: center;
|
|
499
|
+
border-radius: var(--website-shape__radius-l);
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
.scroll-down-indicator {
|
|
503
|
+
display: block;
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
@media (min-width: 1024px) and (min-height: 700px) {
|
|
350
509
|
.asd20-school-homepage-video-header {
|
|
351
510
|
display: grid;
|
|
352
511
|
grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
|
|
@@ -436,6 +595,7 @@ $max: 4rem;
|
|
|
436
595
|
border-radius: var(--website-shape__radius-m);
|
|
437
596
|
border-left: space(0.5) solid var(--color__accent);
|
|
438
597
|
border-top: space(0.5) solid var(--color__accent);
|
|
598
|
+
animation: slide_left 1s ease-in-out 0.5s both;
|
|
439
599
|
}
|
|
440
600
|
|
|
441
601
|
h1 {
|
|
@@ -474,7 +634,7 @@ $max: 4rem;
|
|
|
474
634
|
height: auto;
|
|
475
635
|
margin: 0;
|
|
476
636
|
padding: 0;
|
|
477
|
-
transform: translate3d(0, calc(-
|
|
637
|
+
transform: translate3d(0, calc(-20% * var(--scroll-progress)), 0);
|
|
478
638
|
border-radius: var(--website-shape__radius-l);
|
|
479
639
|
overflow: hidden;
|
|
480
640
|
|
|
@@ -104,6 +104,17 @@ export default {
|
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
|
+
@keyframes slide_down {
|
|
108
|
+
from {
|
|
109
|
+
opacity: 0;
|
|
110
|
+
bottom: space(2);
|
|
111
|
+
}
|
|
112
|
+
to {
|
|
113
|
+
opacity: 1;
|
|
114
|
+
botom: space(-0.74);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
107
118
|
@media (min-width: 667px) {
|
|
108
119
|
.asd20-video-header-content {
|
|
109
120
|
width: 100%;
|
|
@@ -170,6 +181,7 @@ export default {
|
|
|
170
181
|
// );
|
|
171
182
|
border-left: 20px solid var(--website-homepage-header__accent);
|
|
172
183
|
border-bottom: 20px solid var(--website-homepage-header__accent);
|
|
184
|
+
animation: slide_down 1s ease-in-out 0.5s both;
|
|
173
185
|
}
|
|
174
186
|
}
|
|
175
187
|
&::v-deep .asd20-messaging__button-group {
|
|
@@ -226,6 +226,17 @@ export default {
|
|
|
226
226
|
// }
|
|
227
227
|
// }
|
|
228
228
|
|
|
229
|
+
@keyframes slide_left {
|
|
230
|
+
from {
|
|
231
|
+
opacity: 0;
|
|
232
|
+
margin-left: 100px;
|
|
233
|
+
}
|
|
234
|
+
to {
|
|
235
|
+
opacity: 1;
|
|
236
|
+
margin-left: 0;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
229
240
|
@media (min-width: 667px) {
|
|
230
241
|
.asd20-district-video-template {
|
|
231
242
|
.asd20-video-header-content {
|
|
@@ -255,6 +266,11 @@ export default {
|
|
|
255
266
|
.asd20-video-header-content {
|
|
256
267
|
position: absolute;
|
|
257
268
|
bottom: 20%;
|
|
269
|
+
transform: translate3d(0, calc(-70% * var(--scroll-progress)), 0);
|
|
270
|
+
animation: slide_left 1s ease-in-out 0.5s both;
|
|
271
|
+
|
|
272
|
+
.lead {
|
|
273
|
+
}
|
|
258
274
|
}
|
|
259
275
|
.asd20-organization-picker {
|
|
260
276
|
display: inherit !important;
|