[SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>

5 files changed, 226 insertions, 128 deletions

diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss
index aa3ffdeb2b..e901db000e 100644
--- a/openecomp-ui/resources/scss/common/_base.scss
+++ b/openecomp-ui/resources/scss/common/_base.scss
@@ -44,6 +44,10 @@ input {
   padding: 7px 10px;
 }
 
+.disabled {
+  opacity: 0.7 !important;
+}
+
 fieldset {
   border: none;
 }
@@ -64,3 +68,7 @@ fieldset {
 .box-hover {
   border: 1px solid $light-blue;
 }
+
+
+
+
diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss
index 6d63a79f55..dc2a33ccc7 100644
--- a/openecomp-ui/resources/scss/common/_layout.scss
+++ b/openecomp-ui/resources/scss/common/_layout.scss
@@ -15,8 +15,15 @@
 .content-area {
   padding: 30px 60px 70px 60px;
   overflow-y: auto;
+	overflow-x: hidden;
   height: 100%;
   &.no-padding-content-area {
     padding: 0;
   }
 }
+
+.onborading-modal {
+  .modal-title {
+    text-transform: uppercase;
+  }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index 46edfb03de..1543f0adcd 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,28 +1,20 @@
 /* Fonts */
-@font-face {
-  font-family: Omnes-Light;
-  src: url('../fonts/omnes-att-light.otf');
-}
 
-@font-face {
-  font-family: Omnes-Regular;
-  src: url('../fonts/omnes-att-regular.otf');
+@mixin base-font-regular() {
+  font-family: omnes-regular, Arial, sans-serif;
 }
 
-@font-face {
-  font-family: Omnes-Medium;
-  src: url('../fonts/omnes-att-medium.otf');
+@mixin base-font-light() {
+  font-family: omnes-light, Arial, sans-serif;
 }
 
-@font-face {
-  font-family: Omnes-Bold;
-  src: url('../fonts/omnes-att-bold.otf');
+@mixin base-font-medium() {
+  font-family: omnes-medium, Arial, sans-serif;
 }
 
-$base-font-regular: omnes-regular, "Omnes-Regular";
-$base-font-light: omnes-light, "Omnes-Light";
-$base-font-medium: omnes-medium, "Omnes-Medium";
-$base-font-bold: omnes-bold, "Omnes-Bold";
+@mixin base-font-bold() {
+  font-family: omnes-bold, Arial, sans-serif;
+}
 
 $heading-font-1: 36px;
 $heading-font-2: 24px;
@@ -34,82 +26,106 @@ $body-font-1: 14px;
 $body-font-2: 13px;
 $body-font-3: 12px;
 
-$icon-font-size: 10px;
-$icon-font-family: FontAwesome;
+$icon-font-size: 11px;
+$icon-font-family: Arial;
 $radio-font-family: Arial;
 
 .heading-1 {
-  font-family: $base-font-light;
+  @include base-font-light;
   font-size: $heading-font-1;
 }
 
 .heading-2 {
-  font-family: $base-font-light;
+  @include base-font-light;
   font-size: $heading-font-2;
 }
 
 .heading-3-light {
-  font-family: $base-font-light;
+  @include base-font-light;
   font-size: $heading-font-3;
+  @extend .text-uppercase !optional;
 }
 
 .heading-3 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $heading-font-3;
+  @extend .text-uppercase !optional;
 }
 
 .heading-3-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $heading-font-3;
+  @extend .text-uppercase !optional;
 }
 
 .heading-4 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $heading-font-4;
 }
 
 .heading-4-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $heading-font-4;
 }
 
 .heading-5 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $heading-font-5;
 }
 
 .heading-5-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $heading-font-5;
 }
 
 .body-1 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $body-font-1;
 }
 
 .body-1-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
+  font-size: $body-font-1;
+}
+
+.body-1-light {
+  @include base-font-light;
   font-size: $body-font-1;
 }
 
 .body-2 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $body-font-2;
 }
 
 .body-2-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $body-font-2;
 }
 
 .body-3 {
-  font-family: $base-font-regular;
+  @include base-font-regular;
   font-size: $body-font-3;
 }
 
 .body-3-medium {
-  font-family: $base-font-medium;
+  @include base-font-medium;
   font-size: $body-font-3;
 }
 
