Merge pull request #2627 from Automattic/fix/marketing-bar-fixes

Seedlet: Update theme to work with the new marketing bar

seedlet/assets/css/style-editor.css

@@ -182,6 +182,8 @@
 	--social-nav--color-link: var(--global--color-foreground);
 	--social-nav--color-link-hover: var(--global--color-primary-hover);
 	--social-nav--padding: calc( 0.5 * var(--primary-nav--padding) );
+	--wpcom-marketing-bar--height: 45px;
+	--wpadmin-bar--height: 46px;
 	--entry-header--color: var(--global--color-primary);
 	--entry-header--color-link: currentColor;
 	--entry-header--color-hover: var(--global--color-primary-hover);

seedlet/assets/css/style-navigation-rtl.css

@@ -33,7 +33,17 @@
 
 .admin-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
-	top: 46px;
+	top: var(--wpadmin-bar--height);
+}
+
+.has-marketing-bar.lock-scrolling .menu-button-container > .button,
+.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
+	top: var(--wpcom-marketing-bar--height);
+}
+
+.admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
+.admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 .menu-button-container .button,
@@ -60,10 +70,22 @@
 	z-index: 501;
 }
 
+.has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
+.primary-navigation .button.close, .has-marketing-bar
+.woo-navigation .button.close {
+	top: calc(-1 * var(--wpcom-marketing-bar--height));
+}
+
 .admin-bar .menu-button-container .button.close, .admin-bar
 .primary-navigation .button.close, .admin-bar
 .woo-navigation .button.close {
-	top: -46px;
+	top: calc(-1 * var(--wpadmin-bar--height));
+}
+
+.admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
+.primary-navigation .button.close, .admin-bar.has-marketing-bar
+.woo-navigation .button.close {
+	top: calc(-1 * (var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height)));
 }
 
 .menu-button-container .button#woo-open-menu,
@@ -193,12 +215,28 @@
 	transform: translateY(0);
 }
 
+.has-marketing-bar .primary-navigation,
+.has-marketing-bar .primary-navigation > div, .has-marketing-bar
+.woo-navigation,
+.has-marketing-bar
+.woo-navigation > div {
+	top: var(--wpcom-marketing-bar--height);
+}
+
 .admin-bar .primary-navigation,
 .admin-bar .primary-navigation > div, .admin-bar
 .woo-navigation,
 .admin-bar
 .woo-navigation > div {
-	top: 46px;
+	top: var(--wpadmin-bar--height);
+}
+
+.admin-bar.has-marketing-bar .primary-navigation,
+.admin-bar.has-marketing-bar .primary-navigation > div, .admin-bar.has-marketing-bar
+.woo-navigation,
+.admin-bar.has-marketing-bar
+.woo-navigation > div {
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 @media only screen and (min-width: 482px) {
@@ -227,11 +265,23 @@
 	.woo-navigation > div > ul > li > ul {
 		display: none;
 	}
-	.admin-bar .primary-navigation, .admin-bar
+	.admin-bar.has-marketing-bar .primary-navigation,
+	.has-marketing-bar .primary-navigation,
+	.admin-bar .primary-navigation, .admin-bar.has-marketing-bar
+	.woo-navigation,
+	.has-marketing-bar
+	.woo-navigation,
+	.admin-bar
 	.woo-navigation {
 		top: initial;
 	}
-	.admin-bar .primary-navigation > div, .admin-bar
+	.admin-bar.has-marketing-bar .primary-navigation > div,
+	.has-marketing-bar .primary-navigation > div,
+	.admin-bar .primary-navigation > div, .admin-bar.has-marketing-bar
+	.woo-navigation > div,
+	.has-marketing-bar
+	.woo-navigation > div,
+	.admin-bar
 	.woo-navigation > div {
 		top: initial;
 	}

seedlet/assets/css/style-navigation.css

@@ -33,7 +33,17 @@
 
 .admin-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
-	top: 46px;
+	top: var(--wpadmin-bar--height);
+}
+
+.has-marketing-bar.lock-scrolling .menu-button-container > .button,
+.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
+	top: var(--wpcom-marketing-bar--height);
+}
+
+.admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
+.admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 .menu-button-container .button,
@@ -60,10 +70,22 @@
 	z-index: 501;
 }
 
