..F....... [ZBXNEXT-7420] added links to documentation from all UI forms

6 files changed, 73 insertions, 2 deletions

diff --git a/sass/stylesheets/sass/base/_colors.scss b/sass/stylesheets/sass/base/_colors.scss
index c45d4c92677..8151b95619f 100644
--- a/sass/stylesheets/sass/base/_colors.scss
+++ b/sass/stylesheets/sass/base/_colors.scss
@@ -177,6 +177,8 @@ $link-main-subnav-hover-color: rgba(#ffffff, 1) !default;
 $link-main-subnav-active-color: rgba(#ffffff, 1) !default;
 $link-main-subnav-visited-color: rgba(#ffffff, .8) !default;
 
+$link-icon-doc-color: #768d99 !default;
+
 // Analog clock
 $clock-face-color: #ebebeb !default;
 $clock-hand-color: #1f2c33 !default;
diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss
index f8170f785ba..6ba5d352fb3 100644
--- a/sass/stylesheets/sass/dark-theme.scss
+++ b/sass/stylesheets/sass/dark-theme.scss
@@ -148,6 +148,8 @@ $link-main-subnav-hover-color: #ffffff;
 $link-main-subnav-active-color: #ffffff;
 $link-main-subnav-visited-color: rgba(#ffffff, .8);
 
+$link-icon-doc-color: #768d99;
+
 // Analog clock
 $clock-face-color: #383838;
 $clock-hand-color: #f2f2f2;
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index d34784bfc0f..4efea20055e 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -210,6 +210,8 @@ $link-main-subnav-hover-color: #000000;
 $link-main-subnav-active-color: #000000;
 $link-main-subnav-visited-color: rgba(#000000, .8);
 
+$link-icon-doc-color: #ffffff;
+
 // Analog clock
 $clock-face-color: #000000;
 $clock-hand-color: #ffffff;
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index a429ede5843..abeb0e28c84 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -203,6 +203,8 @@ $link-main-subnav-hover-color: #ffffff;
 $link-main-subnav-active-color: #ffffff;
 $link-main-subnav-visited-color: rgba(255, 255, 255, .8);
 
+$link-icon-doc-color: #000000;
+
 // Analog clock
 $clock-face-color: #ffffff;
 $clock-hand-color: #000000;
diff --git a/sass/stylesheets/sass/layout/_header.scss b/sass/stylesheets/sass/layout/_header.scss
index 247c355c149..a7360b2b3cf 100644
--- a/sass/stylesheets/sass/layout/_header.scss
+++ b/sass/stylesheets/sass/layout/_header.scss
@@ -19,6 +19,15 @@ header {
 		white-space: nowrap;
 	}
 
+	.header-doc-url {
+		flex-shrink: 0;
+		margin-left: auto;
+
+		& + .header-controls{
+			margin-left: 0;
+		}
+	}
+
 	.header-controls {
 		flex-shrink: 0;
 		margin: 0 -2px 0 auto;
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 0ac36c7868c..e538855f0be 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -3099,8 +3099,15 @@ $form-icon-btn: (
 		> .overlay-close-btn {
 			position: relative;
 			float: right;
-			top: -13px;
-			right: -8px;
+			top: -11px;
+			right: -6px;
+			font-size: 2em;
+		}
+
+		.overlay-dialogue-doc-url {
+			position: absolute;
+			right: 32px;
+			top: -3px;
 		}
 	}
 
@@ -5584,6 +5591,53 @@ button {
 	}
 }
 
+.icon-doc-url {
+	display: block;
+	margin: 2px;
+	height: 24px;
+	width: 24px;
+	text-align: center;
+	line-height: 24px;
+	background-color: transparent;
+	border-radius: 2px;
+	border-bottom: none !important;
+
+	&:focus {
+		opacity: 1;
+		box-shadow: 0 0 0 2px $btn-border-focus-color;
+	}
+
+	&::after {
+		content: '?';
+		position: relative;
+		opacity: 0.5;
+		font-size: 18px;
+		font-weight: bold;
+		color: $link-icon-doc-color;
+	}
+
+	&:hover::after {
+		opacity: 1;
+		transition: opacity .2s ease-out;
+	}
+	&:focus::after, &:visited::after{
+		opacity: 1;
+	}
+}
+
+.overlay-icon-doc {
+	@extend .icon-doc-url;
+	width: 18px;
+	height: 18px;
+	line-height: 18px;
+
+	&::after {
+		@extend .icon-doc-url::after;
+		font-size: 15px;
+		color: $font-alt-color;
+	}
+}
+
 #expressions_list .ui-sortable-helper {
 	display: table;
 }