Site icon: Fix site icon styling to display non-square site icons wit…

…hin a square button (#37570) * Fix site icon styling to display non-square site icons within a square button * Switch back to using an img element, use object-fit instead
WordPress · Jan 4, 2022 · d896c11 · d896c11
1 parent 924c415
commit d896c11
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -51,9 +51,13 @@
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
-}
 
-.edit-post-fullscreen-mode-close_site-icon {
-	width: $button-size;
-	border-radius: $radius-block-ui;
+	.edit-post-fullscreen-mode-close_site-icon {
+		width: $button-size;
+		height: $button-size;
+		border-radius: $radius-block-ui;
+		object-fit: cover;
+		// Compensate for the top-bar border.
+		margin-top: -($border-width);
+	}
 }
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -58,9 +58,13 @@
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
-}
 
-.edit-site-navigation-toggle__site-icon {
-	width: $button-size;
-	border-radius: $radius-block-ui;
+	.edit-site-navigation-toggle__site-icon {
+		width: $button-size;
+		height: $button-size;
+		border-radius: $radius-block-ui;
+		object-fit: cover;
+		// Compensate for the top-bar border.
+		margin-top: -($border-width);
+	}
 }