style fixes and improvements for constructor ui

nk-crew · Nov 28, 2024 · 220775d · 220775d
1 parent 8f05ba7
commit 220775d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/assets/components/document-tabs/editor.scss b/assets/components/document-tabs/editor.scss
@@ -10,6 +10,7 @@
 		display: flex;
 		margin-bottom: -1px;
 		background-color: #fff;
+		padding: 0;
 		z-index: 2;
 
 		> ul {
@@ -21,6 +22,7 @@
 
 			button {
 				position: relative;
+				padding: 12px 16px;
 				height: 48px;
 				font-weight: 500;
 				outline: none;

diff --git a/assets/editor-constructor/boxes/selected-control-settings/editor.scss b/assets/editor-constructor/boxes/selected-control-settings/editor.scss
@@ -42,10 +42,11 @@
 	align-items: center;
 	width: 100%;
 	padding: 3px 5px;
+	min-height: 40px;
 	cursor: pointer;
 	background-color: #fff;
 	border: 1px solid $color_dark_lighten_2;
-	border-radius: 3px;
+	border-radius: 2px;
 	transition: 0.15s border-color ease-in-out;
 
 	&:hover {
@@ -56,18 +57,14 @@
 	span svg {
 		display: block;
 		margin-right: 5px;
-		opacity: 0.7;
 	}
 
 	// arrow
 	> svg {
 		margin-left: auto;
-		opacity: 0.2;
 		transition: 0.15s opacity ease-in-out;
-	}
-
-	&:hover > svg {
-		opacity: 0.4;
+		width: 14px;
+		height: 14px;
 	}
 }
 

diff --git a/assets/editor-constructor/boxes/selected-control-settings/settings-rows/placement.js b/assets/editor-constructor/boxes/selected-control-settings/settings-rows/placement.js
@@ -49,13 +49,12 @@ export default function PlacementRow(props) {
 				<ButtonGroup>
 					<Button
 						id="lazyblocks-settings-row-placement"
-						isPrimary={isContent}
+						variant={isContent ? 'primary' : 'secondary'}
 						isPressed={isContent}
 						disabled={
 							!isContent &&
 							placementRestrictions.indexOf('content') === -1
 						}
-						size="small"
 						onClick={() => {
 							let newPlacement = 'content';
 
@@ -75,13 +74,12 @@ export default function PlacementRow(props) {
 						{__('Content', 'lazy-blocks')}
 					</Button>
 					<Button
-						isPrimary={isInspector}
+						variant={isInspector ? 'primary' : 'secondary'}
 						isPressed={isInspector}
 						disabled={
 							!isInspector &&
 							placementRestrictions.indexOf('inspector') === -1
 						}
-						size="small"
 						onClick={() => {
 							let newPlacement = 'inspector';
 

diff --git a/assets/editor-constructor/index.scss b/assets/editor-constructor/index.scss
@@ -20,6 +20,7 @@ html {
 	}
 
 	// hide right sidebar tabs, as we select constructor block by default.
+	.components-panel__header.editor-sidebar__panel-tabs,
 	.components-panel__header.edit-post-sidebar-header,
 	.components-panel__header.edit-post-sidebar__panel-tabs {
 		display: none;
@@ -35,6 +36,15 @@ html {
 		display: none;
 	}
 
+	.has-footer .interface-interface-skeleton__body {
+		padding-bottom: 0;
+	}
+
+	.post-type-lazyblocks .is-root-container.alignfull {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
 	.editor-styles-wrapper {
 		// fix for default themes.
 		padding: 10px;