openecomp-ui/resources/scss/modules/_vspHeatSetup.scss

@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-wrapper.trashO {
				  .svg-icon {
					fill: $dark-gray;
					height: 18px;
					width: 18px;
					&:hover {
					  fill: $black;
					}
				  }
				}
				.module-title-by-type {
					@extend .heading-5-semibold;
					margin-right: 3px;
				}
				.modules-list-item-filename {
					display: flex;
					align-items: center;

					.svg-icon-wrapper.pencil {
						.svg-icon {
						  height: 15px;
						  width: 15px;
						}
						margin-left: 3px;
						opacity: 0;
					}

					.filename-text {
						@extend .heading-5-semibold;

					}

					.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-semibold;
								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-wrapper.pencil {
							margin-left: 10px;
							opacity: 1;
							.svg-icon {
							  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-semibold;
						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-semibold;
				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;
		background-color: $white;
		height: 250px;
		width: 250px;

		// Will work in chrome from chrome 56
		position: sticky;
		top: 10px;

		.unassigned-files-title {
			@extend .heading-5-semibold;
			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-wrapper.angleRight {
					  .svg-icon {
						height: 10px;
						width: 10px;
						margin-left: 7px;
						fill: $blue;
					  }
					}
					&:hover {
						color: $dark-blue;
						.svg-icon-wrapper.angleRight {
						  .svg-icon {
							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;
				}
			}
		}
	}
}