refactor: header styles to align with current design (#899)

db-ui · Aug 6, 2024 · e487b21 · e487b21
1 parent 06f4bff
commit e487b21
Show file tree

Hide file tree

Showing 16 changed files with 347 additions and 172 deletions.
diff --git a/source/_data/enterprise/mainnavigation.json b/source/_data/enterprise/mainnavigation.json
@@ -25,6 +25,36 @@
 							"href": "#",
 							"value": "Sub 01 Sub 03",
 							"rel": "news"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 04",
+							"rel": "index"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 05",
+							"rel": "offers"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 06",
+							"rel": "news"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 07",
+							"rel": "index"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 08",
+							"rel": "offers"
+						},
+						{
+							"href": "#",
+							"value": "Sub 01 Sub 09",
+							"rel": "news"
 						}
 					]
 				},

diff --git a/source/_patterns/01-elements/image/image.scss b/source/_patterns/01-elements/image/image.scss
@@ -1,13 +1,5 @@
 @import "image.variables";
 
 .elm-image {
-	&.is-logo {
-		height: auto;
-		margin: 0.2rem #{to-rem($pxValue: 16)} 0.2rem 0;
-		max-width: $image-logo--maxwidth;
-
-		.cmp-brand & {
-			width: $brand-image--width; // * TODO: possibly rework variable naming
-		}
-	}
+	// We removed logo styles here
 }
diff --git a/source/_patterns/02-components/brand/brand.scss b/source/_patterns/02-components/brand/brand.scss
@@ -1,39 +1,23 @@
 @import "brand.variables";
 
 .cmp-brand {
-	.elm-image {
-		&.is-logo {
-			float: left;
-			margin-top: -#{to-rem($pxValue: 2)};
-		}
+	font-weight: bold;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+
+	a,
+	img {
+		height: 1.5rem;
+	}
+
+	img {
+		width: auto;
 	}
 
 	a {
 		color: inherit;
 		// Deactivate underline on site name being made clickable by added to the link as well
 		text-decoration: none;
 	}
-
-	.rea-header & {
-		padding-top: to-rem($pxValue: 18);
-		@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 {
-				&::before {
-					// * TODO: introduce is-icon as a mixin and change the following declarations afterwards
-					content: none !important;
-				}
-			}
-		}
-	}
-	@media screen and (max-width: $db-break-the-header-max-width) {
-		.cmp-mainnavigation ~ & {
-			.rea-header & {
-				.is-site-name {
-					display: none;
-				}
-			}
-		}
-	}
 }
diff --git a/source/_patterns/02-components/dropdown/dropdown.scss b/source/_patterns/02-components/dropdown/dropdown.scss
@@ -10,12 +10,6 @@
 		summary {
 			@include icon(glyph(account), 24, "outline", $partial: $partial);
 
-			&:hover {
-				&::before {
-					color: $db-color-red-500;
-				}
-			}
-
 			@media screen and (max-width: $metanavigation-iconOnly--maxWidth) {
 				// * TODO: possibly rework variable naming
 				@include is-icon-text-replace();

diff --git a/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss b/source/_patterns/02-components/language-switcher/_language-switcher.variables.scss
@@ -1,3 +1,5 @@
 @import "../../../css/helpers/functions";
 @import "../../00-base/icons/icons.helpers";
 @import "../../00-base/icons/icons.variables";
+
+$db-language-switcher---direction: var(--db-language-switcher---direction, 1);
diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss
@@ -1,6 +1,12 @@
 @import "../../../css/partials.meta";
 @import "language-switcher.variables";
 
+@mixin set-top($step: 1) {
+	top: calc(
+		#{$db-language-switcher---direction} * (100% * #{$step} + 1rem - 2px)
+	);
+}
+
 .cmp-language-switcher {
 	list-style: none;
 
@@ -29,41 +35,41 @@
 		top: to-rem($pxValue: 26);
 
 		.rea-header & {
-			top: to-rem($pxValue: 55);
+			@include set-top(1);
 
 			z-index: $z-index-rea-header-cmp-language-switcher-li; // * TODO: possibly rework variable naming
 
 			// TODO: This is an enhancement for more languages, but obviously doesn't scale that nicely and would need some rework
 			&:not([aria-current="page"], [aria-selected="true"])
 				~ li:not([aria-current="page"], [aria-selected="true"]) {
-				top: to-rem($pxValue: 54 * 2);
+				@include set-top(2);
 
 				& ~ li:not([aria-current="page"], [aria-selected="true"]) {
-					top: to-rem($pxValue: 54 * 3);
+					@include set-top(3);
 
 					& ~ li:not([aria-current="page"], [aria-selected="true"]) {
-						top: to-rem($pxValue: 54 * 4);
+						@include set-top(4);
 
 						&
 							~ li:not(
 								[aria-current="page"],
 								[aria-selected="true"]
 							) {
-							top: to-rem($pxValue: 54 * 5);
+							@include set-top(5);
 
 							&
 								~ li:not(
 									[aria-current="page"],
 									[aria-selected="true"]
 								) {
-								top: to-rem($pxValue: 54 * 6);
+								@include set-top(6);
 							}
 						}
 					}
 				}
 			}
 			@media screen and (width > $db-break-the-header-max-width) {
-				top: to-rem($pxValue: 56);
+				top: 100%;
 			}
 		}
 
@@ -78,9 +84,8 @@
 
 			.elm-link,
 			.elm-button {
-				padding-bottom: to-rem($pxValue: 15);
+				padding-block: 1rem;
 				padding-right: to-rem($pxValue: 34);
-				padding-top: to-rem($pxValue: 15);
 
 				&:hover,
 				&:focus {
@@ -95,8 +100,6 @@
 
 			.elm-link,
 			.elm-button {
-				padding-bottom: to-rem($pxValue: 22);
-
 				& {
 					@include icon(
 						glyph(expand-more),