@ecl/site-header 5.0.0-alpha.2 → 5.0.0-alpha.20

package/site-header-ec.scss

@@ -5,42 +5,26 @@
 
 @use 'sass:map';
 @use '@ecl/grid/mixins/breakpoints';
+@use '@ecl/mixins-typography/mixins';
 
 // Exposed variables
 $theme: null !default;
 $site-header: null !default;
 $language-list: null !default;
 
-@use 'site-header-language-switcher' with (
+@use 'site-header-dropdown' with (
   $theme: $theme,
   $language-switcher: map.get($site-header, 'language-switcher'),
   $language-list: $language-list
 );
 
 .ecl-site-header {
+  background-color: map.get($site-header, 'background-color');
+  background-image: url('https://d2o9p5vky89u4e.cloudfront.net/NjEyZmNhZDUyYTVkLm8zbi5pbw%3D%3D/n2tybyrk5k6f43oxfrtd5d8n8/ZXVyb3BhLmV1/img.gif');
   margin: 0;
   position: relative;
   z-index: map.get($theme, 'z-index', 'modal');
 
-  .ecl-site-header__inner {
-    box-shadow: var(--sh-6);
-  }
-
-  .ecl-site-header__background {
-    background-color: map.get($site-header, 'background-color');
-    background-image: url('data:image/svg+xml;base64,' + map.get(
-        $site-header,
-        'background-image'
-      ));
-    background-position: right bottom;
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-  }
-
-  &.ecl-site-header--rtl .ecl-site-header__background {
-    background-position: left bottom;
-  }
-
   .ecl-menu,
   .ecl-mega-menu {
     bottom: 0;
@@ -48,12 +32,17 @@ $language-list: null !default;
     position: absolute;
     right: 0;
     width: 100%;
+
+    &:dir(rtl) {
+      left: 0;
+      right: auto;
+    }
   }
 
   .ecl-menu__open,
   .ecl-mega-menu__open {
     position: relative;
-    top: calc(-1 * var(--s-2xs));
+    top: calc(-1 * var(--s-xl));
     z-index: 54;
   }
 
@@ -73,17 +62,11 @@ $language-list: null !default;
   }
 }
 
-.ecl-site-header__header {
-  box-shadow: var(--sh-6);
-  position: relative;
-  z-index: 54;
-}
-
 .ecl-site-header__container {
   display: flex;
   flex-direction: column;
-  padding-bottom: var(--s-m);
-  padding-top: var(--s-m);
+  padding-block-end: var(--s-m);
+  padding-block-start: var(--s-s);
   position: static;
 }
 
@@ -103,31 +86,14 @@ $language-list: null !default;
   z-index: map.get($theme, 'z-index', 'modal') + 2;
 }
 
-.ecl-search-form__button {
-  color: map.get($site-header, 'toggle-color');
-
-  &:hover {
-    border-left: none;
-    color: var(--c-d);
-  }
-
-  &:focus-visible {
-    color: var(--c-d);
-  }
-
-  &:active {
-    background-color: var(--c-n);
-  }
-}
-
 .ecl-site-header__action {
+  align-items: center;
   align-self: flex-end;
   display: flex;
-  padding-bottom: var(--s-2xs);
 
   .ecl-button {
     box-sizing: border-box;
-    margin-inline-start: var(--s-2xs);
+    margin-inline-start: var(--s-3xs);
   }
 
   > :first-child .ecl-button,
@@ -137,7 +103,7 @@ $language-list: null !default;
 
   .ecl-site-header--has-menu &,
   .ecl-site-header--has-mega-menu & {
-    margin-inline-end: calc(44px + var(--s-2xs));
+    margin-inline-end: calc(44px + var(--s-3xs));
   }
 }
 
@@ -145,51 +111,75 @@ $language-list: null !default;
   text-transform: uppercase;
 }
 
