From 6c473dae38cfc5df30ec83d6ccf026b4d578b617 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 8 Jun 2023 18:06:12 +1200
Subject: [PATCH] fix interactions between header attributes

---
 .../body-layout/body-layout.element.ts        | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts
index 9c2effaf97..dfc0f89736 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts
@@ -150,36 +150,39 @@ export class UmbBodyLayoutElement extends LitElement {
 				box-sizing: border-box;
 				z-index: 1;
 			}
-
-			:host([header-height-fit]) #header {
-				height: fit-content;
-			}
-
 			:host([header-transparent]) #header {
 				background-color: transparent;
 				border-color: transparent;
 				transition: box-shadow 150ms ease-in-out;
-				box-shadow: 0 -1px 0px 0px rgba(0, 0, 0, 0.8);
+				box-shadow: 0 -1px 0px 0px rgba(0, 0, 0, 0.5);
 			}
+			:host([header-transparent][scrolling]) #header {
+				/* This should be using the uui-shadows but for now they are too drastic for this use case */
+				box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
+			}
+			:host([header-height-fit][header-transparent]:not([header-no-padding])) #header-slot {
+				padding: var(--uui-size-layout-1);
+			}
+			:host([header-height-fit]) #header {
+				height: fit-content;
+			}
+			#header-slot {
+				padding: 0 var(--uui-size-layout-1);
+				flex-grow: 1;
+			}
+			:host([header-no-padding]) #header-slot {
+				padding: 0;
+			}
+
 			:host([header-transparent]:not([main-no-padding])) #main:not(*[style='display: none'] + *) {
 				/* The following styling is only applied if the clear-header IS present, 
 				the main-no-padding attribute is NOT present, and the header is NOT hidden */
 				padding-top: var(--uui-size-space-1);
 			}
-
-			:host([header-transparent][scrolling]) #header {
-				/* This should be using the uui-shadows but for now they are too drastic for this use case */
-				box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3);
-			}
-
 			:host([main-no-padding]) #main {
 				padding: 0;
 			}
 
-			:host([header-height-fit][header-transparent]) #header-slot {
-				padding: var(--uui-size-layout-1);
-			}
-
 			#header-slot,
 			#tabs-slot,
 			#action-menu-slot,
@@ -190,11 +193,6 @@ export class UmbBodyLayoutElement extends LitElement {
 				box-sizing: border-box;
 			}
 
-			#header-slot {
-				padding: 0 var(--uui-size-layout-1);
-				flex-grow: 1;
-			}
-
 			#navigation-slot,
 			#tabs-slot {
 				margin-left: auto;