@qld-gov-au/qgds-bootstrap5 1.0.1 → 1.0.2

package/src/components/bs5/navbar/_colours.scss

@@ -0,0 +1,100 @@
+.navbar {
+    // ------------------------------------------------------------------------------------------------------------------
+    //  1. Palette colours
+    // ------------------------------------------------------------------------------------------------------------------
+    --#{$prefix}navbar-color-crest-fill: #1D1D1D;
+    --#{$prefix}navbar-color-light-siteTitle: #022A50;
+    --#{$prefix}navbar-color-light-designAccent: #6BBE27;
+    --#{$prefix}navbar-color-light-text: #414141;
+    --#{$prefix}navbar-color-light-text__muted: #636363;
+    --#{$prefix}navbar-color-light-link: #09549F;
+    --#{$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-underline: #3F7AB4;
+    --#{$prefix}navbar-color-light-hover-underline: #09549F;
+    --#{$prefix}navbar-color-light-alt-button: #008733;
+    --#{$prefix}navbar-color-light-alt-button__hover: #00702B;
+    --#{$prefix}navbar-color-light-button__hover: #003E7D;
+
+    // Dark palette
+    --#{$prefix}navbar-color-dark-crest-fill: #FFFFFF;
+    --#{$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-focus: #01B0E5;
+    --#{$prefix}navbar-color-dark-border: #03151c;
+    --#{$prefix}navbar-color-dark-background: #09549F;
+    --#{$prefix}navbar-color-dark-background__shade: #04498F;
+    --#{$prefix}navbar-color-dark-underline: #B5CCE2;
+    --#{$prefix}navbar-color-dark-hover-underline: #FFFFFF;
+    --#{$prefix}navbar-color-dark-alt-button: #EFD700;
+    --#{$prefix}navbar-color-dark-alt-button__hover: #ADD33F;
+    --#{$prefix}navbar-color-dark-alt-background: #05325F;
+    --#{$prefix}navbar-color-dark-alt-background__shade: #052C53;
+
+    // ------------------------------------------------------------------------------------------------------------------
+    //  2. Overrides
+    // ------------------------------------------------------------------------------------------------------------------
+    --#{$prefix}navbar-border-width: 0.5rem;
+    --#{$prefix}navbar-link-color: var(--#{$prefix}navbar-color-light-link);
+    --#{$prefix}navbar-text-color: var(--#{$prefix}navbar-color-light-text);
+    --#{$prefix}navbar-text-focus-color: var(--#{$prefix}navbar-color-light-focus);
+    --#{$prefix}navbar-nav-text-color: var(--#{$prefix}navbar-color-light-text);
+    --#{$prefix}navbar-bg-color: var(--#{$prefix}navbar-color-light-background__shade);
+    --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}navbar-color-light-background);
+    --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-light-background);
+    --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}navbar-color-light-button__hover);
+    --#{$prefix}navbar-border-color: var(--#{$prefix}navbar-color-light-border);
+    --#{$prefix}navbar-border-accent: var(--#{$prefix}navbar-color-light-designAccent);
+    --#{$prefix}navbar-home-icon-color: var(--#{$prefix}navbar-color-light-text);
+    --#{$prefix}navbar-hover-color: var(--#{$prefix}navbar-color-light-button__hover);
+    --#{$prefix}navbar-icon-hover: var(--#{$prefix}navbar-color-light-alt-button__hover);
+    --#{$prefix}navbar-svg-color: var(--#{$prefix}navbar-color-light-alt-button);
+
+    // ------------------------------------------------------------------------------------------------------------------
+    //  3. Modes
+    // ------------------------------------------------------------------------------------------------------------------
+    .alt &,
+    .light & {
+        --#{$prefix}navbar-title-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}navbar-color-light-text);
+        --#{$prefix}navbar-border-color: var(--#{$prefix}light-grey);
+    }
+
+    .dark & {
+        --#{$prefix}navbar-bg-color: var(--#{$prefix}navbar-color-dark-background__shade);
+        --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}navbar-color-dark-background);
+        --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-dark-background);
+        --#{$prefix}navbar-title-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-text-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-nav-text-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-link-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-border-color: var(--#{$prefix}dark-border);
+        --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}navbar-color-dark-alt-button__hover);
+        --#{$prefix}navbar-icon-hover: var(--#{$prefix}navbar-color-dark-alt-button);
+        --#{$prefix}navbar-text-focus-color: var(--#{$prefix}navbar-color-dark-focus);
+        --#{$prefix}navbar-svg-color: var(--#{$prefix}navbar-color-dark-alt-button);
+    }
+
+    .dark-alt & {
+        --#{$prefix}navbar-bg-color: var(--#{$prefix}navbar-color-dark-background__shade);
+        --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}navbar-color-dark-background);
+        --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-dark-background);
+        --#{$prefix}navbar-title-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-text-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-nav-text-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-link-color: var(--#{$prefix}white);
+        --#{$prefix}navbar-border-color: var(--#{$prefix}dark-border);
+        --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}navbar-color-dark-alt-button__hover);
+        --#{$prefix}navbar-icon-hover: var(--#{$prefix}navbar-color-dark-alt-button);
+        --#{$prefix}navbar-text-focus-color: var(--#{$prefix}navbar-color-dark-focus);
+        --#{$prefix}navbar-svg-color: var(--#{$prefix}navbar-color-dark-alt-button);
+    }
+}

