refactor: added possibility to overwrite the value on which to break … (#874)

refactor: added possibility to overwrite the value on which to break the header underneath

Author: mfranzke

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 {

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

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,30 +89,30 @@
 
 	// 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;
 
 			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;
 		}
 
 		& > li,
 		& > * > 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 {

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.

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

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

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

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;