From ffa53651b21671a2403891880cd5ed7ee3212555 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 21 Feb 2019 10:27:42 -0500
Subject: [PATCH] Cleanup URL Popover stylesheet.

As noted in #13973, this stylesheet uses a relatively non-standard SCSS method of nesting some classnames. For instance:

`.editor-url-popover { &__settings-toggle { ... } }`.

... instead of:

`.editor-url-popover__settings-toggle { ... }`

This is different from the conventions used elsewhere in Gutenberg, and is a bit more difficult to follow for that reason.

This commit un-nests those styles, and should have no effect on the compiled CSS.
---
 .../src/components/url-popover/style.scss     | 84 +++++++++----------
 1 file changed, 41 insertions(+), 43 deletions(-)

diff --git a/packages/editor/src/components/url-popover/style.scss b/packages/editor/src/components/url-popover/style.scss
index af277e9fc4c4af..51f16cadfb24c3 100644
--- a/packages/editor/src/components/url-popover/style.scss
+++ b/packages/editor/src/components/url-popover/style.scss
@@ -1,61 +1,59 @@
-.editor-url-popover {
-	&__row {
-		display: flex;
-	}
+.editor-url-popover__row {
+	display: flex;
+}
 
-	// Any children of the popover-row that are not the settings-toggle
-	// should take up as much space as possible.
-	&__row > :not(.editor-url-popover__settings-toggle) {
-		flex-grow: 1;
-	}
+// Any children of the popover-row that are not the settings-toggle
+// should take up as much space as possible.
+.editor-url-popover__row > :not(.editor-url-popover__settings-toggle) {
+	flex-grow: 1;
+}
 
-	// Mimic toolbar component styles for the icons in this popover.
-	.components-icon-button {
-		padding: 3px;
+// Mimic toolbar component styles for the icons in this popover.
+.editor-url-popover .components-icon-button {
+	padding: 3px;
 
-		> svg {
-			padding: 5px;
-			border-radius: $radius-round-rectangle;
-			height: 30px;
-			width: 30px;
-		}
+	> svg {
+		padding: 5px;
+		border-radius: $radius-round-rectangle;
+		height: 30px;
+		width: 30px;
+	}
 
-		&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
-			box-shadow: none;
+	&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
+		box-shadow: none;
 
-			> svg {
-				@include formatting-button-style__hover;
-			}
+		> svg {
+			@include formatting-button-style__hover;
 		}
+	}
 
-		&:not(:disabled):focus {
-			box-shadow: none;
+	&:not(:disabled):focus {
+		box-shadow: none;
 
-			> svg {
-				@include formatting-button-style__focus;
-			}
+		> svg {
+			@include formatting-button-style__focus;
 		}
 	}
+}
 
-	&__settings-toggle {
-		flex-shrink: 0;
+.editor-url-popover__settings-toggle {
+	flex-shrink: 0;
 
-		// Add a left divider to the toggle button.
-		border-radius: 0;
-		border-left: $border-width solid $light-gray-500;
-		margin-left: 1px;
+	// Add a left divider to the toggle button.
+	border-radius: 0;
+	border-left: $border-width solid $light-gray-500;
+	margin-left: 1px;
 
-		&[aria-expanded="true"] .dashicon {
-			transform: rotate(180deg);
-		}
+	&[aria-expanded="true"] .dashicon {
+		transform: rotate(180deg);
 	}
+}
 
-	&__settings {
-		padding: $panel-padding;
-		border-top: $border-width solid $light-gray-500;
+.editor-url-popover__settings {
+	padding: $panel-padding;
+	border-top: $border-width solid $light-gray-500;
 
-		.components-base-control:last-child .components-base-control__field {
-			margin-bottom: 0;
-		}
+	.components-base-control:last-child .components-base-control__field {
+		margin-bottom: 0;
 	}
 }