[SDC-29] Amdocs OnBoard 1707 initial commit.

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

10 files changed, 510 insertions, 0 deletions

diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
new file mode 100644
index 0000000000..d29a95d3d6
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
@@ -0,0 +1,33 @@
+.catalog-header {
+  margin: 34px 0 29px 50px;
+  display: flex;
+  flex-direction: row;
+  .expandable-input-top {
+	margin-right: 60px;
+  }
+  &.workspace-header {
+	@extend .heading-1;
+	color: $blue;
+  }
+  .catalog-header-tabs {
+	display: flex;
+	flex-direction: row;
+	.tab-separator {
+	  position: relative;
+	  top: 13px;
+	}
+	.catalog-header-tab {
+	  @extend .heading-1;
+	  cursor: pointer;
+	  padding: 0 15px 0 15px;
+	  display: flex;
+	  align-items: center;
+	  &.active {
+		color: $blue;
+	  }
+	  &:first-child {
+		padding-left: 0;
+	  }
+	}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
new file mode 100644
index 0000000000..071268c50d
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
@@ -0,0 +1,31 @@
+.catalog-list {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px 0 42px;
+  .catalog-title {
+	@extend .heading-1;
+	color: $blue;
+	margin:0 0 12px 18px;
+  }
+
+  .catalog-items {
+	display: flex;
+	flex-wrap: wrap;
+	@import "tile";
+	@import "createItemTile";
+	@import "catalogTile";
+	@import "vendorTile";
+	@import "vlmTile";
+	&:after {
+	  content: " ";
+	  height: 250px;
+	  display: block;
+	  width: 100%;
+	}
+  }
+
+  // Bottom spacing - cross browser solution
+
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
new file mode 100644
index 0000000000..5ce8e12ec3
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -0,0 +1,139 @@
+.catalog-tile {
+		&: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;
+	display: flex;
+	padding-top: 29px;
+	padding-left: 10px;
+	align-items: flex-start;
+	flex-direction: column;
+		.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;
+		}
+	}
+	.catalog-tile-entity-details {
+		margin-top:23px;
+		.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-name {
+			@extend .heading-5-medium;
+			color: $black;
+			@include ellipsis(auto,inline-block,175px);
+		}
+	}
+  .catalog-tile-icon {
+
+	width: 58px;
+	height: 58px;
+	text-align: center;
+	justify-content: center;
+	display: flex;
+
+	.icon {
+	  align-self: center;
+	  height: 58px;
+	  width: 58px;
+		margin-left: 122px;
+	  background-repeat: no-repeat;
+	  .svg-icon {
+		&.vendor {
+		  fill: $dark-gray;
+		  margin-top: 22px;
+		  width: 53px;
+		  height: 47px;
+		  &:hover {
+			fill: $dark-gray;
+		  }
+		}
+		&.vsp {
+		  fill: $light-blue;
+		  margin-top: 18px;
+		  margin-left: 3px;
+		  width: 60px;
+		  height: 40px;
+		}
+		&.vlm {
+		  fill: $purple;
+		  margin-top: 18px;
+		  width: 45px;
+		  height: 53px;
+		}
+
+	  }
+	}
+  }
+  .catalog-tile-content {
+	border-top: 1px solid $background-gray;
+	padding-top: 5px;
+	display: flex;
+	justify-content: space-between;
+	margin-top:2px;
+	padding-bottom: 3px;
+	@extend .body-2-medium;
+	.svg-icon.plus {
+	  height: 9px;
+	  width: 9px;
+	  fill: $blue;
+	}
+	.catalog-tile-item-details {
+	  overflow: hidden;
+	}
+
+	.catalog-tile-add-new-vsp {
+	  color: $blue;
+	  margin-left:40px;
+	}
+	.catalog-tile-locking-user-name {
+	  @extend .body-2;
+	  @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;
+					}
+				}
+			}
+		}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
new file mode 100644
index 0000000000..b9f83fc452
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -0,0 +1,71 @@
+.create-catalog-item-wrapper {
+  width: 204px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  margin: 9px;
+
+  .tile.create-catalog-item {
+	margin: 9px 0 9px 0;
+	display: flex;
+	background-color: $white;
+	&:first-child{margin-top: 0;}
+	&:last-child{margin-bottom: 0;}
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	&.disabled {
+	  color: $gray;
+	  .create-item-plus-icon {
+		fill: $gray;
+	  }
+	}
+	&:hover {
+		box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+		
+		border: 1px solid $light-gray;
+	}
+	&:only-child {
+	  text-align: center;
+	  flex-direction: column;
+	  justify-content: center;
+	  .create-item-plus-icon {
+		margin: 0 0 15px 0;
+	  }
+	  .create-item-text {
+		@extend .heading-4-medium;
+	  }
+	}
+	.create-item-plus-icon{
+	  width: 19px;
+	  height: 19px;
+	  margin: -5px 12px 0 0;
+			.svg-icon.plus {
+			height: 19px;
+			width: 19px;		
+		}
+	}
+	&.vlm-type {
+	  .create-item-text {
+		color: $purple;
+	  }
+	 
+	  .create-item-plus-icon {
+		fill: $purple;
+	  }
+	}
+	&.vsp-type {
+	  .create-item-text {
+		color: $blue;
+	  }
+	 
+	  .create-item-plus-icon {
+		fill: $blue;
+	  }
+	}
+	.create-item-text {
+	  width: 140px;
+	  @extend .heading-5-medium;
+	}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
new file mode 100644
index 0000000000..da4c017d39
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -0,0 +1,31 @@
+.onboard-header {
+  padding-top: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  background-color: $tlv-light-gray;
+  margin-bottom: 2px;
+  @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
+  .expandable-input-top {
+	margin-right: 60px;
+	margin-left: auto;
+  }
+  .onboard-header-tabs {
+	display: flex;
+	flex-direction: row;
+	margin-left: 60px;
+	.onboard-header-tab {
+	  @extend .body-1-medium;
+	  margin-right: 40px;
+	  cursor: pointer;
+	  display: flex;
+	  padding-bottom: 5px;
+	  align-items: flex-end;
+	  &.active {
+		color: $blue;
+		padding-bottom: 2px;
+		border-bottom: 3px solid $blue;
+	  }
+	}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
new file mode 100644
index 0000000000..217098fb97
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
@@ -0,0 +1,14 @@
+.tile {
+  background-color: $white;
+  margin: 9px;
+  width: 204px;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  border: 1px solid $tlv-light-gray;
+  @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+  &:active {
+	border: 1px solid $light-blue;
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
new file mode 100644
index 0000000000..f1af28a0a0
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
@@ -0,0 +1,21 @@
+.vendor-page-header {
+  display: flex;
+  align-items: center;
+  margin-top: 34px;
+  margin-left: 9px;
+  margin-bottom: 29px;
+  .vendor-name {
+	@extend .heading-1;
+	color: $blue;
+	margin-left: 20px;
+	text-transform: uppercase;
+  }
+  .svg-icon-wrapper {
+	padding: 5px 18px 5px 0;
+	.svg-icon.back {
+	  height: 25px;
+	  width: 25px;
+	  fill: $blue;
+	}
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
new file mode 100644
index 0000000000..79a64f84ee
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -0,0 +1,88 @@
+@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;
+				}
+			}
+		}
+  }
+}
+
+
+.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-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;
+		}
+  }
+  @media (min-width: 1900px){
+	@include flipOverlayDirection($itemsInRow: 8);
+  }
+  @media (min-width: 1586px) and (max-width: 1899px){
+	@include flipOverlayDirection($itemsInRow: 7);
+  }
+  @media (min-width: 1368px) and (max-width: 1585px){
+	@include flipOverlayDirection($itemsInRow: 6);
+  }
+  @media (max-width: 1367px){
+	@include flipOverlayDirection($itemsInRow: 5);
+  }
+  @import "vspOverlay";
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
new file mode 100644
index 0000000000..721a4f3f22
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
@@ -0,0 +1,8 @@
+.catalog-tile.license-model-type {
+  .catalog-tile-top {
+    &:hover {
+      //background-color: $purple;
+      //color: $white;
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
new file mode 100644
index 0000000000..8816ca5df9
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -0,0 +1,74 @@
+.vsp-overlay-wrapper{
+  display:flex;
+  align-items: center;
+  position:absolute;
+  left: 68%;
+  top: 14%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 100;
+  .vsp-overlay-list {
+	padding: 0 20px;
+  }
+  .vsp-overlay-arrow {
+	border-style: solid;
+	position: relative;
+	bottom: -18px;
+	border-width: 6px;
+	border-left-width: 2px;
+	border-color: transparent;
+	border-right-color: $light-gray;
+	&:after {
+	  position: absolute;
+	  border-style: solid;
+	  bottom: -10px;
+	  left: -9px;
+	  border-width: 10px;
+	  border-color: transparent;
+	  border-right-color: $white;
+	  content:' ';
+	}
+  }
+  .vsp-overlay {
+	pointer-events: all;
+	width: 205px;
+	cursor: default;
+	background-color: $white;
+	@include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
+	border-radius: 6px;
+	padding: 0 0 10px 0;
+	display: flex;
+	flex-direction: column;
+	margin: 10px 0 10px 0;
+	.vsp-overlay-title {
+	  @extend .heading-5-medium;
+	  margin-bottom: 15px;
+	  padding: 10px 20px 10px 20px;
+	  background: $highlight-gray;
+		color: $text-black;
+	  text-transform: uppercase;
+	  border-radius: 6px 6px 0 0;
+	}
+	.vsp-overlay-detail{
+	  @extend .body-2;
+	  &:hover {
+		color: $blue;
+	  }
+	  text-transform: uppercase;
+	  @include ellipsis(auto, block);
+	  border-bottom: 1px solid $tlv-light-gray;
+	  cursor: pointer;
+	  padding: 5px 0 5px 0;
+	  &:last-child {
+		border-bottom: none;
+	  }
+	}
+	.vsp-overlay-see-more{
+	  color: $blue;
+	  cursor: pointer;
+	  margin-top: 12px;
+	  align-self:center;
+	}
+
+  }
+}