Add new code new version

Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a
Signed-off-by: Michael Lando <ml636r@att.com>

18 files changed, 1030 insertions, 0 deletions

diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
new file mode 100644
index 0000000000..b39ea495ab
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_buttons.scss
@@ -0,0 +1,46 @@
+
+$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;
+  color: $blue;
+  font-weight: bolder;
+  @extend .body-1;
+  text-align: center;
+  padding: 7px;
+  border-radius: 5px;
+  cursor: pointer;
+  align-self: center;
+  background-color: $white;
+  .primary-btn-text {
+    width: 100%;
+  }
+  &:hover {
+    color: $blue;
+    border-color: $blue;
+    background-color: $tlv-hover;
+    &:active {
+      color: $blue;
+      border-color: $blue;
+    }
+  }
+
+  &:focus:not(:hover) {
+    color: $blue;
+    border-color: $blue;
+    background-color: $white;
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_dropzone.scss b/openecomp-ui/resources/scss/components/_dropzone.scss
new file mode 100644
index 0000000000..cad752d415
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_dropzone.scss
@@ -0,0 +1,8 @@
+
+.active-dragging {
+  border: 3px dashed $dark-blue;
+  border-radius: 20px;
+  .draggable-wrapper {
+    opacity: 0.5;
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
new file mode 100644
index 0000000000..543c1c8b92
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -0,0 +1,46 @@
+.dual-list-box {
+  display: flex;
+  margin: 25px 0 10px 0;
+
+  .dual-search-multi-select-section {
+    $multi-select-box-width: 398px;
+    width: $multi-select-box-width;
+    .dual-text-box-search-title, .dual-list-box-multi-select-text {
+      @extend .body-1;
+      color: $dark-gray;
+    }
+    .dual-text-box-search {
+      margin: 5px 0 30px 0;
+    }
+    .dual-list-box-multi-select {
+      flex: 1 1;
+      display: flex;
+      height: 166px;
+      margin-bottom: 0;
+      select {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        overflow-y: scroll;
+        height: inherit;
+        option {
+          padding: 4px 0 4px 10px;
+        }
+      }
+    }
+  }
+  .dual-list-options-bar {
+    margin: 62px 54px 27px 54px;
+    padding-top: 23px;
+    .dual-list-option {
+      text-align: center;
+      line-height: 10px;
+      font-size: 25px;
+      width: 20px;
+      height: 15px;
+      cursor: pointer;
+      margin-top: 20px;
+      color: $blue;
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
new file mode 100644
index 0000000000..52f410a61b
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -0,0 +1,61 @@
+$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-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-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
new file mode 100644
index 0000000000..3c50fe694a
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -0,0 +1,45 @@
+.section-title {
+  @extend .heading-3-medium;
+  padding: 50px 0 30px 0;
+  &:first-child {
+    padding: 0 0 30px 0;
+  }
+}
+.dropdown-multi-select {
+  .Select {
+    display: block;
+    width: 100%;
+    .Select-control {
+      height: 28px;
+      border-radius: 2px;
+      .Select-input {
+        height: 28px;
+        input {
+          height: 28px;
+          padding: 0;
+        }
+      }
+      .Select-placeholder {
+        line-height: 30px;
+      }
+    }
+    &.Select--multi {
+      .Select-value {
+        color: $text-black;
+        background-color: transparent;
+        border-color: $light-gray;
+        margin-top: 2px;
+        margin-left: 2px;
+        border-radius: 1px;
+      }
+      .Select-value-icon {
+        border-right-color: $light-gray;
+      }
+      .Select-arrow-zone {
+        padding-top: 4px;
+      }
+    }
+  }
+}
+
+
diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss
new file mode 100644
index 0000000000..107751b07b
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_inputOptions.scss
@@ -0,0 +1,39 @@
+.input-options {
+  display: flex;
+  border: 1px solid $light-gray;
+  border-radius: 2px;
+  height: 30px;
+  &:hover {
+    border-color: $gray;
+  }
+  .input-options-select {
+    float: left;
+    border: none;
+    transition-property: width;
+    transition-duration: 300ms;
+    padding-top:0px;
+    padding-bottom: 0px;
+    height:28px;
+  }
+
+  .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;
+  }
+}
+
+.input-options.has-error {
+   border-color: #A94442;
+}
+
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
new file mode 100644
index 0000000000..704faaf098
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -0,0 +1,157 @@
+.list-editor-view {
+  @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;
+  }
+
+  .list-editor-view-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid $light-gray;
+    padding-bottom: 18px;
+    .list-editor-view-add-controller {
+      @extend .body-1-medium;
+      color: $blue;
+      display: table;
+      cursor: pointer;
+      position: relative;
+      top: 9px;
+      span {
+        display: table-cell;
+        vertical-align: middle;
+        &:nth-child(2) {
+          padding-left: 10px;
+        }
+      }
+    }
+
+    .search-wrapper {
+      width: 265px;
+    }
+  }
+
+  .list-editor-view-list-scroller {
+    @extend .flex;
+    overflow: auto;
+    margin: 18px 0 30px 0;
+  }
+
+  .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%;
+        .list-editor-item-view-field {
+          flex: 1 1;
+          color: $black;
+          padding: 0;
+          @include ellipsis;
+          overflow-wrap: break-word;
+          white-space: initial;
+          .number-field {
+            align-content: center;
+          }
+          .title {
+            @extend .body-1;
+            padding-bottom: 5px;
+            &:not(:first-child) {
+              line-height: 0.9;
+            }
+          }
+          .text {
+            @extend .body-1;
+          }
+        }
+      }
+      .list-editor-item-view-controller {
+        display: flex;
+        flex-basis: 5%;
+        align-self: center;
+        justify-content: center;
+        flex-direction: column;
+        .fa {
+          transition: color .3s;
+          font-size: 22px;
+          color: $white;
+          &:first-child{
+            margin-bottom: 10px;
+          }
+        }
+      }
+      &:hover {
+        @extend .box-hover;
+        .list-editor-item-view-controller {
+          .fa {
+            color: $gray;
+          }
+        }
+      }
+    }
+  }
+
+  &.thinner-list {
+    background-color: $white;
+    padding: 0;
+    margin-top: 35px;
+
+    .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%;
+          }
+        }
+        .list-editor-item-view-controller {
+          .fa-trash-o {
+            font-size: 20px;
+          }
+        }
+      }
+    }
+  }
+}
+
+
diff --git a/openecomp-ui/resources/scss/components/_loader.scss b/openecomp-ui/resources/scss/components/_loader.scss
new file mode 100644
index 0000000000..ddff9af6e3
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_loader.scss
@@ -0,0 +1,159 @@
+.onboarding-loader {
+  .onboarding-loader-backdrop {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    background-color: #E1E4E6;
+    opacity: 0.5;
+  }
+  .tlv-loader {
+    height: 63px;
+    width: 63px;
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    margin-top: -10.5px;
+    margin-left: -10.5px;
+  }
+  .tlv-loader.large {
+    transform: scale(1);
+  }
+  .tlv-loader::before {
+    background-color: $gray;
+    border-radius: 50%;
+    box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -21px 21px 0px 0px $gray;
+    content: '';
+    display: block;
+    height: 21px;
+    width: 21px;
+    position: absolute;
+    left: 50%;
+    margin-left: -10.5px;
+  }
+  .tlv-loader::after {
+    border-radius: 50%;
+    content: '';
+    display: block;
+    position: absolute;
+    height: 21px;
+    width: 21px;
+    animation: dot-move-2 4.5s infinite ease-in;
+  }
+  @keyframes dot-move {
+    0% {
+      background-color: $blue;
+      left: 21px;
+      top: 0;
+    }
+    25% {
+      background-color: $orange;
+      left: 42px;
+      top: 21px;
+    }
+    50% {
+      background-color: $light-purple;
+      left: 21px;
+      top: 42px;
+    }
+    75% {
+      background-color: $light-green;
+      left: 0;
+      top: 21px;
+    }
+    100% {
+      background-color: $blue;
+      left: 21px;
+      top: 0;
+    }
+  }
+  @keyframes dot-move-2 {
+    0% {
+      background-color: $blue;
+      left: 21px;
+      top: 0;
+    }
+    6.25% {
+      background-color: $blue;
+      left: 42px;
+      top: 21px;
+    }
+    12.5% {
+      background-color: $blue;
+      left: 21px;
+      top: 42px;
+    }
+    18.75% {
+      background-color: $blue;
+      left: 0;
+      top: 21px;
+    }
+    25% {
+      background-color: $orange;
+      left: 21px;
+      top: 0;
+    }
+    31.25% {
+      background-color: $orange;
+      left: 42px;
+      top: 21px;
+    }
+    37.5% {
+      background-color: $orange;
+      left: 21px;
+      top: 42px;
+    }
+    43.75% {
+      background-color: $orange;
+      left: 0;
+      top: 21px;
+    }
+    50% {
+      background-color: $light-purple;
+      left: 21px;
+      top: 0;
+    }
+    56.25% {
+      background-color: $light-purple;
+      left: 42px;
+      top: 21px;
+    }
+    62.5% {
+      background-color: $light-purple;
+      left: 21px;
+      top: 42px;
+    }
+    68.75% {
+      background-color: $light-purple;
+      left: 0;
+      top: 21px;
+    }
+    75% {
+      background-color: $light-green;
+      left: 21px;
+      top: 0;
+    }
+    81.25% {
+      background-color: $light-green;
+      left: 42px;
+      top: 21px;
+    }
+    87.5% {
+      background-color: $light-green;
+      left: 21px;
+      top: 42px;
+    }
+    93.75% {
+      background-color: $light-green;
+      left: 0;
+      top: 21px;
+    }
+    100% {
+      background-color: $blue;
+      left: 21px;
+      top: 0;
+    }
+  }
+}
+
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
new file mode 100644
index 0000000000..404f43ca68
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -0,0 +1,62 @@
+.software-product-navigation-side-bar {
+  width: 245px;
+  height: 100%;
+  background-color: $white;
+  border-right: 1px solid $light-gray;
+  box-shadow: 1px -1px 3px 0px $tlv-light-gray;
+  border-bottom: 0;
+
+  .navigation-side-content {
+    overflow: hidden;
+    height: 100%;
+
+    .navigation-group {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background-color: $tlv-gray;
+      .group-name {
+        @extend .heading-5-medium;
+        @include ellipsis;
+        min-height: 56px;
+        display: block;
+        padding: 18px 12px 16px 40px;
+        background-color: $white;
+        border-bottom: 1px solid $tlv-light-gray;
+      }
+    }
+
+    .navigation-group-items {
+      padding-left: 20px;
+      overflow-y: auto;
+
+      .navigation-group-item {
+        @extend .body-1;
+        cursor: pointer;
+        margin: 18px 0;
+        padding-left: 20px;
+        color: $dark-gray;
+        line-height: 17px;
+        &.selected-item {
+          padding-left: 0;
+          .collapse.in {
+            padding-left: 20px;
+          }
+        }
+        .navigation-group-item-name {
+          @include ellipsis;
+          white-space: normal;
+          &.selected {
+            @extend .body-1-medium;
+            border-left: 4px solid $blue;
+            padding-left: 18px;
+            color: $blue;
+          }
+          &.bold-name {
+            @extend .body-1-medium;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
new file mode 100644
index 0000000000..426f05cd89
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_notifications.scss
@@ -0,0 +1,29 @@
+
+.notification-modal {
+
+  .modal-content {
+    .modal-header {
+      padding: 15px 10px 10px;
+      .modal-title {
+        @extend .heading-5-medium;
+      }
+    }
+    .modal-body {
+      padding: 30px 15px;
+      @extend .body-1-medium;
+    }
+  }
+
+  &.danger {
+    .modal-content .modal-header {
+      border-top: 3px solid $red;
+    }
+  }
+
+  &.warning {
+    .modal-content .modal-header {
+      border-top: 3px solid $yellow;
+    }
+  }
+
+}
diff --git a/openecomp-ui/resources/scss/components/_progressBar.scss b/openecomp-ui/resources/scss/components/_progressBar.scss
new file mode 100644
index 0000000000..040c8cefd7
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_progressBar.scss
@@ -0,0 +1,24 @@
+ .progress-bar-view {
+    display: -webkit-box;
+    padding: 5px;
+    .progress-bar-outside {
+      display: flex;
+      width: 90%;
+      justify-content: space-between;
+      background-color: lightgray;
+      border-radius: 15px;
+      height: 10px;
+      .progress-bar-inside {
+        display: block;
+        border: 1px solid gainsboro;
+        background-color: #4faa39;
+        border-radius: inherit;
+      }
+    }
+    .progress-bar-view-label {
+      margin-right: -30px;
+      margin-top: -2px;
+      margin-left: 10px;
+      color: black;
+     }
+  }
diff --git a/openecomp-ui/resources/scss/components/_punchOut.scss b/openecomp-ui/resources/scss/components/_punchOut.scss
new file mode 100644
index 0000000000..65ba24d884
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_punchOut.scss
@@ -0,0 +1,12 @@
+&.dox-ui-punch-out {
+  background-color: $content-background-color;
+}
+
+&.dox-ui-punch-out.dox-ui-punch-out-full-page {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+}
diff --git a/openecomp-ui/resources/scss/components/_sequenceDiagram.scss b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
new file mode 100644
index 0000000000..5fad92a668
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
@@ -0,0 +1,11 @@
+.sequence-diagram {
+  @extend .flex-column;
+  .sequence-diagram-sequencer {
+    flex: 0 1 auto;
+    margin-bottom: 30px;
+  }
+  .sequence-diagram-action-buttons {
+    flex: 0.1;
+    text-align: center;
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_slidePanel.scss b/openecomp-ui/resources/scss/components/_slidePanel.scss
new file mode 100644
index 0000000000..61c9a189f0
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_slidePanel.scss
@@ -0,0 +1,35 @@
+
+.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
new file mode 100644
index 0000000000..fdac5ebe45
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -0,0 +1,23 @@
+
+.submit-error-response-view {
+  max-height: 500px;
+  overflow: auto;
+  .list-group-item {
+    border-top: none;
+  }
+  .panel-title {
+    a {
+      &:after {
+
+        content: "(details)";
+        color: $link-blue;
+        float: right;
+
+      }
+      &:hover {
+        color: $blue;
+        text-decoration: underline;
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_toggleInput.scss b/openecomp-ui/resources/scss/components/_toggleInput.scss
new file mode 100644
index 0000000000..fcf0902adf
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_toggleInput.scss
@@ -0,0 +1,62 @@
+.toggle-input-wrapper {
+  $toggle-width: 40px;
+  $toggle-height: 20px;
+  display: table;
+  .toggle-switch, .toggle-input-label {
+    display: table-cell;
+    vertical-align: middle;
+    padding-left: 10px;
+  }
+  .toggle {
+    position: absolute;
+    margin-left: -9999px;
+    visibility: hidden;
+  }
+  .toggle + label {
+    @extend %noselect;
+    display: block;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+  }
+
+  input.toggle-round-flat + label {
+    padding: 1px;
+    width: $toggle-width;
+    height: $toggle-height;
+    background-color: $dark-gray;
+    border-radius: $toggle-height;
+    transition: background 0.4s;
+  }
+  input.toggle-round-flat + label:before,
+  input.toggle-round-flat + label:after {
+    display: block;
+    position: absolute;
+    content: "";
+  }
+  input.toggle-round-flat + label:before {
+    top: 1px;
+    left: 1px;
+    bottom: 1px;
+    right: 1px;
+    background-color: $white;
+    border-radius: $toggle-height;
+    transition: background 0.4s;
+  }
+  input.toggle-round-flat + label:after {
+    top: 4px;
+    left: 4px;
+    bottom: 4px;
+    width: $toggle-height - 8;
+    background-color: $dark-gray;
+    border-radius: $toggle-height - 8;
+    transition: margin 0.4s, background 0.4s;
+  }
+  input.toggle-round-flat:checked + label {
+    background-color: $link-blue;
+  }
+  input.toggle-round-flat:checked + label:after {
+    margin-left: $toggle-height;
+    background-color: $link-blue;
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
new file mode 100644
index 0000000000..93444c2e88
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -0,0 +1,102 @@
+form {
+  .validation-form-content {
+    .validation-input-wrapper {
+      position: relative;
+      flex: 1;
+    }
+    .nav-tabs {
+      .invalid-tab:not(.active) {
+        a {
+          color: $red;
+        }
+      }
+    }
+    .validation-error-message {
+      &.bottom {
+        .tooltip-arrow {
+          border-bottom-color: $red;
+        }
+      }
+      &.right {
+        .tooltip-arrow {
+          border-right-color: $red;
+        }
+      }
+      &.left {
+        .tooltip-arrow {
+          border-left-color: $red;
+        }
+      }
+      .tooltip-inner {
+        background-color: $red;
+      }
+    }
+    .input-row {
+      padding-bottom: 32px;
+      &:only-child {
+        padding-bottom: 0;
+      }
+      &:last-child {
+        padding-bottom: 0;
+      }
+      .form-group {
+        margin-bottom: 0;
+      }
+    }
+
+    .rows-section {
+      .row-flex-components {
+        display: flex;
+      }
+      .validation-input-wrapper {
+        flex: 1;
+      }
+      .empty-col {
+        flex: 1.2;
+        content: ' ';
+      }
+      .empty-two-col {
+        flex: 2.4;
+        content: ' ';
+      }
+
+      .two-col {
+        flex: 2.2;
+      }
+      .three-col {
+        flex: 3.4;
+      }
+      .single-col {
+        flex: 1.2;
+        display: flex;
+        &:after {
+          flex: 0.2;
+          content: ' ';
+        }
+        &.add-line-break {
+          .control-label {
+            &:after {
+              content: "\00a0";
+              display: block;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .validation-buttons {
+    padding: 20px 0;
+    text-align: right;
+    button:first-child {
+      margin-right: 15px;
+    }
+  }
+}
+
+.modal-body {
+  .validation-buttons {
+    padding: 20px 15px;
+    background-color: $tlv-gray;
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
new file mode 100644
index 0000000000..3511470bfb
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -0,0 +1,109 @@
+.version-controller-bar {
+  .navbar-inverse {
+    @extend .body-1-medium;
+    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;
+      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;
+                }
+              }
+            }
+          }
+          .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;
+              }
+            }
+            .onboarding-status-icon {
+              width: 25px;
+              height: 19px;
+              background-image: url('../images/ecomp/ASDC_Sprite.png');
+              background-position: -306px 674px;
+              align-self: center;
+            }
+            .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;
+              }
+            }
+          }
+        }
+        .items-in-right {
+          display: flex;
+          height: 30px;
+          .action-buttons {
+            display: flex;
+            border-right: $gray thin solid;
+            padding: 0 13px;
+            .version-control-buttons {
+              display: flex;
+            }
+            .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;
+              }
+            }
+            .revert-btn, .save-btn {
+              height: 24px;
+              width: 24px;
+              align-self: center;
+              cursor: pointer;
+              margin-right: 10px;
+            }
+          }
+          .vc-nav-item-close {
+            display: flex;
+            padding-left: 18px;
+            padding-top: 3px;
+            align-self: center;
+            @extend .body-1;
+            color: $gray;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}