Make color variations fit in a bit better visually (WordPress#61617)

* Use smaller placement * remove border radius * fix scrollbars * add the border-radius to the previews --------- Co-authored-by: Ben Dwyer <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: bgardner <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: hbhalodia <[email protected]>
carstingaxion · Jun 4, 2024 · 97dea7d · 97dea7d
1 parent 4d6519a
commit 97dea7d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -7,7 +7,6 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
 	max-width: 100%;
 	display: block;
 	width: 100%;

diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss
@@ -8,15 +8,18 @@
 		border-radius: $radius-block-ui;
 		outline: $border-width solid rgba($black, 0.15);
 		outline-offset: -$border-width;
+		overflow: hidden;
 		position: relative;
 		// Add the same transition that block style variations and other buttons have.
 		transition: outline 0.1s linear;
 		@include reduce-motion("transition");
 
 		&.is-pill {
-			height: $button-size-next-default-40px;
-			border-radius: 100px;
-			overflow: hidden;
+			height: $button-size-compact;
+
+			.block-editor-iframe__scale-container {
+				overflow: hidden;
+			}
 		}
 	}