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;
+ }
+ }
}