1 files changed, 139 insertions, 0 deletions
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;
+					}
+				}
+			}
+		}
+  }
+}