+.body-3-light {
+  @include base-font-light;
+  font-size: $body-font-3;
+}
+
+.circle-icon-text {
+  @include base-font-medium;
+  font-size: $body-font-1;
+}
+
+.warning-text {
+  color: $orange;
+}
+.error-text {
+  color: $red;
+}
diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
index 70f3416e4b..dce623e15d 100644
--- a/openecomp-ui/resources/scss/common/_utils.scss
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -15,27 +15,27 @@ $browserPrefixes: webkit moz o ms;
 
 @mixin prefix($property, $value, $prefixeslist: 'all') {
   @if $prefixeslist == all {
-	-webkit-#{$property}: $value;
-	-moz-#{$property}: $value;
-	-ms-#{$property}: $value;
-	-o-#{$property}: $value;
-	#{$property}: $value;
+    -webkit-#{$property}: $value;
+    -moz-#{$property}: $value;
+    -ms-#{$property}: $value;
+    -o-#{$property}: $value;
+    #{$property}: $value;
   } @else {
-	@each $prefix in $prefixeslist {
-	  @if $prefix == webkit {
-		-webkit-#{$property}: $value;
-	  } @else if $prefix == moz {
-		-moz-#{$property}: $value;
-	  } @else if $prefix == ms {
-		-ms-#{$property}: $value;
-	  } @else if $prefix == o {
-		-o-#{$property}: $value;
-	  } @else if $prefix == spec {
-		#{$property}: $value;
-	  } @else {
-		@warn "No such prefix: #{$prefix}";
-	  }
-	}
+    @each $prefix in $prefixeslist {
+      @if $prefix == webkit {
+        -webkit-#{$property}: $value;
+      } @else if $prefix == moz {
+        -moz-#{$property}: $value;
+      } @else if $prefix == ms {
+        -ms-#{$property}: $value;
+      } @else if $prefix == o {
+        -o-#{$property}: $value;
+      } @else if $prefix == spec {
+        #{$property}: $value;
+      } @else {
+        @warn "No such prefix: #{$prefix}";
+      }
+    }
   }
 }
 
@@ -43,25 +43,25 @@ $browserPrefixes: webkit moz o ms;
 @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
 
   @if $prefixeslist == all {
-	#{property} : -webkit-#{$valuesuffix}($from, $to);
-	#{property} : -moz-#{$valuesuffix}($from, $to);
-	#{property} : -o-#{$valuesuffix}($from, $to);
-	#{property} : -ms-#{$valuesuffix}($from, $to);
+    #{property} : -webkit-#{$valuesuffix}($from, $to);
+    #{property} : -moz-#{$valuesuffix}($from, $to);
+    #{property} : -o-#{$valuesuffix}($from, $to);
+    #{property} : -ms-#{$valuesuffix}($from, $to);
 
   } @else {
-	@each $prefix in $prefixeslist {
-	  @if $prefix == webkit {
-		#{property} : -webkit-#{$valuesuffix}($from, $to);
-	  } @else if $prefix == moz {
-		#{property} : -moz-#{$valuesuffix}($from, $to);
-	  } @else if $prefix == ms {
-		#{property} : -ms-#{$valuesuffix}($from, $to);
-	  } @else if $prefix == o {
-		#{property} : -o-#{$valuesuffix}($from, $to);
-	  } @else {
-		@warn "No such prefix: #{$prefix}";
-	  }
-	}
+    @each $prefix in $prefixeslist {
+      @if $prefix == webkit {
+        #{property} : -webkit-#{$valuesuffix}($from, $to);
+      } @else if $prefix == moz {
+        #{property} : -moz-#{$valuesuffix}($from, $to);
+      } @else if $prefix == ms {
+        #{property} : -ms-#{$valuesuffix}($from, $to);
+      } @else if $prefix == o {
+        #{property} : -o-#{$valuesuffix}($from, $to);
+      } @else {
+        @warn "No such prefix: #{$prefix}";
+      }
+    }
   }
 }
 
