@asd20/ui 3.2.550 → 3.2.552

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.550",
+  "version": "3.2.552",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/molecules/Asd20Tab/index.vue

@@ -100,6 +100,7 @@ export default {
     }
     &:focus {
       box-shadow: 0 0 0 5px var(--website-page__link-color);
+      outline: none !important;
     }
   }
 

package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue

@@ -357,7 +357,155 @@ $max: 4rem;
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) and (max-height: 700px) {
+  .asd20-school-homepage-video-header {
+    display: grid;
+    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
+    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(
+        3,
+        space(1)
+      );
+    margin-bottom: 0;
+    .background-video {
+      display: block;
+    }
+    .background-image {
+      display: none;
+    }
+
+    video {
+      z-index: -1;
+      width: 100%;
+      height: 80vh;
+      object-fit: cover;
+    }
+
+    & /deep/ .notification-group--status .notifications {
+      border-radius: 1em;
+      padding: 0.25em;
+    }
+    &::before {
+      content: '';
+      display: block;
+      position: relative;
+      top: auto;
+      bottom: auto;
+      left: auto;
+      right: auto;
+      grid-column: 1 / -1;
+      grid-row: 7 / -4;
+      z-index: 1;
+      // transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);
+      border-radius: var(--website-shape__radius-l);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: relative;
+      top: auto;
+      bottom: auto;
+      left: auto;
+      right: auto;
+      margin-left: 0;
+      grid-column: 1 / -1;
+      grid-row: 7 / -1;
+      background: var(--website-quick-links__background-color);
+    }
+
+    &::v-deep .asd20-logo {
+      & + .asd20-breadcrumb {
+        margin-top: space(2);
+      }
+    }
+
+    &__top {
+      margin: 0;
+      padding: space(1) space(3) space(1) space(3);
+      grid-column: 1/-1;
+      grid-row: 1/7;
+      background: transparent;
+      justify-content: space-between;
+      &::v-deep .asd20-picker {
+        display: flex;
+      }
+    }
+
+    &__content {
+      top: space(1);
+      left: space(1);
+      z-index: 100;
+      width: 60%;
+      min-width: space(15);
+      height: min-content;
+      background: rgba(0, 0, 0, 0.5);
+      padding: space(1);
+      border-radius: var(--website-shape__radius-m);
+      border-left: space(0.5) solid var(--color__accent);
+      border-top: space(0.5) solid var(--color__accent);
+      animation: slide_left 1s ease-in-out 0.5s both;
+    }
+
+    h1 {
+      margin: 0 0 space(1) 0;
+      font-size: 40px !important;
+      color: var(--color__on-accent);
+      border-bottom: none;
+    }
+
+    &__lead {
+      margin: space(-0.5) 0 0 0;
+      font-size: 20px !important;
+      color: var(--color__on-accent);
+    }
+
+    &__lead + &__call-to-action {
+      margin-top: 0;
+    }
+    &__call-to-action {
+      .asd20-button {
+        min-width: 60%;
+        max-width: 60%;
+      }
+    }
+
+    &__image {
+      display: block;
+      position: relative;
+      bottom: auto;
+      left: auto;
+      right: auto;
+      top: auto;
+      grid-column: 2 / 13;
+      grid-row: 6 / -3;
+      z-index: 1;
+      height: auto;
+      margin: 0;
+      padding: 0;
+      transform: translate3d(0, calc(-20% * var(--scroll-progress)), 0);
+      border-radius: var(--website-shape__radius-l);
+      overflow: hidden;
+
+      img {
+        display: block;
+        width: 100%;
+        height: 80vh;
+        object-fit: cover;
+        object-position: center;
+        border-radius: var(--website-shape__radius-l);
+      }
+    }
+    .scroll-down-indicator {
+      display: block;
+    }
+  }
+}
+
+@media (min-width: 1024px) and (min-height: 700px) {
   .asd20-school-homepage-video-header {
     display: grid;
     grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);

package/src/components/templates/Asd20DistrictVideoTemplate/index.vue

@@ -244,6 +244,9 @@ export default {
       top: inherit;
       bottom: 0%;
     }
+    .asd20-secondary-header {
+      background-attachment: fixed;
+    }
   }
 }
 

package/src/design/tokens.css

@@ -1,23 +1,23 @@
 :root {
-  --color__accent-s100: #000000;
-  --color__accent-s90: #01040b;
-  --color__accent-s80: #030916;
-  --color__accent-s70: #0f1c50;
-  --color__accent-s60: #12205c;
-  --color__accent-s50: #142469;
-  --color__accent-s40: #182a7a;
-  --color__accent-s30: #1b2f87;
-  --color__accent-s20: #1e3493;
-  --color__accent-s10: #1e3493;
-  --color__accent: #225da5;
-  --color__accent-t10: #326aaf;
-  --color__accent-t20: #4479b9;
-  --color__accent-t30: #5b8bc4;
-  --color__accent-t40: #749dce;
-  --color__accent-t50: #8badd6;
-  --color__accent-t60: #a0bbdd;
-  --color__accent-t70: #b7cbe5;
-  --color__accent-t80: #cad9ec;
+  --color__accent-s100: #041c2f;
+  --color__accent-s90: #072a46;
+  --color__accent-s80: #09395d;
+  --color__accent-s70: #0b4775;
+  --color__accent-s60: #0d558c;
+  --color__accent-s50: #0f63a3;
+  --color__accent-s40: #1171bb;
+  --color__accent-s30: #147fd2;
+  --color__accent-s20: #168ee9;
+  --color__accent-s10: #2d99eb;
+  --color__accent: #379eec;
+  --color__accent-t10: #44a4ee;
+  --color__accent-t20: #5cb0f0;
+  --color__accent-t30: #73bbf2;
+  --color__accent-t40: #8ac6f4;
+  --color__accent-t50: #a2d2f6;
+  --color__accent-t60: #b9ddf8;
+  --color__accent-t70: #d0e8fb;
+  --color__accent-t80: #e8f4fd;
   --color__accent-t90: #dce5f1;
   --color__accent-t100: #ffffff;
   --color__on-accent: #ffffff;