From 662067d0d33b83661abc08778da4295e21611fb8 Mon Sep 17 00:00:00 2001 From: Pedro Portella Date: Tue, 24 Dec 2024 13:01:43 +1000 Subject: [PATCH] feat: token fonts for 3 components --- src/components/header/css/component.scss | 1156 +++++++++-------- .../in_page_navigation/css/component.scss | 105 +- .../internal_navigation/css/component.scss | 666 +++++----- 3 files changed, 994 insertions(+), 933 deletions(-) diff --git a/src/components/header/css/component.scss b/src/components/header/css/component.scss index f03ede18..a33d6aeb 100644 --- a/src/components/header/css/component.scss +++ b/src/components/header/css/component.scss @@ -3,657 +3,709 @@ // //-------------------------------------------------------------------------------------------------------------------------------------------------------------- .qld__header { - @include QLD-fontgrid(sm); + color: var(--QLD-color-light__text); + background: var(--QLD-color-light__background); + + //@include QLD-fontgrid(sm); + //@include QLD-media(sm) { + //@include QLD-fontgrid(md); + //} + font-size: $typographyMobileH5FontSize; + //font-weight: $typographyMobileH5FontWeight; + letter-spacing: $typographyMobileH5LetterSpacing; + line-height: $typographyMobileH5LineHeight; + + @include QLD-media(sm) { + font-size: $typographyDesktopH5FontSize; + //font-weight: $typographyDesktopH5FontWeight; + letter-spacing: $typographyDesktopH5LetterSpacing; + line-height: $typographyDesktopH5LineHeight; + } + + .qld__skip-link { + line-height: 1; + + &__link { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + color: var(--QLD-color-light__link); + &:focus { + outline: 3px solid var(--QLD-color-dark__focus); + top: 16px; + top: 1rem; + left: 16px; + left: 1rem; + padding: 24px; + padding: 1.5rem; + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: absolute; + width: auto; + color: var(--QLD-color-dark__link); + background-color: var(--QLD-color-dark__background); + z-index: 600; + } + } + } + + /** + * Header pre-header styles + */ + @include QLD-media(lg) { + .qld__header__pre-header-url { + font-size: 14px; + line-height: 1; + } + } + + .qld__header__pre-header { color: var(--QLD-color-light__text); - background: var(--QLD-color-light__background); + background-color: var(--QLD-color-light__background); + @include QLD-box-shadow(1); + position: relative; + z-index: 1; - @include QLD-media(sm) { - @include QLD-fontgrid(md); + @include QLD-space(padding-top, 0.75unit); + @include QLD-space(padding-bottom, 0.75unit); + + @include QLD-media(md) { + @include QLD-space(padding-top, 1unit); + @include QLD-space(padding-bottom, 1unit); } - .qld__skip-link{ + @include QLD-media(lg) { + @include QLD-space(padding-top, 0.5unit); + @include QLD-space(padding-bottom, 0.5unit); + + a { + font-size: 14px; line-height: 1; + @include QLD-underline("light", "noUnderline", "default", "noVisited"); + } + } - &__link{ - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; - color: var(--QLD-color-light__link); - &:focus{ - outline: 3px solid var(--QLD-color-dark__focus); - top: 16px; - top: 1rem; - left: 16px; - left: 1rem; - padding: 24px; - padding: 1.5rem; - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: absolute; - width: auto; - color: var(--QLD-color-dark__link); - background-color: var(--QLD-color-dark__background); - z-index: 600; - } - } + .container-fluid { + display: flex; } - /** - * Header pre-header styles - */ - @include QLD-media(lg) { - .qld__header__pre-header-url{ - font-size:14px; - line-height:1; - } + &-brand-image { + display: block; + @include QLD-space(height, 1.75unit); + width: auto; + + @include QLD-media(md) { + @include QLD-space(height, 2.5unit); + } + + @include QLD-media(lg) { + display: none; + } } - .qld__header__pre-header { - color: var(--QLD-color-light__text); - background-color: var(--QLD-color-light__background); - @include QLD-box-shadow(1); - position: relative; - z-index: 1; + &-url { + display: none; + color: var(--QLD-color-light__link); - @include QLD-space(padding-top, 0.75unit); - @include QLD-space(padding-bottom, 0.75unit); + @include QLD-media(lg) { + display: inline-block; + //@include QLD-fontgrid(sm); + font-size: $typographyDesktopSmFontSize; + font-weight: $typographyDesktopSmFontWeight; + line-height: $typographyDesktopSmLineHeight; + } + + &--mobile { + display: inline-block; + @include QLD-space(height, 1.75unit); + color: var(--QLD-color-light__link); @include QLD-media(md) { - @include QLD-space(padding-top, 1unit); - @include QLD-space(padding-bottom, 1unit); + @include QLD-space(height, 2.5unit); } @include QLD-media(lg) { + display: none; + } + } + } - @include QLD-space(padding-top, 0.5unit); - @include QLD-space(padding-bottom, 0.5unit); + .qld__header__cta-wrapper { + display: none; + margin-left: auto; - a{ - font-size: 14px; - line-height: 1; - @include QLD-underline('light','noUnderline','default','noVisited'); - } - } + @include QLD-media(lg) { + display: flex; + } - .container-fluid{ - display: flex; - } + .qld__header__cta-link { + //@include QLD-fontgrid(xs); + font-size: $typographyMobileXsFontSize; + font-weight: $typographyMobileXsFontWeight; + line-height: $typographyMobileXsLineHeight; - &-brand-image { - display: block; - @include QLD-space(height, 1.75unit); - width: auto; + @include QLD-media(lg) { + font-size: $typographyDesktopXsFontSize; + font-weight: $typographyDesktopXsFontWeight; + line-height: $typographyDesktopXsLineHeight; + } - @include QLD-media(md) { - @include QLD-space(height, 2.5unit); - } + color: var(--QLD-color-light__link); + @include QLD-space(padding-left, 0.75unit); + align-items: center; - @include QLD-media(lg) { - display: none; - } + &:hover { + .qld__header__cta-link-icon { + color: var(--QLD-color-light__action--secondary-hover); + } + } + } + + .qld__header__cta-link-icon { + @include QLD-space(height, 1.25unit); + @include QLD-space(width, 1.25unit); + @include QLD-space(margin-right, 0.5unit); + display: inline-block; + color: var(--QLD-color-light__action--secondary); + text-align: center; + + svg, + i { + height: 100%; + width: 100%; } + } + } - &-url { - display: none; - color: var(--QLD-color-light__link); + a { + color: var(--QLD-color-dark__text); + display: flex; - @include QLD-media(lg) { - display: inline-block; - @include QLD-fontgrid(sm); - } + @include QLD-focus(); + } - &--mobile { - display: inline-block; - @include QLD-space(height, 1.75unit); - color: var(--QLD-color-light__link); + .qld__header__main-nav-controls { + position: absolute; + top: 0; + right: 0; + left: 0; + display: flex; + flex-direction: row; + justify-content: end; - @include QLD-media(md) { - @include QLD-space(height, 2.5unit); - } + @include QLD-media(lg) { + display: none; + } + } - @include QLD-media(lg) { - display: none; - } - } + .qld__header__toggle-main-nav { + display: flex; + flex-direction: column; + @include QLD-space(padding, 0.5unit 1unit); + //@include QLD-fontgrid(xs, nospace); + font-size: $typographyMobileXsFontSize; + font-weight: $typographyMobileXsFontWeight; + line-height: $typographyMobileXsLineHeight; + border: 0; + appearance: none; + background-color: transparent; + cursor: pointer; + align-items: center; + color: var(--QLD-color-light__link); + @include QLD-focus(); + border-left: solid $QLD-border-width-thin $QLD-color-neutral--lighter; + + &:hover { + background-color: var(--QLD-color-light__background--shade); //here + + svg { + color: var(--QLD-color-light__action--secondary-hover); } + } - .qld__header__cta-wrapper{ - display: none; - margin-left: auto; - - @include QLD-media(lg) { - display: flex; - } - - .qld__header__cta-link{ - @include QLD-fontgrid(xs); - color: var(--QLD-color-light__link); - @include QLD-space(padding-left, 0.75unit); - align-items: center; - - &:hover{ - .qld__header__cta-link-icon{ - color: var(--QLD-color-light__action--secondary-hover); - } - } - } - - .qld__header__cta-link-icon{ - @include QLD-space(height, 1.25unit); - @include QLD-space(width, 1.25unit); - @include QLD-space(margin-right, .5unit); - display: inline-block; - color: var(--QLD-color-light__action--secondary); - text-align: center; - - svg, - i{ - height: 100%; - width: 100%; - } - } + @include QLD-media(md) { + @include QLD-space(padding, 0.75unit 1unit 0.625unit 1unit); + } + + .qld__main-nav__toggle-text { + @include QLD-space(font-size, 0.625unit); + @include QLD-space(margin-top, 0.125unit); + + @include QLD-media(md) { + //@include QLD-fontgrid(xs, nospace); + font-size: $typographyMobileXsFontSize; + font-weight: $typographyMobileXsFontWeight; + line-height: $typographyMobileXsLineHeight; } + } - a{ - color: var(--QLD-color-dark__text); - display: flex; + &:before { + //@include QLD-fontgrid( sm, nospace ); + font-size: $typographyMobileBodyFontSize; + font-weight: $typographyMobileBodyFontWeight; + line-height: $typographyMobileBodyLineHeight; - @include QLD-focus() + @include QLD-media(lg) { + font-size: $typographyDesktopBodyFontSize; + font-weight: $typographyDesktopBodyFontWeight; + line-height: $typographyDesktopBodyLineHeight; } - .qld__header__main-nav-controls{ - position: absolute; - top: 0; - right: 0; - left: 0; - display: flex; - flex-direction: row; - justify-content: end; + @include QLD-space(margin-bottom, 0.25unit); + display: block; + text-align: center; + } - @include QLD-media(lg) { - display: none; - } + svg { + color: var(--QLD-color-light__action--secondary); + @include QLD-space(height, 1.25unit); + @include QLD-space(width, 1.25unit); + margin: 1px auto; + @include QLD-media(md) { + @include QLD-space(height, 2unit); + @include QLD-space(width, 2unit); + margin: 0 auto; } + } + } - .qld__header__toggle-main-nav{ - display: flex; - flex-direction: column; - @include QLD-space(padding, 0.5unit 1unit); - @include QLD-fontgrid(xs, nospace); - border: 0; - appearance: none; - background-color: transparent; - cursor: pointer; - align-items: center; - color: var(--QLD-color-light__link); - @include QLD-focus(); - border-left: solid $QLD-border-width-thin $QLD-color-neutral--lighter; + //Dark theme + &.qld__header__pre-header--dark { + background-color: var(--QLD-color-dark__background); + color: var(--QLD-color-dark__text); + + .qld__header__pre-header-url { + color: var(--QLD-color-dark__link); + } - &:hover { - background-color: var(--QLD-color-light__background--shade); //here + .qld__header__pre-header-url--mobile { + color: var(--QLD-color-dark__link); + } - svg{ - color: var(--QLD-color-light__action--secondary-hover); - } - } + a { + @include QLD-underline("dark", "noUnderline", "default", "noVisited"); + } - @include QLD-media(md) { - @include QLD-space(padding, 0.75unit 1unit 0.625unit 1unit); - } + .qld__header__cta-link { + color: var(--QLD-color-dark__link); - .qld__main-nav__toggle-text{ - @include QLD-space(font-size, .625unit); - @include QLD-space(margin-top, .125unit); + &:hover { + .qld__header__cta-link-icon { + color: var(--QLD-color-dark__action--secondary-hover); + } + } + } - @include QLD-media(md) { - @include QLD-fontgrid(xs, nospace); - } + .qld__header__cta-link-icon { + color: var(--QLD-color-dark__action--secondary); + } - } + .qld__header__toggle-main-nav { + color: var(--QLD-color-dark__link); + border-color: var(--QLD-color-dark__border); - &:before { - @include QLD-fontgrid(sm, nospace); - @include QLD-space(margin-bottom, 0.25unit); - display: block; - text-align: center; - } + svg, + i { + color: var(--QLD-color-dark__action--secondary); + } - svg{ - color: var(--QLD-color-light__action--secondary); - @include QLD-space(height, 1.25unit); - @include QLD-space(width, 1.25unit); - margin: 1px auto; + &:hover { + background-color: var(--QLD-color-dark__background--shade); + + svg { + color: var(--QLD-color-dark__action--secondary-hover); + } + } + } + } - @include QLD-media(md) { - @include QLD-space(height, 2unit); - @include QLD-space(width, 2unit); - margin: 0 auto; - } - } + //Dark alt theme + &.qld__header__pre-header--dark-alt { + background-color: var(--QLD-color-dark__background--alt); + color: var(--QLD-color-dark__text); + .qld__header__pre-header-url { + color: var(--QLD-color-dark__link); + } + .qld__header__pre-header-url--mobile { + color: var(--QLD-color-dark__link); + } + + a { + @include QLD-underline("dark", "noUnderline", "default", "noVisited"); + } + + .qld__header__cta-link { + color: var(--QLD-color-dark__link); + + &:hover { + .qld__header__cta-link-icon { + color: var(--QLD-color-dark__action--secondary-hover); + } } + } - //Dark theme - &.qld__header__pre-header--dark{ - background-color: var(--QLD-color-dark__background); - color: var(--QLD-color-dark__text); - - .qld__header__pre-header-url { - color: var(--QLD-color-dark__link); - } - - .qld__header__pre-header-url--mobile { - color: var(--QLD-color-dark__link); - } - - a{ - @include QLD-underline('dark','noUnderline','default','noVisited'); - } - - .qld__header__cta-link{ - color: var(--QLD-color-dark__link); - - &:hover{ - .qld__header__cta-link-icon{ - color: var(--QLD-color-dark__action--secondary-hover); - } - } - } - - .qld__header__cta-link-icon{ - color: var(--QLD-color-dark__action--secondary); - } - - .qld__header__toggle-main-nav{ - color: var(--QLD-color-dark__link); - border-color: var(--QLD-color-dark__border); - - svg, - i{ - color: var(--QLD-color-dark__action--secondary); - } - - &:hover { - background-color: var(--QLD-color-dark__background--shade); - - svg{ - color: var(--QLD-color-dark__action--secondary-hover); - } - } - } + .qld__header__cta-link-icon { + color: var(--QLD-color-dark__action--secondary); + } + + .qld__header__toggle-main-nav { + color: var(--QLD-color-dark__link); + border-color: var(--QLD-color-dark__border); + + svg, + i { + color: var(--QLD-color-dark__action--secondary); } - //Dark alt theme - &.qld__header__pre-header--dark-alt{ - background-color: var(--QLD-color-dark__background--alt); - color: var(--QLD-color-dark__text); - - .qld__header__pre-header-url { - color: var(--QLD-color-dark__link); - } - - .qld__header__pre-header-url--mobile { - color: var(--QLD-color-dark__link); - } - - a{ - @include QLD-underline('dark','noUnderline','default','noVisited'); - } - - .qld__header__cta-link{ - color: var(--QLD-color-dark__link); - - &:hover{ - .qld__header__cta-link-icon{ - color: var(--QLD-color-dark__action--secondary-hover); - } - } - } - - .qld__header__cta-link-icon{ - color: var(--QLD-color-dark__action--secondary); - } - - .qld__header__toggle-main-nav{ - color: var(--QLD-color-dark__link); - border-color: var(--QLD-color-dark__border); - - svg, - i{ - color: var(--QLD-color-dark__action--secondary); - } - - &:hover { - background-color: var(--QLD-color-dark__background--alt-shade); - - svg{ - color: var(--QLD-color-dark__action--secondary-hover); - } - } - } + &:hover { + background-color: var(--QLD-color-dark__background--alt-shade); + + svg { + color: var(--QLD-color-dark__action--secondary-hover); + } } + } } + } - .qld__header__main { - position: relative; - .container-fluid{ - align-items: center; - display: flex; + .qld__header__main { + position: relative; + .container-fluid { + align-items: center; + display: flex; - width: 100%; + width: 100%; - @include QLD-media(lg) { - height: auto; - justify-content: space-between; - } + @include QLD-media(lg) { + height: auto; + justify-content: space-between; + } + } + + .qld__header__brand { + display: flex; + align-items: center; + @include QLD-space(padding, 1unit 0); + font-variant-numeric: lining-nums; + + @include QLD-media(md) { + @include QLD-space(padding, 1.25unit 0); + } + + @include QLD-media(lg) { + @include QLD-space(padding, 3unit 0); + padding: 32px 0; + flex-grow: 1; + } + + a { + text-decoration: none; + display: flex; + + &:hover { + color: var(--QLD-color-light__link); + text-decoration: underline; + text-underline-offset: auto; + text-decoration-thickness: from-font; + .qld__header__brand-image { + color: var(--QLD-color-light__link); + } + .qld__header__heading, + .qld__header__subline { + color: var(--QLD-color-light__link); + } + + .qld__header__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)); + } } + } + } + + .qld__header__brand-image { + display: none; + + @include QLD-media(lg) { + color: var(--QLD-color-light__site-title); + display: block; + @include QLD-space(padding-right, 1.5unit); + @include QLD-space(margin-right, 1.5unit); + border-right: solid $QLD-border-width-default var(--QLD-color-light__design-accent); + } + + img { + margin: auto 0; + display: block; + } + + svg { + vertical-align: text-bottom; + } + } + + .qld__header__site-name { + display: flex; + flex-direction: column; + justify-content: center; - .qld__header__brand { - display: flex; - align-items: center; - @include QLD-space(padding, 1unit 0); - font-variant-numeric: lining-nums; - - @include QLD-media(md) { - @include QLD-space(padding, 1.25unit 0); - } - - @include QLD-media(lg) { - @include QLD-space(padding, 3unit 0); - padding: 32px 0; - flex-grow: 1; - } - - a { - text-decoration: none; - display: flex; - - &:hover{ - color: var(--QLD-color-light__link); - text-decoration: underline; - text-underline-offset: auto; - text-decoration-thickness: from-font; - .qld__header__brand-image{ - color: var(--QLD-color-light__link); - } - .qld__header__heading, - .qld__header__subline{ - color: var(--QLD-color-light__link); - } - - .qld__header__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)); - } - } - } + .qld__header__secondary-image { + @include QLD-space(height, 2.5unit); + + @include QLD-media(md) { + @include QLD-space(height, 3.5unit); } + } - .qld__header__brand-image { - display: none; - - @include QLD-media(lg) { - color: var(--QLD-color-light__site-title); - display: block; - @include QLD-space(padding-right, 1.5unit); - @include QLD-space(margin-right, 1.5unit); - border-right: solid $QLD-border-width-default var(--QLD-color-light__design-accent); - } - - img{ - margin: auto 0; - display: block; - } - - svg{ - vertical-align: text-bottom; - } + .qld__header__heading { + //@include QLD-fontgrid(sm, heading); + //@include QLD-media(md) { + //@include QLD-fontgrid(md, heading); + //} + font-size: $typographyMobileH5FontSize; + font-weight: $typographyMobileH5FontWeight; + line-height: $typographyMobileH5LineHeight; + + @include QLD-media(md) { + font-size: $typographyDesktopH5FontSize; + font-weight: $typographyDesktopH5FontWeight; + line-height: $typographyDesktopH5LineHeight; } - .qld__header__site-name { - display: flex; - flex-direction: column; - justify-content: center; - - .qld__header__secondary-image { - @include QLD-space(height, 2.5unit); - - @include QLD-media(md) { - @include QLD-space(height, 3.5unit); - } - } - - .qld__header__heading { - @include QLD-fontgrid(sm, heading); - font-family: $QLD-font-heading; - color: var(--QLD-color-light__site-title); - font-weight: bold; - margin: 0; - padding: 0; - - @include QLD-media(md) { - @include QLD-fontgrid(md, heading); - } - } - - .qld__header__subline { - max-width: $QLD-font-maxwidth; - color: var(--QLD-color-light__text--lighter); - @include QLD-fontgrid(xs, heading); - - @include QLD-media(md) { - @include QLD-fontgrid(sm, heading); - } - } + font-family: $QLD-font-heading; + color: var(--QLD-color-light__site-title); + font-weight: bold; + margin: 0; + padding: 0; + } + + .qld__header__subline { + max-width: $QLD-font-maxwidth; + color: var(--QLD-color-light__text--lighter); + //@include QLD-fontgrid(xs, heading); + font-size: $typographyMobileXsFontSize; + font-weight: $typographyMobileXsFontWeight; + line-height: $typographyMobileXsLineHeight; + + @include QLD-media(md) { + //@include QLD-fontgrid(sm, heading); + font-size: $typographyDesktopSmFontSize; + font-weight: $typographyDesktopSmFontWeight; + line-height: $typographyDesktopSmLineHeight; } + } + } - //Main header dark theme - &.qld__header__main--dark{ - background-color: var(--QLD-color-dark__background); - - .qld__header__site-name { - .qld__header__heading { - color: var(--QLD-color-dark__site-title); - } - .qld__header__subline { - color: var(--QLD-color-dark__text--lighter); - } - } - - .qld__header__brand-image { - @include QLD-media(lg) { - border-color: var(--QLD-color-dark__design-accent); - color: var(--QLD-color-dark__text); - } - } - a { - &:hover{ - color: var(--QLD-color-dark__link); - .qld__header__brand-image{ - color: var(--QLD-color-dark__link); - } - .qld__header__heading, - .qld__header__subline{ - color: var(--QLD-color-dark__link); - } - } - } - - .qld__header__search { - // @include QLD-media(md) { - background-color: var(--QLD-color-dark__background); - - .qld__display-lg{ - color: var(--QLD-color-dark__heading); - } - // } - } + //Main header dark theme + &.qld__header__main--dark { + background-color: var(--QLD-color-dark__background); + + .qld__header__site-name { + .qld__header__heading { + color: var(--QLD-color-dark__site-title); + } + .qld__header__subline { + color: var(--QLD-color-dark__text--lighter); } + } - //Main header dark alt theme - &.qld__header__main--dark-alt{ - background-color: var(--QLD-color-dark__background--alt); - - .qld__header__site-name { - .qld__header__heading { - color: var(--QLD-color-dark__site-title); - } - .qld__header__subline { - color: var(--QLD-color-dark__text--lighter); - } - } - - .qld__header__brand-image { - @include QLD-media(lg) { - border-color: var(--QLD-color-dark__design-accent); - color: var(--QLD-color-dark__text); - } - } - - a { - &:hover{ - color: var(--QLD-color-dark__link); - .qld__header__brand-image{ - color: var(--QLD-color-dark__link); - } - .qld__header__heading, - .qld__header__subline{ - color: var(--QLD-color-dark__link); - } - } - } - - .qld__header__search { - @include QLD-media(md) { - background-color: var(--QLD-color-dark__background--alt); - - .qld__display-lg{ - color: var(--QLD-color-dark__heading); - } - } - } + .qld__header__brand-image { + @include QLD-media(lg) { + border-color: var(--QLD-color-dark__design-accent); + color: var(--QLD-color-dark__text); + } + } + a { + &:hover { + color: var(--QLD-color-dark__link); + .qld__header__brand-image { + color: var(--QLD-color-dark__link); + } + .qld__header__heading, + .qld__header__subline { + color: var(--QLD-color-dark__link); + } } + } + + .qld__header__search { + // @include QLD-media(md) { + background-color: var(--QLD-color-dark__background); + .qld__display-lg { + color: var(--QLD-color-dark__heading); + } + // } + } } - .qld__header__search{ - display: none; - position: absolute; - left: 0; - right: 0; - top: 0; - background-color: var(--QLD-color-light__background); - box-shadow: 0px 0px 25px rgba(200, 200, 200, 0.25); - padding: 1rem; - z-index: 1; + //Main header dark alt theme + &.qld__header__main--dark-alt { + background-color: var(--QLD-color-dark__background--alt); - @include QLD-media(md) { - box-shadow: none; - padding: 2rem 2rem 4rem 2rem; + .qld__header__site-name { + .qld__header__heading { + color: var(--QLD-color-dark__site-title); + } + .qld__header__subline { + color: var(--QLD-color-dark__text--lighter); } + } + .qld__header__brand-image { @include QLD-media(lg) { - display: inline-block; - width: 360px; - position: relative; - background-color: transparent; - @include QLD-space(padding, 3unit 0); - padding: 32px 0; + border-color: var(--QLD-color-dark__design-accent); + color: var(--QLD-color-dark__text); + } + } + + a { + &:hover { + color: var(--QLD-color-dark__link); + .qld__header__brand-image { + color: var(--QLD-color-dark__link); + } + .qld__header__heading, + .qld__header__subline { + color: var(--QLD-color-dark__link); + } } + } - .qld__search-form{ - - .qld__search-form__label{ - @include QLD-media(md) { - position: inherit; - width: auto; - height: auto; - @include QLD-space(margin, 0 0 1unit 0); - } - - @include QLD-media(lg) { - position: absolute; - width: 1px; - height: 1px; - } - } + .qld__header__search { + @include QLD-media(md) { + background-color: var(--QLD-color-dark__background--alt); + + .qld__display-lg { + color: var(--QLD-color-dark__heading); + } } + } + } + } + + .qld__header__search { + display: none; + position: absolute; + left: 0; + right: 0; + top: 0; + background-color: var(--QLD-color-light__background); + box-shadow: 0px 0px 25px rgba(200, 200, 200, 0.25); + padding: 1rem; + z-index: 1; + + @include QLD-media(md) { + box-shadow: none; + padding: 2rem 2rem 4rem 2rem; + } - .qld__header__search-link{ - @include QLD-fontgrid(sm); - float: right; - color: var(--QLD-color-light__link); + @include QLD-media(lg) { + display: inline-block; + width: 360px; + position: relative; + background-color: transparent; + @include QLD-space(padding, 3unit 0); + padding: 32px 0; + } - @include QLD-media(lg) { - @include QLD-space(padding-bottom, 0.5unit); - } + .qld__search-form { + .qld__search-form__label { + @include QLD-media(md) { + position: inherit; + width: auto; + height: auto; + @include QLD-space(margin, 0 0 1unit 0); + } - &:hover{ - color: var(--QLD-color-light__text); - } + @include QLD-media(lg) { + position: absolute; + width: 1px; + height: 1px; } + } } - .qld__main-nav.qld__main-nav--mega .qld__main-nav__item-link, .qld__main-nav.qld__main-nav--mega .qld__main-nav__item-toggle-text { - padding-top:10px; - padding-bottom:10px; + .qld__header__search-link { + //@include QLD-fontgrid(sm); + font-size: $typographyDesktopSmFontSize; + font-weight: $typographyDesktopSmFontWeight; + line-height: $typographyDesktopSmLineHeight; + + float: right; + color: var(--QLD-color-light__link); + + @include QLD-media(lg) { + @include QLD-space(padding-bottom, 0.5unit); + } + + &:hover { + color: var(--QLD-color-light__text); + } } + } + + .qld__main-nav.qld__main-nav--mega .qld__main-nav__item-link, + .qld__main-nav.qld__main-nav--mega .qld__main-nav__item-toggle-text { + padding-top: 10px; + padding-bottom: 10px; + } } // Vertical Nav Option .vertical-nav { - .qld__header { - - @include QLD-media(lg) { - box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1); - position: relative; - z-index: 1; - } + .qld__header { + @include QLD-media(lg) { + box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1); + position: relative; + z-index: 1; + } - .container-fluid { - max-width: initial; + .container-fluid { + max-width: initial; - @include QLD-media(md) { - @include QLD-space(padding, 0 2unit); - } + @include QLD-media(md) { + @include QLD-space(padding, 0 2unit); + } - @include QLD-media(lg) { - @include QLD-space(padding, 0 3unit); - } - } + @include QLD-media(lg) { + @include QLD-space(padding, 0 3unit); + } } + } } // Print styles @media print { - .qld__header { - background: #fff !important; - - a img { - border: 0 !important; - } - } + .qld__header { + background: #fff !important; - .qld__header, - .qld__header__brand, - .qld__header__subline, - .qld__banner__content--body { - color: #000 !important; - } - - .qld__header__brand-image { - display: none !important; - } - - .qld__header__pre-header { - display: none; + a img { + border: 0 !important; } + } + + .qld__header, + .qld__header__brand, + .qld__header__subline, + .qld__banner__content--body { + color: #000 !important; + } + + .qld__header__brand-image { + display: none !important; + } + + .qld__header__pre-header { + display: none; + } } diff --git a/src/components/in_page_navigation/css/component.scss b/src/components/in_page_navigation/css/component.scss index 918620b1..bf14df9a 100644 --- a/src/components/in_page_navigation/css/component.scss +++ b/src/components/in_page_navigation/css/component.scss @@ -3,66 +3,75 @@ //-------------------------------------------------------------------------------------------------------------------------------------------------------------- .qld__inpage-nav-links { - @include QLD-fontgrid(sm); - @include QLD-space(padding-left, 1.5unit); - border-left: $QLD-border-width-thick solid var(--QLD-color-light__link); + //@include QLD-fontgrid(sm); + font-size: $typographyDesktopSmFontSize; + font-weight: $typographyDesktopSmFontWeight; + line-height: $typographyDesktopSmLineHeight; - & &__heading{ - @include QLD-fontgrid(sm, heading); - } - - * + & { - @include QLD-space(margin-top, 2.3125unit); + @include QLD-space(padding-left, 1.5unit); + border-left: $QLD-border-width-thick solid var(--QLD-color-light__link); + + & &__heading { + //@include QLD-fontgrid(sm, heading); + font-size: $typographyDesktopH6FontSize; + font-weight: $typographyDesktopH6FontWeight; + line-height: $typographyDesktopH6LineHeight; + } + + * + & { + @include QLD-space(margin-top, 2.3125unit); + } + a { + @include QLD-underline("light", "underline", "default", "noVisited"); + } + + .qld__body & > ul, + .qld__body & > ol { + @include QLD-space(margin-top, 0.75unit); + list-style-type: none; + padding: 0; + + li { + margin: 0; } - a{ - @include QLD-underline('light','underline','default','noVisited'); + + * + li { + margin-left: 0; } - - .qld__body & > ul, - .qld__body & > ol { - @include QLD-space(margin-top, 0.75unit); - list-style-type: none; - padding: 0; - - li { - margin: 0; - } - - * + li { - margin-left: 0; - } - li + li{ - @include QLD-space(margin-top, 0.5unit); - } + li + li { + @include QLD-space(margin-top, 0.5unit); } - - .qld__body--dark &, - .qld__body--dark-alt &{ - border-color: var(--QLD-color-dark__action--primary); - a{ - @include QLD-underline('dark','underline','default','noVisited'); - } + } + + .qld__body--dark &, + .qld__body--dark-alt & { + border-color: var(--QLD-color-dark__action--primary); + a { + @include QLD-underline("dark", "underline", "default", "noVisited"); } - + } } - .qld__inpage-nav-section { - position: relative; - @include QLD-space(padding-right, 8unit); + position: relative; + @include QLD-space(padding-right, 8unit); } .qld__inpage-nav-section-link { - @include QLD-fontgrid(xs, nospace); - @include QLD-space(top, 0.25unit); - position: absolute; - right: 0; - font-weight: normal; + //@include QLD-fontgrid(xs, nospace); + font-size: $typographyMobileXsFontSize; + font-weight: $typographyMobileXsFontWeight; + line-height: $typographyMobileXsLineHeight; + + @include QLD-space(top, 0.25unit); + position: absolute; + right: 0; + font-weight: normal; } // Print styles @media print { - .qld__inpage-nav-links { - display: none !important; - } -} \ No newline at end of file + .qld__inpage-nav-links { + display: none !important; + } +} diff --git a/src/components/internal_navigation/css/component.scss b/src/components/internal_navigation/css/component.scss index 44895c19..98f5d470 100644 --- a/src/components/internal_navigation/css/component.scss +++ b/src/components/internal_navigation/css/component.scss @@ -18,446 +18,446 @@ $QLD-side-nav-breakpoint: lg !default; // } .qld__side-nav { - @include QLD-fontgrid(sm); - font-family: $QLD-font; - background-color: var(--QLD-color-light__background--shade); //here - border-radius: $QLD-border-radius; - overflow: hidden; - @include QLD-space(margin-bottom, 2.5unit); + //@include QLD-fontgrid(sm); + font-size: $typographyDesktopSmFontSize; + font-weight: $typographyDesktopSmFontWeight; + line-height: $typographyDesktopSmLineHeight; + font-family: $QLD-font; + background-color: var(--QLD-color-light__background--shade); //here + border-radius: $QLD-border-radius; + overflow: hidden; + @include QLD-space(margin-bottom, 2.5unit); + + @include QLD-media(lg) { + @include QLD-space(margin-bottom, 0unit); + // @include QLD-space(margin-right, 1unit); + border: 0; + } + + @include QLD-media(xl) { + @include QLD-space(margin-bottom, 0unit); + } + a, + .active > span { + @include QLD-space(padding, 1unit); + //@include QLD-fontgrid(xs); + font-size: $typographyMobileXsFontSize; + font-weight: $typographyMobileXsFontWeight; + line-height: $typographyMobileXsLineHeight; @include QLD-media(lg) { - @include QLD-space(margin-bottom, 0unit); - // @include QLD-space(margin-right, 1unit); - border: 0; + font-size: $typographyDesktopXsFontSize; + font-weight: $typographyDesktopXsFontWeight; + line-height: $typographyDesktopXsLineHeight; } - @include QLD-media(xl) { - @include QLD-space(margin-bottom, 0unit); - } - a, - .active > span { - @include QLD-space(padding, 1unit); - @include QLD-fontgrid(xs); - color: var(--QLD-color-light__text); - display: block; - } + color: var(--QLD-color-light__text); + display: block; + } - a { - max-width: 100%; - @include QLD-underline('light','noUnderline'); - - &:hover { - color: var(--QLD-color-light__link); - background-color: var(--QLD-color-light__background--shade); //here - - &:visited { - color: var(--QLD-color-light__link); - background-color: var(--QLD-color-light__background--shade); //here - text-decoration: none; - } - } + a { + max-width: 100%; + @include QLD-underline("light", "noUnderline"); - @include QLD-focus(); - } + &:hover { + color: var(--QLD-color-light__link); + background-color: var(--QLD-color-light__background--shade); //here - a:visited { - all: unset; + &:visited { + color: var(--QLD-color-light__link); + background-color: var(--QLD-color-light__background--shade); //here + text-decoration: none; + } } + @include QLD-focus(); + } - // Link list - .qld__link-list { - @include QLD-space( - border-top, - solid 0.0625unit var(--QLD-color-light__design-accent) - ); - padding: 0; - margin: 0 !important; - - li { - margin: 0; - - &:first-child{ - a, - span { - border-top-color: transparent; - } - } - } - - a, - span{ - border-top:$QLD-border-width-thin solid var(--QLD-color-light__border--alt); + a:visited { + all: unset; + } + // Link list + .qld__link-list { + @include QLD-space(border-top, solid 0.0625unit var(--QLD-color-light__design-accent)); + padding: 0; + margin: 0 !important; + li { + margin: 0; + &:first-child { + a, + span { + border-top-color: transparent; } - - .qld__link-list { - @include QLD-space(border-top-width, 0unit); - - li{ - a, - span{ - border-top:$QLD-border-width-thin solid var(--QLD-color-light__border); - } - } - } + } } - // Accordion styles - .qld__accordion__body { - overflow: visible; + a, + span { + border-top: $QLD-border-width-thin solid var(--QLD-color-light__border--alt); } - .qld__accordion__title { - @include QLD-fontgrid(md, heading); - color: var(--QLD-color-light__link); - font-weight: normal; - background-color: inherit; - - &:focus { - outline-offset: -3px; - } - - // Hide the accordion title without javascript - .no-js & { - display: none; - } + .qld__link-list { + @include QLD-space(border-top-width, 0unit); - &::after { - background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light__action--secondary)); - margin-top: -.8rem; - @include QLD-space(height, 1.5unit); + li { + a, + span { + border-top: $QLD-border-width-thin solid var(--QLD-color-light__border); } + } } + } - .qld__accordion__body-wrapper { - border: 0; - padding: 0; - } - - // Desktop styles - @include QLD-media($QLD-side-nav-breakpoint) { - background: transparent; - border-radius: 0; - overflow: visible; + // Accordion styles + .qld__accordion__body { + overflow: visible; + } - // Open the menu on desktop - .qld__accordion__body.qld__accordion--closed { - display: block; - height: auto; - } + .qld__accordion__title { + //@include QLD-fontgrid(md, heading); + font-size: $typographyDesktopH5FontSize; + font-weight: $typographyDesktopH5FontWeight; + line-height: $typographyDesktopH5LineHeight; - a:hover { - background-color: var(--QLD-color-light__background--shade); //here - } + color: var(--QLD-color-light__link); + background-color: inherit; - .qld__accordion__title { - display: none; - } + &:focus { + outline-offset: -3px; } -} -// Content inside the side navigation accordion -.qld__side-nav__content { - @include QLD-space(margin, 0 1unit); - - ul { - @include QLD-side-nav-indent(3); - @include QLD-side-nav-indent(3, ".active > span"); + // Hide the accordion title without javascript + .no-js & { + display: none; } - .active > span { - font-weight: bold; - color: var(--QLD-color-light__heading); - } - - ul ul ul a, - ul ul ul .active > span { - &:before { - content: " "; - @include QLD-space(width, 1unit); - @include QLD-space(height, 1unit); - @include QLD-space(background-size, 1unit); - @include QLD-space(margin-left, -1.5unit); - display: block; - float: left; - background-repeat: no-repeat; - background-image: QLD-svguri( - '' + - '' + - "" - ); - } + &::after { + background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light__action--secondary)); + margin-top: -0.8rem; + @include QLD-space(height, 1.5unit); } + } - & > ul > li { - // border-bottom: 1px solid var(--QLD-color-light__border); + .qld__accordion__body-wrapper { + border: 0; + padding: 0; + } - &:last-of-type { - border: none; - } + // Desktop styles + @include QLD-media($QLD-side-nav-breakpoint) { + background: transparent; + border-radius: 0; + overflow: visible; + + // Open the menu on desktop + .qld__accordion__body.qld__accordion--closed { + display: block; + height: auto; } - @include QLD-media($QLD-side-nav-breakpoint) { - margin: 0; + a:hover { + background-color: var(--QLD-color-light__background--shade); //here + } + + .qld__accordion__title { + display: none; } + } +} + +// Content inside the side navigation accordion +.qld__side-nav__content { + @include QLD-space(margin, 0 1unit); + + ul { + @include QLD-side-nav-indent(3); + @include QLD-side-nav-indent(3, ".active > span"); + } + + .active > span { + font-weight: bold; + color: var(--QLD-color-light__heading); + } + + ul ul ul a, + ul ul ul .active > span { + &:before { + content: " "; + @include QLD-space(width, 1unit); + @include QLD-space(height, 1unit); + @include QLD-space(background-size, 1unit); + @include QLD-space(margin-left, -1.5unit); + display: block; + float: left; + background-repeat: no-repeat; + background-image: QLD-svguri( + '' + + '' + "" + ); + } + } + + & > ul > li { + // border-bottom: 1px solid var(--QLD-color-light__border); + + &:last-of-type { + border: none; + } + } + + @include QLD-media($QLD-side-nav-breakpoint) { + margin: 0; + } } // Side navigation title .qld__side-nav .qld__sidenav__title { - margin: 0; - max-width: 100%; + margin: 0; + max-width: 100%; - a { - @include QLD-fontgrid(sm); - color: var(--QLD-color-light__heading); - @include QLD-space( - border-bottom, - solid 0.125unit var(--QLD-color-light__design-accent) - ); - @include QLD-underline('light','noUnderline','default','noVisited'); - - @include QLD-media(md) { - font-weight: bold; - } + a { + //@include QLD-fontgrid(sm); + font-size: $typographyMobileH6FontSize; + font-weight: $typographyMobileH6FontWeight; + letter-spacing: $typographyMobileH6LetterSpacing; + line-height: $typographyMobileH6LineHeight; - &:hover, - &:focus { - color: var(--QLD-color-light__link); - } + @include QLD-media(lg) { + font-size: $typographyDesktopH6FontSize; + font-weight: $typographyDesktopH6FontWeight; + letter-spacing: $typographyDesktopH6LetterSpacing; + line-height: $typographyDesktopH6LineHeight; + } + + color: var(--QLD-color-light__heading); + @include QLD-space(border-bottom, solid 0.125unit var(--QLD-color-light__design-accent)); + @include QLD-underline("light", "noUnderline", "default", "noVisited"); + + &:hover, + &:focus { + color: var(--QLD-color-light__link); } + } } // Alternate colour variation .qld__side-nav.qld__side-nav--alt, -.qld__body--alt .qld__side-nav{ - background-color: var(--QLD-color-light__background--alt-shade); +.qld__body--alt .qld__side-nav { + background-color: var(--QLD-color-light__background--alt-shade); - .qld__accordion__title { - color: var(--QLD-color-light__heading); - background-color: inherit; - } + .qld__accordion__title { + color: var(--QLD-color-light__heading); + background-color: inherit; + } - a:hover { - background: var(--QLD-color-light__background--alt); - } + a:hover { + background: var(--QLD-color-light__background--alt); + } - @include QLD-media($QLD-side-nav-breakpoint) { - background: transparent; + @include QLD-media($QLD-side-nav-breakpoint) { + background: transparent; - a:hover { - background-color: var(--QLD-color-light__background--alt-shade); - } + a:hover { + background-color: var(--QLD-color-light__background--alt-shade); } + } - .qld__link-list { - li { - @include QLD-space( - border-top, - solid 0.0625unit var(--QLD-color-light__border--alt) - ); - } + .qld__link-list { + li { + @include QLD-space(border-top, solid 0.0625unit var(--QLD-color-light__border--alt)); } + } } // Dark colour variation .qld__side-nav.qld__side-nav--dark, .qld__body--dark .qld__side-nav { - background: var(--QLD-color-dark__background--shade); + background: var(--QLD-color-dark__background--shade); - .qld__accordion__title { - color: var(--QLD-color-dark__heading); - background-color: inherit; - } + .qld__accordion__title { + color: var(--QLD-color-dark__heading); + background-color: inherit; + } - a { + a { + color: var(--QLD-color-dark__text); + @include QLD-underline("dark", "noUnderline"); + &:hover { + background: var(--QLD-color-dark__background--alt-shade); + + &:visited { color: var(--QLD-color-dark__text); - @include QLD-underline('dark','noUnderline'); - &:hover { - background: var(--QLD-color-dark__background--alt-shade); - - &:visited { - color: var(--QLD-color-dark__text); - text-decoration: none; - } - } + text-decoration: none; + } + } - &:visited { - all: unset; - } + &:visited { + all: unset; + } + @include QLD-focus("dark"); + } - @include QLD-focus("dark"); + .qld__side-nav__content { + .active > span { + color: var(--QLD-color-dark__text); } - .qld__side-nav__content { - .active > span { - color: var(--QLD-color-dark__text); - } - - ul ul ul a:before, - ul ul ul .active > span:before { - background-image: QLD-svguri( - '' + - '' + - "" - ); - } + ul ul ul a:before, + ul ul ul .active > span:before { + background-image: QLD-svguri( + '' + + '' + "" + ); + } - & > ul > li { - // border-bottom: 1px solid var(--QLD-color-dark__border); + & > ul > li { + // border-bottom: 1px solid var(--QLD-color-dark__border); - &:last-of-type{ - border: none; - } - } + &:last-of-type { + border: none; + } } + } - .qld__sidenav__title a { - border-color: var(--QLD-color-dark__design-accent); - color: var(--QLD-color-dark__text); - @include QLD-underline('light','noUnderline','default','noVisited'); - } + .qld__sidenav__title a { + border-color: var(--QLD-color-dark__design-accent); + color: var(--QLD-color-dark__text); + @include QLD-underline("light", "noUnderline", "default", "noVisited"); + } - @include QLD-media($QLD-side-nav-breakpoint) { - background: transparent; + @include QLD-media($QLD-side-nav-breakpoint) { + background: transparent; - a:hover { - background-color: var(--QLD-color-dark__background--shade); - } + a:hover { + background-color: var(--QLD-color-dark__background--shade); + } + } + + .qld__link-list { + @include QLD-space(border-top, solid 0.0625unit var(--QLD-color-dark__design-accent)); + padding: 0; + margin: 0 !important; + li { + margin: 0; } .qld__link-list { - @include QLD-space( - border-top, - solid 0.0625unit var(--QLD-color-dark__design-accent) - ); - padding: 0; - margin: 0 !important; - - li { - margin: 0; - } - - .qld__link-list { - @include QLD-space(border-top-width, 0unit); - } + @include QLD-space(border-top-width, 0unit); } + } } // Dark alternative colour variation // Dark colour variation .qld__side-nav.qld__side-nav--alt-dark, .qld__body--dark-alt .qld__side-nav { - background: var(--QLD-color-dark__background--alt-shade); + background: var(--QLD-color-dark__background--alt-shade); - .qld__accordion__title { - color: var(--QLD-color-dark__heading); - background-color: inherit; - } + .qld__accordion__title { + color: var(--QLD-color-dark__heading); + background-color: inherit; + } - a { - color: var(--QLD-color-dark__text); - @include QLD-underline('dark','noUnderline'); - &:hover { - background: var(--QLD-color-dark__background--alt); - - &:visited { - color: var(--QLD-color-dark__text); - text-decoration: none; - } - } + a { + color: var(--QLD-color-dark__text); + @include QLD-underline("dark", "noUnderline"); + &:hover { + background: var(--QLD-color-dark__background--alt); - &:visited { - all: unset; - } + &:visited { + color: var(--QLD-color-dark__text); + text-decoration: none; + } + } - @include QLD-focus("dark"); + &:visited { + all: unset; } - .qld__side-nav__content { - .active > span { - color: var(--QLD-color-dark__text); - } + @include QLD-focus("dark"); + } - ul ul ul a:before, - ul ul ul .active > span:before { - background-image: QLD-svguri( - '' + - '' + - "" - ); - } + .qld__side-nav__content { + .active > span { + color: var(--QLD-color-dark__text); + } - & > ul > li { - border-color: var(--QLD-color-dark__border); - } + ul ul ul a:before, + ul ul ul .active > span:before { + background-image: QLD-svguri( + '' + + '' + "" + ); } - .qld__sidenav__title a { - border-color: var(--QLD-color-dark__design-accent); - color: var(--QLD-color-dark__text) + & > ul > li { + border-color: var(--QLD-color-dark__border); } + } - @include QLD-media($QLD-side-nav-breakpoint) { - background: transparent; + .qld__sidenav__title a { + border-color: var(--QLD-color-dark__design-accent); + color: var(--QLD-color-dark__text); + } - a:hover { - background-color: var(--QLD-color-dark__background--alt-shade); - } + @include QLD-media($QLD-side-nav-breakpoint) { + background: transparent; + + a:hover { + background-color: var(--QLD-color-dark__background--alt-shade); } + } - .qld__link-list { - @include QLD-space( - border-top, - solid 0.0625unit var(--QLD-color-dark__design-accent) - ); - padding: 0; - margin: 0 !important; - - li { - margin: 0; - } + .qld__link-list { + @include QLD-space(border-top, solid 0.0625unit var(--QLD-color-dark__design-accent)); + padding: 0; + margin: 0 !important; - .qld__link-list { - @include QLD-space(border-top-width, 0unit); - } + li { + margin: 0; } + + .qld__link-list { + @include QLD-space(border-top-width, 0unit); + } + } } // Print styles @media print { - .qld__side-nav { - display: none !important; - background: transparent !important; - - a { - color: #000; - text-decoration: underline; + .qld__side-nav { + display: none !important; + background: transparent !important; - &:hover { - background: transparent; - } - } + a { + color: #000; + text-decoration: underline; - .qld__accordion__title { - display: none; - } - } + &:hover { + background: transparent; + } + } - .qld__side-nav__content { + .qld__accordion__title { + display: none; + } + } - ul ul ul a:before { - background-image: QLD-svguri( '' + - '' + - '') !important; - } + .qld__side-nav__content { + ul ul ul a:before { + background-image: QLD-svguri( + '' + + '' + "" + ) !important; + } - & > ul > li { - border-color: #000 !important; - } - } + & > ul > li { + border-color: #000 !important; + } + } }