..F....... [ZBXNEXT-6309] added theme support to dashboard pages

5 files changed, 66 insertions, 6 deletions

diff --git a/sass/stylesheets/sass/components/_dashboard.scss b/sass/stylesheets/sass/components/_dashboard.scss
index 6713501aded..7bf74610c42 100755
--- a/sass/stylesheets/sass/components/_dashboard.scss
+++ b/sass/stylesheets/sass/components/_dashboard.scss
@@ -48,6 +48,7 @@
 		display: flex;
 		padding: 0;
 		margin: 0;
+		align-items: center;
 
 		& > .csortable-item:focus:not(:active) {
 			// Increase padding to accommodate the focused div's shadow.
@@ -98,10 +99,11 @@
 			span {
 				@extend %overflow-ellipsis;
 				max-width: 300px;
+				color: $font-color;
 			}
 
 			button {
-				margin: 0 -8px 0 4px;
+				margin: 0 -9px 0 4px;
 			}
 
 			&:not(.selected-tab) {
@@ -114,15 +116,18 @@
 
 	& .csortable > .csortable-item > div,
 	& .csortable-list > .csortable-item > div:hover {
-		background: #e8f5ff;
-		border: 1px solid lighten($blue, 30%);
+		background: $action-hover-color;
+		border: 1px solid darken($action-hover-color, 20%);
 	}
 
 	& .csortable > .csortable-item > div.selected-tab,
 	& .csortable-list > .csortable-item > div.selected-tab {
-		color: $white;
-		background: $ui-bg-selected-color;
+		background-color: $ui-bg-selected-color;
 		border: 1px solid transparent;
+
+		span {
+			color: $font-selected-color;
+		}
 	}
 }
 
diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss
index d66a1be220b..7a17b7ae8c3 100644
--- a/sass/stylesheets/sass/dark-theme.scss
+++ b/sass/stylesheets/sass/dark-theme.scss
@@ -234,6 +234,13 @@ $multiselect-selected-bg-color: #696969;
 	}
 }
 
+.dashbrd-navigation-tabs {
+	& .csortable > .csortable-item > div,
+	& .csortable-list > .csortable-item > div:hover {
+		border: 1px solid transparent;
+	}
+}
+
 // Dashboard, widgets and iterators.
 // To maintain code clarity:
 //   - Do not mix rules for dashboard view mode and dashboard edit mode.
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index dcd1c6a1871..78d5269b9d5 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -320,6 +320,28 @@ $dashboard-my-bg-color: #e0e0e0;
 	}
 }
 
+.dashbrd-navigation-tabs {
+	.csortable-list {
+		& > .csortable-item:focus:not(:active) {
+			& > div {
+				box-shadow: 0 0 0 2px $blue;
+			}
+		}
+	}
+
+	& .csortable > .csortable-item > div,
+	& .csortable-list > .csortable-item > div:hover {
+		border: 1px solid transparent;
+	}
+
+	& .csortable > .csortable-item > div.selected-tab,
+	& .csortable-list > .csortable-item > div.selected-tab {
+		span {
+			color: $white;
+		}
+	}
+}
+
 // Dashboard, widgets and iterators.
 // To maintain code clarity:
 //   - Do not mix rules for dashboard view mode and dashboard edit mode.
@@ -482,6 +504,7 @@ $icon-btn: (
 }
 
 $icon-widget-btn: (
+	dashboard-page-properties: url($sprite-path) no-repeat -165px -618px,
 	iterator-page-previous: url($sprite-path) no-repeat -397px -657px,
 	iterator-page-next: url($sprite-path) no-repeat -395px -623px,
 	widget-action: url($sprite-path) no-repeat -318px -618px,
@@ -496,6 +519,7 @@ $icon-widget-btn: (
 );
 
 // Dynamically generated classes:
+//  .btn-dashboard-page-properties
 //  .btn-iterator-page-previous
 //  .btn-iterator-page-next
 //  .btn-widget-action
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index b3c36d1b536..2a62cb18757 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -297,6 +297,28 @@ $dashboard-my-bg-color: #555555;
 	}
 }
 
+.dashbrd-navigation-tabs {
+	.csortable-list {
+		& > .csortable-item:focus:not(:active) {
+			& > div {
+				box-shadow: 0 0 0 2px $blue;
+			}
+		}
+	}
+
+	& .csortable > .csortable-item > div,
+	& .csortable-list > .csortable-item > div:hover {
+		border: 1px solid darken($action-hover-color, 40%);
+	}
+
+	& .csortable > .csortable-item > div.selected-tab,
+	& .csortable-list > .csortable-item > div.selected-tab {
+		span {
+			color: $white;
+		}
+	}
+}
+
 // Dashboard, widgets and iterators.
 // To maintain code clarity:
 //   - Do not mix rules for dashboard view mode and dashboard edit mode.
@@ -383,6 +405,7 @@ $form-icon-btn: (
 }
 
 $icon-widget-btn: (
+	dashboard-page-properties: url($sprite-path) no-repeat -318px -618px,
 	iterator-page-previous: url($sprite-path) no-repeat -244px -657px,
 	iterator-page-next: url($sprite-path) no-repeat -242px -623px,
 	widget-action: url($sprite-path) no-repeat -165px -618px,
@@ -397,6 +420,7 @@ $icon-widget-btn: (
 );
 
 // Dynamically generated classes:
+//  .btn-dashboard-page-properties
 //  .btn-iterator-page-previous
 //  .btn-iterator-page-next
 //  .btn-widget-action
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 7c41f2b473e..5fed2935d97 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -2096,7 +2096,7 @@ $icon-widget-btn: (
 );
 
 // Dynamically generated classes:
-//  .dashboard-page-properties
+//  .btn-dashboard-page-properties
 //  .btn-iterator-page-previous
 //  .btn-iterator-page-next
 //  .btn-widget-action