package/src/components/bs5/navbar/_icons.scss

@@ -0,0 +1,61 @@
+// ------------------------------------------------------------------------------------------------------------------
+//  1. Basic icons for navbar component
+// ------------------------------------------------------------------------------------------------------------------
+.navbar {
+    .dropdown-toggle {
+        .toggle_icon {
+            color: var(--qld-navbar-svg-color);
+            height: 1rem;
+            width: 1rem;
+            margin-left: .25rem;
+            vertical-align: middle;
+            -ms-flex-item-align: center;
+            align-self: center;
+
+            //Transitions for navbar
+            -webkit-transition: -webkit-transform .25s ease-in;
+            transition: -webkit-transform .25s ease-in;
+            transition: transform .25s ease-in;
+            transition: transform .25s ease-in, -webkit-transform .25s ease-in;
+
+            @include media-breakpoint-down(lg) {
+                height: 1.25rem;
+                width: 1.25rem;
+                // TO DO: This should be cleaner organised
+                float: right;
+                margin: .5rem;
+            }
+
+            @include media-breakpoint-down(md) {
+                height: 1rem;
+                width: 1rem;
+            }
+        }
+
+        &.show svg {
+            transform: rotate(180deg);
+        }
+    }
+
+    .dropdown-menu {
+        &__inner {
+            .chevron__icon {
+                height: 1.25rem;
+                width: 1.25rem;
+                color: var(--#{$prefix}navbar-svg-color);
+            }
+
+            a.dropdown-item {
+                .chevron__icon {
+                    float: right;
+                }
+            }
+        }
+    }
+
+    @include media-breakpoint-down(lg) {
+        .chevron__icon {
+            display: none;
+        }
+    }
+}

package/src/components/bs5/navbar/navbar.functions.js

@@ -0,0 +1,104 @@
+import { createPopper } from '@popperjs/core';
+/**
+ * Initializes a Popper.js instance for dropdown elements.
+ *
+ * @memberof module:Navbar
+ * @param {HTMLElement} referenceElement - The DOM element used as the reference.
+ * @param {HTMLElement} popperElement - The DOM element used as the popper.
+ * @returns {Object} The Popper instance created.
+ */
+export function initializeDropdownPopper(referenceElement, popperElement) {
+  const popperInstance = createPopper(referenceElement, popperElement, {
+    placement: 'bottom-start',
+    modifiers: [{
+      name: 'offset',
+      options: {
+        offset: [0, 5],
+      },
+    }, {
+      name: 'preventOverflow',
+      options: {
+        boundariesElement: 'viewport',
+      },
+    }],
+  });
+
+  return popperInstance;
+}
+
+let activePoppers = [];
+
+/**
+ * Initializes the navbar by setting up dropdown toggles and overlay interactions.
+ *
+ * @memberof module:Navbar
+ * @returns {void}
+ */
+export function initializeNavbar() {
+  const dropdownToggles = document.querySelectorAll('.navbar .dropdown-toggle');
+  const navbarCollapse = document.getElementById('navbarSupportedContent');
+  const overlay = document.getElementById('overlay');
+
+  if(overlay) {
+    
+    overlay.addEventListener('click', function () {
+      // Check if the navbar is open
+      if (navbarCollapse.classList.contains('show')) {
+        // If open, close it
+        navbarCollapse.classList.remove('show');
+        overlay.classList.remove('show');
+      }
+    });
+  }
+
+  // Overlay show/hide events
+  if(navbarCollapse) {
+    
+    navbarCollapse.addEventListener('show.bs.collapse', function () {
+      overlay.classList.add('show'); // Show the overlay
+    });
+    
+    navbarCollapse.addEventListener('hide.bs.collapse', function () {
+      overlay.classList.remove('show'); // Hide the overlay
+    });
+
+  }
+
+  // Initialize Popper and toggle handling
+  if(dropdownToggles.length > 0) {
+    dropdownToggles.forEach(toggle => {
+      toggle.addEventListener('click', (event) => {
+        event.preventDefault();
+        const parentUl = toggle.closest('ul.navbar-nav');
+        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 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);
+        resizeHandler(); // Call handler immediately to apply correct setting on init
+      });
+    });
+  }
+}

