Update scss files to be more DRY

alves/sass/_extra-child-theme.scss

@@ -574,33 +574,5 @@ body:not(.fse-enabled) {
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-.mobile-nav-side .has-menu .site-logo,
-.mobile-nav-side .has-menu .site-title,
-.mobile-nav-side .has-menu .site-description {
-	@include media(mobile-only) {
-		margin-right: 145px; /** this number is a bit magic. */
-	}
-}
-
-.mobile-nav-side .main-navigation {
-	@include media(mobile-only) {
-		#toggle-menu {
-			position: absolute;
-			top:2 * $baseline-unit;
-			right: 2 * $baseline-unit;
-		}
-
-		.menu-main-menu-container {
-			background: #{map-deep-get($config-global, "color", "background", "light") };
-			margin: 0 (- 2 * $baseline-unit );
-			padding: 0 (2 * $baseline-unit) $baseline-unit;
-			.sub-menu {
-				padding-left: 2 * $baseline-unit;  /** todo: variable */
-			}
-			a {
-				padding: $baseline-unit 0;
-				line-height: 1;
-			}
-		}
-	}
-}
+$mobile-nav-side-right-margin: 145px;
+@import "../../varia/sass/components/header/_site-mobile-nav-side";

alves/style-rtl.css

@@ -4451,7 +4451,6 @@ body:not(.fse-enabled) #masthead {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-left: 145px;
-		/** this number is a bit magic. */
 	}
 }
 

alves/style.css

@@ -4480,7 +4480,6 @@ body:not(.fse-enabled) #masthead {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-right: 145px;
-		/** this number is a bit magic. */
 	}
 }
 

barnsbury/sass/_extra-child-theme.scss

@@ -394,33 +394,5 @@ a {
 	}
 }
 // Updates the Mobile Navigation to be next to the site title.
-.mobile-nav-side .has-menu .site-logo,
-.mobile-nav-side .has-menu .site-title,
-.mobile-nav-side .has-menu .site-description {
-	@include media(mobile-only) {
-		margin-right: 100px; /** this number is a bit magic. */
-	}
-}
-
-.mobile-nav-side .main-navigation {
-	@include media(mobile-only) {
-		#toggle-menu {
-			position: absolute;
-			top:2 * $baseline-unit;
-			right: 2 * $baseline-unit;
-		}
-
-		.menu-main-menu-container {
-			background: #{map-deep-get($config-global, "color", "background", "light") };
-			margin:0 ( -2 * $baseline-unit );
-			padding: 0 (2 * $baseline-unit) $baseline-unit;
-			.sub-menu {
-				padding-left: 2 * $baseline-unit;  /** todo: variable */
-			}
-			a {
-				padding: $baseline-unit 0;
-				line-height: 1;
-			}
-		}
-	}
-}
+$mobile-nav-side-right-margin: 100px;
+@import "../../varia/sass/components/header/_site-mobile-nav-side";

barnsbury/style-rtl.css

@@ -4396,7 +4396,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-left: 100px;
-		/** this number is a bit magic. */
 	}
 }
 

barnsbury/style.css

@@ -4425,7 +4425,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-right: 100px;
-		/** this number is a bit magic. */
 	}
 }
 

dalston/sass/_extra-child-theme.scss

@@ -318,39 +318,16 @@ a {
 	font-size: map-deep-get($config-global, "font", "size", "xs");
 }
 
+
 // Updates the Mobile Navigation to be next to the site title.
-.mobile-nav-side .has-menu .site-logo,
-.mobile-nav-side .has-menu .site-title,
-.mobile-nav-side .has-menu .site-description {
-	@include media(mobile-only) {
-		margin-right: 90px; /** This number is magic. */
-	}
-}
+$mobile-nav-side-right-margin: 90px;
+@import "../../varia/sass/components/header/_site-mobile-nav-side";
 
 .mobile-nav-side .main-navigation {
 	@include media(mobile-only) {
-		#toggle-menu {
-			position: absolute;
-			top: 2 * $baseline-unit;
-			right: 2 * $baseline-unit;
-		}
-
 		.dropdown-icon {
-			/* This is fixed the issue whent the button changes sizes */
+			/* This is fixed the issue when the button changes widths */
 			font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
 		}
-
-		.menu-main-menu-container {
-			background: #{map-deep-get($config-global, "color", "background", "light") };
-			margin:0 ( -2 * $baseline-unit );
-			padding: 0 (2 * $baseline-unit) $baseline-unit;
-			.sub-menu {
-				padding-left: 2 * $baseline-unit;
-			}
-			a {
-				padding: $baseline-unit 0;
-				line-height: 1;
-			}
-		}
 	}
 }

