fix tab design, remove unnecessary styles

Author: kaeizen

src/components/design-library-list/editor.scss

@@ -28,7 +28,6 @@
 .ugb-design-library-item {
 	display: grid;
 	grid-template-columns: 1fr;
-	// grid-template-rows: auto 40px;
 	padding: 0;
 	border: 0;
 	text-align: start;
@@ -44,9 +43,6 @@
 	}
 	footer {
 		line-height: 18px;
-		// display: flex;
-		// align-items: center;
-		// justify-content: space-between;
 	}
 	.ugb-design-library-item__spinner {
 		position: absolute;
@@ -58,20 +54,6 @@
 			margin: 0;
 		}
 	}
-	&.ugb--is-busy {
-		.ugb-design-library-item__image img {
-			opacity: 0.1;
-		}
-	}
-	.ugb-design-library-item__image {
-		background: #fff;
-		position: relative;
-	}
-	&.ugb--is-premium {
-		.ugb-design-library-item__image {
-			min-height: 240px;
-		}
-	}
 
 	.ugb-design-control-pro-note {
 		position: absolute;
@@ -179,45 +161,6 @@
 	}
 }
 
-// .ugb-design-library-item__image {
-// 	width: 100% !important;
-// 	margin: 0 !important;
-// 	outline: none !important;
-// 	display: block;
-// }
-
-.ugb-design-library-item__favorite {
-	border: 0;
-	padding: 0;
-	cursor: pointer;
-	outline: none;
-	transition: all 0.3 ease-in-out;
-	.dashicon {
-		fill: #bbb;
-		height: 14px;
-		width: 14px;
-	}
-	&:hover {
-		.dashicon {
-			fill: #d30c5c;
-		}
-	}
-
-	&.ugb--is-favorite {
-		&,
-		&:hover {
-			.dashicon {
-				fill: #d30c5c;
-			}
-		}
-	}
-
-	// &.ugb--is-busy {
-	// 	.dashicon {
-	// 		opacity: 0.3;
-	// 	}
-	// }
-}
 // new design library styles
 .stk-block-design__host {
 	min-width: 1300px;
@@ -232,10 +175,6 @@
 	position: relative;
 }
 
-:host body {
-	min-height: 500px;
-}
-
 .stk--design-preview-large {
 	.ugb-design-control-pro-note {
 		grid-template-columns: 1fr;

src/components/modal-design-library/editor.scss

@@ -227,53 +227,6 @@
 	opacity: 0.3;
 }
 
-// Display color indicators horizontally.
-.ugb-modal-design-library__color-list-wrapper {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-	justify-content: center;
-}
-.ugb-modal-design-library__color-list {
-	margin-bottom: 8px !important;
-
-	// Color indicator.
-	.components-circular-option-picker {
-		width: 24px;
-		flex: 0;
-		margin: 0 10px 10px;
-		flex-basis: 20px;
-	}
-	.components-circular-option-picker__option-wrapper {
-		height: 22px;
-		width: 22px;
-		margin: 0;
-		.components-circular-option-picker__option {
-			padding: 0;
-		}
-	}
-
-	// Check mark when color is active.
-	.components-circular-option-picker__option.is-pressed + svg {
-		left: 3px;
-		top: 3px;
-		width: 16px;
-		height: 16px;
-	}
-
-	.components-circular-option-picker__option::after {
-		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
-	}
-
-	// Gray focus outline.
-	.components-circular-option-picker__option:focus::after {
-		width: 28px;
-		height: 28px;
-		top: -3px;
-		left: -3px;
-	}
-}
-
 .ugb-modal-design-library__style-options div.components-base-control {
 	margin-bottom: 0;
 }
@@ -316,33 +269,38 @@ div.ugb-modal-design-library__enable-background {
 
 // Design library top tabs, switch between block categories, ui kit and wireframe.
 .stk-design-library-tabs {
-	margin-bottom: 0 !important;
 	margin: 0 auto;
+	margin-bottom: 0 !important;
+	height: calc( 100% + 1px);
+
+	.components-base-control__field {
+		&,
+		.stk-control-content,
+		.components-button-group {
+			height: 100%;
+		}
+	}
 
 	.components-base-control__field,
 	.stk-control-label {
 		margin: 0;
 	}
 	.components-button-group {
-		background: #e0e0e08a;
-		border-radius: 6px !important;
 		box-shadow: none !important;
-
 	}
+
 	.components-button {
-		height: fit-content;
-		border: none !important;
-		box-shadow: none;
+		height: 100%;
+		border: 1px solid #e0e0e0;
+		box-shadow: none !important;
 		padding: 4px 24px;
-		margin: 6px;
-		border-radius: 4px !important;
-		background: transparent;
+		border-radius: 0 !important;
 		&:hover,
 		&.is-primary:hover,
 		&.is-primary {
 			color: #f00069 !important;
-			background: #fff;
-			box-shadow: 1px 1px 3px 0px #1e1e1e1e;
+			background: #e543761a;
+			border-color: #f00069;
 		}
 	}
 }