..F....... [ZBXNEXT-6411] moved diff and toc styles to separate file; updated import compare dialogue; fixed code style

7 files changed, 92 insertions, 92 deletions

diff --git a/sass/stylesheets/sass/base/_colors.scss b/sass/stylesheets/sass/base/_colors.scss
index c5171065755..65d603dce45 100644
--- a/sass/stylesheets/sass/base/_colors.scss
+++ b/sass/stylesheets/sass/base/_colors.scss
@@ -215,7 +215,7 @@ $dashboard-shared-bg-color: darken(desaturate($alt-yellow, 9%), 20%) !default;
 $dashboard-my-bg-color: darken(desaturate($alt-green, 10%), 20%) !default;
 
 // Import compare.
-$importcompare-toc-title-color: #ffffff !default;
-$importcompare-toc-title-bg-color: #768d99 !default;
-$importcompare-added-bg-color: $lighter-green !default;
-$importcompare-removed-bg-color: $lighter-red !default;
+$toc-title-color: #ffffff !default;
+$toc-title-bg-color: #768d99 !default;
+$diff-added-bg-color: $lighter-green !default;
+$diff-removed-bg-color: $lighter-red !default;
diff --git a/sass/stylesheets/sass/components/_diff.scss b/sass/stylesheets/sass/components/_diff.scss
new file mode 100755
index 00000000000..24ddfb55dd1
--- /dev/null
+++ b/sass/stylesheets/sass/components/_diff.scss
@@ -0,0 +1,21 @@
+.diff {
+	padding: 4px;
+	background: $body-bg-color;
+
+	.diff-added {
+		background-color: $diff-added-bg-color;
+	}
+
+	.diff-removed {
+		background-color: $diff-removed-bg-color;
+	}
+
+	pre {
+		width: max-content;
+		min-width: 100%;
+
+		> div {
+			white-space: pre;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/components/_toc.scss b/sass/stylesheets/sass/components/_toc.scss
new file mode 100755
index 00000000000..c83db30212f
--- /dev/null
+++ b/sass/stylesheets/sass/components/_toc.scss
@@ -0,0 +1,54 @@
+.toc {
+	.toc-row {
+		padding: 8px 10px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: 14px;
+		color: $toc-title-color;
+		border-bottom: 1px solid $table-border-color;
+		background: $toc-title-bg-color;
+	}
+
+	.toc-arrow {
+		width: 14px;
+		min-height: 14px;
+		padding: 0;
+		margin-right: 4px;
+		background-color: transparent;
+		border: 0;
+
+		.arrow-down,
+		.arrow-up {
+			transform: translateY(-1px);
+		}
+
+		.arrow-down {
+			border-top-color: $toc-title-color;
+		}
+
+		.arrow-up {
+			border-bottom-color: $toc-title-color;
+		}
+	}
+
+	.toc-sublist {
+		.toc-row {
+			padding-left: 20px;
+			background: $form-bg-color;
+			color: $font-color;
+		}
+
+		.toc-sublist .toc-row {
+			padding-left: 50px;
+		}
+
+		.arrow-down {
+			border-top-color: $toc-title-bg-color;
+		}
+
+		.arrow-up {
+			border-bottom-color: $toc-title-bg-color;
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss
index 9208c6f83ac..5da6a2d165e 100644
--- a/sass/stylesheets/sass/dark-theme.scss
+++ b/sass/stylesheets/sass/dark-theme.scss
@@ -180,8 +180,8 @@ $multiselect-selected-bg-color: #696969;
 }
 
 // Import compare.
-$importcompare-toc-title-color: #f2f2f2;
-$importcompare-toc-title-bg-color: #4f4f4f;
+$toc-title-color: #f2f2f2;
+$toc-title-bg-color: #4f4f4f;
 
 
 // Important! @import string should come after variables
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index a695f63b1d9..89f2711efc2 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -228,10 +228,10 @@ $dashboard-shared-bg-color: #e0e0e0;
 $dashboard-my-bg-color: #e0e0e0;
 
 // Import compare.
-$importcompare-toc-title-color: #000000;
-$importcompare-toc-title-bg-color: #dddddd;
-$importcompare-added-bg-color: transparent;
-$importcompare-removed-bg-color: transparent;
+$toc-title-color: #000000;
+$toc-title-bg-color: #dddddd;
+$diff-added-bg-color: transparent;
+$diff-removed-bg-color: transparent;
 
 // Important! @import string should come after variables.
 @import 'screen.scss';
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index 11c1521ac9e..a45d6399daf 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -221,10 +221,10 @@ $dashboard-shared-bg-color: #555555;
 $dashboard-my-bg-color: #555555;
 
 // Import compare.
-$importcompare-toc-title-color: #ffffff;
-$importcompare-toc-title-bg-color: #333333;
-$importcompare-added-bg-color: transparent;
-$importcompare-removed-bg-color: transparent;
+$toc-title-color: #ffffff;
+$toc-title-bg-color: #333333;
+$diff-added-bg-color: transparent;
+$diff-removed-bg-color: transparent;
 
 // Important! @import string should come after variables
 @import 'screen.scss';
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 1d7a07ed859..7aef1b0e028 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -28,11 +28,13 @@ $browser-sprite-path: '../img/browser-sprite.png?20200407';
 @import "layout/form-grid";
 
 @import "components/dashboard";
+@import "components/diff";
 @import "components/form-search";
 @import "components/menu-main";
 @import "components/menu-user";
 @import "components/message-box";
 @import "components/tabfilter";
+@import "components/toc";
 @import "components/z-select";
 
 .link-action {
@@ -6471,89 +6473,12 @@ z-select,
 		flex: 20%;
 		overflow-y: auto;
 		overflow-x: hidden;
-
-		.toc-level1-row,
-		.toc-level2-row,
-		.toc-level3-row {
-			height: 20px;
-			padding: 8px 0;
-			border-bottom: 1px solid $table-border-color;
-		}
-
-		.toc-level1-row,
-		.toc-level2-row {
-			.arrow {
-				width: 10px;
-				margin-right: 4px;
-				min-height: auto;
-				padding: 0;
-				background-color: transparent;
-				border: 0;
-			}
-		}
-
-		.toc-level1 {
-			.toc-level1-row {
-				padding-left: 10px;
-				background-color: $importcompare-toc-title-bg-color;
-				color: $importcompare-toc-title-color;
-			}
-
-			.arrow {
-				.arrow-down {
-					border-top-color: $importcompare-toc-title-color;
-				}
-				.arrow-up {
-					border-bottom-color: $importcompare-toc-title-color;
-				}
-			}
-		}
-
-		.toc-level2 {
-			.toc-level2-row {
-				padding-left: 25px;
-			}
-
-			.arrow {
-				.arrow-down {
-					border-top-color: $font-color;
-				}
-				.arrow-up {
-					border-bottom-color: $font-color;
-				}
-			}
-		}
-
-		.toc-level3 {
-			.toc-level3-row {
-				padding-left: 55px;
-			}
-		}
 	}
 
 	.diff {
 		flex: 80%;
+		margin-left: 5px;
 		overflow: auto;
 		border: 1px dashed $form-border-color;
-		background: $body-bg-color;
-		margin-left: 5px;
-		padding: 4px;
-
-		.diff-add {
-			background-color: $importcompare-added-bg-color;
-		}
-
-		.diff-remove {
-			background-color: $importcompare-removed-bg-color;
-		}
-
-		pre {
-			width: max-content;
-			min-width: 100%;
-
-			> div {
-				white-space: pre;
-			}
-		}
 	}
 }