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

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

@@ -1,271 +0,0 @@
-.qld__header {
-  // ------------------------------------------------------------------------------------------------------------------
-  //  1. Common vars
-  // ------------------------------------------------------------------------------------------------------------------
-  // Shared thickness, offset etc.
-  --#{$prefix}header-underline__thickness-thin: 0.5px;
-  --#{$prefix}header-underline__thickness-thick: 2px;
-  --#{$prefix}header-underline__offset: 0.3em;
-
-  // ------------------------------------------------------------------------------------------------------------------
-  //  2. Second hand variables (each variant, default, light, dark, dark-alt) using QGDS-Tokens (npm)
-  // ------------------------------------------------------------------------------------------------------------------
-  // Header
-  --#{$prefix}header_color: var(
-    --#{$prefix}color-default-color-light-text-default
-  );
-  --#{$prefix}header_bg: var(
-    --#{$prefix}color-default-color-light-background-default
-  );
-
-  // Skip links
-  --#{$prefix}header_skip-link_color: var(
-    --#{$prefix}color-default-color-dark-link-default
-  );
-  --#{$prefix}header_skip-link_focus_outline_color: var(
-    --#{$prefix}color-default-color-dark-focus-default
-  );
-  --#{$prefix}header_skip-link_focus_text_color: var(
-    --#{$prefix}color-default-color-dark-link-default
-  );
-  --#{$prefix}header_skip-link_focus_bg_color: var(
-    --#{$prefix}color-default-color-dark-background-default-shade
-  );
-
-  // Pre-header bar
-  --#{$prefix}header__pre-header_text_color: var(
-    --#{$prefix}color-default-color-dark-text-default
-  );
-  --#{$prefix}header__pre-header_bg_color: var(
-    --#{$prefix}color-default-color-dark-background-default
-  );
-  --#{$prefix}header__pre-header_boxshadow:
-    0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
-  --#{$prefix}header__pre-header__anchor_text_color: var(
-    --#{$prefix}color-default-color-dark-text-default
-  );
-  --#{$prefix}header__pre-header__anchor__focus_outline_color: var(
-    --#{$prefix}color-default-color-dark-focus-default
-  );
-  --#{$prefix}header__pre-header__anchor_text_decoration_color: var(
-    --#{$prefix}color-default-color-dark-underline-default
-  );
-  --#{$prefix}header__pre-header__anchor_text_decoration_thickness: var(
-    --#{$prefix}header-underline__thickness-thin
-  );
-  --#{$prefix}header__pre-header__anchor_text_decoration_offset: var(
-    --#{$prefix}header-underline__offset
-  );
-  --#{$prefix}header__pre-header__anchor__focus_text_decoration_color: var(
-    --#{$prefix}color-default-color-dark-underline-default-hover
-  );
-  --#{$prefix}header__pre-header__anchor__focus_text_decoration_thickness: var(
-    --#{$prefix}header-underline__thickness-thick
-  );
-  --#{$prefix}header__pre-header__url_text_color: var(
-    --#{$prefix}color-default-color-dark-link-default
-  );
-
-  // CTA Wrapper
-  --#{$prefix}header__cta-wrapper__cta-link_text_color: var(
-    --#{$prefix}color-default-color-dark-link-default
-  );
-  --#{$prefix}header__cta-wrapper__cta-link-icon_color: var(
-    --#{$prefix}color-default-color-dark-action-secondary
-  );
-  --#{$prefix}header__cta-wrapper__cta-link-icon_hover_color: var(
-    --#{$prefix}color-default-color-dark-action-secondary-hover
-  );
-  --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color: var(
-    --#{$prefix}color-default-color-dark-background-default
-  );
-
-  --#{$prefix}header__CTA_text_color: var(
-    --#{$prefix}color-default-color-dark-link-default
-  );
-  --#{$prefix}header__CTA_border_color: var(
-    --#{$prefix}color-default-color-dark-border-default
-  );
-
-  // Toggle main navigation
-  --#{$prefix}header__toggle-main-nav_text_color: var(
-    --#{$prefix}color-default-color-dark-link-default
-  );
-  --#{$prefix}header__toggle-main-nav_border_color: var(
-    --#{$prefix}color-default-color-dark-border-default
-  );
-  --#{$prefix}header__toggle-main-nav__hover_bg: var(
-    --#{$prefix}color-default-color-dark-background-default-shade
-  );
-  --#{$prefix}header__toggle-main-nav__hover_svg_color: var(
-    --#{$prefix}color-default-color-dark-action-secondary-hover
-  );
-  --#{$prefix}header__toggle-main-nav__focus_outline_color: var(
-    --#{$prefix}color-default-color-dark-focus-default
-  );
-  --#{$prefix}header__toggle-main-nav__svg_color: var(
-    --#{$prefix}color-default-color-dark-action-secondary
-  );
-
-  // COA and title
-  --#{$prefix}header__brand-image__crest_fill: var(
-    --#{$prefix}color-default-color-light-crest-fill
-  );
-  --#{$prefix}header__brand-image__subtype__border_color: var(
-    --#{$prefix}color-default-color-light-accent-design-accent
-  );
-  --#{$prefix}header__brand-image__subtype__text_color: var(
-    --#{$prefix}color-default-color-light-site-title
-  );
-  --#{$prefix}header__brand__anchor__hover_text_color: var(
-    --#{$prefix}color-default-color-light-link-default
-  );
-  --#{$prefix}header__brand__anchor__hover_brand-image__text_color: var(
-    --#{$prefix}color-default-color-light-link-default
-  );
-  --#{$prefix}header__brand__anchor__hover_headingsubline__text_color: var(
-    --#{$prefix}color-default-color-light-link-default
-  );
-  --#{$prefix}header__brand__anchor__hover_brand-image__filter:
-    drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)),
-    drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08));
-
-  // Sitename heading
-  --#{$prefix}header__site-name__heading__text_color: var(
-    --#{$prefix}color-default-color-light-site-title
-  );
-  --#{$prefix}header__site-name__subline__text_color: var(
-    --#{$prefix}color-default-color-light-text-lighter
-  );
-
-  // ------------------------------------------------------------------------------------------------------------------
-  //  3. Dark/dark-alt modes
-  // ------------------------------------------------------------------------------------------------------------------
-  .dark &,
-  .dark-alt & {
-    // Root (dark/dark-alt)
-    --#{$prefix}header_color: var(
-      --#{$prefix}color-default-color-dark-text-default
-    );
-
-    // Pre-header bar (dark)
-    --#{$prefix}header__pre-header_text_color: var(
-      --#{$prefix}color-default-color-dark-text-default
-    );
-    --#{$prefix}header__pre-header_boxshadow:
-      0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
-    --#{$prefix}header__pre-header__url_text_color: var(
-      --#{$prefix}color-default-color-dark-link-default
-    );
-
-    --#{$prefix}header__pre-header__anchor_text_color: var(
-      --#{$prefix}color-default-color-dark-text-default
-    );
-    --#{$prefix}header__pre-header__anchor__focus_text_color: var(
-      --#{$prefix}color-default-color-dark-underline-default-hover
-    );
-    --#{$prefix}header__pre-header__anchor_text_decoration_color: var(
-      --#{$prefix}color-default-color-dark-underline-default
-    );
-    --#{$prefix}header__pre-header__anchor_text_decoration_thickness: var(
-      --#{$prefix}header-underline__thickness-thin
-    );
-    --#{$prefix}header__pre-header__anchor_text_decoration_offset: var(
-      --#{$prefix}header-underline__offset
-    );
-    --#{$prefix}header__pre-header__anchor__focus_text_decoration_color: var(
-      --#{$prefix}color-default-color-dark-underline-default-hover
-    );
-    --#{$prefix}header__pre-header__anchor__focus_text_decoration_thickness: var(
-      --#{$prefix}header-underline__thickness-thick
-    );
-
-    // Pre-header CTA elements (dark/dark-alt)
-    --#{$prefix}header__cta-wrapper__cta-link_text_color: var(
-      --#{$prefix}color-default-color-dark-link-default
-    );
-    --#{$prefix}header__cta-wrapper__cta-link-icon_color: var(
-      --#{$prefix}color-default-color-dark-action-secondary
-    );
-    --#{$prefix}header__cta-wrapper__cta-link-icon_hover_color: var(
-      --#{$prefix}color-default-color-dark-action-secondary-hover
-    );
-
-    //Skip links
-    --#{$prefix}header_skip-link_focus_outline_color: var(
-      --#{$prefix}color-default-color-dark-focus-default
-    );
-
-    // Toggle navigation (dark/dark-alt)
-    --#{$prefix}header__toggle-main-nav_text_color: var(
-      --#{$prefix}color-default-color-dark-link-default
-    );
-    --#{$prefix}header__toggle-main-nav_border_color: var(
-      --#{$prefix}color-default-color-dark-border-default
-    );
-    --#{$prefix}header__toggle-main-nav__hover_bg: var(
-      --#{$prefix}color-default-color-dark-background-default-shade
-    );
-    --#{$prefix}header__toggle-main-nav__hover_svg_color: var(
-      --#{$prefix}color-default-color-dark-action-secondary-hover
-    );
-    --#{$prefix}header__toggle-main-nav__focus_outline_color: var(
-      --#{$prefix}color-default-color-dark-focus-default
-    );
-    --#{$prefix}header__toggle-main-nav__svg_color: var(
-      --#{$prefix}color-default-color-dark-action-secondary
-    );
-
-    --#{$prefix}header__brand__anchor__hover_text_color: var(
-      --#{$prefix}color-default-color-dark-link-default
-    );
-    --#{$prefix}header__brand__anchor__hover_brand-image__text_color: var(
-      --#{$prefix}color-default-color-dark-link-default
-    );
-    --#{$prefix}header__brand__anchor__hover_headingsubline__text_color: var(
-      --#{$prefix}color-default-color-dark-link-default
-    );
-    --#{$prefix}header__brand__anchor__hover_brand-image__filter:
-      drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)),
-      drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08));
-    --#{$prefix}header__brand-image__subtype__border_color: var(
-      --#{$prefix}color-default-color-dark-accent-design-accent
-    );
-    --#{$prefix}header__brand-image__subtype__text_color: var(
-      --#{$prefix}color-default-color-dark-site-title
-    );
-
-    --#{$prefix}header__site-name__heading__text_color: var(
-      --#{$prefix}color-default-color-dark-site-title
-    );
-    --#{$prefix}header__site-name__subline__text_color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
-
-    // COA
-    --#{$prefix}header__brand-image__crest_fill: var(
-      --#{$prefix}color-default-color-dark-crest-fill
-    );
-  }
-
-  .dark-alt & {
-    --#{$prefix}header_bg: var(
-      --#{$prefix}color-default-color-dark-background-alt
-    );
-    --#{$prefix}header__pre-header_bg_color: var(
-      --#{$prefix}color-default-color-dark-background-default
-    );
-  }
-
-  .dark & {
-    --#{$prefix}header_bg: var(
-      --#{$prefix}color-default-color-dark-background-default
-    );
-    --#{$prefix}header__pre-header_bg_color: var(
-      --#{$prefix}color-default-color-dark-background-alt
-    );
-    --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color: var(
-      --#{$prefix}color-default-color-dark-background-alt
-    );
-  }
-}

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

