react 16 upgrade

Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>

1 files changed, 273 insertions, 277 deletions

diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
index bd216c794b..e50ad2ddd7 100644
--- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -1,282 +1,278 @@
 @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;
+    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 {
-			&.modules-list-wrapper-divider {
-				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;
-					padding-bottom: 3px;
-					.Select-value-label {
-						@include ellipsis(85%);
-					}
-
-					.validation-input-wrapper {
-						flex-basis: 48%;
-					}
-
-					.control-label {
-						margin-bottom: 4px;
-					}
-
-					.form-group {
-						margin-bottom: 12px;
-					}
-				}
-			}
-
-			.modules-list-item-controllers {
-				display: flex;
-				justify-content: space-between;
-				margin-bottom: 7px;
-
-				.btn {
-					min-width: 0;
-				}
-
-				.svg-icon {
-					&.__trashO {
-						fill: $dark-gray;
-						&: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 {
-						&.__pencil {
-							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 {
-							&.__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 {
-					margin-right: 8px;
-					margin-bottom: 11px;
-				}
-				&: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;
-			&.with-list-items {
-				margin-top: 10px;
-			}
-
-			&.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;
-				}
-
-			}
-		}
-	}
-
-	.modules-list-header {
-		height: 30px;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		justify-content: flex-end;
-		align-items: baseline;
-	}
-
-	.unassigned-files {
-		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;
-				}
-				.svg-icon-wrapper {
-					margin-bottom: 10px;
-					.svg-icon {
-						&.__angleRight {
-							width: 10px;
-							height: 10px;
-						}
-					}
-				}
-			}
-
-			.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;
-				}
-			}
-		}
-	}
+    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 {
+            &.modules-list-wrapper-divider {
+                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;
+                    padding-bottom: 3px;
+                    .Select-value-label {
+                        @include ellipsis(85%);
+                    }
+
+                    .validation-input-wrapper {
+                        flex-basis: 48%;
+                    }
+
+                    .control-label {
+                        margin-bottom: 4px;
+                    }
+
+                    .form-group {
+                        margin-bottom: 12px;
+                    }
+                }
+            }
+
+            .modules-list-item-controllers {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 7px;
+
+                .btn {
+                    min-width: 0;
+                }
+
+                .svg-icon {
+                    &.__trashO {
+                        fill: $dark-gray;
+                        &: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 {
+                        &.__pencil {
+                            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 {
+                            &.__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 {
+                    margin-right: 8px;
+                    margin-bottom: 11px;
+                }
+                &: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;
+            &.with-list-items {
+                margin-top: 10px;
+            }
+
+            &.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;
+                }
+            }
+        }
+    }
+
+    .modules-list-header {
+        height: 30px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-end;
+        align-items: baseline;
+    }
+
+    .unassigned-files {
+        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;
+                }
+                .svg-icon-wrapper {
+                    margin-bottom: 10px;
+                    .svg-icon {
+                        &.__angleRight {
+                            width: 10px;
+                            height: 10px;
+                        }
+                    }
+                }
+            }
+
+            .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;
+                }
+            }
+        }
+    }
 }