@asd20/ui 3.2.367 → 3.2.370

package/package.json

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

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

@@ -150,7 +150,7 @@ export default {
     margin: 0;
     background-image: linear-gradient(
       90deg,
-      var(--color__fade-overlay-left, var(--website-page__background-color)) 0%,
+      var(--color__fade-overlay-left, var(--website-page__background-color)) 25%,
       transparent var(--fade-stop)
     );
     background-color: transparent;
@@ -158,7 +158,7 @@ export default {
     top: space(1);
     left: 0;
     bottom: space(1);
-    width: space(1);
+    width: space(2);
     z-index: 2;
     border-radius: var(--website-shape__radius);
 
@@ -173,7 +173,7 @@ export default {
     &::after {
       content: '';
       display: block;
-      border: 2px solid transparent;
+      border: 5px solid transparent;
       width: 0.5rem;
       height: 0.5rem;
       border-top-color: var(--color__on-bg-default);
@@ -243,7 +243,7 @@ export default {
     width: calc(100% - #{space(4)});
     &__prev,
     &__next {
-      width: space(2);
+      width: space(3);
       &::after {
         width: 1rem;
         height: 1rem;

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

@@ -211,6 +211,11 @@ export default {
   .logoContainer {
     display: flex;
     justify-content: space-between;
+    .asd20-logo {
+      &::v-deep .asd20-logo__title {
+        max-width: 100%;
+      }
+    }
     img {
       // margin-top: space(-1);
       margin-left: space(1);

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

@@ -397,7 +397,7 @@ export default {
     .asd20-button {
       box-sizing: border-box;
       flex-grow: 1;
-      max-width: 35vw;
+      max-width: 40vw;
       min-height: space(2);
       font-size: 0.875rem !important;
       background-color: var(
@@ -432,11 +432,10 @@ export default {
     }
   }
 
-  // Hide images on mobile
   &__image {
-    // display: none;
     img {
-      max-width: 100%;
+      width: 100%;
+      // max-width: 100%;
       max-height: 600px;
       border-top: 10px solid var(--color__accent);
     }
@@ -542,6 +541,9 @@ export default {
 
     &__call-to-action {
       margin: space(-1) 60vw space(-1) space(3);
+      .asd20-button {
+        font-size: 1rem !important;
+      }
     }
   }
 }

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

@@ -138,18 +138,17 @@ export default {
     z-index: 101;
     background: white;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
+    flex-direction: row;
     align-items: center;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: space(0.25);
+    padding: space(0.25) space(0.5);
 
     &::v-deep .asd20-picker {
       display: none;
     }
 
     &::v-deep .notification-group--status {
-      margin-left: 0.5rem;
+      // margin-left: 0.5rem;
       .asd20-notification {
         margin: 0;
         padding: 0 !important;
@@ -167,7 +166,7 @@ export default {
     position: relative;
     color: var(--website-header__title-color);
     @include asd20-font(
-      2.5,
+      2.0,
       var(--website-typography__font-family-headlines),
       1.2,
       700
@@ -242,8 +241,8 @@ $max: 4rem;
   .asd20-school-homepage-header {
     &__top {
       flex-direction: row;
-      justify-content: flex-start;
-      padding: 0 space(1);
+      justify-content: flex-end;
+      padding: space(0.25) space(1);
       align-items: center !important;
     }
   }
@@ -315,10 +314,13 @@ $max: 4rem;
       background: white !important;
       grid-column: -6 / -2;
       grid-row: 3 / 5;
-      right: auto;
-      justify-self: end;
       padding-right: 0;
     }
+    &::v-deep .asd20-notification-group--floating {
+      position: absolute;
+      right: space(3);
+      top: space(3.5);
+    }
 
     &__content {
       position: relative;
@@ -366,7 +368,7 @@ $max: 4rem;
       height: auto;
       margin: 0;
       padding: 0;
-      // transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);
+      transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);
       border-radius: var(--website-shape__radius-l);
       overflow: hidden;
 

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

@@ -418,15 +418,6 @@ $max: 4rem;
       }
     }
 
-    &::v-deep .asd20-notification-group--status {
-      background: white !important;
-      grid-column: -6 / -2;
-      grid-row: 3 / 5;
-      right: auto;
-      justify-self: end;
-      padding-right: 0;
-    }
-
     &__content {
       top: space(1);
       left: space(1);

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

@@ -33,19 +33,26 @@ export default {
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
-  background: var(--color__primary-s10);
-  color: asd20-swatch('background-alt');
+  color: var(--website-homepage-header__secondary-foreground-color);
+  background: var(--website-homepage-header__secondary-background-color);
+  // background-image: var(--website-homepage-header__secondary-background-style);
+  // background-position: bottom right !important;
+  // background-size: cover !important;
   padding: space(3) space(1) space(3) space(1);
 
   &::v-deep .asd20-messaging__heading {
     @include fluid-type($base-font-size * 1.5, $base-font-size * 2);
     font-weight: 900;
     line-height: 1.5;
-    color: #fff !important;
+    color: var(--website-homepage-header__secondary-title-color);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-image: url('https://asd20websitestorage.blob.core.windows.net/asd20-images/page-images/asd20-header-divider.jpg');
-    background-size: 50% auto;
+    background-size: 30% auto;
+  }
+  &::v-deep .lead {
+    color: var(--website-homepage-header__secondary-foreground-color);
+    width: 100%;
   }
   &::v-deep .asd20-messaging__body-content {
     display: none;
@@ -59,10 +66,15 @@ export default {
     );
     flex-direction: column;
     width: 50vw;
-    color: var(--color_on-primary);
-    // background: white;
+    color: var(--website-homepage-header__secondary-button-foreground-color);
+    // background: var(--website-homepage-header__secondary-button-background-color);
     &:hover {
-      background: var(--color__primary-t20);
+      color: var(
+        --website-homepage-header__secondary-button-hover-foreground-color
+      );
+      background: var(
+        --website-homepage-header__secondary-button-hover-background-color
+      );
     }
   }
 
@@ -93,10 +105,21 @@ export default {
   //   // opacity: 0.5;
   // }
 }
+@media (min-width: 667px) {
+  .asd20-secondary-header {
+    background: var(--website-homepage-header__secondary-background-color)
+      var(--website-homepage-header__secondary-background-style);
+    &::v-deep .lead {
+      width: 55vw;
+    }
+  }
+}
 @media (min-width: 1024px) {
   .asd20-secondary-header {
-    background-size: auto 50%;
     padding: space(3) space(2) space(3) space(2);
+    &::v-deep .lead {
+      width: 80%;
+    }
     &::v-deep .asd20-button {
       @include asd20-font(
         0.75,
@@ -104,7 +127,6 @@ export default {
         1.5,
         700
       );
-      color: #fff;
       flex-direction: row;
       width: inherit;
     }

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

@@ -54,18 +54,14 @@ export default {
     //   rgba(8, 24, 43, 0.5) 80%,
     //   rgba(8, 24, 43, 0) 100%
     // );
-    background: rgba(51, 92, 155, 0.7);
+    // background: rgba(51, 92, 155, 0.7);
+    background: var(--website-homepage-header__background-color);
     padding: space(1);
   }
 
   &::v-deep .asd20-messaging__heading {
-    @include asd20-font(
-      1.25,
-      var(--website-typography__font-family-headlines),
-      1.5,
-      700
-    );
-    color: #fff !important;
+    @include fluid-type($base-font-size * 1.5, $base-font-size * 2);
+    color: var(--website-homepage-header__title-color) !important;
     padding-bottom: space(0.25);
     border-bottom: 5px solid var(--color__accent);
   }
@@ -76,7 +72,7 @@ export default {
     margin-bottom: 0;
     // width: 90%;
     font-size: 18px;
-    color: #f6f6f6 !important
+    color: var(--website-homepage-header__foreground-color) !important;
   }
   &::v-deep .asd20-button {
     @include asd20-font(
@@ -87,9 +83,11 @@ export default {
     );
     flex-direction: column;
     width: 50vw;
-    background: white;
+    color: var(--website-homepage-header__button-foreground-color);
+    background: var(--website-homepage-header__button-background-color);
     &:hover {
-      background: lightgray;
+      color: var(--website-homepage-header__button-hover-foreground-color);
+      background: var(--website-homepage-header__button-hover-background-color);
     }
   }
   .header-messaging-section {
@@ -99,18 +97,37 @@ export default {
     }
   }
 }
+@media (min-width: 667px) {
+  .asd20-video-header-content {
+    width: 100%;
+    .asd20-messaging {
+      background: var(--website-homepage-header__background-color)
+        var(--website-homepage-header__background-style);
+    }
+    &::v-deep .header-messaging-section {
+      .asd20-messaging__content {
+        width: 55vw;
+      }
+    }
+  }
+}
 
 @media (min-width: 1024px) {
   .asd20-video-header-content {
     width: 80%;
     .header-messaging-section {
       border-bottom: none;
-      width: 70%;
+      width: 80%;
       &::v-deep .asd20-messaging {
         padding: space(1);
         margin-left: space(2);
         .asd20-messaging__content {
-          // max-width: 60%;
+          max-width: 60%;
+        }
+        .asd20-messaging__heading {
+          @include fluid-type($base-font-size * 1.5, $base-font-size * 2);
+          color: var(--color__accent-s10);
+          border-bottom: none;
         }
       }
       &::after {
@@ -139,25 +156,13 @@ export default {
         //   rgba(255, 255, 255, 0) 90%,
         //   rgba(0, 0, 0, 0) 100%
         // );
-        border-left: 20px solid var(--color__accent);
-        border-bottom: 20px solid var(--color__accent);
+        border-left: 20px solid var(--website-homepage-header__accent);
+        border-bottom: 20px solid var(--website-homepage-header__accent);
       }
     }
-    &::v-deep .asd20-messaging__heading {
-      // font-size: 2vw !important;
-      @include asd20-font(
-        1.25,
-        var(--website-typography__font-family-headlines),
-        1.2,
-        700
-      );
-      color: var(--color__accent-s10);
-      border-bottom: none;
-    }
-    &::v-deep .asd20-messaging__body-content {
-      display: none;
+    &::v-deep .asd20-messaging__button-group {
+      flex-wrap: nowrap;
     }
-
     &::v-deep .asd20-button {
       @include asd20-font(
         0.75,
@@ -166,6 +171,7 @@ export default {
         700
       );
       flex-direction: row;
+      flex-wrap: nowrap !important;
       width: inherit;
     }
   }

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

@@ -224,52 +224,27 @@ export default {
   .asd20-feeds-section {
     margin-top: space(0);
   }
-
-  .asd20-notification-group--floating {
-    position: absolute;
-    right: space(0.5);
-    top: space(0.5) !important;
-  }
-
-  // .announcements,
-  // .calendars {
-  //   margin-top: space(0);
-  // }
   .asd20-quicklinks-menu {
     position: relative;
     background-color: var(--website-quick-links__background-color);
   }
 }
-@media (min-width: 667px) {
-  .asd20-school-home-template {
-    .asd20-notification-group--floating {
-      right: space(1);
-      top: space(0.2) !important;
-    }
-  }
-}
 
 @media (min-width: 1024px) {
   .asd20-school-home-template {
     display: block;
     margin-left: space(3);
     margin-top: 0;
-    &::v-deep .asd20-notification-group--status {
-      background: white;
-      top: space(2);
-    }
+    // &::v-deep .asd20-notification-group--status {
+    //   background: white;
+    //   top: space(2);
+    // }
     .pickerContainer {
       display: flex;
       .optionalLogo {
-        max-width: 12rem;
-        max-height: 6rem;
-        margin-left: space(0.5);
+        display: none;
       }
     }
-    // .asd20-feeds-section {
-    //   margin-top: space(1);
-    // }
-
     .asd20-quicklinks-menu {
       padding-bottom: space(1);
       margin: space(-1) 0 0 0;
@@ -283,9 +258,18 @@ export default {
         margin-right: space(0.5);
       }
     }
-    .asd20-notification-group--floating {
-      right: space(1);
-      top: space(7) !important;
+  }
+}
+@media (min-width: 1350px) {
+  .asd20-school-home-template {
+    .pickerContainer {
+      display: flex;
+      .optionalLogo {
+        display: block;
+        max-width: 12rem;
+        max-height: 6rem;
+        margin-left: space(0.5);
+      }
     }
   }
 }

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

@@ -202,7 +202,6 @@ export default {
     right: space(0.5);
     top: space(0.5) !important;
   }
-
   .asd20-notification-group--floating {
     position: absolute;
     right: space(0.5);
@@ -237,7 +236,7 @@ export default {
       .optionalLogo {
         max-width: 12rem;
         max-height: 6rem;
-        margin-left: space(2);
+        margin-left: space(1);
       }
     }
 
@@ -260,8 +259,22 @@ export default {
     }
     .asd20-notification-group--status {
       order: 0;
-      right: space(1) !important;
-      top: space(4) !important;
+      right: space(4) !important;
+      top: space(6) !important;
+    }
+  }
+}
+
+@media (min-width: 1350px) {
+  .asd20-school-home-video-template {
+    .asd20-notification-group--status {
+      order: 0;
+      right: space(3) !important;
+      top: space(2.5) !important;
+    }
+    .asd20-notification-group--floating {
+      right: space(3.5);
+      top: space(3.5) !important;
     }
   }
 }

package/src/design/tokens.css

@@ -131,6 +131,23 @@
   --website-header__link-color: var(--color__accent-t20);
   --website-header__overlay-background-color: transparent;
   --website-header__title-color: #fff;
+  --website-homepage-header__accent: var(--color__accent);
+  --website-homepage-header__background-color: var(--color__secondary);
+  --website-homepage-header__background-style: var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat);
+  --website-homepage-header__button-background-color: var(--color__accent);
+  --website-homepage-header__button-foreground-color: var(--color__on-accent);
+  --website-homepage-header__button-hover-background-color: var(--color__accent);
+  --website-homepage-header__button-hover-foreground-color: var(--color__on-accent-s10);
+  --website-homepage-header__foreground-color: var(--color__secondary-t90);
+  --website-homepage-header__title-color: #fff;
+  --website-homepage-header__secondary-background-color: var(--color__secondary);
+  --website-homepage-header__secondary-background-style: var(--website-texture__reverse) var(--website-texture__position)/var(--website-texture__size-m) var(--website-texture__repeat);
+  --website-homepage-header__secondary-button-background-color: var(--color__accent);
+  --website-homepage-header__secondary-button-foreground-color: var(--color__on-accent);
+  --website-homepage-header__secondary-button-hover-background-color: var(--color__secondary-t10);
+  --website-homepage-header__secondary-button-hover-foreground-color: var(--color__on-accent-s10);
+  --website-homepage-header__secondary-foreground-color: var(--color__secondary-t90);
+  --website-homepage-header__secondary-title-color: #fff;
   --website-icon__fill-color: var(--color__accent);
   --website-icon__fill-color-reverse: var(--color__accent);
   --website-icon__hover-fill-color: var(--color__accent);