From bc8524fe32ad7e93aa29ce7a0da9a271d68451b9 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
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 <Maximilian.Franzke@deutschebahn.com>
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 <https://bugzilla.mozilla.org/show_bug.cgi?id=1795622> 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 <Maximilian.Franzke@deutschebahn.com>
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 <Maximilian.Franzke@deutschebahn.com>
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 <Maximilian.Franzke@deutschebahn.com>
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 <Maximilian.Franzke@deutschebahn.com>
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 <Maximilian.Franzke@deutschebahn.com>
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 <https://bugzilla.mozilla.org/show_bug.cgi?id=1795622> 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 <https://bugzilla.mozilla.org/show_bug.cgi?id=1795622> 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";