.......... [ZBX-20645] updated to latest master; no conflicts

4 files changed, 140 insertions, 58 deletions

diff --git a/sass/stylesheets/sass/components/service/_info.scss b/sass/stylesheets/sass/components/service/_info.scss
index 461030216f1..2215c70a092 100644
--- a/sass/stylesheets/sass/components/service/_info.scss
+++ b/sass/stylesheets/sass/components/service/_info.scss
@@ -30,22 +30,6 @@
 			&:not(:last-child) {
 				margin-right: 10px;
 			}
-
-			.icon-description {
-				margin: 0 0 -5px 5px;
-				vertical-align: baseline;
-				border-radius: 2px;
-
-				&:link,
-				&:hover,
-				&:focus {
-					border-bottom: none;
-				}
-
-				&:focus {
-					box-shadow: 0 0 0 2px $btn-border-focus-color;
-				}
-			}
 		}
 	}
 
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index f498ff4b536..d34784bfc0f 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -450,10 +450,10 @@ $arrow-fill-up-down: #FFFFFF;
 }
 
 $var-icons: (
-	maintenance: url($sprite-path) no-repeat -357px -802px,
-	depend-up: url($sprite-path) no-repeat -361px -729px,
-	depend-down: url($sprite-path) no-repeat -361px -765px,
-	ackn: url($sprite-path) no-repeat -357px -693px
+	maintenance: -359px -803px,
+	depend-up: -359px -731px,
+	depend-down: -359px -766px,
+	ackn: -357px -693px
 );
 
 // Dynamically generated classes:
@@ -463,10 +463,8 @@ $var-icons: (
 //  .icon-ackn
 @each $var-icons, $bgimage in $var-icons {
 	.icon-#{$var-icons} {
-		margin: 0 18px 0 0;
 		&::before {
-			background: $bgimage;
-			@extend %var-icons;
+			background-position: $bgimage;
 		}
 	}
 }
@@ -934,8 +932,12 @@ a.link-action {
 				}
 			}
 
