..F....... [ZBXNEXT-6309] refactored widget placeholder

3 files changed, 41 insertions, 61 deletions

diff --git a/sass/stylesheets/sass/components/_dashboard.scss b/sass/stylesheets/sass/components/_dashboard.scss
index 7ffc9cab3a3..1e949d4f404 100755
--- a/sass/stylesheets/sass/components/_dashboard.scss
+++ b/sass/stylesheets/sass/components/_dashboard.scss
@@ -225,7 +225,7 @@
 	z-index: 998; // Below the new widget placeholder.
 }
 
-.dashboard-grid-new-widget-placeholder {
+.dashboard-widget-placeholder {
 	box-sizing: border-box;
 	display: flex;
 	height: 200px;
@@ -236,9 +236,7 @@
 	cursor: pointer;
 	user-select: none;
 
-	.dashboard-grid-widget-new-box,
-	.dashboard-grid-widget-set-position,
-	.dashboard-grid-widget-set-size {
+	.dashboard-widget-placeholder-box {
 		background-color: rgba($ui-bg-color, .7);
 		border: 1px dashed $form-border-color;
 		box-shadow: 2px 2px 6px $action-shadow-color;
@@ -247,12 +245,7 @@
 		overflow: hidden;
 	}
 
-	.dashboard-grid-widget-set-size {
-		background: darken($body-bg-color, 6%);
-		box-shadow: inset 2px 2px 6px $action-shadow-color;
-	}
-
-	.dashboard-grid-new-widget-label {
+	.dashboard-widget-placeholder-label {
 		$icon-height: 28px;
 
 		position: absolute;
@@ -281,13 +274,24 @@
 		}
 	}
 
+	.dashboard-widget-placeholder-resizing {
+		background: darken($body-bg-color, 6%);
+		box-shadow: inset 2px 2px 6px $action-shadow-color;
+
+		.dashboard-widget-placeholder-label {
+			&::before {
+				background: url($sprite-path) no-repeat -345px -888px;
+			}
+		}
+	}
+
 	&.disabled {
 		opacity: 1;
 
-		.dashboard-grid-widget-new-box {
+		.dashboard-widget-placeholder-box {
 			background-color: rgba($ui-bg-color, .7);
 
-			.dashboard-grid-new-widget-label::before {
+			.dashboard-widget-placeholder-label::before {
 				background: url($sprite-path) no-repeat -122px -284px;
 			}
 		}
@@ -298,14 +302,6 @@
 	}
 }
 
-.dashboard-grid-widget-set-size {
-	.dashboard-grid-new-widget-label {
-		&::before {
-			background: url($sprite-path) no-repeat -345px -888px;
-		}
-	}
-}
-
 .dashboard-grid-widget-container {
 	position: absolute;
 	top: 0;
@@ -891,16 +887,6 @@
 .new-widget {
 	animation: zoom-in-out .2s linear;
 }
-.dashboard-widget-placeholder {
-	border-color: darken($body-bg-color, 6%) !important;
-	background-color: darken($body-bg-color, 6%) !important;
-}
-
-.dashboard-widget-draggable {
-	border-color: $action-border-color !important;
-	border-bottom-color: darken($action-border-color, 1%) !important;
-	box-shadow: 0 4px 20px 0 $action-shadow-color;
-}
 
 .dashboard-widget {
 	min-width: 250px;
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index 77c9f96f08e..8f915fb1572 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -346,32 +346,29 @@ $dashboard-my-bg-color: #e0e0e0;
 // To maintain code clarity:
 //   - Do not mix rules for dashboard view mode and dashboard edit mode.
 //   - Do not mix rules for widgets and iterators.
-.dashboard-grid-new-widget-placeholder {
-	.dashboard-grid-widget-new-box,
-	.dashboard-grid-widget-set-position,
-	.dashboard-grid-widget-set-size {
+
+.dashboard-widget-placeholder {
+	.dashboard-widget-placeholder-box {
 		box-shadow: none;
 		border-color: $font-color;
 		background-color: transparent;
 	}
 
-	.dashboard-grid-widget-set-size {
-		border: 2px dashed $font-color;
-		box-shadow: none;
-		background: darken($body-bg-color, 6%);
-	}
-
-	.dashboard-grid-new-widget-label {
+	.dashboard-widget-placeholder-label {
 		&::before {
 			background: url($sprite-path) no-repeat -269px -888px;
 		}
 	}
-}
 
-.dashboard-grid-widget-set-size {
-	.dashboard-grid-new-widget-label {
-		&::before {
-			background: url($sprite-path) no-repeat -457px -888px;
+	.dashboard-widget-placeholder-resizing {
+		border: 2px dashed $font-color;
+		box-shadow: none;
+		background: darken($body-bg-color, 6%);
+
+		.dashboard-widget-placeholder-label {
+			&::before {
+				background: url($sprite-path) no-repeat -457px -888px;
+			}
 		}
 	}
 }
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index de19721c109..16e9fc1d0d7 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -323,31 +323,28 @@ $dashboard-my-bg-color: #555555;
 // To maintain code clarity:
 //   - Do not mix rules for dashboard view mode and dashboard edit mode.
 //   - Do not mix rules for widgets and iterators.
-.dashboard-grid-new-widget-placeholder {
-	.dashboard-grid-widget-new-box,
-	.dashboard-grid-widget-set-position,
-	.dashboard-grid-widget-set-size {
+
+.dashboard-widget-placeholder {
+	.dashboard-widget-placeholder-box {
 		box-shadow: none;
 		border-color: $font-color;
 		background-color: transparent;
 	}
 
-	.dashboard-grid-widget-set-size {
-		border: 2px dashed $font-color;
-		box-shadow: none;
-	}
-
-	.dashboard-grid-new-widget-label {
+	.dashboard-widget-placeholder-label {
 		&::before {
 			background: url($sprite-path) no-repeat -213px -888px;
 		}
 	}
-}
 
-.dashboard-grid-widget-set-size {
-	.dashboard-grid-new-widget-label {
-		&::before {
-			background: url($sprite-path) no-repeat -401px -888px;
+	.dashboard-widget-placeholder-resizing {
+		border: 2px dashed $font-color;
+		box-shadow: none;
+
+		.dashboard-widget-placeholder-label {
+			&::before {
+				background: url($sprite-path) no-repeat -401px -888px;
+			}
 		}
 	}
 }