From 528b944bbc4e0c3f0920427d9d0d6da93405594e Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Thu, 20 Jun 2024 17:17:11 +0200 Subject: [PATCH] =?UTF-8?q?refactor:=20added=20possibility=20to=20overwrit?= =?UTF-8?q?e=20the=20value=20on=20which=20to=20break=20=E2=80=A6=20(#874)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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;