dalston/style-rtl.css

@@ -4273,7 +4273,6 @@ a {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-left: 90px;
-		/** This number is magic. */
 	}
 }
 
@@ -4283,10 +4282,6 @@ a {
 		top: 16px;
 		left: 16px;
 	}
-	.mobile-nav-side .main-navigation .dropdown-icon {
-		/* This is fixed the issue whent the button changes sizes */
-		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
-	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container {
 		background: #FAFAFA;
 		margin: 0 -16px;
@@ -4294,9 +4289,17 @@ a {
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-right: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation .dropdown-icon {
+		/* This is fixed the issue when the button changes widths */
+		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+	}
+}

dalston/style.css

@@ -4302,7 +4302,6 @@ a {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-right: 90px;
-		/** This number is magic. */
 	}
 }
 
@@ -4312,10 +4311,6 @@ a {
 		top: 16px;
 		right: 16px;
 	}
-	.mobile-nav-side .main-navigation .dropdown-icon {
-		/* This is fixed the issue whent the button changes sizes */
-		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
-	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container {
 		background: #FAFAFA;
 		margin: 0 -16px;
@@ -4323,9 +4318,17 @@ a {
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-left: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation .dropdown-icon {
+		/* This is fixed the issue when the button changes widths */
+		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+	}
+}

hever/sass/_extra-child-theme.scss

@@ -493,33 +493,5 @@ article .entry-header .entry-title,
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-.mobile-nav-side .has-menu .site-logo,
-.mobile-nav-side .has-menu .site-title,
-.mobile-nav-side .has-menu .site-description {
-	@include media(mobile-only) {
-		margin-right: 110px; /** This number is magic. */
-	}
-}
-
-.mobile-nav-side .main-navigation {
-	@include media(mobile-only) {
-		#toggle-menu {
-			position: absolute;
-			top: 2 * $baseline-unit;
-			right: 2 * $baseline-unit;
-		}
-
-		.menu-main-menu-container {
-			background: #{map-deep-get($config-global, "color", "background", "light") };
-			margin:0 ( -2 * $baseline-unit );
-			padding: 0 (2 * $baseline-unit) $baseline-unit;
-			.sub-menu {
-				padding-left: 2 * $baseline-unit;
-			}
-			a {
-				padding: $baseline-unit 0;
-				line-height: 1;
-			}
-		}
-	}
-}
+$mobile-nav-side-right-margin: 110px;
+@import "../../varia/sass/components/header/_site-mobile-nav-side";

hever/style-rtl.css

@@ -4473,7 +4473,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-left: 110px;
-		/** This number is magic. */
 	}
 }
 
@@ -4490,6 +4489,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-right: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;

hever/style.css

@@ -4502,7 +4502,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-right: 110px;
-		/** This number is magic. */
 	}
 }
 
@@ -4519,6 +4518,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-left: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;

mayland/sass/_extra-child-theme.scss

@@ -311,14 +311,9 @@ a {
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-.mobile-nav-side .has-menu .site-logo,
-.mobile-nav-side .has-menu .site-title,
-.mobile-nav-side .has-menu .site-description {
-	@include media(mobile-only) {
-		margin-right: 90px; /** This number is magic. */
-	}
-}
-/* This is also mayland specific */
+$mobile-nav-side-right-margin: 90px;
+@import "../../varia/sass/components/header/_site-mobile-nav-side";
+
 .mobile-nav-side .has-menu .site-title {
 	@include media(mobile-only) {
 		margin-bottom: 3 * $baseline-unit;
@@ -329,27 +324,3 @@ a {
 		margin-bottom: 0;
 	}
 }
-
-
-.mobile-nav-side .main-navigation {
-	@include media(mobile-only) {
-		#toggle-menu {
-			position: absolute;
-			top: 2 * $baseline-unit; /* This is mayland specific */
-			right: 2 * $baseline-unit;
-		}
-
-		.menu-main-menu-container {
-			background: #{map-deep-get($config-global, "color", "background", "light") };
-			margin:0 ( -2 * $baseline-unit );
-			padding: 0 (2 * $baseline-unit) $baseline-unit;
-			.sub-menu {
-				padding-left: 2 * $baseline-unit;
-			}
-			a {
-				padding: $baseline-unit 0;
-				line-height: 1;
-			}
-		}
-	}
-}

mayland/style-rtl.css

@@ -4302,20 +4302,6 @@ strong {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-left: 90px;
-		/** This number is magic. */
-	}
-}
-
-/* This is also mayland specific */
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .has-menu .site-title {
-		margin-bottom: 24px;
-	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .has-logo .site-title {
-		margin-bottom: 0;
 	}
 }
 