@@ -81,11 +81,11 @@ $browserPrefixes: webkit moz o ms;
 
 @mixin border-radius($value, $positions: all) {
   @if ($positions == all) {
-	@include prefix(border-radius, $value, $border-radius-prefix);
+    @include prefix(border-radius, $value, $border-radius-prefix);
   } @else {
-	@each $position in $positions {
-	  @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
-	}
+    @each $position in $positions {
+      @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+    }
   }
 
 }
@@ -102,12 +102,39 @@ $browserPrefixes: webkit moz o ms;
 }
 
 /* Ellipsis */
-@mixin ellipsis() {
+@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 100%;
+  width: $width;
   white-space: nowrap;
-  display: inline-block;
+  display: $display;
+  max-width: $max-width;
+}
+
+@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
+  overflow: hidden;
+  position: relative;
+  line-height: $lineHeight;
+  max-height: $lineHeight * $lineCount;
+  text-align: justify;
+  word-break: break-all;
+  // margin-right: -1em;
+  padding-right: 1em;
+  &:before {
+    content: '...';
+    position: absolute;
+    right: 3px;
+    bottom: 0;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: $bgColor;
+  }
 }
 
 @mixin gradient($from, $to) {
@@ -124,52 +151,13 @@ $browserPrefixes: webkit moz o ms;
   margin-top: -$height/2;
 }
 
-@mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) {
-
-  $ellipsiswidth: 3em !default;
-
-  .ellipsis {
-	overflow: hidden;
-	height: $height;
-	line-height: $lineheight;
-  }
-
-  .ellipsis:before {
-	content: "";
-	float: left;
-	width: 5px;
-	height: $height;
-  }
-
-  .ellipsis > *:first-child {
-	float: right;
-	width: 100%;
-	margin-left: -5px;
-  }
-
-  .ellipsis:after {
-	content: "\02026";
-
-	float: right;
-	position: relative;
-	top: -25px;
-	left: 100%;
-	width: $ellipsiswidth;
-	margin-left: -$ellipsiswidth;
-	padding-right: 5px;
-
-	text-align: right;
-  }
-
-}
-
 @mixin text-vertical-align($align: middle) {
   display: table;
   width: 100%;
 
   & > * {
-	vertical-align: $align;
-	display: table-cell;
+    vertical-align: $align;
+    display: table-cell;
   }
 }
 
@@ -181,7 +169,7 @@ $browserPrefixes: webkit moz o ms;
 
 @mixin center-content($width) {
   & > * {
-	@include center-element($width);
+    @include center-element($width);
   }
 }
 
@@ -202,9 +190,9 @@ $browserPrefixes: webkit moz o ms;
 // @param
 //     $deg - angle in degrees
 @mixin transform-translate($x, $y) {
-	transform: translate($x, $y); /* IE10 and Mozilla */
-	-ms-transform: translate($x, $y); /* IE 9 */
-	-webkit-transform: translate($x, $y); /* Safari and Chrome */
+  transform: translate($x, $y); /* IE10 and Mozilla */
+  -ms-transform: translate($x, $y); /* IE 9 */
+  -webkit-transform: translate($x, $y); /* Safari and Chrome */
 }
 
 /* transform-scale */
@@ -222,7 +210,22 @@ $browserPrefixes: webkit moz o ms;
 
 @mixin scrollable() {
   ::-webkit-scrollbar {
-	width: 8px;
+    width: 8px;
+  }
+}
+
+@mixin create-circle($size, $bgcolor, $content) {
+  border-radius: 50%;
+  width: $size;
+  height: $size;
+  background: $bgcolor;
+  border: 3px solid $bgcolor;
+  &:after {
+    content: $content;
+    position: relative;
+    left: 9px;
+    top: 9px;
+    @extend .circle-icon-text;
   }
 }
 
@@ -297,3 +300,9 @@ $browserPrefixes: webkit moz o ms;
     }
   }
 }