+.has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
+.primary-navigation .button.close, .has-marketing-bar
+.woo-navigation .button.close {
+	top: calc(-1 * var(--wpcom-marketing-bar--height));
+}
+
 .admin-bar .menu-button-container .button.close, .admin-bar
 .primary-navigation .button.close, .admin-bar
 .woo-navigation .button.close {
-	top: -46px;
+	top: calc(-1 * var(--wpadmin-bar--height));
+}
+
+.admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
+.primary-navigation .button.close, .admin-bar.has-marketing-bar
+.woo-navigation .button.close {
+	top: calc(-1 * (var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height)));
 }
 
 .menu-button-container .button#woo-open-menu,
@@ -193,12 +215,28 @@
 	transform: translateY(0);
 }
 
+.has-marketing-bar .primary-navigation,
+.has-marketing-bar .primary-navigation > div, .has-marketing-bar
+.woo-navigation,
+.has-marketing-bar
+.woo-navigation > div {
+	top: var(--wpcom-marketing-bar--height);
+}
+
 .admin-bar .primary-navigation,
 .admin-bar .primary-navigation > div, .admin-bar
 .woo-navigation,
 .admin-bar
 .woo-navigation > div {
-	top: 46px;
+	top: var(--wpadmin-bar--height);
+}
+
+.admin-bar.has-marketing-bar .primary-navigation,
+.admin-bar.has-marketing-bar .primary-navigation > div, .admin-bar.has-marketing-bar
+.woo-navigation,
+.admin-bar.has-marketing-bar
+.woo-navigation > div {
+	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
 @media only screen and (min-width: 482px) {
@@ -227,11 +265,23 @@
 	.woo-navigation > div > ul > li > ul {
 		display: none;
 	}
-	.admin-bar .primary-navigation, .admin-bar
+	.admin-bar.has-marketing-bar .primary-navigation,
+	.has-marketing-bar .primary-navigation,
+	.admin-bar .primary-navigation, .admin-bar.has-marketing-bar
+	.woo-navigation,
+	.has-marketing-bar
+	.woo-navigation,
+	.admin-bar
 	.woo-navigation {
 		top: initial;
 	}
-	.admin-bar .primary-navigation > div, .admin-bar
+	.admin-bar.has-marketing-bar .primary-navigation > div,
+	.has-marketing-bar .primary-navigation > div,
+	.admin-bar .primary-navigation > div, .admin-bar.has-marketing-bar
+	.woo-navigation > div,
+	.has-marketing-bar
+	.woo-navigation > div,
+	.admin-bar
 	.woo-navigation > div {
 		top: initial;
 	}

seedlet/assets/sass/components/header/_config.scss

@@ -33,4 +33,7 @@
 	--social-nav--color-link: var(--global--color-foreground);
 	--social-nav--color-link-hover: var(--global--color-primary-hover);
 	--social-nav--padding: calc( 0.5 * var(--primary-nav--padding) );
+
+	--wpcom-marketing-bar--height: 45px;
+	--wpadmin-bar--height: 46px;
 }

seedlet/assets/sass/components/navigation/_style.scss

@@ -31,7 +31,16 @@
 
 	.admin-bar.lock-scrolling & > .button,
 	.admin-bar:not(.primary-navigation-open) & {
-		top: 46px;
+		top: var(--wpadmin-bar--height);
+	}
+
+	.has-marketing-bar.lock-scrolling & > .button,
+	.has-marketing-bar:not(.primary-navigation-open) & {
+		top: var(--wpcom-marketing-bar--height);
+	}
+	.admin-bar.has-marketing-bar.lock-scrolling & > .button,
+	.admin-bar.has-marketing-bar:not(.primary-navigation-open) & {
+		top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 	}
 }
 
@@ -52,8 +61,14 @@
 			position: absolute;
 			right: 0;
 			z-index: 501;
+			.has-marketing-bar & {
+				top: calc(-1 * var(--wpcom-marketing-bar--height));
+			}
 			.admin-bar & {
-				top: -46px;
+				top: calc(-1 * var(--wpadmin-bar--height));
+			}
+			.admin-bar.has-marketing-bar & {
+				top: calc(-1 * (var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height)));
 			}
 		}
 