@@ -4323,7 +4309,6 @@ strong {
 	.mobile-nav-side .main-navigation #toggle-menu {
 		position: absolute;
 		top: 16px;
-		/* This is mayland specific */
 		left: 16px;
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container {
@@ -4333,9 +4318,22 @@ strong {
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-right: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu .site-title {
+		margin-bottom: 24px;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-logo .site-title {
+		margin-bottom: 0;
+	}
+}

mayland/style.css

@@ -4331,20 +4331,6 @@ strong {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-right: 90px;
-		/** This number is magic. */
-	}
-}
-
-/* This is also mayland specific */
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .has-menu .site-title {
-		margin-bottom: 24px;
-	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .has-logo .site-title {
-		margin-bottom: 0;
 	}
 }
 
@@ -4352,7 +4338,6 @@ strong {
 	.mobile-nav-side .main-navigation #toggle-menu {
 		position: absolute;
 		top: 16px;
-		/* This is mayland specific */
 		right: 16px;
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container {
@@ -4362,9 +4347,22 @@ strong {
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-left: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu .site-title {
+		margin-bottom: 24px;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-logo .site-title {
+		margin-bottom: 0;
+	}
+}

morden/sass/_extra-child-theme.scss

@@ -611,33 +611,17 @@ article .entry-header .entry-title,
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-.mobile-nav-side .has-menu .site-logo,
-.mobile-nav-side .has-menu .site-title,
-.mobile-nav-side .has-menu .site-description {
-	@include media(mobile-only) {
-		margin-right: 115px; /** This number is magic. */
-	}
-}
+$mobile-nav-side-right-margin: 115px;
+@import "../../varia/sass/components/header/_site-mobile-nav-side";
 
 .mobile-nav-side .main-navigation {
 	@include media(mobile-only) {
 		#toggle-menu {
-			position: absolute;
 			top: 0; /** Specific to Morden **/
 			right: 0; /** Specific to Morden **/
 		}
-
 		.menu-main-menu-container {
-			background: transparent; /** Specific to Morden **/
-			margin:0 ( -2 * $baseline-unit );
-			padding: 0 (2 * $baseline-unit) $baseline-unit;
-			.sub-menu {
-				padding-left: 2 * $baseline-unit;
-			}
-			a {
-				padding: $baseline-unit 0;
-				line-height: 1;
-			}
+			background: transparent;
 		}
 	}
 }

morden/style-rtl.css

@@ -4566,26 +4566,23 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-left: 115px;
-		/** This number is magic. */
 	}
 }
 
 @media only screen and (max-width: 559px) {
 	.mobile-nav-side .main-navigation #toggle-menu {
 		position: absolute;
-		top: 0;
-		/** Specific to Morden **/
-		left: 0;
-		/** Specific to Morden **/
+		top: 16px;
+		left: 16px;
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container {
-		background: transparent;
-		/** Specific to Morden **/
+		background: #F8F8F8;
 		margin: 0 -16px;
 		padding: 0 16px 8px;
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-right: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
@@ -4593,6 +4590,18 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	}
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation #toggle-menu {
+		top: 0;
+		/** Specific to Morden **/
+		left: 0;
+		/** Specific to Morden **/
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		background: transparent;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

morden/style.css

@@ -4595,26 +4595,23 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-right: 115px;
-		/** This number is magic. */
 	}
 }
 
 @media only screen and (max-width: 559px) {
 	.mobile-nav-side .main-navigation #toggle-menu {
 		position: absolute;
-		top: 0;
-		/** Specific to Morden **/
-		right: 0;
-		/** Specific to Morden **/
+		top: 16px;
+		right: 16px;
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container {
-		background: transparent;
-		/** Specific to Morden **/
+		background: #F8F8F8;
 		margin: 0 -16px;
 		padding: 0 16px 8px;
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-left: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
@@ -4622,6 +4619,18 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	}
 }
 
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation #toggle-menu {
+		top: 0;
+		/** Specific to Morden **/
+		right: 0;
+		/** Specific to Morden **/
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		background: transparent;
+	}
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

