[SDC-29] Amdocs OnBoard 1707 initial commit.

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

16 files changed, 927 insertions, 281 deletions

diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
new file mode 100644
index 0000000000..1e31e06814
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -0,0 +1,104 @@
+$message-info-icon-size: 16px;
+
+@mixin status-icon-class {
+  @extend .body-1-light;
+  width: $message-info-icon-size;
+  height: $message-info-icon-size;
+  margin-left: 8px;
+  color: $white;
+  border-radius: $message-info-icon-size / 2;
+  display: inline-block;
+  text-align: center;
+}
+
+.activity-log-view {
+
+  .list-editor-view .list-editor-view-header {
+	border: none;
+	.list-editor-view-title {
+	  @extend .heading-1;
+	  color: $blue;
+	}
+  }
+  .list-editor-view-list {
+	border: 1px solid $light-gray;
+	border-bottom: none;
+  }
+  .activity-list-item {
+	display: flex;
+	height: 36px;
+	@extend .body-1;
+	&.header {
+	  @extend .body-1-medium;
+	  background-color: $tlv-light-gray;
+	  color: $text-black;
+	}
+  }
+
+  .activity-status {
+	.svg-icon-wrapper {
+	  float: right;
+	}
+	.check-circle {
+	  fill: $green;
+	  width: 16px;
+	  height: 16px;
+	}
+	.status-icon.false:after {
+	  @include status-icon-class;
+	  float: right;
+	  background-color: $red;
+	  content: "!";
+	}
+  }
+
+  .message-further-info-icon {
+	@include status-icon-class;
+	background-color: $gray;
+  }
+
+  .table-cell {
+	border-right: 1px solid $light-gray;
+	border-bottom: 1px solid $light-gray;
+	&:last-child {
+	  border-right: none;
+	}
+	flex-basis: 20%;
+	display: flex;
+	padding: 0 20px;
+	justify-content: center;
+	flex-direction: column;
+	&.activity-comment {
+	  min-width: 0;
+	  span {
+		@include ellipsis(100%);
+	  }
+	}
+  }
+
+  .date-header {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	.header-sort-arrow {
+	  width: 0;
+	  height: 0;
+	  border-left: 5px solid transparent;
+	  border-right: 5px solid transparent;
+	  margin-left: 9px;
+	  &.up {
+		border-bottom: 5px solid $black;
+	  }
+	  &.down {
+		border-top: 5px solid $black;
+	  }
+
+	}
+  }
+
+  .date-cell {
+	display: flex;
+	justify-content: space-between;
+  }
+
+}
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
index b39ea495ab..fbf2c3e728 100644
--- a/openecomp-ui/resources/scss/components/_buttons.scss
+++ b/openecomp-ui/resources/scss/components/_buttons.scss
@@ -1,18 +1,3 @@
-
-$plus-circle-icon-size: 18px;
-.plus-icon-button {
-  background: url($plus-circle-icon) no-repeat;
-  background-size: $plus-circle-icon-size;
-  width: $plus-circle-icon-size;
-  height: $plus-circle-icon-size;
-  cursor: pointer;
-  &.small {
-    background-size: $plus-circle-icon-size - 6;
-    width: $plus-circle-icon-size - 6;
-    height: $plus-circle-icon-size - 6;
-  }
-}
-
 .primary-btn{
   border: 1px solid;
   border-color: $blue;
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
index 543c1c8b92..4a1a940c34 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -1,6 +1,10 @@
 .dual-list-box {
   display: flex;
   margin: 25px 0 10px 0;
+	.svg-icon.search {
+		height: 14px;
+		width: 14px;
+	}
 
   .dual-search-multi-select-section {
     $multi-select-box-width: 398px;
@@ -32,6 +36,10 @@
   .dual-list-options-bar {
     margin: 62px 54px 27px 54px;
     padding-top: 23px;
+		.svg-icon {
+			width: 14px;
+			height: 14px;
+		}
     .dual-list-option {
       text-align: center;
       line-height: 10px;
@@ -40,7 +48,7 @@
       height: 15px;
       cursor: pointer;
       margin-top: 20px;
-      color: $blue;
+      fill: $blue;
     }
   }
 }
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
index 52f410a61b..52b72d7c91 100644
--- a/openecomp-ui/resources/scss/components/_expandableInput.scss
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -1,61 +1,55 @@
-$transitionLength: 0.5s;
-
-@mixin expand-transition($tl){
-	transition: width $tl, background-color $tl, cursor $tl;
-}
-
-@mixin color-transition($tl){
-	transition: color $tl;
-}
-
-.expandable-input-wrapper {
-  display: flex;
-	&:hover{
-		.form-control {
-			border-color: $gray;
-		}
-	}
-  .expandable-input-control {
-    flex: 1 1;
-    margin: 0;
-    .form-control {
-			border-radius: 20px;
-    }
-		align-self: center;
-  }
-	.expandable-active {
-		@include expand-transition($transitionLength);
-		width: 215px;
-		cursor: text;
-	}
-	.expandable-not-active {
-		@include expand-transition($transitionLength);
-		width: 28px;
-		cursor: pointer;
-		background-color: transparent;
-		color: transparent;
+.expandable-input-top {
+	display: flex;
+	height: 22px;
+	.svg-icon-wrapper {
+		height: 17px;
+		width: 17px;
 	}
-
-  .expandable-icon {
-		@include color-transition($transitionLength);
-    position: relative;
-    left: -20px;
-    align-self: center;
-    width: 0;
-		cursor: pointer;
-		color: $dark-gray;
-  }
-
-	.expandable-close-button{
-		@extend .expandable-icon;
-		color: $gray;
-		opacity: 0.5;
-		&:hover {
-			opacity: 1;
+	.expandable-input-wrapper {
+		display: flex;
+		.svg-icon.search {
+			height: 17px;
+			width: 17px;
+		}
+		&.closed {
+			.svg-icon.search {
+				transition: fill 0.5s ease-in;
+				fill: $blue;
+				cursor: pointer;
+				&:hover {
+					transition: fill 0.5s ease-in;
+					fill: $dark-blue;
+				}
+			}
+		}
+		&.opened {
+			.svg-icon-wrapper {
+				margin-left: 3px;
+			}
+			.svg-icon.search {
+				fill: $dark-blue;
+			}
+			.svg-icon.close {
+				margin-left: 7px;
+				height: 10px;
+				width: 10px;
+				opacity: 0.6;
+				fill: $dark-gray;
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+		.expandable-input-control {
+			.form-control {
+				border: none;
+				background-color: transparent;
+				border-radius: 0;
+				border-bottom: 1px solid $gray;
+				height: 22px;
+				padding: 0 5px;
+			}
+			margin: 0;
 		}
-	}
-	.expandable-icon-active {
-		@include color-transition($transitionLength);
-		color: $blue;
 	}
 }
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 3c50fe694a..23c58ea4ac 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -5,10 +5,37 @@
     padding: 0 0 30px 0;
   }
 }
+
+.validation-form-content {
+	fieldset[disabled] {
+		.form-group {
+			opacity: 0.7;
+			cursor: auto;
+			pointer-events: none;
+			.dropdown-multi-select {
+				.form-group {
+					opacity: 1;
+				}
+				.Select-control {
+					background-color: $tlv-light-gray;
+				}
+			}
+		}
+	}
+}
+
 .dropdown-multi-select {
   .Select {
     display: block;
     width: 100%;
+		.Select-menu-outer {
+			.Select-option {
+				&:hover {
+					background-color: $blue;
+					color: $white;
+				}
+			}
+		}
     .Select-control {
       height: 28px;
       border-radius: 2px;
@@ -26,20 +53,24 @@
     &.Select--multi {
       .Select-value {
         color: $text-black;
-        background-color: transparent;
-        border-color: $light-gray;
-        margin-top: 2px;
-        margin-left: 2px;
-        border-radius: 1px;
+        background-color: $background-gray;
+				border: none;
+				margin: 3px 0 3px 10px;
+        border-radius: 10px;
+				padding-left: 8px;
+				padding-right: 6px;
       }
       .Select-value-icon {
-        border-right-color: $light-gray;
+        border: none;
+				float: right;
+				&:hover {
+					background-color: inherit;
+					color: inherit;
+				}
       }
       .Select-arrow-zone {
-        padding-top: 4px;
+				padding-top: 4px;
       }
     }
   }
 }
-
-
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
new file mode 100644
index 0000000000..d4d1fa7ccd
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -0,0 +1,64 @@
+$gridItemSpace: 15%;
+
+.grid-section {
+		padding-bottom: 30px;
+		.grid-items {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+
+		%grid-col-base {
+			flex-shrink: 0;
+			display: flex;
+		}
+
+		.grid-item {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.grid-item-stretch {
+			@extend .grid-item;
+			& *:last-child {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+
+		.grid-col-1 {
+			@extend %grid-col-base;
+			flex-basis: 25%;
+      &:after {
+        flex-basis: $gridItemSpace;
+        content: ' ';
+      }
+		}
+
+		.grid-col-2 {
+			@extend %grid-col-base;
+			flex-basis: 50%;
+      &:after {
+        flex-basis: $gridItemSpace / 2;
+        content: ' ';
+      }
+		}
+		.grid-col-3 {
+			@extend %grid-col-base;
+			flex-basis: 75%;
+      &:after {
+        flex-basis: $gridItemSpace / 3;
+        content: ' ';
+      }
+		}
+		.grid-col-4 {
+			@extend %grid-col-base;
+			flex-basis: 100%;
+      &:after {
+        flex-basis: $gridItemSpace / 4;
+        content: ' ';
+      }
+		}
+}
diff --git a/openecomp-ui/resources/scss/components/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss
new file mode 100644
index 0000000000..c80055d055
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_icon.scss
@@ -0,0 +1,164 @@
+$image-icon-normal-size: 20px;
+
+.icon-component {
+  display: inline-flex;
+  align-items: center;
+
+  &.clickable:hover {
+    cursor: pointer;
+  }
+  .icon-label {
+    color: $blue;
+  }
+  &.disabled {
+    .icon-label {
+      color: $tlv-light-gray;
+			opacity: 0.7;
+    }
+  }
+  .icon {
+    width: $image-icon-normal-size;
+    height: $image-icon-normal-size;
+    margin: 0 6px;
+    background-repeat: no-repeat;
+
+    &.trash {
+      background-image: url($trash-icon);
+    }
+
+    &.artifacts {
+      background-image: url($artifacts-icon);
+    }
+
+    &.base {
+      background-image: url($base-module-icon);
+    }
+
+    &.module {
+      background-image: url($module-icon);
+    }
+
+    &.pencil {
+      background-image: url($pencil-icon);
+    }
+
+    &.check {
+      background-image: url($check-icon);
+      width: 30px;
+      height: 30px;
+    }
+
+    &.download {
+      background-image: url($download-icon);
+      width: 16px;
+      height: 14px;
+    }
+
+    &.upload {
+      background-image: url($upload-icon);
+      width: 16px;
+      height: 14px;
+    }
+    &.validation-artifacts {
+      width: 13px;
+      height: 17px;
+      position: relative;
+      top: 3px;
+      background-image: url($artifacts-regular-icon);
+      &.selected {
+        background-image: url($artifacts-selected-icon);
+      }
+    }
+    &.network {
+      background-image: url($network-icon);
+      width: 12px;
+      height: 12px;
+      &.selected {
+        background-image: url($network-selected-icon);
+      }
+    }
+    &.validation-other {
+      background-image: url($others-icon);
+      width: 12px;
+      height: 12px;
+      &.selected {
+        background-image: url($others-selected-icon);
+      }
+    }
+    &.volume {
+      width: 15px;
+      height: 16px;
+      background-image: url($volume-icon);
+      &.selected {
+        background-image: url($volume-selected-icon);
+      }
+    }
+    &.zip {
+      background-image: url($zip-icon);
+      height: 23px;
+      width: 29px;
+      &.selected {
+        background-image: url($zip-selected-icon);
+      }
+    }
+    &.heat {
+      background-image: url($heat-icon);
+      height: 14px;
+      width: 16px;
+      &.selected {
+        background-image: url($heat-selected-icon);
+      }
+    }
+    &.env {
+      background-image: url($env-icon);
+      height: 15px;
+      width: 16px;
+      &.selected {
+        background-image: url($env-selected-icon);
+      }
+    }
+    &.error {
+      width: 14px;
+      min-width: 14px;
+      height: 14px;
+      background-image: url($error-icon-sm);
+    }
+    &.warning {
+      height: 13px;
+      width: 15px;
+      min-width: 15px;
+      background-image: url($warning-icon-sm);
+    }
+    &.error-lg {
+      width: 17px;
+      min-width: 17px;
+      height: 17px;
+      background-image: url($error-icon-lg);
+    }
+    &.warning-lg {
+      width: 19px;
+      min-width: 19px;
+      height: 17px;
+      background-image: url($warning-icon-lg);
+    }
+    &.chevron-up {
+      background-image: url($chevron_down);
+      transform: rotate(180deg);
+      height: 7px;
+      width: 11px;
+    }
+    &.chevron-down {
+      background-image: url($chevron_down);
+      height: 7px;
+      width: 11px;
+    }
+    &.go-to-overview {
+      background-image: url($go-to-overview-icon);
+      height: 15px;
+      width: 18px;
+      &.disabled {
+        background-image: url($go-to-overview-disabled-icon);
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss
index 107751b07b..face03d64d 100644
--- a/openecomp-ui/resources/scss/components/_inputOptions.scss
+++ b/openecomp-ui/resources/scss/components/_inputOptions.scss
@@ -1,3 +1,12 @@
+.disabled {
+	.Select-control {
+		background-color: $tlv-light-gray;
+		.Select-placeholder {
+			color: $dark-gray;
+		}
+	}
+}
+
 .input-options {
   display: flex;
   border: 1px solid $light-gray;
@@ -14,6 +23,7 @@
     padding-top:0px;
     padding-bottom: 0px;
     height:28px;
+
   }
 
   .input-options-other{
@@ -34,6 +44,42 @@
 }
 
 .input-options.has-error {
-   border-color: #A94442;
+   border-color: $crimson;
 }
 
+.bootstrap-input-options {
+  display: flex;
+  flex-direction: column;
+  .input-options-select {
+	border: 1px solid $light-gray;
+	border-radius: 2px;
+	height: 30px;
+	float: left;
+	transition-property: width;
+	transition-duration: 300ms;
+	padding-top: 0px;
+	padding-bottom: 0px;
+	width: 100%;
+	&:hover {
+	  border-color: $gray;
+	}
+  }
+  .input-options-other {
+	float: left;
+	height: 30px;
+	border: none;
+	padding-top: 0px;
+	padding-bottom: 0px;
+	height: 28px;
+  }
+  .input-options-separator {
+	width: 1px;
+	height: 24px;
+	margin-top: 2px;
+	margin-bottom: 2px;
+	border: 1px solid $light-gray;
+  }
+  &.has-error {
+	border-color: $crimson;
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 704faaf098..18d5426eb7 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -2,49 +2,42 @@
   @extend .flex-column;
   background-color: $content-background-color;
 
-  .list-editor-view-title {
-    @extend .section-title;
-  }
-
-  .list-editor-view-title-inline {
-    @extend .list-editor-view-title;
-    position: relative;
-    top: 9px;
-    &:first-child {
-      padding: 0;
-    }
-  }
-
-  .list-editor-view-add-section {
-    display: inline-block;
-    padding: 0 10px 0 10px;
+  .expandble-search-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
   }
 
-  .list-editor-view-actions {
+  .list-editor-view-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-end;
     border-bottom: 1px solid $light-gray;
-    padding-bottom: 18px;
+    padding-bottom: 5px;
+    .list-editor-view-title {
+      @extend .heading-3-medium;
+    }
     .list-editor-view-add-controller {
-      @extend .body-1-medium;
+      @extend .heading-4-medium;
       color: $blue;
       display: table;
       cursor: pointer;
       position: relative;
-      top: 9px;
+      padding-top: 0px;
+      padding-bottom: 0px;
+      margin-left: auto;
+      .list-editor-view-add-title {
+        display: flex;
+      }
       span {
         display: table-cell;
         vertical-align: middle;
+        margin-top:4px;
         &:nth-child(2) {
           padding-left: 10px;
         }
       }
     }
-
-    .search-wrapper {
-      width: 265px;
-    }
   }
 
   .list-editor-view-list-scroller {
@@ -56,21 +49,17 @@
   .list-editor-view-list {
     @extend .flex-column;
 
-
     .list-editor-item-view {
       margin: 8px 0;
       border: 1px solid $light-gray;
       background-color: $white;
-      cursor: pointer;
       display: flex;
-      height: 100px;
       min-height: 100px;
       overflow: hidden;
       .list-editor-item-view-content {
         padding: 10px 28px;
         display: flex;
-        flex-basis: 95%;
-        width: 95%;
+        flex: 1 1 auto;
         .list-editor-item-view-field {
           flex: 1 1;
           color: $black;
@@ -91,6 +80,12 @@
           .text {
             @extend .body-1;
           }
+          .textEllipses {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            padding-right: 5px;
+          }
         }
       }
       .list-editor-item-view-controller {
@@ -99,59 +94,79 @@
         align-self: center;
         justify-content: center;
         flex-direction: column;
-        .fa {
-          transition: color .3s;
-          font-size: 22px;
-          color: $white;
-          &:first-child{
+        .svg-icon-wrapper {
+          &:first-child {
             margin-bottom: 10px;
           }
         }
+        .svg-icon {
+          transition: fill .3s;
+          height: 18px;
+          width: 18px;
+          fill: $white;
+        }
       }
-      &:hover {
+      &.selectable:hover{
         @extend .box-hover;
+        cursor: pointer;
         .list-editor-item-view-controller {
-          .fa {
-            color: $gray;
+          .svg-icon {
+            fill: $dark-gray;
+            &:hover {
+              fill: $black;
+            }
           }
         }
       }
     }
-  }
+    &.two-columns {
 
-  &.thinner-list {
-    background-color: $white;
-    padding: 0;
-    margin-top: 35px;
+      flex-direction: row;
+      flex-wrap: wrap;
 
-    .list-editor-view-list {
-      border-top: 0;
-      padding-top: 0;
-      margin-top: 23px;
       .list-editor-item-view {
-        &:hover {
-          border-color: $light-gray;
-        }
-        margin: 5px 0 0 0;
-        height: 30px;
-        border-top: 0;
-        border-left: 0;
-        border-right: 0;
         .list-editor-item-view-content {
-          padding: 4px;
-          .name {
-            @extend .body-2-medium;
-            flex-basis: 36%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 10px 18px 10px 0;
+          .list-editor-item-view-field {
+            flex: 0.3 1;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            height: 100%;
+            border-right : 1px solid $light-gray;
+            margin-left: 18px;
+            &:last-child{
+              border: none;
+              flex: 1;
+            }
+            .details{
+              display: flex;
+              flex-direction: row;
+              .title {
+                padding: 0;
+                margin-right: 5px;
+              }
+            }
+
+            .description {
+              @extend .body-1;
+              @include multiline-ellipsis(1.3em, 3);
+            }
           }
         }
-        .list-editor-item-view-controller {
-          .fa-trash-o {
-            font-size: 20px;
-          }
+
+        &:nth-child(odd){
+          flex: 0 0 48.5%;
+          margin-right: 50px;
+        }
+        &:nth-child(even) {
+          flex: 1;
+          margin-right: 0;
         }
       }
     }
   }
 }
-
-
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index 404f43ca68..36c14a2785 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -3,7 +3,7 @@
   height: 100%;
   background-color: $white;
   border-right: 1px solid $light-gray;
-  box-shadow: 1px -1px 3px 0px $tlv-light-gray;
+  @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
   border-bottom: 0;
 
   .navigation-side-content {
@@ -16,11 +16,11 @@
       flex-direction: column;
       background-color: $tlv-gray;
       .group-name {
-        @extend .heading-5-medium;
+        @extend .heading-4-medium;
         @include ellipsis;
         min-height: 56px;
         display: block;
-        padding: 18px 12px 16px 40px;
+        padding: 18px 12px 13px 40px;
         background-color: $white;
         border-bottom: 1px solid $tlv-light-gray;
       }
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
new file mode 100644
index 0000000000..fa17733374
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -0,0 +1,152 @@
+.select-action-table-view {
+	.svg-icon-wrapper {
+		flex-direction: row;
+		
+		&::before {
+			content:"";			
+		}
+		.svg-icon {
+			margin-left: 5px;
+			margin-right: 5px;
+			width:16px;
+			height:16px;
+		}	
+	}
+	.dummy-icon {
+		background-color: $white;
+		fill: $white;
+		.locked {
+			fill: $white;
+		}
+	}
+
+	.select-action-table-controllers {
+		display: flex;
+		.svg-icon-wrapper {
+			&:hover {
+				cursor: pointer;
+			}
+			&:first-child {
+				margin-left: auto;
+			}
+		}
+	}
+	.select-action-table {
+		display: flex;
+		flex-direction: column;
+		border-color: $light-gray;
+
+		.select-action-table-headers {
+			display: flex;
+			background-color: $tlv-light-gray;
+			border-color: inherit;						
+			.select-action-table-header {
+				@extend .body-1-medium;
+				flex: 1;
+				border-top: 1px solid;
+				border-right: 1px solid;				
+				border-color: inherit;
+				padding: 8px 0 7px 20px;
+				&:first-child {
+					border-left: 1px solid;
+					border-color: inherit;
+				}
+			}		
+		}
+		.select-action-table-row-wrapper {
+			display: flex;
+			flex-direction: row;			
+    		margin-bottom: 14px;
+			.svg-icon.trash-o {
+				
+				fill: $dark-gray;								
+			}
+			.svg-icon.error-circle {
+				fill: $red;				
+			}
+			.svg-icon.check-circle {
+				fill: $green;				
+			}			
+			.select-action-table-row {
+				display: flex;
+				flex: 1;
+				border: 1px solid;
+				border-color: $light-gray;
+				&.has-error {
+					border-color: $red;
+				}
+				.select-action-table-cell {
+					flex: 1;
+					border-right: 1px solid;
+					border-color: $light-gray;
+					@extend .body-1;
+					.dropdown-multi-select {
+						.form-group {
+							.Select{
+								&.is-open {
+									border: 1px solid $blue;
+								}
+							}
+						}
+					}
+					.form-group {
+						margin: 0;						
+						.Select-control {
+							height:36px;
+							border: none;
+							.is-open {
+								border-left-color: $blue;
+								border-right-color: $blue;
+							}
+							.Select-value, .Select-placeholder, .Select-input {
+								padding-left: 20px;
+								padding-right: 50px;
+								padding-top: 4px;
+								
+							}
+							.Select-placeholder {
+								color: $dark-gray;
+							}
+							.Select-arrow-zone {
+								padding-right: 15px;
+							}
+						}											
+					}
+					&:last-child {
+						border-right: none;
+					}											
+				}
+				.Select-menu-outer {
+						border-left: 1px solid $blue;
+						border-right: 1px solid $blue;
+						border-bottom: 1px solid $blue;
+						overflow: auto;
+						.Select-menu {																	
+							display: inline-block;
+							.Select-option {								
+								width: 100%;
+								display: inline-block;
+								border-bottom: 1px solid $light-gray;																					
+								&:hover {
+									background-color: $blue;
+									color: $white;
+									&.is-focused {
+										background-color: $blue;
+									}
+									&.is-focused {
+										background-color: $blue;
+									}
+								}
+								&.is-selected {
+									background-color: transparent;
+								}
+								&.is-focused {
+									background-color: transparent;
+								}								
+							}
+						}	
+					}
+			}
+		}
+	}
+}
diff --git a/openecomp-ui/resources/scss/components/_slidePanel.scss b/openecomp-ui/resources/scss/components/_slidePanel.scss
deleted file mode 100644
index 61c9a189f0..0000000000
--- a/openecomp-ui/resources/scss/components/_slidePanel.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-
-.slide-panel {
-  transition: left .5s,right .5s;
-
-  .slide-panel-header {
-    padding: 10px;
-    height: 45px;
-    display: table;
-    width: 100%;
-    .slide-panel-header-title, .collapse-double-icon {
-      display: table-cell;
-      vertical-align: middle;
-    }
-    .slide-panel-header-title {
-      @extend .body-2;
-      text-align: center;
-      width: 100%;
-      color: $text-black;
-    }
-    .collapse-double-icon {
-      color: $text-black;
-      cursor: pointer;
-    }
-  }
-
-  .slide-panel-content {
-    opacity: 1;
-    transition: opacity .5s, visibility .5s;
-
-    &.closed {
-      opacity: 0;
-      visibility: hidden;
-    }
-  }
-}
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index fdac5ebe45..e34be01af2 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -20,4 +20,41 @@
       }
     }
   }
+  .error-block {
+    margin: 10px 0;
+    .error-block-header {
+      background-color: $tlv-gray;
+      padding: 5px;
+      cursor: pointer;
+      .chevron-down {
+        width:10px;
+        height:10px;
+        margin-right: 10px;
+        &.right {
+          transform: rotate(270deg);
+        }
+      }
+
+    }
+    .error-code-list-item {
+      .icon-label {
+        @extend .body-1;
+        color: $dark-gray;
+      }
+      .icon-component {
+        align-items: baseline;
+      }
+    }
+    .list-group-item {
+      .error-item-text {
+        margin-top:-2px;
+        //position: fixed;
+      }
+    }
+    .component-name-header {
+      margin-left: 45px;
+      margin-top: 10px;
+      @extend .heading-5-medium;
+    }
+  }
 }
diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss
new file mode 100644
index 0000000000..fc02f81fd4
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_svgIcon.scss
@@ -0,0 +1,51 @@
+@mixin overrideBootstrapClose(){
+	opacity: 1;
+	float: none;
+	&:hover {
+		opacity: 1;
+	}
+}
+
+.svg-icon-wrapper {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	&.bottom {
+		flex-direction: column;
+		.svg-icon-label {
+			margin-bottom: 5px;
+		}
+	}
+	&.right {
+		float: none;
+		.svg-icon-label {
+			margin-left: 5px;
+		}
+	}
+	&.top {
+		flex-direction: column-reverse;;
+		.svg-icon-label {
+			margin-top: 5px;
+		}
+	}
+	&.left {
+		flex-direction: row-reverse;;
+		.svg-icon-label {
+			margin-right: 5px;
+		}
+	}
+	// bootstrap override
+	&.close {
+		@include overrideBootstrapClose();
+	}
+	.close {
+	@include overrideBootstrapClose();
+	}
+	.svg-icon {
+		width: 20px;
+		height: 20px;
+	}
+	.svg-icon-label {
+		@extend .body-1;
+	}
+}
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index 93444c2e88..9404f2841a 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -5,6 +5,7 @@ form {
       flex: 1;
     }
     .nav-tabs {
+      position: relative;
       .invalid-tab:not(.active) {
         a {
           color: $red;
@@ -73,14 +74,17 @@ form {
           flex: 0.2;
           content: ' ';
         }
-        &.add-line-break {
-          .control-label {
-            &:after {
-              content: "\00a0";
-              display: block;
+        @media (min-width: 1349px) {
+          &.add-line-break {
+            .control-label {
+              &:after {
+                content: "\00a0";
+                display: block;
+              }
             }
           }
         }
+
       }
     }
   }
@@ -91,6 +95,16 @@ form {
     button:first-child {
       margin-right: 15px;
     }
+		.svg-icon {
+			height: 14px;
+			width: 14px;
+		}
+		.svg-icon.check {
+			fill: $white;
+		}
+		.svg-icon.close {
+			fill: $blue;
+		}
   }
 }
 
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 3511470bfb..3c30cdcc37 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,109 +1,125 @@
 .version-controller-bar {
-  .navbar-inverse {
-    @extend .body-1-medium;
+  display: flex;
+  min-height: 57px;
+  border-bottom: 1px solid $tlv-light-gray;
+  background-color: transparent;
+  .vc-container {
+    display: flex;
+    flex: 1;
+    align-self: center;
     background-color: transparent;
-    border-bottom: $tlv-light-gray thin solid;
-    padding-top: 14px;
-    padding-bottom: 12px;
-    margin-bottom: 0;
-    .container {
-      width: 100%;
-      padding: 0 52px;
+    justify-content: space-between;
+    padding-left: 16px;
+    padding-right: 40px;
+    .version-status-container {
+      display: flex;
       height: 30px;
-      .navbar-collapse {
-        padding-left: 0;
-        .items-in-left {
-          display: flex;
-          height: 30px;
-          .version-section {
-            .form-group {
-              margin-right: 5px;
-              .input-options {
-                border: none;
-                .input-options-select {
-                  padding-top: 4px;
-                }
-              }
+      .version-selector {
+        border: none;
+        margin-top: 7px;
+        padding-right: 10px;
+        margin-right: 15px;
+        margin-left: 10px;
+        @extend .body-1;        
+      }
+      .version-section {
+        .form-group {
+          margin-right: 20px;
+          .input-options {
+            border: none;
+            .input-options-select {
+              padding-top: 4px;
             }
           }
-          .vc-status {
-            display: flex;
-            padding-left: 14px;
-            border-left: $light-gray thin solid;
-            .status-text {
-              align-self: center;
-              display: flex;
-              padding-left: 3px;
-              .status-text-dash {
-                padding: 0 9px;
-              }
+        }
+      }
+      .vc-status {
+        display: flex;
+        padding-left: 20px;
+        border-left: $light-gray thin solid;
+        .status-text {
+          align-self: center;
+          margin-top: 2px;
+          @extend .heading-5;
+          color: $dark-gray;
+        }
+      }
+    }
+    .save-submit-cancel-container {
+      display: flex;
+      height: 30px;
+      .action-buttons {
+        display: flex;
+        padding: 0 13px;
+        .version-control-buttons {
+          display: flex;
+        }
+        .action-buttons-svg {
+          padding-top: 5px;
+          margin-right: 20px;
+          padding-bottom: 5px;
+
+          .version-controller-lock-closed {
+            fill: $dark-gray;
+            width: 21px;
+            height: 23px;
+            margin-top: -3px;
+            &.disabled {
+              fill: $light-gray;
             }
-            .onboarding-status-icon {
-              width: 25px;
-              height: 19px;
-              background-image: url('../images/ecomp/ASDC_Sprite.png');
-              background-position: -306px 674px;
-              align-self: center;
+            &:hover {
+              fill: $black;
             }
-            .checkout-status-icon {
-              display: flex;
-              & > .catalog-tile-check-in-status.sprite-new.checkout-editable-status-icon {
-                width: 25px;
-                height: 19px;
-                align-self: center;
-                margin-left: 5px;
-              }
+          }
+          .version-controller-lock-open {
+            fill: $dark-gray;
+            width: 24px;
+            height: 28px;
+            margin-top: -6px;
+            &:hover {
+              fill: $black;
             }
           }
-        }
-        .items-in-right {
-          display: flex;
-          height: 30px;
-          .action-buttons {
-            display: flex;
-            border-right: $gray thin solid;
-            padding: 0 13px;
-            .version-control-buttons {
-              display: flex;
+          .version-controller-submit {
+            fill: $blue;
+            &.disabled {
+              fill: $light-gray;
             }
-            .vc-nav-item-button {
-              border: 1px solid $light-gray;
-              border-radius: 5px;
-              cursor: pointer;
-              margin-right:10px;
-              padding: 6px 20px;
-              &:hover, &:focus {
-                background-color: lightgrey;
-              }
-              &.button-submit{
-                background-color: transparent;
-                color: $green;
-                border-color: $green;
-              }
-              &.button-checkin-checkout {
-                background-color: $white;
-                @extend .body-1;
-              }
+            &:hover {
+              fill: $dark-blue;
             }
-            .revert-btn, .save-btn {
-              height: 24px;
-              width: 24px;
-              align-self: center;
-              cursor: pointer;
-              margin-right: 10px;
+          }
+
+          .version-controller-revert {
+            fill: $dark-gray;
+            &.disabled {
+              fill: $light-gray;
+            }
+            &:hover {
+              fill: $black;
             }
           }
-          .vc-nav-item-close {
-            display: flex;
-            padding-left: 18px;
-            padding-top: 3px;
-            align-self: center;
-            @extend .body-1;
-            color: $gray;
-            cursor: pointer;
+          .version-controller-save {
+            fill: $dark-gray;
+            &.disabled {
+              fill: $light-gray;
+            }
+            &:hover {
+              fill: $black;
+            }
           }
         }
       }
+      .vc-nav-item-close {
+        display: flex;
+        padding-left: 18px;
+        padding-top: 3px;
+        align-self: center;
+        @extend .body-1;
+        color: $gray;
+        cursor: pointer;
+        border-left: $gray thin solid;
+      }
     }
   }
 }