@@ -1,10 +0,0 @@
-// ------------------------------------------------------------------------------------------------------------------
-//  1. Icons in header
-// ------------------------------------------------------------------------------------------------------------------
-.qld__header {
-  .qld__icon {
-    vertical-align: middle;
-    -ms-flex-item-align: center;
-    align-self: center;
-  }
-}

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

@@ -1,85 +0,0 @@
-.navbar {
-    // ------------------------------------------------------------------------------------------------------------------
-    //  1. Assign local var using qgds-tokens
-    // ------------------------------------------------------------------------------------------------------------------
-    --#{$prefix}navbar-border-width: 0.5rem;
-    --#{$prefix}navbar-link-color: var(--#{$prefix}color-default-color-light-link-default);
-    --#{$prefix}navbar-link-color-hover: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}navbar-text-color: var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}navbar-text-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
-    --#{$prefix}navbar-nav-text-color: var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}navbar-bg-color: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}color-default-color-light-background-default);
-    --#{$prefix}navbar-menuitem-active: var(--#{$prefix}core-default-color-neutral-white);
-    --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}core-default-color-neutral-lighter);
-    --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-light-border-default);
-    --#{$prefix}navbar-border-accent: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}navbar-home-icon-color: var(--#{$prefix}color-default-color-light-action-secondary);
-    --#{$prefix}navbar-home-icon-color-hover: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}navbar-home-icon-color-active: var(--#{$prefix}color-default-color-light-text-heading);
-    --#{$prefix}navbar-hover-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}navbar-icon-hover: var(--#{$prefix}color-default-color-dark-action-primary-hover);
-    --#{$prefix}navbar-svg-color: var(--#{$prefix}core-default-color-brand-secondary-darkgreen);
-
-    // Mobile default is dark
-    --#{$prefix}navbar-overlay: var(--#{$prefix}color-default-color-dark-background-alt-shade);
-    --#{$prefix}navbar-mobile-home-icon-color: var(--#{$prefix}color-default-color-light-action-secondary);
-    --#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}color-default-color-dark-background-default);
-    --#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}color-default-color-dark-action-secondary);
-    --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}core-default-color-neutral-white);
-    --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-    --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}navbar-mobile-bg-color: var(--#{$prefix}color-default-color-dark-background-default);
-    --#{$prefix}navbar-mobile-cta-bg-color: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}navbar-mobile-cta-bg-color-open: var(--#{$prefix}color-default-color-dark-background-default);
-
-    // Toggle icons for mobile
-    --#{$prefix}navbar-mobile-menu-toggle-boxshadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1);
-    --#{$prefix}navbar-mobile-menu-toggle-boxshadow__hover: 0px 4px 8px 3px rgba(0, 0, 0, .1), 0px 1px 3px rgba(0, 0, 0, .2);
-    --#{$prefix}navbar-mobile-menu-toggle-bg: var(--#{$prefix}color-default-color-light-background-default);
-
-    // ------------------------------------------------------------------------------------------------------------------
-    //  3. Modes
-    // ------------------------------------------------------------------------------------------------------------------
-    .alt &,
-    .light & {
-        --#{$prefix}navbar-title-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}color-default-color-light-text-default);
-        --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-light-border-default);
-    }
-
-    .dark &,
-    .dark-alt & {
-        // Mobile default is dark
-        --#{$prefix}navbar-mobile-home-icon-color: var(--#{$prefix}color-default-color-dark-action-secondary);
-        --#{$prefix}navbar-mobile-menu-toggle-bg: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}color-default-color-dark-action-secondary);
-        --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-        --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
-
-        --#{$prefix}navbar-bg-color: var(--#{$prefix}color-default-color-dark-background-default-shade);
-        --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-title-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-text-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-nav-text-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-home-icon-color-active: var(--#{$prefix}color-default-color-dark-text-heading);
-        --#{$prefix}navbar-home-icon-color-hover: var(--#{$prefix}color-default-color-dark-action-primary-hover);
-
-        --#{$prefix}navbar-link-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-link-color-hover: var(--#{$prefix}core-default-color-neutral-white);
-
-        --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-        --#{$prefix}navbar-menuitem-active: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-menuitem-active: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
-        --#{$prefix}navbar-icon-hover: var(--#{$prefix}color-default-color-dark-action-secondary);
-        --#{$prefix}navbar-text-focus-color: var(--#{$prefix}color-default-color-dark-focus-default);
-        --#{$prefix}navbar-svg-color: var(--#{$prefix}color-default-color-dark-action-secondary);
-    }
-}
-

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

