Improve border position for mobile screens, especially for elements t…

…hat float left/right.
WordPress · Mar 12, 2019 · 047e1e4 · 047e1e4
1 parent 130d84f
commit 047e1e4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -315,7 +315,7 @@
 		// Position toolbar better on mobile.
 		.editor-block-contextual-toolbar {
 			width: auto;
-			border-bottom: $border-width solid $light-gray-500;
+			border-bottom: $border-width solid $light-gray-800;
 			bottom: auto;
 		}
 	}
@@ -833,11 +833,25 @@
 		}
 	}
 
-	// Floated items have special needs for the contextual toolbar position.
+	// Floated items have special needs for the contextual toolbar position + the thicker left border.
 	&[data-align="left"] .editor-block-contextual-toolbar,
 	&[data-align="right"] .editor-block-contextual-toolbar {
 		margin-bottom: $border-width;
 		margin-top: -$block-toolbar-height;
+
+		// Display the box-shadow on the parent element.
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
+
+		@include break-small() {
+			box-shadow: none;
+		}
+
+		.editor-block-toolbar {
+			border-left: none;
+		}
 	}
 
 	// Make block toolbar full width on mobile.

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -4,19 +4,21 @@
 	width: 100%;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
+	border-left: $border-width solid $light-gray-800;
 	transition: border-color 0.1s linear, box-shadow 0.1s linear;
 
-	// Allow overflow on desktop.
 	@include break-small() {
+		// Allow overflow on desktop.
 		overflow: inherit;
-	}
 
-	// Show a left border on the parent container.
-	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+		// Show a left border on the parent container.
+		border-left: none;
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
 
-	// Show a lighter version for dark themes.
-	.is-dark-theme & {
-		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		// Show a lighter version for dark themes.
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
 	}
 
 	// The component is born with a border, but we only need some of them.