rivington/sass/_extra-child-theme.scss

@@ -459,33 +459,5 @@ a {
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-.mobile-nav-side .has-menu .site-logo,
-.mobile-nav-side .has-menu .site-title,
-.mobile-nav-side .has-menu .site-description {
-	@include media(mobile-only) {
-		margin-right: 90px; /** This number is magic. */
-	}
-}
-
-.mobile-nav-side .main-navigation {
-	@include media(mobile-only) {
-		#toggle-menu {
-			position: absolute;
-			top: 2 * $baseline-unit;
-			right: 2 * $baseline-unit;
-		}
-
-		.menu-main-menu-container {
-			background: #{map-deep-get($config-global, "color", "background", "light") };
-			margin:0 ( -2 * $baseline-unit );
-			padding: 0 (2 * $baseline-unit) $baseline-unit;
-			.sub-menu {
-				padding-left: 2 * $baseline-unit;
-			}
-			a {
-				padding: $baseline-unit 0;
-				line-height: 1;
-			}
-		}
-	}
-}
+$mobile-nav-side-right-margin: 90px;
+@import "../../varia/sass/components/header/_site-mobile-nav-side";

rivington/style-rtl.css

@@ -4429,7 +4429,6 @@ p:not(.site-title) a:hover {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-left: 90px;
-		/** This number is magic. */
 	}
 }
 
@@ -4437,7 +4436,6 @@ p:not(.site-title) a:hover {
 	.mobile-nav-side .main-navigation #toggle-menu {
 		position: absolute;
 		top: 16px;
-		/* This is rivington specific */
 		left: 16px;
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container {
@@ -4447,6 +4445,7 @@ p:not(.site-title) a:hover {
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-right: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;

rivington/style.css

@@ -4458,7 +4458,6 @@ p:not(.site-title) a:hover {
 	.mobile-nav-side .has-menu .site-title,
 	.mobile-nav-side .has-menu .site-description {
 		margin-right: 90px;
-		/** This number is magic. */
 	}
 }
 
@@ -4466,7 +4465,6 @@ p:not(.site-title) a:hover {
 	.mobile-nav-side .main-navigation #toggle-menu {
 		position: absolute;
 		top: 16px;
-		/* This is rivington specific */
 		right: 16px;
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container {
@@ -4476,6 +4474,7 @@ p:not(.site-title) a:hover {
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
 		padding-left: 16px;
+		/** todo: variable */
 	}
 	.mobile-nav-side .main-navigation .menu-main-menu-container a {
 		padding: 8px 0;

varia/sass/components/header/_site-mobile-nav-side.scss

@@ -0,0 +1,31 @@
+// Updates the Mobile Navigation to be next to the site title.
+.mobile-nav-side .has-menu .site-logo,
+.mobile-nav-side .has-menu .site-title,
+.mobile-nav-side .has-menu .site-description {
+  @include media(mobile-only) {
+    margin-right: $mobile-nav-side-right-margin;
+  }
+}
+
+.mobile-nav-side .main-navigation {
+  @include media(mobile-only) {
+    #toggle-menu {
+      position: absolute;
+      top: 2 * $baseline-unit;
+      right: 2 * $baseline-unit;
+    }
+
+    .menu-main-menu-container {
+      background: #{map-deep-get($config-global, "color", "background", "light") };
+      margin:0 (-2 * $baseline-unit );
+      padding: 0 (2 * $baseline-unit) $baseline-unit;
+      .sub-menu {
+        padding-left: 2 * $baseline-unit;  /** todo: variable */
+      }
+      a {
+        padding: $baseline-unit 0;
+        line-height: 1;
+      }
+    }
+  }
+}