diff --git a/src/components/bs5/header/header.scss b/src/components/bs5/header/header.scss index d1517d06..7797687f 100644 --- a/src/components/bs5/header/header.scss +++ b/src/components/bs5/header/header.scss @@ -4,55 +4,33 @@ .qld__header { // extract from health.qld.gov.au, to be removed, temporary workaround: - // future state: color: var($--qld-color-light-siteTitle); --#{$prefix}header-color-light-siteTitle: #022A50; --#{$prefix}header-color-light-designAccent: #6BBE27; - --#{$prefix}header-color-light-heading: #03213F; --#{$prefix}header-color-light-text: #414141; --#{$prefix}header-color-light-text__muted: #636363; --#{$prefix}header-color-light-link: #09549F; - --#{$prefix}header-color-light-link__visited: #551A8B; - --#{$prefix}header-color-light-button__text: #FFFFFF; - --#{$prefix}header-color-light-button: #09549F; - --#{$prefix}header-color-light-button__hover: #003E7D; --#{$prefix}header-color-light-focus: #0085B3; --#{$prefix}header-color-light-border: #EBEBEB; --#{$prefix}header-color-light-background: #FFFFFF; --#{$prefix}header-color-light-background__shade: #F5F5F5; - --#{$prefix}header-color-light-hint: #6f777b; - --#{$prefix}header-color-light-system-underline: #FFFFFF; --#{$prefix}header-color-light-underline: #3F7AB4; --#{$prefix}header-color-light-hover-underline: #09549F; - --#{$prefix}header-color-light-visited-underline: #8B63B0; - --#{$prefix}header-color-light-hover-visited-underline: #551A8B; --#{$prefix}header-color-light-alt-button: #008733; --#{$prefix}header-color-light-alt-button__hover: #00702B; - --#{$prefix}header-color-light-alt-border: #818181; - --#{$prefix}header-color-light-alt-background: #EBEBEB; - --#{$prefix}header-color-light-alt-background__shade: #E0E0E0; - --#{$prefix}header-color-light-alt-hint: #61696B; --#{$prefix}header-color-dark-siteTitle: #FFFFFF; --#{$prefix}header-color-dark-designAccent: #6BBE27; --#{$prefix}header-color-dark-heading: #FFFFFF; --#{$prefix}header-color-dark-text: #FFFFFF; --#{$prefix}header-color-dark-text__muted: #DEEBF9; --#{$prefix}header-color-dark-link: #FFFFFF; - --#{$prefix}header-color-dark-link__visited: #A668F4; - --#{$prefix}header-color-dark-button__text: #121940; - --#{$prefix}header-color-dark-button: #9AC02C; - --#{$prefix}header-color-dark-button__hover: #ADD33F; --#{$prefix}header-color-dark-focus: #01B0E5; --#{$prefix}header-color-dark-border: #1D9AC6; --#{$prefix}header-color-dark-background: #09549F; --#{$prefix}header-color-dark-background__shade: #04498F; - --#{$prefix}header-color-dark-system-underline: #03213F; --#{$prefix}header-color-dark-underline: #B5CCE2; --#{$prefix}header-color-dark-hover-underline: #FFFFFF; - --#{$prefix}header-color-dark-visited-underline: #B5CCE2; - --#{$prefix}header-color-dark-hover-visited-underline: #E1C2FF; --#{$prefix}header-color-dark-alt-button: #EFD700; --#{$prefix}header-color-dark-alt-button__hover: #FFE817; - --#{$prefix}header-color-dark-alt-border: #11B2D4; --#{$prefix}header-color-dark-alt-background: #05325F; --#{$prefix}header-color-dark-alt-background__shade: #052C53; --#{$prefix}header-underline__thickness-thin: 0.5px; @@ -210,7 +188,7 @@ align-items: center; color: var(--#{$prefix}header-color-light-link); font-size: .875rem; - line-height: 1.4285714286; + line-height: 1.42; padding-left: .75rem; &:hover { @@ -278,7 +256,7 @@ display: flex; flex-direction: column; font-size: .875rem; - line-height: 1.1428571429; + line-height: 1.14; padding: .5rem 1rem; //HERE @@ -305,7 +283,7 @@ @include media-breakpoint-up(md) { font-size: .875rem; - line-height: 1.1428571429; + line-height: 1.14; } @include media-breakpoint-up(lg) { @@ -576,7 +554,7 @@ .qld__header__heading { color: var(--#{$prefix}header-color-light-siteTitle); - font-family: ff-meta-web-pro, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + font-family: $font-family-sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.25; @@ -592,7 +570,7 @@ .qld__header__subline { color: var(--#{$prefix}header-color-light-text__muted); font-size: .875rem; - line-height: 1.1428571429; + line-height: 1.14; max-width: 80ch; @include media-breakpoint-up(md) { diff --git a/src/components/bs5/navbar/navbar.functions.js b/src/components/bs5/navbar/navbar.functions.js index 9a074498..b8cf1b7e 100644 --- a/src/components/bs5/navbar/navbar.functions.js +++ b/src/components/bs5/navbar/navbar.functions.js @@ -52,22 +52,29 @@ export function initializeNavbar() { const firstLi = parentUl.querySelector('.nav-item-home'); const dropdownMenu = toggle.parentNode.querySelector('.dropdown-menu'); - // Check if a Popper instance should be activated or not - const resizeHandler = () => { - if (window.innerWidth > 992) { - if (!dropdownMenu.dataset.popperActive) { - let popperInstance = initializeDropdownPopper(firstLi, dropdownMenu); - dropdownMenu.dataset.popperActive = 'true'; - activePoppers.push(popperInstance); - } - } else { - if (dropdownMenu.dataset.popperActive) { - activePoppers.forEach(popperInstance => popperInstance.destroy()); - activePoppers = []; // Clear out the array after destroying instances - delete dropdownMenu.dataset.popperActive; + // Check if a Popper instance should be activated or not + const resizeHandler = () => { + if (window.innerWidth > 992) { + if (!dropdownMenu.dataset.popperActive) { + let popperInstance = initializeDropdownPopper(firstLi, dropdownMenu); + dropdownMenu.dataset.popperActive = 'true'; + activePoppers.push(popperInstance); + } else { + // If the Popper instance exists, update its position + activePoppers.forEach(popperInstance => { + popperInstance.update(); + }); + } + } else { + if (dropdownMenu.dataset.popperActive) { + activePoppers.forEach(popperInstance => popperInstance.destroy()); + activePoppers = []; // Clear out the array after destroying instances + delete dropdownMenu.dataset.popperActive; + } } } - }; + + }; // Attach resize listener to update Popper on resize window.addEventListener('resize', resizeHandler); diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss index 33ed3931..2263663e 100644 --- a/src/components/bs5/navbar/navbar.scss +++ b/src/components/bs5/navbar/navbar.scss @@ -4,55 +4,20 @@ .navbar { // extract from health.qld.gov.au, to be removed, temporary workaround: - // future state: color: var($--qld-color-light-siteTitle); - --#{$prefix}navbar-color-light-siteTitle: #022A50; --#{$prefix}navbar-color-light-designAccent: #6BBE27; --#{$prefix}navbar-color-light-heading: #03213F; - --#{$prefix}navbar-color-light-text: #414141; - --#{$prefix}navbar-color-light-text__muted: #636363; --#{$prefix}navbar-color-light-link: #09549F; - --#{$prefix}navbar-color-light-link__visited: #551A8B; - --#{$prefix}navbar-color-light-button__text: #FFFFFF; --#{$prefix}navbar-color-light-button: #09549F; --#{$prefix}navbar-color-light-button__hover: #003E7D; --#{$prefix}navbar-color-light-focus: #0085B3; --#{$prefix}navbar-color-light-border: #EBEBEB; --#{$prefix}navbar-color-light-background: #FFFFFF; --#{$prefix}navbar-color-light-background__shade: #F5F5F5; - --#{$prefix}navbar-color-light-hint: #6f777b; - --#{$prefix}navbar-color-light-system-underline: #FFFFFF; - --#{$prefix}navbar-color-light-underline: #3F7AB4; - --#{$prefix}navbar-color-light-hover-underline: #09549F; - --#{$prefix}navbar-color-light-visited-underline: #8B63B0; - --#{$prefix}navbar-color-light-hover-visited-underline: #551A8B; --#{$prefix}navbar-color-light-alt-button: #008733; --#{$prefix}navbar-color-light-alt-button__hover: #00702B; - --#{$prefix}navbar-color-light-alt-border: #818181; --#{$prefix}navbar-color-light-alt-background: #EBEBEB; - --#{$prefix}navbar-color-light-alt-background__shade: #E0E0E0; - --#{$prefix}navbar-color-light-alt-hint: #61696B; - --#{$prefix}navbar-color-dark-siteTitle: #FFFFFF; - --#{$prefix}navbar-color-dark-designAccent: #6BBE27; - --#{$prefix}navbar-color-dark-heading: #FFFFFF; --#{$prefix}navbar-color-dark-text: #FFFFFF; - --#{$prefix}navbar-color-dark-text__muted: #DEEBF9; - --#{$prefix}navbar-color-dark-link: #FFFFFF; - --#{$prefix}navbar-color-dark-link__visited: #A668F4; - --#{$prefix}navbar-color-dark-button__text: #121940; - --#{$prefix}navbar-color-dark-button: #9AC02C; - --#{$prefix}navbar-color-dark-button__hover: #ADD33F; - --#{$prefix}navbar-color-dark-focus: #01B0E5; - --#{$prefix}navbar-color-dark-border: #1D9AC6; - --#{$prefix}navbar-color-dark-background: #09549F; - --#{$prefix}navbar-color-dark-background__shade: #04498F; - --#{$prefix}navbar-color-dark-system-underline: #03213F; - --#{$prefix}navbar-color-dark-underline: #B5CCE2; - --#{$prefix}navbar-color-dark-hover-underline: #FFFFFF; - --#{$prefix}navbar-color-dark-visited-underline: #B5CCE2; - --#{$prefix}navbar-color-dark-hover-visited-underline: #E1C2FF; - --#{$prefix}navbar-color-dark-alt-button: #EFD700; --#{$prefix}navbar-color-dark-alt-button__hover: #FFE817; - --#{$prefix}navbar-color-dark-alt-border: #11B2D4; --#{$prefix}navbar-color-dark-alt-background: #05325F; --#{$prefix}navbar-color-dark-alt-background__shade: #052C53;