Rockfield: Remove `.dropdown-icon` and use CSS instead

rockfield/header.php

@@ -32,8 +32,6 @@
 					<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
 					<label for="toggle" id="toggle-menu" class="button">
 						<?php _e( 'Menu', 'rockfield' ); ?>
-						<span class="dropdown-icon open">+</span>
-						<span class="dropdown-icon close">&times;</span>
 						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'rockfield' ); ?></span>
 						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'rockfield' ); ?></span>
 					</label>

rockfield/sass/_extra-child-theme.scss

@@ -69,9 +69,9 @@ a {
 .site-branding {
 	margin: 0;
 	margin-right: auto;
-	padding-bottom: #{0.27 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
 	padding-right: #{map-deep-get($config-global, "spacing", "horizontal")};
-	padding-top: #{0.27 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
 	text-align: inherit;
 
 	@include media(mobile) {
@@ -182,11 +182,37 @@ a {
 }
 
 // Toggle Menu
-.main-navigation #toggle:focus + #toggle-menu,
+#site-navigation #toggle:focus + #toggle-menu,
 #toggle-menu {
 	text-decoration: none;
 }
 
+#site-navigation #toggle-menu {
+	align-items: center;
+	display: flex;
+	padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")} #{map-deep-get($config-global, "spacing", "unit")};
+
+	&:after {
+		content: "";
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
+		display: block;
+		height: 24px;
+		margin: 0;
+		margin-left: #{0.25 * map-deep-get($config-global, "spacing", "unit")};
+		width: 24px;
+	}
+
+	@include media(mobile) {
+		display: none;
+	}
+}
+
+#site-navigation #toggle:checked + #toggle-menu {
+	&:after {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'%3E%3C/path%3E%3C/svg%3E");
+	}
+}
+
 /**
  * Content Area
  */

rockfield/style-rtl.css

@@ -3442,9 +3442,9 @@ p:not(.site-title) a:hover {
 .site-branding {
 	margin: 0;
 	margin-left: auto;
-	padding-bottom: 8.64px;
+	padding-bottom: 8px;
 	padding-left: 16px;
-	padding-top: 8.64px;
+	padding-top: 8px;
 	text-align: inherit;
 }
 
@@ -3549,11 +3549,37 @@ p:not(.site-title) a:hover {
 	}
 }
 
-.main-navigation #toggle:focus + #toggle-menu,
+#site-navigation #toggle:focus + #toggle-menu,
 #toggle-menu {
 	text-decoration: none;
 }
 
+#site-navigation #toggle-menu {
+	align-items: center;
+	display: flex;
+	padding: 8px 16px;
+}
+
+#site-navigation #toggle-menu:after {
+	content: "";
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
+	display: block;
+	height: 24px;
+	margin: 0;
+	margin-right: 4px;
+	width: 24px;
+}
+
+@media only screen and (min-width: 560px) {
+	#site-navigation #toggle-menu {
+		display: none;
+	}
+}
+
+#site-navigation #toggle:checked + #toggle-menu:after {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'%3E%3C/path%3E%3C/svg%3E");
+}
+
 /**
  * Content Area
  */

rockfield/style.css

@@ -3447,9 +3447,9 @@ p:not(.site-title) a:hover {
 .site-branding {
 	margin: 0;
 	margin-right: auto;
-	padding-bottom: 8.64px;
+	padding-bottom: 8px;
 	padding-right: 16px;
-	padding-top: 8.64px;
+	padding-top: 8px;
 	text-align: inherit;
 }
 
@@ -3554,11 +3554,37 @@ p:not(.site-title) a:hover {
 	}
 }
 
-.main-navigation #toggle:focus + #toggle-menu,
+#site-navigation #toggle:focus + #toggle-menu,
 #toggle-menu {
 	text-decoration: none;
 }
 
+#site-navigation #toggle-menu {
+	align-items: center;
+	display: flex;
+	padding: 8px 16px;
+}
+
+#site-navigation #toggle-menu:after {
+	content: "";
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
+	display: block;
+	height: 24px;
+	margin: 0;
+	margin-left: 4px;
+	width: 24px;
+}
+
+@media only screen and (min-width: 560px) {
+	#site-navigation #toggle-menu {
+		display: none;
+	}
+}
+
+#site-navigation #toggle:checked + #toggle-menu:after {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'%3E%3C/path%3E%3C/svg%3E");
+}
+
 /**
  * Content Area
  */