@@ -168,9 +183,19 @@
 	}
 
 	// Adjust positions when logged-in
+	.has-marketing-bar &,
+	.has-marketing-bar & > div {
+		top: var(--wpcom-marketing-bar--height);
+	}
+
 	.admin-bar &,
 	.admin-bar & > div {
-		top: 46px;
+		top: var(--wpadmin-bar--height);
+	}
+
+	.admin-bar.has-marketing-bar &,
+	.admin-bar.has-marketing-bar & > div {
+		top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 	}
 
 	@include media( $navigation-min-break-point ) {
@@ -201,6 +226,9 @@
 		}
 
 		// Don't adjust position when logged-in
+
+		.admin-bar.has-marketing-bar &,
+		.has-marketing-bar &,
 		.admin-bar & {
 			top: initial;
 

seedlet/style-rtl.css

@@ -247,6 +247,8 @@ Included in theme screenshot and in block patterns.
 	--social-nav--color-link: var(--global--color-foreground);
 	--social-nav--color-link-hover: var(--global--color-primary-hover);
 	--social-nav--padding: calc( 0.5 * var(--primary-nav--padding) );
+	--wpcom-marketing-bar--height: 45px;
+	--wpadmin-bar--height: 46px;
 	--entry-header--color: var(--global--color-primary);
 	--entry-header--color-link: currentColor;
 	--entry-header--color-hover: var(--global--color-primary-hover);

seedlet/style.css

@@ -247,6 +247,8 @@ Included in theme screenshot and in block patterns.
 	--social-nav--color-link: var(--global--color-foreground);
 	--social-nav--color-link-hover: var(--global--color-primary-hover);
 	--social-nav--padding: calc( 0.5 * var(--primary-nav--padding) );
+	--wpcom-marketing-bar--height: 45px;
+	--wpadmin-bar--height: 46px;
 	--entry-header--color: var(--global--color-primary);
 	--entry-header--color-link: currentColor;
 	--entry-header--color-hover: var(--global--color-primary-hover);

spearhead/navigation-rtl.css

@@ -36,7 +36,17 @@
 
 .admin-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
-	top: 46px;
+	top: var(--wpadmin-bar--height);
+}
+
+.has-marketing-bar.lock-scrolling .menu-button-container > .button,
+.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
+	top: var(--marketing-bar--height);
+}
+
+.admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
+.admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
+	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
 }
 
 .menu-button-container .button,
@@ -63,10 +73,22 @@
 	z-index: 501;
 }
 
+.has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
+.primary-navigation .button.close, .has-marketing-bar
+.woo-navigation .button.close {
+	top: calc(-1 * var(--marketing-bar--height));
+}
+
 .admin-bar .menu-button-container .button.close, .admin-bar
 .primary-navigation .button.close, .admin-bar
 .woo-navigation .button.close {
-	top: -46px;
+	top: calc(-1 * var(--wpadmin-bar--height));
+}
+
+.admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
+.primary-navigation .button.close, .admin-bar.has-marketing-bar
+.woo-navigation .button.close {
+	top: calc(-1 * (var(--wpadmin-bar--height) + var(--marketing-bar--height)));
 }
 
 .menu-button-container .button#woo-open-menu,
@@ -196,12 +218,28 @@
 	transform: translateY(0);
 }
 