@@ -1,64 +0,0 @@
-// ------------------------------------------------------------------------------------------------------------------
-//  1. Basic icons for navbar component
-// ------------------------------------------------------------------------------------------------------------------
-.navbar {
-    .dropdown-toggle {
-        .toggle_icon {
-            color: var(--#{$prefix}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 {
-                position: relative;
-                .chevron__icon {
-                    position: absolute;
-                    top: 1.15rem;
-                    right: 0;
-                }
-            }
-        }
-    }
-
-    @include media-breakpoint-down(lg) {
-        .chevron__icon {
-            display: none;
-        }
-    }
-}

package/src/components/bs5/pageLayout/pageLayout.hbs

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{title}}</title>
-  {{> head }}
-</head>
-<body>
-    {{> globalAlert globalAlert}}
-    {{> header header}}
-    {{> navbar navbar}}    
-    <main>
-        <div class="container-fluid">
-            <div class="container qld-content">
-                <div class="row">
-                    <!-- Side Nav -->
-                    {{#> sidenavWrapper}}
-                    {{> sidenav sidenav}}
-                    {{/sidenavWrapper}}
-                    {{#> contentWrapper}}
-                        <p>content goes here dd</p>
-                        {{> table table}}                        
-                    {{/contentWrapper}}
-                </div>                    
-            </div>
-            <div class="container">
-                {{> contentFooter contentFooter }}
-            </div>
-        </div>
-    </main>
-    {{> footer footer}}
-</body>
-</html>

package/src/components/bs5/pageLayout/templates/fullWidthLandingPage.hbs

@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{title}}</title>
-  {{> head }}
-</head>
-<body>
-    {{> globalAlert globalAlert}}
-    {{> header header}}
-    {{> navbar navbar}}
-    
-    {{#if banner}}
-    {{> banner banner}}
-    {{/if}}
-    
-    <main>
-        <div class="container-fluid">
-            {{#if cardGrid}}
-            <section class="py-5">
-                <div class="container">
-                    <div class="row">
-                        {{#each cardGrid.cards}}
-                        <div class="col-md-4 mb-4">
-                            {{> card this}}
-                        </div>
-                        {{/each}}
-                    </div>
-                </div>
-            </section>
-            {{/if}}
-            
-            {{#if linkColumns}}
-            <section class="py-5 bg-light">
-                <div class="container">
-                    {{> linkColumns linkColumns}}
-                </div>
-            </section>
-            {{/if}}
-            
-            {{#if promotionalPanel}}
-            <section class="py-5">
-                <div class="container">
-                    {{> promotionalPanel promotionalPanel}}
-                </div>
-            </section>
-            {{/if}}
-            
-            <div class="container qld-content">
-                <div class="row">
-                    <div class="col-12">                        
-                        {{> backToTop backToTop}}
-                    </div>
-                </div>                                        
-            </div>
-        </div>
-    </main>
-    {{> footer footer}}
-</body>
-</html>