+
+
+/**/
+@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
+  @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
+}
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 92c20cdfdf..2162b0b1b0 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -19,6 +19,7 @@ $white: #ffffff;
 
 // Secondary Colors
 $red: #cf2a2a;
+$crimson: #a94442;
 
 $background-alice-blue: #e5f5fb;
 $background-gray: #f2f2f2;
@@ -29,10 +30,15 @@ $functional-yellow: #ffb81c;
 $tlv-gray: #f8f8f8;
 $tlv-light-gray: #eaeaea;
 $tlv-hover: #e6f6fb;
+$highlight-gray: #eceff3;
 
 $content-background-color: $white;
 
 $scroll-bar-color: $text-black;//$light-gray;
+$vc-status-text-color: #42b72a;
+
+// sizes
+$circle-icon-size: 40px;
 
 //responsive @media params
 $tablet-max-width: 1024px;
@@ -41,7 +47,59 @@ $desktop-min-width: 1824px;
 
 /* Textures */
 $images-folder-name: "../images";
-$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
-$interface-icon: $images-folder-name + "/interface.svg";
-$sdc-logo: $images-folder-name + "/logo.svg";
-$warning-icon: $images-folder-name + "/warning.svg";
+
+/* Icons */
+$icons-folder: "../images/icons";
+$artifacts-icon: $images-folder-name + "/artifacts_icon.png";
+$check-icon: $images-folder-name + "/v_icon.png";
+$base-module-icon: $images-folder-name + "/base_icon.png";
+$module-icon: $images-folder-name + "/module_icon.png";
+$pencil-icon: $images-folder-name + "/pencil_icon-01.svg";
+$vc-check-in-icon: $icons-folder + "/checked_in.png";
+$vc-checkout-icon: $icons-folder + "/checked_out.png";
+$vc-revert-icon: $icons-folder + "/reverticon.png";
+$vc-revert-disabled-icon: $icons-folder + "/revert_icon_disabled.png";
+$vc-save-icon: $icons-folder + "/saveicon.png";
+$vc-save-disabled-icon: $icons-folder + "/save_icon_disable.png";
+$vc-submit-icon: $icons-folder + "/submiticonactive.png";
+$vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png";
+$trash-icon: $images-folder-name + "/trash_icon.png";
+$download-icon: $images-folder-name + "/download_icon.png";
+$upload-icon: $images-folder-name + "/upload_icon.png";
+
+
+/* catalog icons */
+$back-icon: $icons-folder + "/back_icon.png";
+/* validation icons */
+$artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png";
+$artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png";
+$chevron_down: $icons-folder + "/down_chevron.png";
+$error-icon-lg: $icons-folder + "/error_icon_big.png";
+$error-icon-sm: $icons-folder + "/error_icon_small.png";
+$go-to-overview-icon: $icons-folder + "/go_to_overview_icon.png";
+$go-to-overview-disabled-icon: $icons-folder + "/go_to_overview_disable_icon.png";
+$network-selected-icon: $icons-folder + "/network_blue_icon.png";
+$network-icon: $icons-folder + "/network_icon.png";
+$others-selected-icon: $icons-folder + "/others_blue_icon.png";
+$others-icon: $icons-folder + "/others_icon.png";
+$volume-selected-icon: $icons-folder + "/volume_blue_icon.png";
+$volume-icon: $icons-folder + "/volume_icon.png";
+$warning-icon-lg: $icons-folder + "/warning_icon_big.png";
+$warning-icon-sm: $icons-folder + "/warning_icon_small.png";
+$zip-icon: $icons-folder + "/ZIP_icon.png";
+$zip-selected-icon: $icons-folder + "/ZIP_blue_icon.png";
+$heat-icon: $icons-folder + "/nested_heat_icon.png";
+$heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png";
+$env-icon: $icons-folder + "/env_icon.png";
+$env-selected-icon: $icons-folder + "/env_icon_blue.png";
+
+/* vlm summary icons */
+
+$vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png";
+$vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png";
+$vlm-summary-plus-disabled: $icons-folder + "/plus_vlm_summary_disabled_icon.png";
+$vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png";
+$vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png";
+$vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png";
+$vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png";
+