package/src/components/bs5/navbar/navbar.scss

@@ -0,0 +1,441 @@
+// //----------------------------------------------------------------------------------------------------------------------
+// // Primary navigation
+// // Palettes and second hand variables:
+// //----------------------------------------------------------------------------------------------------------------------
+@import './colours';
+@import './icons';
+
+// Component
+.navbar {
+    margin: 0;
+    padding: 0;
+    background-color: var(--#{$prefix}navbar-bg-color);
+    border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-accent);
+    align-items: center;
+
+    &-collapse {
+        @include media-breakpoint-down(md) {
+            width: 320px;
+        }
+
+        @include media-breakpoint-up(md) {
+            width: 26.25rem;
+        }
+
+        @include media-breakpoint-down(lg) {
+            z-index: 99;
+            position: fixed;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            overflow: auto;
+            background-color: var(--#{$prefix}navbar-bg-color);
+            overflow: hidden;
+            /* Initially positioned off-screen to the right */
+            transition: transform .25s ease-in-out;
+            transform: translateX(100%);
+        }
+
+        &.collapsing {
+            transition: none;
+            /* Disable transitions when state is changing to avoid flickering */
+        }
+
+        &.show {
+            transform: translateX(0);
+            /* Slide into view */
+        }
+    }
+
+    &__header {
+        display: flex;
+        background-color: var(--#{$prefix}navbar-bg-color);
+        color: var(--#{$prefix}navbar-text-color);
+        align-items: center;
+        box-shadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1);
+        position: relative;
+
+        @include media-breakpoint-up(lg) {
+            display: none;
+        }
+
+        .qld__main-nav__toggle {
+            margin-left: auto;
+        }
+
+        .navbar__heading {
+            font-size: .875rem;
+            line-height: 1.42;
+            margin: 0 1rem;
+            font-weight: normal;
+
+            @include media-breakpoint-up(md) {
+                font-size: 1rem;
+                line-height: 1.5;
+                line-height: 4.5rem;
+            }
+
+            @include media-breakpoint-up(lg) {
+                display: none;
+            }
+        }
+
+        // Menu open and close toggles
+        .navbar__toggle {
+            display: flex;
+            flex-direction: column;
+            padding: 0.5rem 1rem 0.25rem 1rem;
+            margin-left: auto;
+            font-size: .875rem;
+            line-height: 1.14;
+            border: 0;
+            appearance: none;
+            background-color: transparent;
+            cursor: pointer;
+            align-items: center;
+            color: var(--#{$prefix}navbar-text-color);
+            border-left: solid 1px var(--#{$prefix}navbar-border-color);
+
+            @include media-breakpoint-up(lg) {
+                &:focus {
+                    outline: 2px solid var(--#{$prefix}navbar-text-focus-color);
+                    outline-offset: 2px;
+                }
+            }
+
+            &:hover {
+                background-color: var(--#{$prefix}navbar-menuitem-hover);
+                svg {
+                    color: var(--#{$prefix}navbar-icon-hover);
+                }
+            }
+
+            @include media-breakpoint-up(md) {
+                padding: 0.75rem 1rem;
+            }
+
+            &-text {
+                font-size: 0.625rem;
+                margin-top: 0.25rem;
+                line-height: 1rem;
+
+                @include media-breakpoint-up(md) {
+                    margin-top: 0.625rem;
+                    font-size: .875rem;
+                    line-height: 1.14;
+                }
+            }
+
+            &:before {
+                font-size: 1rem;
+                line-height: 1;
+                margin-bottom: 0.25rem;
+                display: block;
+                text-align: center
+            }
+
+            svg {
+                height: 1rem;
+                width: 1rem;
+                margin: 1px auto;
+                color: var(--#{$prefix}navbar-svg-color);
+
+                @include media-breakpoint-up(md) {
+                    height: 1.25rem;
+                    width: 1.25rem;
+                    margin: 0 auto;
+                }
+            }
+
+            &--open {
+                background-color: transparent;
+
+                &:active {
+                    background-color: var(--#{$prefix}navbar-menuitem-hover);
+                }
+            }
+
+            &--close {
+                background-color: transparent;
+
+                @include media-breakpoint-up(md) {
+                    border-width: 2px
+                }
+
+                &:active {
+                    background-color: var(--#{$prefix}navbar-menuitem-hover);
+                }
+            }
+        }
+    }
+
+    &__overlay {
+        -webkit-transition: opacity .25s ease-in-out;
+        transition: opacity .25s ease-in-out;
+        background-color: var(--#{$prefix}navbar-color-dark-alt-background__shade);
+        cursor: pointer;
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        opacity: .4;
+        display: none;
+        z-index: 2;
+    }
+
+    &__overlay.show {
+        opacity: .95;
+        right: 0;
+        display: block;
+
+        @include media-breakpoint-up(lg) {
+            display: none;
+        }
+    }
+
+    .navbar-nav {
+        $navbar-padding-x: 0;
+        $navbar-padding-y: 0;
+        --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+        --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
+
+        @include media-breakpoint-down(lg) {
+            border-left: 4px solid var(--#{$prefix}navbar-border-accent);
+        }
+
+        .dropdown-container {
+            display: flex;
+        }
+    }
+
+    .dropdown { 
+        &-menu {
+
+            // Override the default bs-popper margin
+            &[data-bs-popper] {
+                margin-top: 0;
+            }
+
+            background-color: var(--#{$prefix}navbar-dropdown-bg-color);
+            
+            @include media-breakpoint-up(lg) {
+                left: 0;
+                right: 0;
+                width: 1320px; //TO DO: FIX
+                padding: 3rem 4rem;
+                margin-top: 0.5rem;
+                margin-left: -4rem;
+                border-radius: 0.75rem;
+                -webkit-box-shadow: 0rem 0.0625rem 0.125rem rgba(0, 0, 0, .3), 0rem 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, .15);
+                box-shadow: 0rem 0.0625rem 0.125rem rgba(0, 0, 0, .3), 0rem 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, .15);
+            }
+
+            @include media-breakpoint-down(lg) {
+                border: none;
+                border-radius: 0;
+                box-shadow: none;
+                -webkit-box-shadow: none;
+                padding: 0;
+                &.show {
+                    border-right: solid 2px var(--#{$prefix}navbar-border-color);
+                    border-left: solid 0.25rem var(--#{$prefix}navbar-dropdown-bg-color);
+                    margin-left: -0.25rem;
+                }
+            }
+
+            &__inner {
+                .dropdown-menu__featured {
+                    color: var(--#{$prefix}navbar-link-color);
+                    font-size: 1.5rem;
+                    text-decoration: none;
+                    font-weight: 700;
+
+                    &:hover {
+                        text-decoration: underline;
+                        text-underline-offset: 5px;
+                        background-color: inherit;
+                    }
+
+                    &:focus {
+                        text-decoration: underline;
+                        text-underline-offset: 5px;
+                        background-color: inherit;
+                    }
+                }
+
+                p.dropdown-menu__description {
+                    margin: 1rem 0 0 0;
+                    color: var(--#{$prefix}navbar-text-color);
+                }
+
+                .dropdown-menu__view_all {
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    text-decoration: none;
+                    color: var(--#{$prefix}navbar-link-color);
+
+                    &:hover {
+                        text-decoration: underline;
+                        text-underline-offset: 5px;
+                        background-color: inherit;
+                    }
+
+                    &:focus {
+                        text-decoration: underline;
+                        text-underline-offset: 5px;
+                        background-color: inherit;
+                    }
+                }
+
+                li {
+                    a.dropdown-item {
+                        font-weight: 600;
+                        padding: 1rem 0;
+                        color: var(--#{$prefix}navbar-link-color);
+                        border-bottom: solid 1px var(--#{$prefix}navbar-border-color);
+
+                        &:hover {
+                            text-decoration: underline;
+                            text-underline-offset: 5px;
+                            background-color: inherit;
+
+                            @include media-breakpoint-down(lg) {
+                                border-left: solid 0.25rem var(--#{$prefix}navbar-menuitem-hover-border);
+                                margin-left: -0.25rem;  
+                            }
+                        }
+
+                        &:focus {
+                            text-decoration: underline;
+                            text-underline-offset: 5px;
+                            background-color: inherit;
+                        }
+
+                        &::after {
+                            width: 1.25rem;
+                            height: 1.25rem;
+                            margin: 0 0.5rem 0 0.5rem;
+                            content: "";
+                            -webkit-box-flex: 0;
+                            -ms-flex: 0 0 auto;
+                            flex: 0 0 auto;
+                            -webkit-transition: margin .2s ease;
+                            -o-transition: margin .2s ease;
+                            transition: margin .2s ease;
+                            -webkit-mask-repeat: no-repeat;
+                            mask-repeat: no-repeat;
+                            -webkit-mask-position: center;
+                            mask-position: center;
+                        }
+
+                        @include media-breakpoint-down(lg) {
+                            padding: 1rem;
+                            white-space: normal;
+                            overflow-wrap: break-word;
+                        }
+                    }
+                }
+            }
+
+            .dropdown-item__description {
+                color: var(--#{$prefix}navbar-text-color);
+                font-size: .875rem;
+                line-height: 1.42;
+                font-weight: normal;
+                padding: 1rem 0rem;
+            }
+
+            hr {
+                margin: 2rem 0 2rem 0;
+                border-bottom: solid 2px var(--#{$prefix}navbar-border-color);
+                padding-right: calc(var(--qld-gutter-x)* .5);
+                padding-left: calc(var(--qld-gutter-x)* .5);
+            }
+        }
+    }
+    .nav-item {
+        &.nav-item-home {
+            display: flex;
+            a.nav-link {
+                display: inline-flex;
+                @include media-breakpoint-down(lg) {
+                    width: 100%;
+                }
+                span.home-label {
+                    margin-left: 10px;
+                    @include media-breakpoint-up(lg) {
+                        display: none;
+                    }
+                }
+            }
+            .qld__icon {
+                display: block;
+                height: 2rem;
+                width: 1.5rem;
+                color: var(--#{$prefix}navbar-home-icon-color);
+            }
+        }
+        a.nav-link {
+            color: var(--#{$prefix}navbar-nav-text-color);
+            text-decoration: none;
+            line-height: 2rem;
+            width: 100%;
+            overflow-y: visible;
+            position: relative;
+            $navbar-nav-link-padding-x: 0.75rem;
+            $navbar-nav-link-padding-y: 0.75rem;
+
+            --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
+            --#{$prefix}nav-link-padding-x: #{$navbar-nav-link-padding-x};
+            --#{$prefix}nav-link-padding-y: #{$navbar-nav-link-padding-y};
+
+            @include media-breakpoint-down(lg) {
+                border-bottom: solid 1px var(--#{$prefix}navbar-border-color);
+            }
+
+            &.show,
+            &:hover {
+                background-color: var(--#{$prefix}navbar-menuitem-hover);
+                text-decoration: underline;
+
+                @include media-breakpoint-up(lg) {
+                    border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-menuitem-hover-border);
+                    margin-bottom: -0.5rem;
+                }
+            }
+
+            &:visited {
+                color: var(--#{$prefix}navbar-nav-text-color);
+            }
+
+            &-home-active {
+                @include media-breakpoint-up(lg) {
+                    background-color: var(--#{$prefix}navbar-bg-color);
+                    border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-bg-color);
+                    margin-bottom: -0.5rem;
+                }
+            }
+        }
+
+        a.dropdown-toggle {
+            // Default toggle icon
+            &::before,
+            &::after {
+                content: none;
+            }
+        }
+    }
+
+    // Navbar
+    @include media-breakpoint-down(lg) {
+        //Bootstrap shared navigation elements, hidden for mobile/tablet
+        .dropdown-menu__featured,
+        .dropdown-menu__description,
+        .dropdown-menu__inner hr,
+        .dropdown-menu__view_all,
+        .dropdown-item__description {
+            display: none;
+        }
+    }
+}