From bc8524fe32ad7e93aa29ce7a0da9a271d68451b9 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Mon, 10 Jun 2024 14:05:03 +0200 Subject: [PATCH 1/8] refactor: define a new variable --- source/_patterns/02-components/brand/brand.scss | 2 +- .../02-components/mainnavigation/mainnavigation.scss | 12 ++++++------ source/_patterns/03-areas/00-header/header.md | 4 ++++ source/_patterns/03-areas/00-header/header.scss | 2 +- source/_patterns/03-areas/00-header/meta.scss | 2 +- source/_patterns/03-areas/_areas.scss | 4 ++-- source/css/_db-ui-core.variables.scss | 3 +++ 7 files changed, 18 insertions(+), 11 deletions(-) diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss index f89b70eb98..c6b0c95d45 100644 --- a/source/_patterns/02-components/brand/brand.scss +++ b/source/_patterns/02-components/brand/brand.scss @@ -27,7 +27,7 @@ } } } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { .cmp-mainnavigation ~ & { .rea-header & { .is-site-name { diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index f4bd1d89aa..d755571792 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -60,7 +60,7 @@ } // Displaying the main navigation as an top to bottom overlay on smaller viewports - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { background-color: $db-color-cool-gray-600; left: 0; position: absolute; @@ -97,7 +97,7 @@ z-index: $z-index-rea-header-cmp-mainnavigation-submenu; } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { display: none; } } @@ -158,7 +158,7 @@ & > * > li { & > .elm-link, & > * > .elm-link { - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { padding-left: to-rem($pxValue: 34); } } @@ -169,7 +169,7 @@ & > * > li { & > .elm-link, & > * > .elm-link { - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { padding-left: to-rem($pxValue: 60); } } @@ -207,13 +207,13 @@ & > ul, & > * > ul { visibility: visible; - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { display: initial; } } } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { background-color: $db-color-cool-gray-600; color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color diff --git a/source/_patterns/03-areas/00-header/header.md b/source/_patterns/03-areas/00-header/header.md index 280c3f2288..92a4e82b56 100644 --- a/source/_patterns/03-areas/00-header/header.md +++ b/source/_patterns/03-areas/00-header/header.md @@ -3,6 +3,10 @@ title: Header state: inprogress --- +## Breakpoint for the header + +If you'd like to control the breakpoint that we've set for the `header` parts, you could overwrite the `SCSS` variable `$db-narrower-screen-max-width` with a new value that should get used within the CSS code for that breakpoint, like e.g. `800px`. + ## Fixed positioned header You could set the header area to fixed positioning by adding the class `has-fixed-header` to the `body` HTML tag. diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss index 3bbf37fb89..4f7dc41e9e 100644 --- a/source/_patterns/03-areas/00-header/header.scss +++ b/source/_patterns/03-areas/00-header/header.scss @@ -26,7 +26,7 @@ .elm-link { display: inline-block; } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { border-bottom: $header---borderBottom; min-height: to-rem($pxValue: 64); } diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss index 81290c7579..83fc8840bf 100644 --- a/source/_patterns/03-areas/00-header/meta.scss +++ b/source/_patterns/03-areas/00-header/meta.scss @@ -22,7 +22,7 @@ padding-top: to-rem($pxValue: 9); } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { margin-top: to-rem($pxValue: 8); } } diff --git a/source/_patterns/03-areas/_areas.scss b/source/_patterns/03-areas/_areas.scss index a9d92bc756..3f2601f765 100644 --- a/source/_patterns/03-areas/_areas.scss +++ b/source/_patterns/03-areas/_areas.scss @@ -23,7 +23,7 @@ body.has-fixed-header { top: 0; } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { padding-top: to-rem($pxValue: 80); } } @@ -36,7 +36,7 @@ body.has-fixed-footer { bottom: 0; } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-narrower-screen-max-width) { padding-bottom: to-rem($pxValue: 94); } } diff --git a/source/css/_db-ui-core.variables.scss b/source/css/_db-ui-core.variables.scss index eb3fba93cd..136b77d7df 100644 --- a/source/css/_db-ui-core.variables.scss +++ b/source/css/_db-ui-core.variables.scss @@ -34,3 +34,6 @@ $z-index-cmp-overflow-menu-menu: 60 !default; $z-index-cmp-overflow-menu-overlay: 50 !default; $z-index-rea-header-cmp-sitesearch-focus: 10 !default; $z-index-reas-fixed-header-footer: 10 !default; + +// Defined the max-width for a narrower screen, that e.g. let's the navigation break into a hamburger menu. Also defined the z-index for the header and footer. +$db-narrower-screen-max-width: 1023px !default; From 75f3fbd07fe578186b3d0b7389b96420a5b3fe47 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Mon, 10 Jun 2024 18:39:18 +0200 Subject: [PATCH 2/8] refactor: adapt CSS Variables solution --- .../_patterns/02-components/brand/brand.scss | 8 ++- .../mainnavigation/mainnavigation.scss | 52 ++++++++++++++++--- source/_patterns/03-areas/00-header/header.md | 14 ++++- .../_patterns/03-areas/00-header/header.scss | 8 ++- source/_patterns/03-areas/00-header/meta.scss | 8 ++- source/_patterns/03-areas/_areas.scss | 16 +++++- 6 files changed, 93 insertions(+), 13 deletions(-) diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss index c6b0c95d45..36d25972d9 100644 --- a/source/_patterns/02-components/brand/brand.scss +++ b/source/_patterns/02-components/brand/brand.scss @@ -27,7 +27,7 @@ } } } - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-cmp-brand-site-name { .cmp-mainnavigation ~ & { .rea-header & { .is-site-name { @@ -36,4 +36,10 @@ } } } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-cmp-brand-site-name; + } + @container style(--db-narrower-screen: true) { + @include db-cmp-brand-site-name; + } } diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index d755571792..265bb17296 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -59,8 +59,7 @@ } } - // Displaying the main navigation as an top to bottom overlay on smaller viewports - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-cmp-mainnavigation { background-color: $db-color-cool-gray-600; left: 0; position: absolute; @@ -82,6 +81,13 @@ } } } + // Displaying the main navigation as an top to bottom overlay on smaller viewports + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation; + } + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation; + } ul { background-color: $header---backgroundColor; @@ -97,9 +103,15 @@ z-index: $z-index-rea-header-cmp-mainnavigation-submenu; } - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-cmp-mainnavigation-ul-ul { display: none; } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-ul-ul; + } + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-ul; + } } // First Level @@ -158,9 +170,15 @@ & > * > li { & > .elm-link, & > * > .elm-link { - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-cmp-mainnavigation-ul-ul-li { padding-left: to-rem($pxValue: 34); } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-ul-ul-li; + } + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-ul-li; + } } // Third level @@ -169,9 +187,15 @@ & > * > li { & > .elm-link, & > * > .elm-link { - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-cmp-mainnavigation-ul-ul-ul-li { padding-left: to-rem($pxValue: 60); } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-ul-ul-ul-li; + } + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-ul-ul-li; + } } } } @@ -207,13 +231,20 @@ & > ul, & > * > ul { visibility: visible; - @media screen and (max-width: $db-narrower-screen-max-width) { + + @mixin db-cmp-mainnavigation-li-hover { display: initial; } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-li-hover; + } + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-li-hover; + } } } - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-cmp-mainnavigation-li { background-color: $db-color-cool-gray-600; color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color @@ -238,6 +269,13 @@ position: relative; } } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-li; + } + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-li; + } + @media screen and (min-width: 1024px) { // Do not show Icon for menu on bigger screens &[aria-haspopup="true"] { diff --git a/source/_patterns/03-areas/00-header/header.md b/source/_patterns/03-areas/00-header/header.md index 92a4e82b56..2fb382dff1 100644 --- a/source/_patterns/03-areas/00-header/header.md +++ b/source/_patterns/03-areas/00-header/header.md @@ -5,7 +5,19 @@ state: inprogress ## Breakpoint for the header -If you'd like to control the breakpoint that we've set for the `header` parts, you could overwrite the `SCSS` variable `$db-narrower-screen-max-width` with a new value that should get used within the CSS code for that breakpoint, like e.g. `800px`. +If you'd like to control the breakpoint that we've set for the `header` parts especially to transform from a regular navigation to a burger navigation, you could overwrite the `SCSS` variable `$db-narrower-screen-max-width` with a new value that should get used within the CSS code for that breakpoint, like e.g. `1280px`. + +If you're using CSS only without SCSS, you could set the CSS Custom Property / CSS Variable via a `@media query` yourself: + +```css +@media screen and (max-width: 1280px) { + :root { + --db-narrower-screen: true; + } +} +``` + +Please keep in mind that the CSS Variable solution doesn't work in Mozilla Firefox at the time of writing, please have a look at for upcoming support. ## Fixed positioned header diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss index 4f7dc41e9e..a199f4bea8 100644 --- a/source/_patterns/03-areas/00-header/header.scss +++ b/source/_patterns/03-areas/00-header/header.scss @@ -26,8 +26,14 @@ .elm-link { display: inline-block; } - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-cmp-header { border-bottom: $header---borderBottom; min-height: to-rem($pxValue: 64); } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-cmp-header; + } + @container style(--db-narrower-screen: true) { + @include db-cmp-header; + } } diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss index 83fc8840bf..229a8616ec 100644 --- a/source/_patterns/03-areas/00-header/meta.scss +++ b/source/_patterns/03-areas/00-header/meta.scss @@ -22,9 +22,15 @@ padding-top: to-rem($pxValue: 9); } - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-cmp-header-meta { margin-top: to-rem($pxValue: 8); } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-cmp-header-meta; + } + @container style(--db-narrower-screen: true) { + @include db-cmp-header-meta; + } } & > .elm-link { diff --git a/source/_patterns/03-areas/_areas.scss b/source/_patterns/03-areas/_areas.scss index 3f2601f765..ccb7ddd87c 100644 --- a/source/_patterns/03-areas/_areas.scss +++ b/source/_patterns/03-areas/_areas.scss @@ -23,9 +23,15 @@ body.has-fixed-header { top: 0; } - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-body-has-fixed-header { padding-top: to-rem($pxValue: 80); } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-body-has-fixed-header; + } + @container style(--db-narrower-screen: true) { + @include db-body-has-fixed-header; + } } body.has-fixed-footer { @@ -36,7 +42,13 @@ body.has-fixed-footer { bottom: 0; } - @media screen and (max-width: $db-narrower-screen-max-width) { + @mixin db-body-has-fixed-footer { padding-bottom: to-rem($pxValue: 94); } + @media screen and (max-width: $db-narrower-screen-max-width) { + @include db-body-has-fixed-footer; + } + @container style(--db-narrower-screen: true) { + @include db-body-has-fixed-footer; + } } From b1465f39dbbb178ab076fb8149de942e970756c9 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Mon, 10 Jun 2024 22:58:27 +0200 Subject: [PATCH 3/8] Update mainnavigation.scss --- .../_patterns/02-components/mainnavigation/mainnavigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index 265bb17296..ee2568c9d5 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -59,6 +59,7 @@ } } + // Displaying the main navigation as an top to bottom overlay on smaller viewports @mixin db-cmp-mainnavigation { background-color: $db-color-cool-gray-600; left: 0; @@ -81,7 +82,6 @@ } } } - // Displaying the main navigation as an top to bottom overlay on smaller viewports @media screen and (max-width: $db-narrower-screen-max-width) { @include db-cmp-mainnavigation; } From e0951fa2162149969d6c8fa9690a9e61592561f5 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 18 Jun 2024 18:23:04 +0200 Subject: [PATCH 4/8] refactor: migrated further media queries --- .../_patterns/02-components/brand/brand.scss | 8 +++- .../language-switcher/language-switcher.scss | 9 +++- .../mainnavigation/mainnavigation.scss | 48 ++++++++++++++++--- 3 files changed, 57 insertions(+), 8 deletions(-) diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss index 36d25972d9..8e52470fec 100644 --- a/source/_patterns/02-components/brand/brand.scss +++ b/source/_patterns/02-components/brand/brand.scss @@ -16,7 +16,7 @@ .rea-header & { padding-top: to-rem($pxValue: 18); - @media screen and (min-width: 1024px) { + @mixin db-cmp-brand-rea-header { padding-top: $rea-header-cmp-brand-padding-top; // * TODO: possibly rework variable naming .is-site-name { @@ -26,6 +26,12 @@ } } } + @media screen and (width > $db-narrower-screen-max-width) { + @include db-cmp-brand-rea-header; + } + @container not style(--db-narrower-screen: true) { + @include db-cmp-brand-rea-header; + } } @mixin db-cmp-brand-site-name { .cmp-mainnavigation ~ & { diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss index baf7c4033c..65fa3d0d1a 100644 --- a/source/_patterns/02-components/language-switcher/language-switcher.scss +++ b/source/_patterns/02-components/language-switcher/language-switcher.scss @@ -62,9 +62,16 @@ } } } - @media screen and (min-width: 1024px) { + @mixin db-cmp-language-switcher-li-rea-header { top: to-rem($pxValue: 56); } + + @media screen and (width > $db-narrower-screen-max-width) { + @include db-cmp-language-switcher-li-rea-header; + } + @container not style(--db-narrower-screen: true) { + @include db-cmp-language-switcher-li-rea-header; + } } .elm-link, diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index ee2568c9d5..a530c3f1d1 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -28,13 +28,19 @@ & > input[type="checkbox"][id] { @include a11y-visually-hidden($partial: $partial); - @media screen and (min-width: 1024px) { + @mixin cmp-mainnavigation-checkbox { // Hiding the navigation toggle elements on huger viewports &, & + label[for] { display: none; } } + @media screen and (width > $db-narrower-screen-max-width) { + @include cmp-mainnavigation-checkbox; + } + @container not style(--db-narrower-screen: true) { + @include cmp-mainnavigation-checkbox; + } } & > label[for] { @@ -95,13 +101,19 @@ // Multiple level navigation ul ul { - @media screen and (min-width: 1024px) { + @mixin db-cmp-mainnavigation-ul-ul-above { box-shadow: $box-shadow-01, $box-shadow-02; position: absolute; visibility: hidden; z-index: $z-index-rea-header-cmp-mainnavigation-submenu; } + @media screen and (width > $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-ul-ul-above; + } + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-ul-above; + } @mixin db-cmp-mainnavigation-ul-ul { display: none; @@ -116,15 +128,21 @@ // First Level & > ul { - @media screen and (min-width: 1024px) { + @mixin db-cmp-mainnavigation-ul-above { display: flex; } + @media screen and (width > $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-ul-above; + } + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-above; + } & > li, & > * > li { & > .elm-link, & > * > .elm-link { - @media screen and (min-width: 1024px) { + @mixin db-cmp-mainnavigation-ul-li-elm-link-above { padding: $mainnavigation-link--paddingTop to-rem($pxValue: 26) $mainnavigation-link--paddingBottom; @@ -140,11 +158,17 @@ border-#{$mainnavigation-link--borderPosition}-color: $db-color-red-500; } } + @media screen and (width > $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-ul-li-elm-link-above; + } + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-li-elm-link-above; + } } // From second level ul { - @media screen and (min-width: 1024px) { + @mixin db-cmp-mainnavigation-ul-ul-above { left: 0; min-width: 100%; top: to-rem($pxValue: 79); @@ -165,6 +189,12 @@ padding-right: to-rem($pxValue: 18); } } + @media screen and (width > $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-ul-ul-above; + } + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-ul-above; + } & > li, & > * > li { @@ -276,7 +306,7 @@ @include db-cmp-mainnavigation-li; } - @media screen and (min-width: 1024px) { + @mixin db-cmp-mainnavigation-li-above { // Do not show Icon for menu on bigger screens &[aria-haspopup="true"] { &::after { @@ -296,5 +326,11 @@ } } } + @media screen and (width > $db-narrower-screen-max-width) { + @include db-cmp-mainnavigation-li-above; + } + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-li-above; + } } } From b9671037df791de1af9cee306906ac074209837e Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 18 Jun 2024 18:26:07 +0200 Subject: [PATCH 5/8] fix: corrected mixin name --- .../02-components/mainnavigation/mainnavigation.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index a530c3f1d1..5afe218e17 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -168,7 +168,7 @@ // From second level ul { - @mixin db-cmp-mainnavigation-ul-ul-above { + @mixin db-cmp-mainnavigation-ul-li-ul-above { left: 0; min-width: 100%; top: to-rem($pxValue: 79); @@ -190,10 +190,10 @@ } } @media screen and (width > $db-narrower-screen-max-width) { - @include db-cmp-mainnavigation-ul-ul-above; + @include db-cmp-mainnavigation-ul-li-ul-above; } @container not style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-ul-ul-above; + @include db-cmp-mainnavigation-ul-li-ul-above; } & > li, From 640279d2b3c5abe7e77f7311bbc6ee7ccaee915c Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 20 Jun 2024 16:42:31 +0200 Subject: [PATCH 6/8] refactor: added possibility to overwrite the value on which to break the header underneath --- .../_patterns/02-components/brand/brand.scss | 4 ++-- .../language-switcher/language-switcher.scss | 2 +- .../mainnavigation/mainnavigation.scss | 24 +++++++++---------- source/_patterns/03-areas/00-header/header.md | 4 ++++ .../_patterns/03-areas/00-header/header.scss | 2 +- source/_patterns/03-areas/00-header/meta.scss | 2 +- source/_patterns/03-areas/_areas.scss | 2 +- source/css/_db-ui-core.variables.scss | 3 +++ 8 files changed, 25 insertions(+), 18 deletions(-) diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss index f89b70eb98..294f044d05 100644 --- a/source/_patterns/02-components/brand/brand.scss +++ b/source/_patterns/02-components/brand/brand.scss @@ -16,7 +16,7 @@ .rea-header & { padding-top: to-rem($pxValue: 18); - @media screen and (min-width: 1024px) { + @media screen and (width > $db-break-the-header-max-width) { padding-top: $rea-header-cmp-brand-padding-top; // * TODO: possibly rework variable naming .is-site-name { @@ -27,7 +27,7 @@ } } } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { .cmp-mainnavigation ~ & { .rea-header & { .is-site-name { diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss index baf7c4033c..6962dc54a3 100644 --- a/source/_patterns/02-components/language-switcher/language-switcher.scss +++ b/source/_patterns/02-components/language-switcher/language-switcher.scss @@ -62,7 +62,7 @@ } } } - @media screen and (min-width: 1024px) { + @media screen and (width > $db-break-the-header-max-width) { top: to-rem($pxValue: 56); } } diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index f4bd1d89aa..d03db0496c 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -28,7 +28,7 @@ & > input[type="checkbox"][id] { @include a11y-visually-hidden($partial: $partial); - @media screen and (min-width: 1024px) { + @media screen and (width > $db-break-the-header-max-width) { // Hiding the navigation toggle elements on huger viewports &, & + label[for] { @@ -60,7 +60,7 @@ } // Displaying the main navigation as an top to bottom overlay on smaller viewports - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { background-color: $db-color-cool-gray-600; left: 0; position: absolute; @@ -89,7 +89,7 @@ // Multiple level navigation ul ul { - @media screen and (min-width: 1024px) { + @media screen and (width > $db-break-the-header-max-width) { box-shadow: $box-shadow-01, $box-shadow-02; position: absolute; visibility: hidden; @@ -97,14 +97,14 @@ z-index: $z-index-rea-header-cmp-mainnavigation-submenu; } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { display: none; } } // First Level & > ul { - @media screen and (min-width: 1024px) { + @media screen and (width > $db-break-the-header-max-width) { display: flex; } @@ -112,7 +112,7 @@ & > * > li { & > .elm-link, & > * > .elm-link { - @media screen and (min-width: 1024px) { + @media screen and (width > $db-break-the-header-max-width) { padding: $mainnavigation-link--paddingTop to-rem($pxValue: 26) $mainnavigation-link--paddingBottom; @@ -132,7 +132,7 @@ // From second level ul { - @media screen and (min-width: 1024px) { + @media screen and (width > $db-break-the-header-max-width) { left: 0; min-width: 100%; top: to-rem($pxValue: 79); @@ -158,7 +158,7 @@ & > * > li { & > .elm-link, & > * > .elm-link { - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { padding-left: to-rem($pxValue: 34); } } @@ -169,7 +169,7 @@ & > * > li { & > .elm-link, & > * > .elm-link { - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { padding-left: to-rem($pxValue: 60); } } @@ -207,13 +207,13 @@ & > ul, & > * > ul { visibility: visible; - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { display: initial; } } } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { background-color: $db-color-cool-gray-600; color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color @@ -238,7 +238,7 @@ position: relative; } } - @media screen and (min-width: 1024px) { + @media screen and (width > $db-break-the-header-max-width) { // Do not show Icon for menu on bigger screens &[aria-haspopup="true"] { &::after { diff --git a/source/_patterns/03-areas/00-header/header.md b/source/_patterns/03-areas/00-header/header.md index 280c3f2288..7199785dd3 100644 --- a/source/_patterns/03-areas/00-header/header.md +++ b/source/_patterns/03-areas/00-header/header.md @@ -3,6 +3,10 @@ title: Header state: inprogress --- +## Breakpoint for the header + +If you'd like to control the breakpoint that we've set for the `header` parts especially to transform from a regular navigation to a burger navigation, you could overwrite the `SCSS` variable `$db-break-the-header-max-width` with a new value that should get used within the CSS code for that breakpoint, like e.g. `1280px`. + ## Fixed positioned header You could set the header area to fixed positioning by adding the class `has-fixed-header` to the `body` HTML tag. diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss index 3bbf37fb89..785e30aaaa 100644 --- a/source/_patterns/03-areas/00-header/header.scss +++ b/source/_patterns/03-areas/00-header/header.scss @@ -26,7 +26,7 @@ .elm-link { display: inline-block; } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { border-bottom: $header---borderBottom; min-height: to-rem($pxValue: 64); } diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss index 81290c7579..db73f64416 100644 --- a/source/_patterns/03-areas/00-header/meta.scss +++ b/source/_patterns/03-areas/00-header/meta.scss @@ -22,7 +22,7 @@ padding-top: to-rem($pxValue: 9); } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { margin-top: to-rem($pxValue: 8); } } diff --git a/source/_patterns/03-areas/_areas.scss b/source/_patterns/03-areas/_areas.scss index a9d92bc756..b2275013d5 100644 --- a/source/_patterns/03-areas/_areas.scss +++ b/source/_patterns/03-areas/_areas.scss @@ -23,7 +23,7 @@ body.has-fixed-header { top: 0; } - @media screen and (max-width: 1023px) { + @media screen and (max-width: $db-break-the-header-max-width) { padding-top: to-rem($pxValue: 80); } } diff --git a/source/css/_db-ui-core.variables.scss b/source/css/_db-ui-core.variables.scss index eb3fba93cd..1c5d09e418 100644 --- a/source/css/_db-ui-core.variables.scss +++ b/source/css/_db-ui-core.variables.scss @@ -34,3 +34,6 @@ $z-index-cmp-overflow-menu-menu: 60 !default; $z-index-cmp-overflow-menu-overlay: 50 !default; $z-index-rea-header-cmp-sitesearch-focus: 10 !default; $z-index-reas-fixed-header-footer: 10 !default; + +// Defined the max-width for a narrower screen to break the header, that e.g. let's the navigation break into a hamburger menu. Also defined the z-index for the header and footer. +$db-break-the-header-max-width: 1023px !default; From 349900c86d4d77eaf7ad88cdeb79e9c6e9fa5039 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 20 Jun 2024 16:45:41 +0200 Subject: [PATCH 7/8] refactor: updated the naming --- .../_patterns/02-components/brand/brand.scss | 4 ++-- .../language-switcher/language-switcher.scss | 2 +- .../mainnavigation/mainnavigation.scss | 24 +++++++++---------- source/_patterns/03-areas/00-header/header.md | 2 +- .../_patterns/03-areas/00-header/header.scss | 2 +- source/_patterns/03-areas/00-header/meta.scss | 2 +- source/_patterns/03-areas/_areas.scss | 4 ++-- source/css/_db-ui-core.variables.scss | 2 +- 8 files changed, 21 insertions(+), 21 deletions(-) diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss index 8e52470fec..1eba00b4ac 100644 --- a/source/_patterns/02-components/brand/brand.scss +++ b/source/_patterns/02-components/brand/brand.scss @@ -26,7 +26,7 @@ } } } - @media screen and (width > $db-narrower-screen-max-width) { + @media screen and (width > $db-break-the-header-max-width) { @include db-cmp-brand-rea-header; } @container not style(--db-narrower-screen: true) { @@ -42,7 +42,7 @@ } } } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-cmp-brand-site-name; } @container style(--db-narrower-screen: true) { diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss index 65fa3d0d1a..3ba254e683 100644 --- a/source/_patterns/02-components/language-switcher/language-switcher.scss +++ b/source/_patterns/02-components/language-switcher/language-switcher.scss @@ -66,7 +66,7 @@ top: to-rem($pxValue: 56); } - @media screen and (width > $db-narrower-screen-max-width) { + @media screen and (width > $db-break-the-header-max-width) { @include db-cmp-language-switcher-li-rea-header; } @container not style(--db-narrower-screen: true) { diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index 5afe218e17..eae67aa7fe 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -35,7 +35,7 @@ display: none; } } - @media screen and (width > $db-narrower-screen-max-width) { + @media screen and (width > $db-break-the-header-max-width) { @include cmp-mainnavigation-checkbox; } @container not style(--db-narrower-screen: true) { @@ -88,7 +88,7 @@ } } } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-cmp-mainnavigation; } @container style(--db-narrower-screen: true) { @@ -108,7 +108,7 @@ z-index: $z-index-rea-header-cmp-mainnavigation-submenu; } - @media screen and (width > $db-narrower-screen-max-width) { + @media screen and (width > $db-break-the-header-max-width) { @include db-cmp-mainnavigation-ul-ul-above; } @container not style(--db-narrower-screen: true) { @@ -118,7 +118,7 @@ @mixin db-cmp-mainnavigation-ul-ul { display: none; } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-cmp-mainnavigation-ul-ul; } @container style(--db-narrower-screen: true) { @@ -131,7 +131,7 @@ @mixin db-cmp-mainnavigation-ul-above { display: flex; } - @media screen and (width > $db-narrower-screen-max-width) { + @media screen and (width > $db-break-the-header-max-width) { @include db-cmp-mainnavigation-ul-above; } @container not style(--db-narrower-screen: true) { @@ -158,7 +158,7 @@ border-#{$mainnavigation-link--borderPosition}-color: $db-color-red-500; } } - @media screen and (width > $db-narrower-screen-max-width) { + @media screen and (width > $db-break-the-header-max-width) { @include db-cmp-mainnavigation-ul-li-elm-link-above; } @container not style(--db-narrower-screen: true) { @@ -189,7 +189,7 @@ padding-right: to-rem($pxValue: 18); } } - @media screen and (width > $db-narrower-screen-max-width) { + @media screen and (width > $db-break-the-header-max-width) { @include db-cmp-mainnavigation-ul-li-ul-above; } @container not style(--db-narrower-screen: true) { @@ -203,7 +203,7 @@ @mixin db-cmp-mainnavigation-ul-ul-li { padding-left: to-rem($pxValue: 34); } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-cmp-mainnavigation-ul-ul-li; } @container style(--db-narrower-screen: true) { @@ -220,7 +220,7 @@ @mixin db-cmp-mainnavigation-ul-ul-ul-li { padding-left: to-rem($pxValue: 60); } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-cmp-mainnavigation-ul-ul-ul-li; } @container style(--db-narrower-screen: true) { @@ -265,7 +265,7 @@ @mixin db-cmp-mainnavigation-li-hover { display: initial; } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-cmp-mainnavigation-li-hover; } @container style(--db-narrower-screen: true) { @@ -299,7 +299,7 @@ position: relative; } } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-cmp-mainnavigation-li; } @container style(--db-narrower-screen: true) { @@ -326,7 +326,7 @@ } } } - @media screen and (width > $db-narrower-screen-max-width) { + @media screen and (width > $db-break-the-header-max-width) { @include db-cmp-mainnavigation-li-above; } @container not style(--db-narrower-screen: true) { diff --git a/source/_patterns/03-areas/00-header/header.md b/source/_patterns/03-areas/00-header/header.md index 2fb382dff1..bd955d5910 100644 --- a/source/_patterns/03-areas/00-header/header.md +++ b/source/_patterns/03-areas/00-header/header.md @@ -5,7 +5,7 @@ state: inprogress ## Breakpoint for the header -If you'd like to control the breakpoint that we've set for the `header` parts especially to transform from a regular navigation to a burger navigation, you could overwrite the `SCSS` variable `$db-narrower-screen-max-width` with a new value that should get used within the CSS code for that breakpoint, like e.g. `1280px`. +If you'd like to control the breakpoint that we've set for the `header` parts especially to transform from a regular navigation to a burger navigation, you could overwrite the `SCSS` variable `$db-break-the-header-max-width` with a new value that should get used within the CSS code for that breakpoint, like e.g. `1280px`. If you're using CSS only without SCSS, you could set the CSS Custom Property / CSS Variable via a `@media query` yourself: diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss index a199f4bea8..58193f3145 100644 --- a/source/_patterns/03-areas/00-header/header.scss +++ b/source/_patterns/03-areas/00-header/header.scss @@ -30,7 +30,7 @@ border-bottom: $header---borderBottom; min-height: to-rem($pxValue: 64); } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-cmp-header; } @container style(--db-narrower-screen: true) { diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss index 229a8616ec..f336f5f157 100644 --- a/source/_patterns/03-areas/00-header/meta.scss +++ b/source/_patterns/03-areas/00-header/meta.scss @@ -25,7 +25,7 @@ @mixin db-cmp-header-meta { margin-top: to-rem($pxValue: 8); } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-cmp-header-meta; } @container style(--db-narrower-screen: true) { diff --git a/source/_patterns/03-areas/_areas.scss b/source/_patterns/03-areas/_areas.scss index ccb7ddd87c..5349827187 100644 --- a/source/_patterns/03-areas/_areas.scss +++ b/source/_patterns/03-areas/_areas.scss @@ -26,7 +26,7 @@ body.has-fixed-header { @mixin db-body-has-fixed-header { padding-top: to-rem($pxValue: 80); } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-body-has-fixed-header; } @container style(--db-narrower-screen: true) { @@ -45,7 +45,7 @@ body.has-fixed-footer { @mixin db-body-has-fixed-footer { padding-bottom: to-rem($pxValue: 94); } - @media screen and (max-width: $db-narrower-screen-max-width) { + @media screen and (max-width: $db-break-the-header-max-width) { @include db-body-has-fixed-footer; } @container style(--db-narrower-screen: true) { diff --git a/source/css/_db-ui-core.variables.scss b/source/css/_db-ui-core.variables.scss index 136b77d7df..422e367fb9 100644 --- a/source/css/_db-ui-core.variables.scss +++ b/source/css/_db-ui-core.variables.scss @@ -36,4 +36,4 @@ $z-index-rea-header-cmp-sitesearch-focus: 10 !default; $z-index-reas-fixed-header-footer: 10 !default; // Defined the max-width for a narrower screen, that e.g. let's the navigation break into a hamburger menu. Also defined the z-index for the header and footer. -$db-narrower-screen-max-width: 1023px !default; +$db-break-the-header-max-width: 1023px !default; From 7b01f6a30ce8a2fc2bd1a1ea16bab3ab0b93487a Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 20 Jun 2024 18:17:59 +0200 Subject: [PATCH 8/8] refactor: differentiate by theme --- .../_patterns/02-components/brand/brand.scss | 28 +-- .../02-components/brand/enterprise/brand.scss | 2 + .../enterprise/language-switcher.scss | 2 + .../language-switcher/language-switcher.scss | 14 +- .../enterprise/mainnavigation.scss | 2 + .../mainnavigation/mainnavigation.scss | 169 +++++++++++------- .../03-areas/00-header/enterprise/header.scss | 2 + .../03-areas/00-header/enterprise/meta.scss | 2 + source/_patterns/03-areas/00-header/header.md | 2 +- .../_patterns/03-areas/00-header/header.scss | 14 +- source/_patterns/03-areas/00-header/meta.scss | 14 +- source/_patterns/03-areas/_areas.scss | 28 +-- .../_patterns/03-areas/enterprise/_areas.scss | 2 + 13 files changed, 185 insertions(+), 96 deletions(-) diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss index 1eba00b4ac..0fdb32ab90 100644 --- a/source/_patterns/02-components/brand/brand.scss +++ b/source/_patterns/02-components/brand/brand.scss @@ -26,11 +26,15 @@ } } } - @media screen and (width > $db-break-the-header-max-width) { - @include db-cmp-brand-rea-header; - } - @container not style(--db-narrower-screen: true) { - @include db-cmp-brand-rea-header; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container not style(--db-narrower-screen: true) { + @include db-cmp-brand-rea-header; + } + } @else { + @media screen and (width > $db-break-the-header-max-width) { + @include db-cmp-brand-rea-header; + } } } @mixin db-cmp-brand-site-name { @@ -42,10 +46,14 @@ } } } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-cmp-brand-site-name; - } - @container style(--db-narrower-screen: true) { - @include db-cmp-brand-site-name; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-cmp-brand-site-name; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-cmp-brand-site-name; + } } } diff --git a/source/_patterns/02-components/brand/enterprise/brand.scss b/source/_patterns/02-components/brand/enterprise/brand.scss index ed9697cc24..353a8f0bf0 100644 --- a/source/_patterns/02-components/brand/enterprise/brand.scss +++ b/source/_patterns/02-components/brand/enterprise/brand.scss @@ -1,2 +1,4 @@ +$enterprise: true; + @import "brand.variables"; @import "../brand"; diff --git a/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss b/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss index cad8ce7ee5..a615007e35 100644 --- a/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss +++ b/source/_patterns/02-components/language-switcher/enterprise/language-switcher.scss @@ -1,2 +1,4 @@ +$enterprise: true; + @import "language-switcher.variables"; @import "../language-switcher"; diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss index 3ba254e683..30ee63a4eb 100644 --- a/source/_patterns/02-components/language-switcher/language-switcher.scss +++ b/source/_patterns/02-components/language-switcher/language-switcher.scss @@ -66,11 +66,15 @@ top: to-rem($pxValue: 56); } - @media screen and (width > $db-break-the-header-max-width) { - @include db-cmp-language-switcher-li-rea-header; - } - @container not style(--db-narrower-screen: true) { - @include db-cmp-language-switcher-li-rea-header; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container not style(--db-narrower-screen: true) { + @include db-cmp-language-switcher-li-rea-header; + } + } @else { + @media screen and (width > $db-break-the-header-max-width) { + @include db-cmp-language-switcher-li-rea-header; + } } } diff --git a/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss index b3c1150a7b..66dd435cf6 100644 --- a/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/enterprise/mainnavigation.scss @@ -1,2 +1,4 @@ +$enterprise: true; + @import "mainnavigation.variables"; @import "../mainnavigation"; diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index eae67aa7fe..d6353a508e 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -35,11 +35,15 @@ display: none; } } - @media screen and (width > $db-break-the-header-max-width) { - @include cmp-mainnavigation-checkbox; - } - @container not style(--db-narrower-screen: true) { - @include cmp-mainnavigation-checkbox; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container not style(--db-narrower-screen: true) { + @include cmp-mainnavigation-checkbox; + } + } @else { + @media screen and (width > $db-break-the-header-max-width) { + @include cmp-mainnavigation-checkbox; + } } } @@ -88,11 +92,16 @@ } } } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-cmp-mainnavigation; - } - @container style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation; + + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-cmp-mainnavigation; + } } ul { @@ -108,21 +117,29 @@ z-index: $z-index-rea-header-cmp-mainnavigation-submenu; } - @media screen and (width > $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-ul-ul-above; - } - @container not style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-ul-ul-above; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-ul-above; + } + } @else { + @media screen and (width > $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-ul-ul-above; + } } @mixin db-cmp-mainnavigation-ul-ul { display: none; } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-ul-ul; - } - @container style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-ul-ul; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-ul; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-ul-ul; + } } } @@ -131,11 +148,15 @@ @mixin db-cmp-mainnavigation-ul-above { display: flex; } - @media screen and (width > $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-ul-above; - } - @container not style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-ul-above; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-above; + } + } @else { + @media screen and (width > $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-ul-above; + } } & > li, @@ -158,11 +179,15 @@ border-#{$mainnavigation-link--borderPosition}-color: $db-color-red-500; } } - @media screen and (width > $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-ul-li-elm-link-above; - } - @container not style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-ul-li-elm-link-above; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-li-elm-link-above; + } + } @else { + @media screen and (width > $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-ul-li-elm-link-above; + } } } @@ -189,11 +214,15 @@ padding-right: to-rem($pxValue: 18); } } - @media screen and (width > $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-ul-li-ul-above; - } - @container not style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-ul-li-ul-above; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-li-ul-above; + } + } @else { + @media screen and (width > $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-ul-li-ul-above; + } } & > li, @@ -203,11 +232,15 @@ @mixin db-cmp-mainnavigation-ul-ul-li { padding-left: to-rem($pxValue: 34); } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-ul-ul-li; - } - @container style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-ul-ul-li; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-ul-li; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-ul-ul-li; + } } } @@ -220,11 +253,15 @@ @mixin db-cmp-mainnavigation-ul-ul-ul-li { padding-left: to-rem($pxValue: 60); } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-ul-ul-ul-li; - } - @container style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-ul-ul-ul-li; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-ul-ul-ul-li; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-ul-ul-ul-li; + } } } } @@ -265,11 +302,15 @@ @mixin db-cmp-mainnavigation-li-hover { display: initial; } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-li-hover; - } - @container style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-li-hover; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-li-hover; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-li-hover; + } } } } @@ -299,11 +340,15 @@ position: relative; } } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-li; - } - @container style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-li; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-li; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-li; + } } @mixin db-cmp-mainnavigation-li-above { @@ -326,11 +371,15 @@ } } } - @media screen and (width > $db-break-the-header-max-width) { - @include db-cmp-mainnavigation-li-above; - } - @container not style(--db-narrower-screen: true) { - @include db-cmp-mainnavigation-li-above; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container not style(--db-narrower-screen: true) { + @include db-cmp-mainnavigation-li-above; + } + } @else { + @media screen and (width > $db-break-the-header-max-width) { + @include db-cmp-mainnavigation-li-above; + } } } } diff --git a/source/_patterns/03-areas/00-header/enterprise/header.scss b/source/_patterns/03-areas/00-header/enterprise/header.scss index d0e26884c2..e96e199d15 100644 --- a/source/_patterns/03-areas/00-header/enterprise/header.scss +++ b/source/_patterns/03-areas/00-header/enterprise/header.scss @@ -1,2 +1,4 @@ +$enterprise: true; + @import "header.variables"; @import "../header"; diff --git a/source/_patterns/03-areas/00-header/enterprise/meta.scss b/source/_patterns/03-areas/00-header/enterprise/meta.scss index 8b6b150291..82d49372b2 100644 --- a/source/_patterns/03-areas/00-header/enterprise/meta.scss +++ b/source/_patterns/03-areas/00-header/enterprise/meta.scss @@ -1,2 +1,4 @@ +$enterprise: true; + @import "meta.variables"; @import "../meta"; diff --git a/source/_patterns/03-areas/00-header/header.md b/source/_patterns/03-areas/00-header/header.md index bd955d5910..80faafd613 100644 --- a/source/_patterns/03-areas/00-header/header.md +++ b/source/_patterns/03-areas/00-header/header.md @@ -17,7 +17,7 @@ If you're using CSS only without SCSS, you could set the CSS Custom Property / C } ``` -Please keep in mind that the CSS Variable solution doesn't work in Mozilla Firefox at the time of writing, please have a look at for upcoming support. +Please keep in mind that the CSS Variable solution doesn't work in Mozilla Firefox at the time of writing (please have a look at for upcoming support), and that for we've only enabled it within the `enterprise` themed stylings. ## Fixed positioned header diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss index 0517df8375..ea63d73343 100644 --- a/source/_patterns/03-areas/00-header/header.scss +++ b/source/_patterns/03-areas/00-header/header.scss @@ -31,10 +31,14 @@ border-bottom: $header---borderBottom; min-height: to-rem($pxValue: 64); } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-cmp-header; - } - @container style(--db-narrower-screen: true) { - @include db-cmp-header; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-cmp-header; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-cmp-header; + } } } diff --git a/source/_patterns/03-areas/00-header/meta.scss b/source/_patterns/03-areas/00-header/meta.scss index f336f5f157..ee8ef74c46 100644 --- a/source/_patterns/03-areas/00-header/meta.scss +++ b/source/_patterns/03-areas/00-header/meta.scss @@ -25,11 +25,15 @@ @mixin db-cmp-header-meta { margin-top: to-rem($pxValue: 8); } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-cmp-header-meta; - } - @container style(--db-narrower-screen: true) { - @include db-cmp-header-meta; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-cmp-header-meta; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-cmp-header-meta; + } } } diff --git a/source/_patterns/03-areas/_areas.scss b/source/_patterns/03-areas/_areas.scss index 5349827187..5c711e85df 100644 --- a/source/_patterns/03-areas/_areas.scss +++ b/source/_patterns/03-areas/_areas.scss @@ -26,11 +26,15 @@ body.has-fixed-header { @mixin db-body-has-fixed-header { padding-top: to-rem($pxValue: 80); } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-body-has-fixed-header; - } - @container style(--db-narrower-screen: true) { - @include db-body-has-fixed-header; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-body-has-fixed-header; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-body-has-fixed-header; + } } } @@ -45,10 +49,14 @@ body.has-fixed-footer { @mixin db-body-has-fixed-footer { padding-bottom: to-rem($pxValue: 94); } - @media screen and (max-width: $db-break-the-header-max-width) { - @include db-body-has-fixed-footer; - } - @container style(--db-narrower-screen: true) { - @include db-body-has-fixed-footer; + @if variable-exists(enterprise) { + // Based on the browser strategy, we could ignore Firefox for the moment + @container style(--db-narrower-screen: true) { + @include db-body-has-fixed-footer; + } + } @else { + @media screen and (max-width: $db-break-the-header-max-width) { + @include db-body-has-fixed-footer; + } } } diff --git a/source/_patterns/03-areas/enterprise/_areas.scss b/source/_patterns/03-areas/enterprise/_areas.scss index 570da4e135..62baa52c97 100644 --- a/source/_patterns/03-areas/enterprise/_areas.scss +++ b/source/_patterns/03-areas/enterprise/_areas.scss @@ -1,2 +1,4 @@ +$enterprise: true; + @import "areas.variables"; @import "../areas";