@qld-gov-au/qgds-bootstrap5 1.1.41 → 2.0.0

package/src/components/bs5/header/header.scss

@@ -1,319 +1,46 @@
-// ----------------------------------------------------------------------------------------------------------------------
-// Header - palettes and second hand variables:
-@import "./colours";
-@import "./icons";
-// ----------------------------------------------------------------------------------------------------------------------
-
-.qld__header {
-  color: var(--#{$prefix}header_color);
-  background: var(--#{$prefix}header_bg);
-  font-size: 1rem;
+@use "./header-variables" with (
+  $prefix: $prefix
+);
 
-  @include media-breakpoint-up(sm) {
-    font-size: 1.25rem;
-  }
+// Play nice with navbar header.
+:root {
+  --qld-header-preheader-height: 52px;
 
-  .container-fluid {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 86rem;
+  @include media-breakpoint-up(md) {
+    --qld-header-preheader-height: 72px;
   }
 
-  &__skip-link {
-    line-height: 1;
+  @include media-breakpoint-up(lg) {
+    --qld-header-preheader-height: 36px;
+  }
+}
 
-    &__linkstyle {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      border: 0;
-      color: var(--#{$prefix}header_skip-link_color);
+.qld-header {
+  @extend %header-variables;
+  color: var(--#{$prefix}header-color-text);
+  background: var(--#{$prefix}header-color-bg);
+  font-size: 1rem;
 
-      &:focus {
-        top: 1rem;
-        left: 1rem;
-        padding: 1.5rem;
-        clip: auto;
-        height: auto;
-        margin: 0;
-        overflow: visible;
-        position: absolute;
-        width: auto;
-        color: var(--#{$prefix}header_skip-link_focus_text_color);
-        background-color: var(--#{$prefix}header_skip-link_focus_bg_color);
-        outline: 3px solid var(--#{$prefix}header_skip-link_focus_outline_color);
-        z-index: 999;
-      }
-    }
+  @include media-breakpoint-up(sm) {
+    font-size: 1.25rem;
   }
 
-  &__pre-header {
-    color: var(--#{$prefix}header__pre-header_text_color);
-    background-color: var(--#{$prefix}header__pre-header_bg_color);
-    box-shadow: var(--#{$prefix}header__pre-header_boxshadow);
+  &-pre-header {
+    //
+    display: flex;
+    align-items: center;
+    font-size: 0.875rem; // set here so whitespace doesn't add extra height.
+    color: var(--#{$prefix}header-pre-header-color-text);
+    background-color: var(--#{$prefix}header-pre-header-color-bg);
+    box-shadow: var(--#{$prefix}header-pre-header-boxshadow);
     position: relative;
     z-index: 2;
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
-
-    @include media-breakpoint-up(md) {
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-
-      .container-fluid {
-        padding-left: 2rem;
-        padding-right: 2rem;
-      }
-    }
-
-    @include media-breakpoint-up(lg) {
-      padding-bottom: 0.5rem;
-      padding-top: 0.5rem;
-
-      a {
-        font-size: 0.875rem;
-        line-height: 1;
-        text-decoration: none;
-        -webkit-text-decoration: none;
-        text-decoration-color: var(
-          --#{$prefix}header__pre-header__anchor_text_decoration_color
-        );
-        text-decoration-thickness: var(
-          --#{$prefix}header__pre-header__anchor_text_decoration_thickness
-        );
-        text-underline-offset: var(
-          --#{$prefix}header__pre-header__anchor_text_decoration_offset
-        );
-        -webkit-text-decoration-skip: ink;
-        text-decoration-skip-ink: auto;
-
-        &:focus,
-        &:hover {
-          text-decoration: underline;
-          -webkit-text-decoration: underline;
-          text-decoration-color: var(
-            --#{$prefix}header__pre-header__anchor__focus_text_decoration_color
-          );
-          text-decoration-thickness: var(
-            --#{$prefix}header__pre-header__anchor__focus_text_decoration_thickness
-          );
-        }
-
-        &:disabled,
-        a[disabled] {
-          text-decoration: none;
-          -webkit-text-decoration: none;
-        }
-      }
-    }
-
-    .container-fluid {
-      display: flex;
-    }
-
-    &-brand-image {
-      display: block;
-      height: 1.75rem;
-      width: auto;
-
-      @include media-breakpoint-up(md) {
-        height: 2.5rem;
-      }
-
-      @include media-breakpoint-up(lg) {
-        display: none;
-      }
-    }
-
-    &-url {
-      display: none;
-      color: var(--#{$prefix}header__pre-header__url_text_color);
+    height: var(--qld-header-preheader-height);
 
-      @include media-breakpoint-up(lg) {
-        display: inline-block;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-    }
-
-    .qld__header__cta-wrapper {
-      display: none;
-      margin-left: auto;
-
-      // Preheader CTA dropdown - custom functionality:
-      .dropdown {
-        line-height: 1.5;
-        .dropdown-menu.show {
-          width: 20.25rem;
-          min-height: 1rem;
-          padding: 0rem 2rem 1.75rem;
-          border-radius: 0 0 0.75rem 0.75rem;
-          border: 0;
-          background-color: var(
-            --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color
-          );
-          box-shadow: var(--#{$prefix}header__pre-header_boxshadow);
-          margin-top: 0.8rem !important; // Overrides the default bs-popper margin
-
-          hr {
-            margin: 1.5rem 0;
-            color: var(--#{$prefix}header__CTA_border_color);
-            border-color: var(--#{$prefix}header__CTA_border_color);
-            opacity: 1;
-          }
-
-          p {
-            font-size: 0.875rem;
-            line-height: 1.5;
-          }
-
-          a.btn-primary {
-            margin: 1.25rem 0 0.5rem 0;
-            text-decoration-color: inherit;
-            text-decoration-thickness: inherit;
-          }
-
-          .group {
-            a {
-              font-weight: 600;
-              color: var(--#{$prefix}header__CTA_text_color);
-              text-decoration: underline var(--#{$prefix}header__CTA_text_color);
-
-              &:visited {
-                color: var(--#{$prefix}header__CTA_text_color);
-              }
-            }
-          }
-
-          li.qld__header__cta-list {
-            a {
-              font-weight: 400;
-              position: relative;
-              border-bottom: solid 1px var(--#{$prefix}header__CTA_border_color);
-              padding: 1rem 1.75rem 1rem 0;
-              line-height: 1.5;
-              align-items: center;
-
-              &:visited {
-                color: var(--#{$prefix}header__CTA_text_color);
-              }
-
-              span,
-              svg {
-                vertical-align: middle;
-              }
-
-              svg.viewMoreCTA {
-                margin-left: 0.5rem;
-              }
-
-              svg.cta_arrow {
-                position: absolute;
-                right: 0;
-              }
-            }
-
-            a.view-all {
-              text-decoration: underline;
-              text-underline-offset: var(--qld-link-underline-offset);
-              text-decoration-thickness: var(--qld-link-underline-thickness);
-              padding-right: 0;
-
-              &:focus,
-              &:hover {
-                text-decoration: underline;
-                -webkit-text-decoration: underline;
-                text-decoration-color: var(
-                  --#{$prefix}header__pre-header__anchor__focus_text_decoration_color
-                );
-                text-decoration-thickness: var(
-                  --#{$prefix}header__pre-header__anchor__focus_text_decoration_thickness
-                );
-              }
-
-              &:disabled,
-              a[disabled] {
-                text-decoration: none;
-                -webkit-text-decoration: none;
-              }
-            }
-          }
-        }
-
-        ul.dropdown-menu.show:has(> li) {
-          padding-bottom: 1.25rem;
-        }
-
-        .dropdown-menu::before {
-          position: absolute;
-          content: " ";
-          height: 6px;
-          top: -6px;
-          left: 0;
-          right: 0px;
-          background-color: var(
-            --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color
-          );
-          pointer-events: none; // so that pseudo-element isn't clickable
-        }
-      }
-
-      @include media-breakpoint-up(lg) {
-        display: flex;
-      }
-
-      .qld__header__cta-link {
-        font-size: 0.875rem;
-        line-height: 1.42;
-        padding-left: 0.75rem;
-        margin: 0 0.5rem;
-        align-items: center;
-        color: var(--#{$prefix}header__cta-wrapper__cta-link_text_color);
-      }
-
-      .qld__header__cta-link-icon {
-        height: 1rem;
-        width: 1rem;
-        margin-left: 0.5rem;
-        text-align: center;
-        display: inline-block;
-        color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_color);
-
-        svg,
-        i {
-          height: 100%;
-          width: 100%;
-        }
-      }
-    }
-
-    a {
-      display: flex;
-
-      svg {
-        color: var(--#{$prefix}header__pre-header__anchor_text_color);
-      }
-
-      &:focus {
-        outline: 3px solid
-          var(--#{$prefix}header__pre-header__anchor__focus_outline_color);
-        outline-offset: 2px;
-      }
-
-      &::-moz-focus-inner {
-        border: 0;
-      }
-    }
-
-    .qld__header__main-nav-controls {
+    .qld-header-main-nav-controls {
       display: flex;
       flex-direction: row;
       justify-content: end;
-      left: 0;
       position: absolute;
       right: 0;
       top: 0;
@@ -323,10 +50,8 @@
       }
     }
 
-    .qld__header__toggle-main-nav {
+    .qld-header-toggle-main-nav {
       align-items: center;
-      -webkit-appearance: none;
-      -moz-appearance: none;
       appearance: none;
       background-color: transparent;
       border: 0;
@@ -358,7 +83,7 @@
         padding: 0.75rem 1rem 0.625rem 1rem;
       }
 
-      .qld__main-nav__toggle-text {
+      &-text {
         font-size: 0.625rem;
         margin-top: 0.125rem;
 
@@ -396,149 +121,281 @@
     }
   }
 
-  &__pre-header-url {
+  &-link {
     font-size: 0.875rem;
-  }
+    line-height: 1;
 
-  &__main {
-    position: relative;
+    &,
+    &:visited {
+      color: var(--qld-header-pre-header-color-link) !important;
+      text-decoration: none;
+      text-decoration-color: var(
+        --#{$prefix}header-pre-header-color-link-decoration
+      ) !important;
+      text-decoration-thickness: 0.5px;
+      text-underline-offset: 0.3em;
+      text-decoration-skip-ink: auto;
+    }
 
-    .container-fluid {
-      align-items: center;
-      display: flex;
-      width: 100%;
+    &:focus,
+    &:hover {
+      text-decoration: underline;
+      text-decoration-color: var(
+        --#{$prefix}header-pre-header-color-link-decoration-focus
+      ) !important;
+      text-decoration-thickness: 2px;
+    }
 
-      @include media-breakpoint-up(md) {
-        padding: 0 2rem;
-      }
+    &:disabled,
+    a[disabled] {
+      text-decoration: none;
+    }
 
-      @include media-breakpoint-up(lg) {
-        height: auto;
-        justify-content: space-between;
+    &.has-no-underline {
+      &:focus,
+      &:hover {
+        text-decoration: none;
       }
     }
+  }
 
-    .qld__header__brand {
-      padding: 1rem 0;
-      display: flex;
-      align-items: center;
-      font-variant-numeric: lining-nums;
+  &-link-icon {
+    height: 1.25rem;
+    width: 1.25rem;
+    margin-right: 0.5rem;
+    color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_color);
+  }
+
+  &-logo {
+    display: block;
+    width: auto;
+
+    a:hover & {
+      filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08))
+        drop-shadow(0 13px 20px rgba(0, 0, 0, 0.08));
+    }
+
+    .qld-header-pre-header & {
+      height: 1.75rem;
 
       @include media-breakpoint-up(md) {
-        padding: 1.25rem 0;
+        height: 2.5rem;
       }
 
       @include media-breakpoint-up(lg) {
-        flex-grow: 1;
-        padding: 32px 0;
+        display: none;
       }
+    }
+  }
+
+  // Preheader CTA dropdown - custom functionality:
+  .dropdown {
+    line-height: 1.5;
+  }
+
+  .dropdown-menu {
+    // Bootstrap defined custom properties
+    --#{$prefix}dropdown-link-hover-bg: transparent;
+    --#{$prefix}dropdown-link-active-bg: transparent;
+    //
+    width: 20.25rem;
+    min-height: 1rem;
+    padding: 0rem 2rem 1.75rem;
+    border-radius: 0 0 0.75rem 0.75rem;
+    border: 0;
+    background-color: var(
+      --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color
+    );
+    box-shadow: var(--#{$prefix}header-pre-header-boxshadow);
+    margin-top: 0.8rem !important; // Overrides the default bs-popper margin
+
+    &::before {
+      position: absolute;
+      content: " ";
+      height: 6px;
+      top: -6px;
+      left: 0;
+      right: 0px;
+      background-color: var(
+        --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color
+      );
+      pointer-events: none; // so that pseudo-element isn't clickable
+    }
+
+    hr {
+      margin: 1.5rem 0;
+      color: var(--#{$prefix}header__CTA_border_color);
+      border-color: var(--#{$prefix}header__CTA_border_color);
+      opacity: 1;
+    }
 
+    p {
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    a.btn-primary {
+      margin: 1.25rem 0 0.5rem 0;
+      text-decoration-color: inherit;
+      text-decoration-thickness: inherit;
+    }
+
+    .group {
       a {
-        text-decoration: none;
-        display: flex;
-
-        &:hover {
-          color: var(--#{$prefix}header__brand__anchor__hover_text_color);
-          text-decoration: underline;
-
-          .qld__header__brand-image {
-            color: var(
-              --#{$prefix}header__brand__anchor__hover_brand-image__text_color
-            );
-            filter: var(
-              --#{$prefix}header__brand__anchor__hover_brand-image__filter
-            );
-          }
-
-          .qld__header__heading,
-          .qld__header__subline {
-            color: var(
-              --#{$prefix}header__brand__anchor__hover_headingsubline__text_color
-            );
-          }
+        font-weight: 600;
+        color: var(--#{$prefix}header__CTA_text_color);
+        text-decoration: underline var(--#{$prefix}header__CTA_text_color);
+
+        &:visited {
+          color: var(--#{$prefix}header__CTA_text_color);
         }
       }
     }
+  }
 
-    .qld__header__brand-image {
-      display: none;
-      color: var(--#{$prefix}header__brand-image__crest_fill);
+  ul.dropdown-menu.show:has(> li) {
+    padding-bottom: 1.25rem;
+  }
 
-      @include media-breakpoint-up(lg) {
-        display: block;
-      }
+  .dropdown-item {
+    position: relative;
+    border-bottom: solid 1px var(--#{$prefix}header__CTA_border_color);
+    padding: 1rem 1.75rem 1rem 0;
+    line-height: 1.5;
 
-      &_subtype {
-        border-right: 2px solid
-          var(--#{$prefix}header__brand-image__subtype__border_color);
-        color: var(--#{$prefix}header__brand-image__subtype__text_color);
-        margin-right: 1.5rem;
-        padding-right: 1.5rem;
-      }
+    &:visited {
+      color: var(--#{$prefix}header__CTA_text_color);
+    }
 
-      img {
-        margin: auto 0;
-        display: block;
+    span,
+    svg {
+      vertical-align: middle;
+    }
+  }
+
+  &-dropdown-icon {
+    vertical-align: middle;
+    margin-left: 0.5rem;
+    color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_color);
+    height: 1rem;
+    width: 1rem;
+  }
+
+  &-dropdown-item-icon {
+    color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_color);
+    position: absolute;
+    right: 0;
+  }
+
+  &-main {
+    position: relative;
+  }
+
+  &-brand {
+    font-variant-numeric: lining-nums;
+    text-decoration: none;
+
+    a:hover {
+      color: var(--#{$prefix}header__brand__anchor__hover_text_color);
+
+      .qld-header-brand-image {
+        color: var(
+          --#{$prefix}header__brand__anchor__hover_brand-image__text_color
+        );
       }
 
-      svg {
-        vertical-align: text-bottom;
+      .qld-header-heading,
+      .qld-header-subline {
+        color: var(
+          --#{$prefix}header__brand__anchor__hover_headingsubline__text_color
+        );
+        text-decoration: underline;
+        text-decoration-color: currentColor !important;
       }
     }
 
-    .qld__header__site-name {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+    @include media-breakpoint-up(lg) {
+      padding-block: 1.5rem;
+    }
+  }
 
-      .qld__header__secondary-image {
-        height: 2.5rem;
+  &-brand-image {
+    display: none;
+    color: var(--#{$prefix}header__brand-image__crest_fill);
 
-        @include media-breakpoint-up(md) {
-          height: 3.5rem;
-        }
-      }
+    @include media-breakpoint-up(lg) {
+      display: block;
+    }
 
-      .qld__header__heading {
-        font-size: 1rem;
-        font-weight: 700;
-        line-height: 1.25;
-        margin: 0;
-        padding: 0;
-        font-family: $font-family-sitename;
-        color: var(--#{$prefix}header__site-name__heading__text_color);
+    img {
+      margin: auto 0;
+      display: block;
+    }
 
-        @include media-breakpoint-up(md) {
-          font-size: 1.25rem;
-          line-height: 1.2;
-        }
-      }
+    svg {
+      vertical-align: text-bottom;
+    }
+  }
 
-      .qld__header__subline {
-        color: var(--#{$prefix}header__site-name__subline__text_color);
-        font-size: 0.875rem;
-        line-height: 1.14;
-        max-width: 80ch;
+  &-secondary-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    text-wrap: balance;
+    padding-block: 1rem;
 
-        @include media-breakpoint-up(md) {
-          font-size: 1rem;
-          line-height: 1.25;
-        }
-      }
+    @include media-breakpoint-up(md) {
+      padding-block: 1.5rem;
+    }
+
+    @include media-breakpoint-up(lg) {
+      padding-block: 0;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      justify-content: center;
+      border-left: 2px solid
+        var(--#{$prefix}header__brand-image__subtype__border_color);
+      margin-left: 1.5rem;
+      padding-left: 1.5rem;
     }
   }
 
-  //Reduce size of whitebar on masterbrand
-  &__main--masterbrand--true {
-    @include media-breakpoint-down(lg) {
-      height: 0;
+  &-secondary-image {
+    height: 2.5rem;
+
+    @include media-breakpoint-up(md) {
+      height: 3.5rem;
     }
   }
 
-  &__site-search {
-    //Auto margins for LTR and RTL
-    @extend .ms-auto;
+  &-site-title {
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.25;
+    margin: 0 1ch 0 0;
+    padding: 0;
+    font-family: $font-family-sitename;
+    color: var(--#{$prefix}header__site-name__heading__text_color);
+
+    @include media-breakpoint-up(md) {
+      font-size: 1.25rem;
+      line-height: 1.2;
+    }
+  }
 
+  &-subline {
+    color: var(--#{$prefix}header__site-name__subline__text_color);
+    font-size: 0.875rem;
+    line-height: 1.14;
+    max-width: 80ch;
+
+    @include media-breakpoint-up(md) {
+      font-size: 1rem;
+      line-height: 1.25;
+    }
+  }
+
+  &-site-search {
     form {
       display: flex;
       position: relative;
@@ -546,7 +403,7 @@
 
     @include media-breakpoint-down(lg) {
       // Mobile search open class
-      &--open {
+      &.is-open {
         z-index: 1;
         display: block;
         position: absolute;
@@ -554,11 +411,22 @@
         right: 0;
         top: 0.4rem;
         padding: 1rem 0;
-        background-color: var(--#{$prefix}header_bg);
+        background-color: var(--#{$prefix}header-color-bg);
       }
-      &--closed {
+      &.is-closed {
         display: none;
       }
     }
+
+    // Some default styling overrides.
+    @include media-breakpoint-up(lg) {
+      .container {
+        display: contents;
+      }
+    }
+
+    .qld-search-input {
+      min-width: auto;
+    }
   }
 }