[SDC] Onboarding 1710 rebase.

Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>

5 files changed, 165 insertions, 148 deletions

diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 5ce8e12ec3..07f86aba2a 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -1,8 +1,8 @@
 .catalog-tile {
-		&:hover {
-		box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
-		border: 1px solid $light-gray;
-	}
+  &:hover {
+	box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+	border: 1px solid $light-gray;
+  }
   .catalog-tile-top {
 	position: relative;
 	flex: 1;
@@ -11,48 +11,54 @@
 	padding-left: 10px;
 	align-items: flex-start;
 	flex-direction: column;
-		.catalog-tile-content {
-			margin-top: auto;
-			width: 180px;
-		}
-
+	.catalog-tile-content {
+	  margin-top: auto;
+	  width: 180px;
+	}
 
 	.catalog-tile-type {
-		display: block;
-    margin-top: -25px;
-		font-size: $heading-font-5;
-		&.license-model-type {
-			color: $purple;
-		}
-		&.software-product-type {
-			color: $blue;
-		}
+	  display: block;
+	  margin-top: -25px;
+	  font-size: $heading-font-5;
+	  &.license-model-type {
+		color: $purple;
+	  }
+	  &.software-product-type {
+		color: $blue;
+	  }
 	}
 	.catalog-tile-entity-details {
-		margin-top:23px;
-		.catalog-tile-version-info{
-			display: flex;
-			justify-content: space-between;
+	  margin-top: 20px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		flex: 0.8;
+	  .catalog-tile-version-info {
+		display: flex;
+		justify-content: space-between;
 
-			.catalog-tile-item-version {
-				@extend .body-2;
-				line-height: 6px;
-			}
-		}
-		.catalog-tile-vendor-name {
-			@extend .body-3-medium;
-			color: $gray;
-			line-height: 12px;
-			@include ellipsis(auto,inline-block,178px);
+		.catalog-tile-item-version {
+		  @extend .body-2;
+		  line-height: 6px;
 		}
+	  }
+	  .catalog-tile-vendor-name {
+		@extend .body-3;
+		flex: 0.4;
+		align-self: baseline;
+		color: $gray;
+		line-height: 10px;
+		@include ellipsis(auto, inline-block, 178px);
+	  }
 
-  }
-		.catalog-tile-item-name {
-			@extend .heading-5-medium;
-			color: $black;
-			@include ellipsis(auto,inline-block,175px);
-		}
 	}
+	.catalog-tile-item-name {
+	  @extend .heading-5-semibold;
+	  color: $black;
+	  @include ellipsis(auto, inline-block, 175px);
+	  line-height: inherit;
+	}
+  }
   .catalog-tile-icon {
 
 	width: 58px;
@@ -65,32 +71,39 @@
 	  align-self: center;
 	  height: 58px;
 	  width: 58px;
-		margin-left: 122px;
+	  margin-left: 122px;
 	  background-repeat: no-repeat;
-	  .svg-icon {
+	  .svg-icon-wrapper {
 		&.vendor {
-		  fill: $dark-gray;
-		  margin-top: 22px;
-		  width: 53px;
-		  height: 47px;
-		  &:hover {
+		  .svg-icon {
 			fill: $dark-gray;
+			width: 53px;
+			height: 47px;
+			&:hover {
+			  fill: $dark-gray;
+			}
 		  }
+		  margin-top: 22px;
+
 		}
 		&.vsp {
-		  fill: $light-blue;
+		  .svg-icon {
+			fill: $light-blue;
+			width: 60px;
+			height: 40px;
+		  }
 		  margin-top: 18px;
 		  margin-left: 3px;
-		  width: 60px;
-		  height: 40px;
 		}
 		&.vlm {
-		  fill: $purple;
 		  margin-top: 18px;
-		  width: 45px;
-		  height: 53px;
-		}
+		  .svg-icon {
+			fill: $purple;
 
+			width: 45px;
+			height: 53px;
+		  }
+		}
 	  }
 	}
   }
@@ -99,13 +112,17 @@
 	padding-top: 5px;
 	display: flex;
 	justify-content: space-between;
-	margin-top:2px;
+	margin-top: 2px;
 	padding-bottom: 3px;
-	@extend .body-2-medium;
-	.svg-icon.plus {
-	  height: 9px;
-	  width: 9px;
-	  fill: $blue;
+	@extend .body-2-semibold;
+	.svg-icon-wrapper {
+	  &.plus {
+		.svg-icon {
+		  height: 9px;
+		  width: 9px;
+		  fill: $blue;
+		}
+	  }
 	}
 	.catalog-tile-item-details {
 	  overflow: hidden;
@@ -113,27 +130,27 @@
 
 	.catalog-tile-add-new-vsp {
 	  color: $blue;
-	  margin-left:40px;
+	  margin-left: 40px;
 	}
 	.catalog-tile-locking-user-name {
 	  @extend .body-2;
-	  @include ellipsis(auto,inline-block,180px);
+	  @include ellipsis(auto, inline-block, 180px);
 	}
-		.catalog-tile-check-in-status {
-			.svg-icon-wrapper {
-				.svg-icon {
-					&.locked {
-					margin-left: 7px;
-					width: 11px;
-					fill: $gray;
-					}
-					&.unlocked {
-					margin-left: 7px;
-					width: 11px;
-					fill: $gray;
-					}
-				}
-			}
+	.catalog-tile-check-in-status {
+	  .svg-icon-wrapper {
+		&.locked {
+		  .svg-icon {
+			width: 11px;
+			fill: $gray;
+		  }
 		}
+		&.unlocked {
+		  .svg-icon {
+			width: 11px;
+			fill: $gray;
+		  }
+		}
+	  }
+	}
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index b9f83fc452..aa3cf04c4f 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -22,7 +22,7 @@
 	}
 	&:hover {
 		box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
-		
+
 		border: 1px solid $light-gray;
 	}
 	&:only-child {
@@ -33,7 +33,7 @@
 		margin: 0 0 15px 0;
 	  }
 	  .create-item-text {
-		@extend .heading-4-medium;
+		@extend .heading-4-semibold;
 	  }
 	}
 	.create-item-plus-icon{
@@ -42,14 +42,14 @@
 	  margin: -5px 12px 0 0;
 			.svg-icon.plus {
 			height: 19px;
-			width: 19px;		
+			width: 19px;
 		}
 	}
 	&.vlm-type {
 	  .create-item-text {
 		color: $purple;
 	  }
-	 
+
 	  .create-item-plus-icon {
 		fill: $purple;
 	  }
@@ -58,14 +58,14 @@
 	  .create-item-text {
 		color: $blue;
 	  }
-	 
+
 	  .create-item-plus-icon {
 		fill: $blue;
 	  }
 	}
 	.create-item-text {
 	  width: 140px;
-	  @extend .heading-5-medium;
+	  @extend .heading-5-semibold;
 	}
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
index da4c017d39..32ebac98cf 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -15,7 +15,7 @@
 	flex-direction: row;
 	margin-left: 60px;
 	.onboard-header-tab {
-	  @extend .body-1-medium;
+	  @extend .body-1-semibold;
 	  margin-right: 40px;
 	  cursor: pointer;
 	  display: flex;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index 79a64f84ee..5972bb2d67 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -1,87 +1,87 @@
 @mixin flipOverlayDirection($itemsInRow) {
-  &:nth-child(#{$itemsInRow}n){
-		.vsp-overlay-wrapper {
-			right: 74%;			
-			left: inherit;
-			.vsp-overlay-arrow {
-				border-right-color: transparent;
-				border-left-color: $tlv-light-gray;
-				border-right-width: 2px;
-				border-left-width: 6px;
-				left: 100%;
-				&:after {
-					border-left-color: $white;
-					border-right-color: transparent;
-					left: -11px;
-				}
-			}
+  &:nth-child(#{$itemsInRow}n) {
+	.vsp-overlay-wrapper {
+	  right: 74%;
+	  left: inherit;
+	  .vsp-overlay-arrow {
+		border-right-color: transparent;
+		border-left-color: $tlv-light-gray;
+		border-right-width: 2px;
+		border-left-width: 6px;
+		left: 100%;
+		&:after {
+		  border-left-color: $white;
+		  border-right-color: transparent;
+		  left: -11px;
 		}
+	  }
+	}
   }
 }
 
-
 .catalog-tile.vendor-type {
   position: relative;
   .catalog-tile-top {
-		.catalog-tile-item-name {
-			margin-top:21px;
-		}
-		.catalog-tile-vsp-count {
-			@extend .body-3-medium;
-			margin-top: 8px;
-			margin-left: 54px;
-			margin-bottom: 9px;
-			color: $dark-gray;
-			border: 1px solid $dark-gray;
-			padding: 0 15px 0 15px;
-			border-radius: 15px;
-			
-			&.clickable {
-				&:hover {
-					background-color: #eceff3;
-					color: $dark-gray ;
-				}	
-			}			
-			&.active {
-				background-color: $white;
-				color: $dark-gray ;				
-			}
+	.catalog-tile-item-name {
+	  margin-top: 21px;
+	  line-height: inherit;
+	}
+	.catalog-tile-vsp-count {
+	  @extend .body-3-semibold;
+	  margin-top: 8px;
+	  margin-left: 54px;
+	  margin-bottom: 9px;
+	  color: $dark-gray;
+	  border: 1px solid $dark-gray;
+	  padding: 0 15px 0 15px;
+	  border-radius: 15px;
+
+	  &.clickable {
+		&:hover {
+		  background-color: #eceff3;
+		  color: $dark-gray;
 		}
+	  }
+	  &.active {
+		background-color: $white;
+		color: $dark-gray;
+	  }
+	}
   }
 
   .catalog-tile-content {
-		flex-basis: auto;
-		max-height: 31px;
-		height: 31px;
-		text-align: center;
-		color: $blue;
-		display: block;
-		background-color: $white;
-		margin-bottom: 7px;
-		padding-bottom: 0px;
-		.create-new-vsp-button {
-			margin-top: 1px;
-		}
-		&:hover {
-			color: $dark-blue;
-			.svg-icon.plus {
-			fill: $dark-blue;
-			}
-		}
-		&.disabled {
-			cursor: default;
-		}
+	flex-basis: auto;
+	max-height: 31px;
+	height: 31px;
+	text-align: center;
+	color: $blue;
+	display: block;
+	background-color: $white;
+	margin-bottom: 7px;
+	padding-bottom: 0px;
+	.create-new-vsp-button {
+	  margin-top: 1px;
+	}
+	&:hover {
+	  color: $dark-blue;
+	  .svg-icon.plus {
+		fill: $dark-blue;
+	  }
+	}
+	&.disabled {
+	  cursor: default;
+	}
   }
-  @media (min-width: 1900px){
+  @media (min-width: 1900px) {
 	@include flipOverlayDirection($itemsInRow: 8);
   }
-  @media (min-width: 1586px) and (max-width: 1899px){
+  @media (min-width: 1586px) and (max-width: 1899px) {
 	@include flipOverlayDirection($itemsInRow: 7);
   }
-  @media (min-width: 1368px) and (max-width: 1585px){
+  @media (min-width: 1368px) and (max-width: 1585px) {
 	@include flipOverlayDirection($itemsInRow: 6);
   }
-  @media (max-width: 1367px){
+  @media (max-width: 1367px) {
 	@include flipOverlayDirection($itemsInRow: 5);
   }
   @import "vspOverlay";
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
index 8816ca5df9..80ed7385e0 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -41,7 +41,7 @@
 	flex-direction: column;
 	margin: 10px 0 10px 0;
 	.vsp-overlay-title {
-	  @extend .heading-5-medium;
+	  @extend .heading-5-semibold;
 	  margin-bottom: 15px;
 	  padding: 10px 20px 10px 20px;
 	  background: $highlight-gray;