@phillips/seldon 1.51.0 → 1.52.0

package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss

@@ -1,11 +1,12 @@
 @use '../../../allPartials' as *;
 
 .#{$px}-nav__item {
-  background: $pure-white;
+  cursor: pointer;
 
   @include isHeaderMobile {
-    max-width: 320px;
-    width: 100%;
+    a {
+      white-space: normal;
+    }
   }
 
   @include isHeaderDesktop {
@@ -14,93 +15,6 @@
     max-width: unset;
   }
 
-  & > button {
-    @include DistinctDisplay;
-
-    text-transform: uppercase;
-
-    &:hover::after,
-    &:focus::after {
-      background: $pure-black;
-      content: '';
-      height: 1px;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: $nav-height;
-    }
-  }
-
-  & > button {
-    @include DistinctDisplay;
-    @include text($snwHeaderLink);
-
-    display: block;
-    position: relative;
-    white-space: nowrap;
-    width: 100%;
-
-    @include isHeaderMobile {
-      position: relative;
-    }
-  }
-
-  &--expanded ~ & &--label,
-  &--expanded ~ & > button {
-    @include isHeaderMobile {
-      & > span::after {
-        content: '';
-      }
-    }
-  }
-
-  // Submenu
-  ul {
-    background: $pure-white;
-    overflow: hidden scroll;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 307px;
-    z-index: -1;
-  }
-
-  @include isHeaderDesktop {
-    ul {
-      align-content: start;
-      height: auto;
-      left: 0;
-      max-height: 0;
-      min-height: 0;
-      overflow: hidden;
-      position: fixed;
-      top: $desktop-header-height;
-      width: 100%;
-      z-index: -1;
-
-      li {
-        display: inline;
-        white-space: nowrap;
-
-        button,
-        a,
-        p {
-          @include isHeaderDesktop {
-            border: none;
-          }
-        }
-      }
-    }
-
-    &:hover ul,
-    &--expanded:focus-within ul {
-      max-height: 100vh;
-      min-height: 227px;
-      padding: 2rem 3.75rem;
-      z-index: 1;
-    }
-  }
-
   .#{$px}-nav__item-trigger > label::after {
     @include isHeaderMobile {
       content: '\203A';
@@ -118,10 +32,6 @@
     }
   }
 
-  &.#{$px}-nav__item--expanded ul {
-    z-index: 0;
-  }
-
   & > button {
     background-color: transparent;
     border: 0;
@@ -135,34 +45,9 @@
       display: flex;
       padding: 0.5rem 0.625rem;
     }
-
-    & > a:focus,
-    & > button:focus {
-      background-color: #f4f4f4;
-    }
-
-    &:hover {
-      & > a,
-      & > button {
-        background-color: #f4f4f4;
-      }
-    }
   }
 
   @include isHeaderDesktop {
-    position: relative;
-
-    &:not(ul ul li) a:focus,
-    &:not(ul ul li) button:focus,
-    &:not(ul ul li) p:focus {
-      background: #f4f4f4;
-    }
-
-    .#{$px}-nav__list-item {
-      position: static;
-      z-index: 1;
-    }
-
     & > .#{$px}-nav__list-item-trigger::before {
       background: #f4f4f4;
       content: '';

package/dist/scss/components/Navigation/NavigationItemTrigger/_navigationItemTrigger.scss

@@ -1 +1,76 @@
 @use '../../../allPartials' as *;
