Avoid overriding popover content padding

WordPress · Jun 18, 2020 · 2725dea · 2725dea
1 parent e1a6a78
commit 2725dea
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/block-alignment-matrix-toolbar/style.scss b/packages/block-editor/src/components/block-alignment-matrix-toolbar/style.scss
@@ -1,7 +1,11 @@
 .block-editor-block-alignment-matrix-toolbar__popover {
 	.components-popover__content {
 		min-width: 0;
-		padding: $grid-unit;
 		width: auto;
+
+		> div {
+			padding: $grid-unit;
+		}
 	}
+
 }
diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -7,7 +7,7 @@
 
 // Forcing some space above the list of options in
 // the dropdown to visually balance them.
-.block-editor-media-replace-flow__options .components-popover__content {
+.block-editor-media-replace-flow__options .components-popover__content > div {
 	padding-top: $grid-unit-20;
 }
 

diff --git a/packages/block-library/src/heading/editor.scss b/packages/block-library/src/heading/editor.scss
@@ -1,10 +1,13 @@
 // Remove padding in heading level control popover since the toolbar buttons already have padding.
 .block-library-heading-level-dropdown .components-popover__content {
-	padding: 0;
 	// TODO: Find a less hardcoded way of doing this. `max-content` works on
 	// Chromium, but it results in a scrollbar on Safari, and isn't supported
 	// at all in IE11.
 	min-width: 230px;
+
+	> div {
+		padding: 0;
+	}
 }
 
 // The dropdown already has a border, so we can remove the one on the heading

diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -47,7 +47,7 @@
 	margin-left: -4px;
 }
 
-.wp-block-navigation-link__dropdown-content .components-popover__content {
+.wp-block-navigation-link__dropdown-content .components-popover__content > div {
 	padding: $grid-unit-10 0;
 }
 

diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss
@@ -1,4 +1,4 @@
-.components-autocomplete__popover .components-popover__content {
+.components-autocomplete__popover .components-popover__content > div {
 	padding: $grid-unit-20;
 }
 

diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss
@@ -2,6 +2,6 @@
 	display: inline-block;
 }
 
-.components-dropdown__content .components-popover__content {
+.components-dropdown__content .components-popover__content > div {
 	padding: $grid-unit-15;
 }
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
@@ -7,7 +7,6 @@
 }
 
 .components-tooltip .components-popover__content {
-	padding: $grid-unit-05 $grid-unit-10;
 	background: $dark-gray-primary;
 	border-radius: $radius-block-ui;
 	border-width: 0;
@@ -17,6 +16,10 @@
 
 	// This prevents quickly hovering the tooltip from blocking hovering something else.
 	pointer-events: none;
+
+	> div {
+		padding: $grid-unit-05 $grid-unit-10;
+	}
 }
 
 .components-tooltip__shortcut {

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -103,7 +103,7 @@
 }
 
 .edit-post-post-preview-dropdown {
-	.components-popover__content {
+	.components-popover__content > div {
 		padding-bottom: 0;
 	}
 }
diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss
@@ -8,7 +8,9 @@
 
 .table-of-contents__popover {
 	.components-popover__content {
-		padding: $grid-unit-20;
+		> div {
+			padding: $grid-unit-20;
+		}
 
 		@include break-small {
 			max-height: calc(100vh - 120px);

diff --git a/packages/format-library/src/text-color/style.scss b/packages/format-library/src/text-color/style.scss
@@ -12,7 +12,9 @@
 .components-inline-color-popover {
 
 	.components-popover__content {
-		padding: 20px 18px;
+		> div {
+			padding: 20px 18px;
+		}
 
 		.components-color-palette {
 			margin-top: 0.6rem;

diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/style.scss b/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
@@ -1,3 +1,3 @@
-.list-reusable-blocks-import-dropdown__content .components-popover__content {
+.list-reusable-blocks-import-dropdown__content .components-popover__content > div {
 	padding: 10px;
 }
diff --git a/packages/nux/src/components/dot-tip/style.scss b/packages/nux/src/components/dot-tip/style.scss
@@ -36,9 +36,12 @@ $dot-scale: 3;  // How much the pulse animation should scale up by in size
 	}
 
 	.components-popover__content {
-		padding: 5px (36px + 5px) 5px 20px;
 		width: 350px;
 
+		> div {
+			padding: 20px 18px;
+		}
+
 		@include break-small {
 			width: 450px;
 		}