[SDC-29] Amdocs OnBoard 1707 initial commit.

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

1 files changed, 316 insertions, 0 deletions

diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
new file mode 100644
index 0000000000..59e983686b
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -0,0 +1,316 @@
+@mixin modules-and-artifacts-list-items {
+	background-color: $tlv-gray;
+	margin-bottom: 12px;
+	border: 1px solid $light-gray;
+	border-left-width: 18px;
+	border-left-color: $blue;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+  padding: 10px 20px 0 20px;
+}
+
+.heat-setup-view {
+	margin-top: 20px;
+	display: flex;
+	justify-content: space-between;
+  padding: 0 60px 0 36px;
+
+	.heat-setup-view-modules-and-artifacts {
+		margin-right: 20px;
+		flex: 1;
+		.heat-setup-module-icon {
+		  margin: 0 6px 0 0;
+		  position: relative;
+		  top: -2px;
+		}
+		.modules-list-wrapper {
+			padding-bottom: 20px;
+			margin-bottom: 20px;
+			border-bottom: 1px solid $tlv-light-gray;
+			ul {
+				.undefined-dragging {
+					opacity: 0.5;
+				}
+				.modules-list-item-selectors {
+					display: flex;
+					justify-content: space-between;
+					flex-wrap: wrap;
+
+					.Select-value-label {
+						@include ellipsis(85%);
+					}
+
+					.validation-input-wrapper {
+						flex-basis: 48%;
+					}
+
+					.control-label {
+						margin-bottom: 4px;
+					}
+
+					.form-group {
+						margin-bottom: 12px;
+					}
+				}
+			}
+
+			.modules-list-controllers {
+				text-align: right;
+				.btn-link {
+					&[disabled] {
+						color: $gray;
+					}
+					@extend .body-1;
+					color: $blue;
+					&:last-child {
+						padding-right: 0;
+					}
+					&:hover {
+						color: $dark-blue;
+						text-decoration: none;
+					}
+				}
+			}
+
+			.modules-list-item-controllers {
+				display: flex;
+				justify-content: space-between;
+				margin-bottom: 7px;
+
+				.btn {
+					min-width: 0;
+				}
+
+				.svg-icon.trash-o {
+					fill: $dark-gray;
+					height: 18px;
+					width: 18px;
+					&:hover {
+						fill: $black;
+					}
+				}
+				.module-title-by-type {
+					@extend .heading-5-medium;
+					margin-right: 3px;
+				}
+				.modules-list-item-filename {
+					display: flex;
+					align-items: center;
+
+					.svg-icon.pencil {
+						height: 15px;
+						width: 15px;
+						margin-left: 3px;
+						opacity: 0;
+					}
+
+					.filename-text {
+						@extend .heading-5-medium;
+
+					}
+
+					.text-and-icon {
+						padding: 5px;
+						border: 1px solid transparent;
+						display: flex;
+						align-items: center;
+						height: 35px;
+						&.in-edit {
+							padding: 0;
+							.name-edit {
+								padding: 4px;
+								@extend .heading-5-medium;
+								height: 100%;
+								border: 1px solid $light-gray;
+								width: 400px;
+							}
+						}
+					}
+
+					input[disabled] {
+						border: none;
+					}
+					&:hover {
+						.text-and-icon {
+							border-color: $light-gray;
+							background-color: $white;
+
+							&.in-edit {
+								border-color: transparent;
+							}
+						}
+						.svg-icon.pencil {
+							margin-left: 10px;
+							opacity: 1;
+							stroke: $dark-gray;
+							&:hover {
+								stroke: $black;
+							}
+						}
+					}
+				}
+			}
+
+			.modules-list-item {
+				@include modules-and-artifacts-list-items;
+				position: relative;
+				.Select-option {
+					@extend .body-1;
+					&.is-selected {
+						@extend .body-1-medium;
+						background-color: $white;
+					}
+					&.is-focused {
+						background-color: $blue;
+						color: $white;
+					}
+				}
+				.add-or-delete-volumes {
+					.svg-icon-wrapper {
+						margin-right: 8px;
+						.svg-icon {
+							height: 10px;
+							width: 10px;
+							fill: $blue;
+						}
+					}
+					cursor: pointer;
+					color: $blue;
+					margin-bottom: 11px;
+					&:hover {
+						color: $dark-blue;
+						.svg-icon {
+							fill: $dark-blue;
+						}
+					}
+				}
+				&:before {
+					content: "\00B7\00B7\00B7\00B7\00B7\00B7";
+					color: $white;
+					position: absolute;
+					left: -27px;
+					top: 56%;
+					font-size: 27px;
+					width: 75px;
+					@include transform-rotate(90);
+					height: 0;
+					letter-spacing: 1px;
+				}
+			}
+		}
+
+		.artifact-files {
+			@include modules-and-artifacts-list-items;
+			margin-top: 20px;
+
+			&.nested {
+				.nested-list {
+					display: flex;
+					flex-wrap: wrap;
+					margin-bottom: 18px;
+				}
+
+				.nested-list-item {
+					border-radius: 15px;
+					background-color: $tlv-light-gray;
+					padding: 4px 15px;
+					margin: 2px 10px 2px 0;
+				}
+			}
+
+			.artifact-files-header {
+				@extend .heading-5-medium;
+				display: flex;
+				margin-bottom: 10px;
+				justify-content: space-between;
+				.image-icon.artifacts {
+					margin-right: 10px;
+				}
+
+				span {
+					display: flex;
+				}
+
+				.add-all-unassigned {
+					@extend .body-1;
+					margin-bottom: 0;
+					color: $blue;
+					cursor: pointer;
+					&:hover {
+						color: $dark-blue;
+					}
+				}
+			}
+		}
+	}
+
+	.unassigned-files {
+		margin-top: 30px;
+		border: 1px solid $light-gray;
+		width: 25%;
+		background-color: $white;
+		height: 250px;
+		width: 250px;
+
+		// Will work in chrome from chrome 56
+		position: sticky;
+		top: 10px;
+
+		.unassigned-files-title {
+			@extend .heading-5-medium;
+			background-color: $tlv-gray;
+			padding: 11px 0 9px 15px;
+		}
+
+		.unassigned-files-list {
+			height: 207px;
+    	overflow-y: auto;
+    	padding-bottom: 5px;
+
+			.go-to-validation-button-wrapper {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				margin-top: 70px;
+				.all-files-assigned {
+					@extend .heading-4;
+					margin-bottom: 10px;
+				}
+				.link {
+					color: $blue;
+					cursor: pointer;
+					display: flex;
+					align-items: center;
+					margin-bottom: 10px;
+					.svg-icon.angle-right {
+						height: 10px;
+						width: 10px;
+						margin-left: 7px;
+						fill: $blue;
+					}
+					&:hover {
+						color: $dark-blue;
+						.svg-icon.angle-right {
+							fill: $dark-blue;
+						}
+					}
+				}
+			}
+
+			.unassigned-files-list-item {
+				@include ellipsis();
+				border-bottom: 1px solid $tlv-light-gray;
+				padding: 0 5px 5px 15px;
+				&:first-child {
+					padding-top: 5px;
+				}
+				&:last-child {
+					border-bottom: none;
+					padding-bottom: 0;
+				}
+			}
+		}
+	}
+}