Adds styles

WordPress · Jul 29, 2019 · cc2b5f9 · cc2b5f9
1 parent 379196e
commit cc2b5f9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/responsive-block-control/index.js b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -21,15 +21,17 @@ function ResponsiveBlockControl( props ) {
 		<fieldset className="block-editor-responsive-block-control">
 			<legend className="block-editor-responsive-block-control__label">{ legend }</legend>
 
-			{ ! isOpen && renderDefaultControl() }
+			<div className="block-editor-responsive-block-control__inner">
+				{ ! isOpen && renderDefaultControl() }
 
-			{ isOpen && renderResponsiveControl() }
+				{ isOpen && renderResponsiveControl() }
 
-			<ToggleControl
-				label={ toggleControlLabel }
-				checked={ isOpen }
-				onChange={ onToggleResponsive }
-			/>
+				<ToggleControl
+					label={ toggleControlLabel }
+					checked={ isOpen }
+					onChange={ onToggleResponsive }
+				/>
+			</div>
 		</fieldset>
 
 	);

diff --git a/packages/block-editor/src/components/responsive-block-control/style.scss b/packages/block-editor/src/components/responsive-block-control/style.scss
@@ -0,0 +1,20 @@
+.block-editor-responsive-block-control {
+	margin-bottom: $block-padding*2;
+	border-bottom: 1px solid $light-gray-600;
+	padding-bottom: $block-padding;
+
+	&:last-child {
+		padding-bottom: 0;
+		border-bottom: 0;
+	}
+}
+
+.block-editor-responsive-block-control__label {
+	font-weight: 600;
+	margin-bottom: 0.6em;
+	margin-left: -3px; // visual compensation
+}
+
+.block-editor-responsive-block-control__inner {
+	margin-left: -1px; // visual compensation
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -25,6 +25,7 @@
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/panel-color-settings/style.scss";
 @import "./components/plain-text/style.scss";
+@import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/format-toolbar/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";