-			.icon-maintenance::before {
-				background-position: -360px -804px;
+			.icon-depend-up::before {
+				background-position: -361px -731px,
+			}
+
+			.icon-depend-down::before {
+				background-position: -361px -767px
 			}
 
 			.icon-wzrd-action {
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index d7351f0d14a..a429ede5843 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -374,10 +374,10 @@ $arrow-fill-up-down: #000000;
 }
 
 $var-icons: (
-	maintenance: url($sprite-path) no-repeat -203px -802px,
-	depend-up: url($sprite-path) no-repeat -208px -729px,
-	depend-down: url($sprite-path) no-repeat -208px -765px,
-	ackn: url($sprite-path) no-repeat -203px -693px
+	maintenance: -205px -803px,
+	depend-up: -206px -731px,
+	depend-down: -206px -766px,
+	ackn: -203px -693px
 );
 
 // Dynamically generated classes:
@@ -387,10 +387,8 @@ $var-icons: (
 //  .icon-ackn
 @each $var-icons, $bgimage in $var-icons {
 	.icon-#{$var-icons} {
-		margin: 0 18px 0 0;
 		&::before {
-			background: $bgimage;
-			@extend %var-icons;
+			background-position: $bgimage;
 		}
 	}
 }
@@ -819,8 +817,16 @@ a.link-action {
 
 			box-shadow: inset 0 -1px 0 0 $table-border-color;
 
-			.icon-maintenance::before {
-				background-position: -206px -804px;
+			.icon-depend-up::before {
+				background-position: -208px -731px;
+			}
+
+			.icon-depend-down::before {
+				background-position: -208px -767px;
+			}
+
+			.icon-wzrd-action {
+				background: transparent url($sprite-path) no-repeat -318px -624px;
 			}
 
 			.icon-wzrd-action {
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index adee26791e3..0ac36c7868c 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -324,6 +324,18 @@ form {
 		}
 	}
 
+	td {
+		.icon-maintenance {
+			margin: 0 0 -3px 4px;
+		}
+
+		.icon-depend-up,
+		.icon-depend-down,
+		.icon-ackn {
+			margin: 0 4px -3px 0;
+		}
+	}
+
 	&.compact-view {
 		tr {
 			&[class*='flh-'] {
@@ -444,6 +456,7 @@ form {
 				&::after {
 					margin: 0;
 					line-height: 14px;
+					top: 0;
 				}
 
 				&:last-of-type {
@@ -451,11 +464,6 @@ form {
 				}
 			}
 
-			[class*='icon-depend-'] {
-				width: 12px;
-				margin-right: 0;
-			}
-
 			.rel-container {
 				span {
 					margin: 0;
@@ -483,19 +491,30 @@ form {
 			}
 
 			.icon-maintenance {
-				position: relative;
-				display: inline-block;
 				height: 12px;
 				width: 12px;
-				margin: 3px 1px 2px 2px !important;
+				margin: 3px 1px 2px 4px;
 
 				&::before {
 					height: 12px;
 					width: 12px;
-					background-position: -48px -804px;
+					background-position: -49px -805px;
 				}
 			}
 
+			.icon-depend-up,
+			.icon-depend-down {
+				width: 12px;
+			}
+
+			.icon-depend-up::before {
+				background-position: -49px -731px;
+			}
+
+			.icon-depend-down::before {
+				background-position: -49px -767px;
+			}
+
 			.icon-wzrd-action {
 				background: url($sprite-path) no-repeat -6px -624px;
 				height: 12px;
@@ -2532,34 +2551,43 @@ button[disabled] {
 }
 
 $var-icons: (
-	depend-up: url($sprite-path) no-repeat -49px -729px,
-	depend-down: url($sprite-path) no-repeat -49px -765px,
-	ackn: url($sprite-path) no-repeat -45px -693px
+	maintenance: url($sprite-path) no-repeat -47px -803px,
+	depend-up: url($sprite-path) no-repeat -47px -731px,
+	depend-down: url($sprite-path) no-repeat -47px -767px,
+	ackn: url($sprite-path) no-repeat -47px -694px
 );
 
 // Dynamically generated classes:
+//  .icon-maintenance
 //  .icon-depend-up
 //  .icon-depend-down
 //  .icon-ackn
 @each $var-icons, $bgimage in $var-icons {
 	.icon-#{$var-icons} {
-		margin: 0 18px 0 0;
+		position: relative;
+		display: inline-block;
+		width: 16px;
+		height: 16px;
+		border-radius: 2px;
 
 		&::before {
-			background: $bgimage;
 			@extend %var-icons;
+			background: $bgimage;
+			width: 14px;
+			height: 14px;
+			left: 1px;
+			top: 1px;
 		}
-	}
-}
 
-.icon-maintenance {
-	display: inline-block;
-	width: 18px;
-	height: 13px;
+		&:link,
+		&:hover,
+		&:focus {
+			border-bottom: none;
+		}
 
-	&::before {
-		background: url($sprite-path) no-repeat -46px -802px;
-		@extend %var-icons;
+		&:focus {
+			box-shadow: 0 0 0 2px $btn-border-focus-color;
+		}
 	}
 }
 
@@ -2664,6 +2692,16 @@ $form-icon-btn: (
 	cursor: pointer;
 	margin: -12px 0 -4px;
 
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: 1px solid;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+	}
+
 	&::before {
 		content: '';
 		display: inline-block;
@@ -2674,6 +2712,22 @@ $form-icon-btn: (
 		height: 14px;
 		background: url($sprite-path) no-repeat -47px -659px;
 	}
+
+	&.status-red {
+		&:link,
+		&:hover,
+		&:focus {
+			border-color: darken(desaturate($alt-red, 10%), 9%);
+		}
+	}
+
+	&.status-yellow {
+		&:link,
+		&:hover,
+		&:focus {
+			border-color: darken(desaturate($alt-yellow, 9%), 20%);
+		}
+	}
 }
 
 // Installation.
@@ -4836,6 +4890,7 @@ svg {
 
 	display: flex;
 	flex-wrap: wrap;
+	align-items: start;
 
 	&.columns-nowrap {
 		flex-wrap: nowrap;
@@ -5308,6 +5363,19 @@ svg {
 	}
 }
 
+.icon-invisible {
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: none;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+		border-radius: 2px;
+	}
+}
+
 button {
 	&.icon-action-command,
 	&.icon-action-close,
@@ -5437,7 +5505,19 @@ button {
 }
 
 .icon-description {
-	margin: 0 0 0 5px;
+	margin: 0 0 -5px 5px;
+	vertical-align: baseline;
+	border-radius: 2px;
+
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: none;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+	}
 
 	&::after {
 		content: '?';
@@ -5492,6 +5572,16 @@ button {
 		font-weight: bold;
 		color: $btn-font-color;
 	}
+
+	&:link,
+	&:hover,
+	&:focus {
+		border-bottom: none;
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+	}
 }
 
 #expressions_list .ui-sortable-helper {