+
+.#{$px}-navigation-item-trigger {
+  flex-direction: column;
+  justify-content: center;
+
+  & > button {
+    color: $pure-black;
+    display: flex;
+    justify-content: flex-start;
+    position: relative;
+    white-space: nowrap;
+    width: 100%;
+
+    @include isHeaderDesktop {
+      color: unset;
+      justify-content: center;
+    }
+  }
+
+  @include isHeaderDesktop {
+    &--hovered button::after {
+      background-color: $pure-black;
+      bottom: -1px;
+      content: '';
+      height: 1px;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+
+    & > &__submenu {
+      pointer-events: none;
+      transform: translateY(-100%);
+      transition: none; // remove this when implementing submenu transitions
+    }
+
+    &--hovered &__submenu {
+      height: fit-content;
+      left: 0;
+      max-height: unset;
+      opacity: 1;
+      padding: $padding-md;
+      pointer-events: all;
+      position: fixed; // has to bust out of the box containing it on desktop
+      right: 0;
+      top: calc($header-height);
+      transform: translateY(0);
+    }
+  }
+
+  @include isHeaderDesktop {
+    ul {
+      background-color: $pure-white;
+      height: auto;
+      left: 0;
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      z-index: -1;
+
+      li {
+        display: inline;
+        white-space: nowrap;
+
+        button,
+        a,
+        p {
+          @include isHeaderDesktop {
+            border: none;
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -1,57 +1,44 @@
 @use '../../../allPartials' as *;
 
+$opacity-transition: opacity 0.25s ease-in;
+$top-transition: top 0.25s ease-in 0.1s;
+
 .#{$px}-nav__list {
-  display: flex;
-  justify-content: center;
-  list-style: none;
-  margin: 0;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: left;
   opacity: 1;
-  padding: 0;
-  position: relative;
-  top: 0;
-  transition: top 0.25s ease-in 0.1s;
-
-  @include isHeaderMobile {
-    flex-direction: column;
-    height: calc(100vh - 102px);
-    justify-content: left;
-    min-width: 330px;
-    overflow: auto;
-    padding: 0.5rem;
-    transform: translateX(0%);
-    transition: transform 0.3s ease-in 0.1s;
-  }
-
-  &--expanded {
-    @include isHeaderMobile {
-      &:not(li ul) {
-        transform: translateX(-50%);
-        width: 200%;
-      }
-    }
-  }
+  padding: $spacing-md 0;
+  transition: $opacity-transition;
 
   &--offscreen {
     opacity: 0;
+    pointer-events: none;
     top: -100%;
-    transition:
-      top 0.25s ease-in 0.1s,
-      opacity 0.25s ease-in;
-    z-index: 5;
   }
 
-  & .#{$px}-nav__item > & {
-    @include isHeaderMobile {
-      display: none;
+  @include isHeaderDesktop {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    top: 0;
+    transition:
+      $top-transition,
+      $opacity-transition 0.25s;
 
-      &--expanded {
-        display: flex;
-        flex-direction: column;
-      }
+    &--offscreen {
+      top: -100%;
+      transition: $top-transition, $opacity-transition;
+      z-index: 5;
     }
-  }
 
-  &__section {
-    width: 100%;
+    &__section {
+      width: 100%;
+    }
   }
 }

package/dist/scss/components/Navigation/_navigation.scss

@@ -1,103 +1,45 @@
 @use '../../allPartials' as *;
 
 .#{$px}-nav {
-  background: $pure-white;
-  flex-wrap: wrap;
-  height: 100%;
-  overflow: hidden;
-  padding-top: 4.5rem;
-  position: relative;
-
-  @include isHeaderDesktop {
-    display: flex;
-    overflow: visible;
-    padding-top: 0;
-    place-content: center center;
-    position: unset;
-    width: auto;
-  }
+  border-top: 1px solid $light-gray;
+  display: flex;
+  height: fit-content;
+  justify-content: center;
+  width: 100vw;
 
   &__list-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 $spacing-sm;
     position: relative;
-  }
-
-  &--expanded &__label {
-    animation: 1s linear fade-in-out forwards;
-  }
 
-  &__label {
-    animation: 1s linear fade-in-out2 forwards;
-    font-size: 1.25rem;
-    padding-left: 0.625rem;
-    visibility: var(--visible);
-  }
+    > .#{$px}-nav__list {
+      border-top: 1px solid $light-gray;
 
-  & &__back-btn {
-    background-color: transparent;
-    cursor: pointer;
-    font-weight: 800;
-    height: 60px;
-    opacity: 0;
-    padding: 1rem;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition:
-      opacity 0s linear,
-      background-color 0.5s;
-    width: auto;
-  }
+      @include isHeaderDesktop {
+        border-top: unset;
+      }
+    }
 
-  &--expanded &__back-btn {
-    opacity: 1;
-    transition:
-      opacity 0.5s linear 0.25s,
-      background-color 0.5s;
+    @include isHeaderDesktop {
+      flex-direction: row;
+      padding-right: $search-size;
+    }
   }
 
   @include isHeaderDesktop {
-    // Remove label and mobile buttons on larger screens
-    .#{$px}-nav__back-btn,
-    .#{$px}-nav__close-btn,
-    .#{$px}-nav__label {
+    border: unset;
+    width: fit-content;
+
+    // Remove mobile button on larger screens
+    .#{$px}-nav__close-btn {
       display: none;
     }
   }
 
-  &__back-btn:hover,
-  &__back-btn:focus,
   &__close-btn:hover,
   &__close-btn:focus {
     background-color: #f4f4f4;
   }
 }
-
-// Animations
-
-@keyframes fade-in-out {
-  0% {
-    opacity: 0;
-  }
-
-  30% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-in-out2 {
-  0% {
-    opacity: 0;
-  }
-
-  30% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

package/dist/scss/components/Search/SearchResults/_searchResults.scss

@@ -3,13 +3,12 @@
 .#{$px}-search__results {
   align-items: flex-start;
   background: $white;
-  border-bottom: 1px solid $light-gray;
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
   padding: $spacing-sm;
   position: absolute;
-  top: $nav-height;
+  top: $search-size;
   width: 100%;
 
   &-container {
@@ -25,28 +24,5 @@
 .#{$px}-search {
   &__result {
     display: flex;
-
-    &:last-child {
-      border-bottom: none;
-
-      a span p {
-        text-transform: uppercase;
-      }
-    }
-
-    .#{$px}-link {
-      &--link {
-        border-bottom: 1px transparent solid;
-        color: $pure-black;
-      }
-    }
-
-    p {
-      @include pText(0.875rem, $pure-black);
-
-      font-weight: 400;
-      line-height: 1.25rem;
-      text-transform: capitalize;
-    }
   }
 }

package/dist/scss/components/Search/_search.scss

@@ -3,14 +3,18 @@
 .#{$px}-search {
   display: flex;
   gap: $spacing-md;
-  height: $nav-height;
-  left: calc(100% - $nav-height);
-  min-width: 2.625rem;
+  height: $search-size;
+  left: calc(100% - $search-size);
+  min-width: $search-size;
   position: absolute;
   right: 0;
-  top: 0;
+  top: $padding-md;
   transition: left 0.25s ease-in;
 
+  @include isHeaderDesktop {
+    top: 0;
+  }
+
   &--active {
     left: 0;
     transition: left 0.25s ease-in 0.2s;
@@ -18,8 +22,8 @@
 
   &__input-status-icon {
     border-bottom: 1px solid $pure-black;
-    height: $nav-height;
-    width: $nav-height;
+    height: $search-size;
+    width: $search-size;
 
     svg {
       height: 100%;
@@ -76,11 +80,15 @@
         font-size: 0.875rem;
         font-style: normal;
         font-weight: 400;
-        height: $nav-height;
+        height: $search-size;
         line-height: 1.5rem;
         margin: 0;
         padding: $spacing-sm 0 $spacing-sm $spacing-sm;
 
+        @include media($size-xl) {
+          height: 2.875rem;
+        }
+
         &:focus {
           outline: none;
         }
@@ -92,3 +100,36 @@
     }
   }
 }
+
+.#{$px}-search__container {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  padding: $padding-md 0;
+  pointer-events: all;
+
+  @include isHeaderDesktop {
+    cursor: default;
+    padding: 0;
+  }
+
+  @include isHeaderMobile {
+    position: relative;
+  }
+
+  &__label {
+    display: none;
+    margin: 0;
+
+    @include isHeaderMobile {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      flex-wrap: wrap;
+      height: $search-size;
+      margin: 0;
+      padding: 0 $spacing-sm;
+      pointer-events: all;
+    }
+  }
+}

package/dist/scss/components/Search/_searchButton.scss

@@ -7,14 +7,18 @@
   border-bottom: 1px solid transparent;
   cursor: pointer;
   display: flex;
-  height: $nav-height;
+  height: $search-size;
   justify-content: center;
   margin: 0;
   padding: 0;
   position: absolute;
   right: 0;
   top: 0;
-  width: $nav-height;
+  width: $search-size;
+
+  @include media($size-xl) {
+    padding: 0 0 0.125rem;
+  }
 
   &--close {
     border-bottom: 1px solid $pure-black;