+.has-marketing-bar .primary-navigation,
+.has-marketing-bar .primary-navigation > div, .has-marketing-bar
+.woo-navigation,
+.has-marketing-bar
+.woo-navigation > div {
+	top: var(--marketing-bar--height);
+}
+
 .admin-bar .primary-navigation,
 .admin-bar .primary-navigation > div, .admin-bar
 .woo-navigation,
 .admin-bar
 .woo-navigation > div {
-	top: 46px;
+	top: var(--wpadmin-bar--height);
+}
+
+.admin-bar.has-marketing-bar .primary-navigation,
+.admin-bar.has-marketing-bar .primary-navigation > div, .admin-bar.has-marketing-bar
+.woo-navigation,
+.admin-bar.has-marketing-bar
+.woo-navigation > div {
+	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
 }
 
 @media only screen and (min-width: 830px) {
@@ -230,11 +268,23 @@
 	.woo-navigation > div > ul > li > ul {
 		display: none;
 	}
-	.admin-bar .primary-navigation, .admin-bar
+	.admin-bar.has-marketing-bar .primary-navigation,
+	.has-marketing-bar .primary-navigation,
+	.admin-bar .primary-navigation, .admin-bar.has-marketing-bar
+	.woo-navigation,
+	.has-marketing-bar
+	.woo-navigation,
+	.admin-bar
 	.woo-navigation {
 		top: initial;
 	}
-	.admin-bar .primary-navigation > div, .admin-bar
+	.admin-bar.has-marketing-bar .primary-navigation > div,
+	.has-marketing-bar .primary-navigation > div,
+	.admin-bar .primary-navigation > div, .admin-bar.has-marketing-bar
+	.woo-navigation > div,
+	.has-marketing-bar
+	.woo-navigation > div,
+	.admin-bar
 	.woo-navigation > div {
 		top: initial;
 	}

spearhead/navigation.css

@@ -36,7 +36,17 @@
 
 .admin-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
-	top: 46px;
+	top: var(--wpadmin-bar--height);
+}
+
+.has-marketing-bar.lock-scrolling .menu-button-container > .button,
+.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
+	top: var(--marketing-bar--height);
+}
+
+.admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
+.admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
+	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
 }
 
 .menu-button-container .button,
@@ -63,10 +73,22 @@
 	z-index: 501;
 }
 
+.has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
+.primary-navigation .button.close, .has-marketing-bar
+.woo-navigation .button.close {
+	top: calc(-1 * var(--marketing-bar--height));
+}
+
 .admin-bar .menu-button-container .button.close, .admin-bar
 .primary-navigation .button.close, .admin-bar
 .woo-navigation .button.close {
-	top: -46px;
+	top: calc(-1 * var(--wpadmin-bar--height));
+}
+
+.admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
+.primary-navigation .button.close, .admin-bar.has-marketing-bar
+.woo-navigation .button.close {
+	top: calc(-1 * (var(--wpadmin-bar--height) + var(--marketing-bar--height)));
 }
 
 .menu-button-container .button#woo-open-menu,
@@ -196,12 +218,28 @@
 	transform: translateY(0);
 }
 
+.has-marketing-bar .primary-navigation,
+.has-marketing-bar .primary-navigation > div, .has-marketing-bar
+.woo-navigation,
+.has-marketing-bar
+.woo-navigation > div {
+	top: var(--marketing-bar--height);
+}
+
 .admin-bar .primary-navigation,
 .admin-bar .primary-navigation > div, .admin-bar
 .woo-navigation,
 .admin-bar
 .woo-navigation > div {
-	top: 46px;
+	top: var(--wpadmin-bar--height);
+}
+
+.admin-bar.has-marketing-bar .primary-navigation,
+.admin-bar.has-marketing-bar .primary-navigation > div, .admin-bar.has-marketing-bar
+.woo-navigation,
+.admin-bar.has-marketing-bar
+.woo-navigation > div {
+	top: calc(var(--wpadmin-bar--height) + var(--marketing-bar--height));
 }
 
 @media only screen and (min-width: 830px) {
@@ -230,11 +268,23 @@
 	.woo-navigation > div > ul > li > ul {
 		display: none;
 	}
-	.admin-bar .primary-navigation, .admin-bar
+	.admin-bar.has-marketing-bar .primary-navigation,
+	.has-marketing-bar .primary-navigation,
+	.admin-bar .primary-navigation, .admin-bar.has-marketing-bar
+	.woo-navigation,
+	.has-marketing-bar
+	.woo-navigation,
+	.admin-bar
 	.woo-navigation {
 		top: initial;
 	}
-	.admin-bar .primary-navigation > div, .admin-bar
+	.admin-bar.has-marketing-bar .primary-navigation > div,
+	.has-marketing-bar .primary-navigation > div,
+	.admin-bar .primary-navigation > div, .admin-bar.has-marketing-bar
+	.woo-navigation > div,
+	.has-marketing-bar
+	.woo-navigation > div,
+	.admin-bar
 	.woo-navigation > div {
 		top: initial;
 	}