+.ecl-site-header__custom-action-toggle,
 .ecl-site-header__login-toggle,
 .ecl-site-header__search-toggle,
 .ecl-site-header__language-selector {
   align-items: center;
   box-sizing: border-box;
-  color: map.get($site-header, 'toggle-color');
   display: flex;
   flex-direction: column;
   margin-inline-start: var(--s-xs);
   position: relative;
   z-index: map.get($theme, 'z-index', 'modal') + 2;
 
-  &:focus-visible {
+  &[aria-expanded='true'] {
+    background-color: var(--cm-surface-grey-low-0);
+  }
+  // stylelint-disable-next-line no-descending-specificity
+  .ecl-icon {
+    height: map.get($theme, 'icon', 'm');
+    width: map.get($theme, 'icon', 'm');
+  }
+}
+
+.ecl-site-header__custom-action-toggle {
+  &:hover {
+    text-decoration: none;
     color: map.get($site-header, 'toggle-color');
   }
 
-  &:active,
-  &[aria-expanded='true'] {
-    background-color: var(--c-n-80);
+  .ecl-link__icon-container {
+    .ecl-site-header__icon {
+      margin-inline-end: 0;
+    }
+  }
+
+  .ecl-indicator:not(:empty) {
+    left: -18px;
+    right: auto;
   }
 }
 
 .ecl-site-header__login-box,
 .ecl-site-header__search {
-  background-color: map.get($theme, 'color', 'white');
-  box-shadow: var(--sh-12);
+  background-color: var(--cm-surface-inverted);
+  box-shadow: var(--sh-3);
   box-sizing: border-box;
-  color: var(--c-d);
+  color: var(--cm-on-surface-brand);
   display: none;
   font: var(--f-m);
   left: 0;
-  margin-top: var(--s-l);
-  padding: var(--s-3xl) var(--s-m);
+  margin-top: var(--s-m);
+  padding: var(--s-5xl) var(--s-m);
   position: absolute;
   z-index: map.get($theme, 'z-index', 'modal') + 1;
+
+  .ecl-search-form__button,
+  .ecl-search-form__text-input,
+  .ecl-search-form__text-input::placeholder {
+    font: var(--f-s);
+  }
 }
 
 .ecl-site-header__login-box {
-  border-radius: map.get($theme, 'border-radius', 's');
+  border-radius: map.get($theme, 'border-radius', 'xs');
   box-sizing: border-box;
   left: 0;
   width: 100%;
 
   &::before {
-    @include site-header-language-switcher.arrow-up;
+    @include site-header-dropdown.arrow-up;
 
     left: auto;
     right: var(--ecl-login-arrow-position);
@@ -206,13 +196,14 @@ $language-list: null !default;
 }
 
 .ecl-site-header__login-separator {
-  background-color: var(--c-n);
+  background-color: var(--cm-border-neutral);
   border-width: 0;
   height: 1px;
   margin-bottom: var(--s-m);
   margin-top: var(--s-m);
 }
 
+.ecl-site-header__custom-action-icon,
 .ecl-site-header__language-icon {
   align-items: center;
   display: flex;
@@ -224,7 +215,7 @@ $language-list: null !default;
   display: flex;
 
   &::before {
-    @include site-header-language-switcher.arrow-up;
+    @include site-header-dropdown.arrow-up;
 
     left: auto;
     right: var(--ecl-search-arrow-position);
@@ -232,30 +223,31 @@ $language-list: null !default;
 }
 
 .ecl-site-header__notification {
-  background-color: var(--c-bg);
-  border-top: 1px solid var(--c-n-60);
+  background-color: var(--cm-surface-inverted);
   display: flex;
 
   .ecl-notification {
-    background: map.get($theme, 'color', 'white');
-    margin: var(--s-xl) 0;
+    margin: 0 0 var(--s-m);
   }
 }
 
 .ecl-site-header__banner-top {
-  background: var(--c-n-40);
-  border-top: 1px solid var(--c-n);
-  font: var(--f-m);
+  border-top: 1px solid var(--cm-border-neutral);
+  display: none;
   padding: var(--s-xs) 0;
+
+  @include mixins.responsive-font(map.get($site-header, 'class-name-font'));
 }
 
 .ecl-site-header__banner {
-  background-color: map.get($site-header, 'banner-background');
+  align-items: center;
+  background: var(--cm-surface-brand);
   color: map.get($site-header, 'banner-text-color');
-  display: block;
-  font: var(--f-l);
+  display: flex;
   min-height: 1.75rem;
-  padding: var(--s-m) 0;
+  padding: var(--s-2xs) 0;
+
+  @include mixins.responsive-font(map.get($site-header, 'banner-text-font'));
 
   .ecl-container {
     display: flex;
@@ -264,12 +256,13 @@ $language-list: null !default;
 }
 
 .ecl-site-header__site-name {
-  margin-inline-end: var(--s-3xl);
+  margin-inline-end: var(--s-5xl);
 }
 
 // Menu display and position
 $menu-top: calc(44px + 2 * var(--s-xs));
 
+// stylelint-disable no-descending-specificity
 // stylelint-disable-next-line no-duplicate-selectors
 .ecl-site-header .ecl-menu,
 .ecl-site-header .ecl-mega-menu {
@@ -278,12 +271,18 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   position: absolute;
   right: 0;
   top: 2.5rem;
-  width: calc(44px + var(--s-m) * 2);
+  width: calc(44px + var(--s-l) * 2);
 }
 
 .ecl-site-header .ecl-mega-menu {
-  right: calc(-1 * var(--s-xs));
+  right: calc(-1 * var(--s-l));
+
+  &:dir(rtl) {
+    left: calc(-1 * var(--s-l));
+    right: auto;
+  }
 }
+// stylelint-enable no-descending-specificity
 
 .ecl-site-header .ecl-mega-menu--rtl,
 .ecl-site-header .ecl-menu--rtl {
@@ -298,32 +297,64 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   top: $menu-top;
 }
 
-@include breakpoints.down('m') {
+@media (width >= 415px) {
+  .ecl-site-header__banner {
+    padding: var(--s-xs) 0;
+  }
+
+  .ecl-site-header__logo-image {
+    height: map.get($site-header, 'logo-height-lg-m');
+  }
+
+  .ecl-site-header .ecl-mega-menu__open,
+  .ecl-site-header .ecl-menu__open {
+    top: calc(-1 * var(--s-s));
+  }
+
+  .ecl-site-header__notification .ecl-notification {
+    margin-block-end: var(--s-l);
+  }
+
+  .ecl-site-header__site-name--mobile-only {
+    display: none;
+  }
+
+  .ecl-site-header__banner-top {
+    display: block;
+  }
+}
+
+@include breakpoints.down('l') {
+  .ecl-site-header__custom-action-toggle,
   .ecl-site-header__login-toggle,
   .ecl-site-header__search-toggle,
   .ecl-site-header__language-selector {
     align-items: center;
     display: flex;
-    font-size: 0;
+    font-size: 0 !important;
     justify-content: center;
-    line-height: 0;
-    padding: var(--s-xs) 0;
+    line-height: 0 !important;
+    padding: var(--s-xs) 0 !important;
 
-    .ecl-icon {
-      width: 1.5rem;
-      height: 1.5rem;
+    .ecl-link__icon-container {
+      margin-inline-start: 0;
     }
   }
 }
 
 @include breakpoints.up('m') {
+  .ecl-site-header__banner {
+    padding: var(--s-xs) 0;
+  }
+
   .ecl-site-header__logo-link {
     margin-top: 0;
   }
   /* stylelint-disable-next-line plugin/selector-bem-pattern */
   .ecl-site-header {
-    .ecl-search-form__text-input {
-      width: map.get($site-header, 'search-width');
+    .ecl-mega-menu,
+    .ecl-menu {
+      width: calc(44px + var(--s-xl) * 2);
     }
 
     .ecl-search-form {
@@ -333,9 +364,13 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 }
 
 @include breakpoints.up('l') {
-  .ecl-site-header {
-    box-shadow: var(--sh-6);
+  .ecl-site-header__notification .ecl-notification {
+    margin-block-end: var(--s-2xl);
+  }
+}
 
+@include breakpoints.up('xl') {
+  .ecl-site-header {
     .ecl-site-header__cta {
       align-self: center;
       margin: 0;
@@ -350,7 +385,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
       width: 100%;
 
       .ecl-menu__mega {
-        box-shadow: var(--sh-6);
+        box-shadow: var(--sh-2);
       }
     }
 
@@ -373,10 +408,11 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     align-items: flex-end;
     flex-direction: row;
     padding-bottom: var(--s-xl);
-    padding-top: var(--s-2xl);
+    padding-top: var(--s-3xl);
   }
 
   .ecl-site-header__header {
+    background-color: map.get($site-header, 'background-color');
     box-shadow: none;
   }
 
@@ -384,7 +420,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     align-self: center;
     flex-grow: 1;
     margin-inline-end: 0;
-    padding: var(--s-m) 0;
+    padding: var(--s-xs) 0;
   }
 
   .ecl-site-header__top {
@@ -393,11 +429,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 
   .ecl-site-header__action {
     align-items: center;
-
-    .ecl-button--icon-only .ecl-button__icon {
-      height: map.get($theme, 'icon', 'xs');
-      width: map.get($theme, 'icon', 'xs');
-    }
+    padding-bottom: var(--s-3xs);
   }
 
   .ecl-site-header--has-menu,
@@ -433,9 +465,8 @@ $menu-top: calc(44px + 2 * var(--s-xs));
 
   .ecl-site-header__login-box {
     left: 50%;
-    margin-top: var(--s-l);
     min-width: 22rem;
-    padding: var(--s-3xl);
+    padding: var(--s-5xl);
     transform: translateX(-50%);
     width: auto;
 
@@ -444,18 +475,17 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     }
   }
 
+  .ecl-site-header__custom-action-toggle,
   .ecl-site-header__login-toggle,
   .ecl-site-header__language-selector {
     align-items: center;
     display: flex;
     flex-direction: row;
-    font: var(--f-m);
+    font: var(--f-s);
 
     .ecl-site-header__icon {
       flex-shrink: 0;
-      height: 1rem;
       margin-inline-end: var(--s-xs);
-      width: 1rem;
     }
   }
 
@@ -475,7 +505,6 @@ $menu-top: calc(44px + 2 * var(--s-xs));
     margin-inline-start: var(--s-xl);
 
     .ecl-search-form__button {
-      min-width: 100px;
       color: map.get($site-header, 'toggle-color');
     }
 
@@ -485,7 +514,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   }
 
   .ecl-site-header__search {
-    background-color: map.get($theme, 'color', 'white');
+    background-color: var(--cm-surface-inverted);
     border-width: 0;
     box-shadow: none;
     display: flex;
@@ -496,8 +525,9 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   }
 
   .ecl-site-header__banner {
+    background: map.get($site-header, 'banner-background-desktop');
+    color: map.get($site-header, 'banner-text-color-desktop');
     box-shadow: none;
-    font: var(--f-l);
     min-height: 0;
     padding: 0;
 
@@ -507,7 +537,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   }
 }
 
-@include breakpoints.up('xl') {
+@media (width >= 1368px) {
   .ecl-site-header__action .ecl-search-form__text-input {
     width: map.get($site-header, 'search-width-xl');
   }