[SDC-29] Amdocs OnBoard 1707 initial commit.

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

1 files changed, 491 insertions, 0 deletions

diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
new file mode 100644
index 0000000000..4ec7c8d3af
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -0,0 +1,491 @@
+.license-model-overview {
+  .overview-top-section {
+    .overview-title{
+      @extend .heading-1;
+      @extend .text-uppercase !optional;
+      margin-bottom: 20px;
+      color: $blue;
+    }
+    .license-model-overview-top {
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+      padding-bottom: 10px;
+      min-height: 155px;
+      .separator {
+        width: 1px;
+        border-right: 1px solid $tlv-light-gray;
+        margin-left: 20px;
+      }
+      .vendor-data-view {
+        @extend .flex-column;
+        background-color: $tlv-gray;
+        padding: 20px 30px;
+        border: 1px solid $tlv-light-gray;
+        @include border-shadow();
+        .vendor-title {
+          margin-top:5px;
+        }
+        .vendor-name {
+          @extend .heading-3-medium;
+          text-transform: none;
+          padding-bottom: 15px;
+          border-bottom: 1px solid $tlv-light-gray;
+        }
+        .vendor-description {
+          @extend .flex;
+          @extend .body-1;
+          justify-content: space-between;
+          margin-top: 10px;
+          overflow: hidden;
+          border: 1px solid transparent;
+          position: relative;
+          left: -6px;
+          width: 101%;
+
+          &:hover {
+            border: 1px solid $tlv-light-gray;
+            background-position: 99% 12%;
+            background-size: 15px;
+            padding-right: 20px;
+            background-image: url($pencil-icon);
+            background-repeat: no-repeat;
+            cursor: pointer;
+          }
+          &.read-only {
+            border: none;
+          }
+					.description-data {
+						@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+					}
+        }
+
+        .vendor-description-readonly {
+          @extend .flex;
+          @extend .body-1;
+          justify-content: space-between;
+          margin-top: 10px;
+          overflow: hidden;
+          border: none;
+          height: 49px;
+          margin-bottom: 15px;
+          padding: 6px;
+          position: relative;
+          left:-6px;
+        }
+
+        .vendor-description-edit {
+          @extend .flex;
+          flex-direction: column;
+          border: none;
+          margin-top: 10px;
+          position: relative;
+          left: -6px;
+          width: 101%;
+          textarea {
+            padding-left: 6px;
+          }
+          .buttons-row {
+            @extend .flex;
+            justify-content: flex-end;
+            flex-direction: row;
+            margin-top: -25px;
+            .buttons-wrapper {
+              @extend .flex;
+              @extend .body-3;
+              border: 1px solid $light-gray;
+              width: 95px;
+              height: 19px;
+              background-color: $tlv-light-gray;
+              border-radius: 2px;
+              position: relative;
+              flex: 0 1 auto;
+              text-align: center;
+              .description-button {
+                cursor: pointer;
+                flex: 1;
+                &:hover {
+                  background-color: $white;
+                }
+              }
+              .description-save {
+                cursor: pointer;
+                flex: 1;
+                color:$blue;
+                &:hover {
+                  background-color: $white;
+                }
+              }
+            }
+          }
+          .description-edit-textarea {
+            height:67px;
+            border: 1px solid $tlv-light-gray;
+            resize: none;
+            position: relative;
+            left: -12px;
+          }
+        }
+      }
+      .summary-count-list {
+        @extend .flex-column;
+        flex: 0.6;
+        margin-left: 20px;
+        justify-content: space-between;
+        border: 1px solid $tlv-light-gray;
+        @include border-shadow();
+        background-color: $tlv-gray;
+        .summary-count-item {
+          @extend .flex;
+          @extend .heading-4-medium;
+          padding-top: 5px;
+          padding-left: 45px;
+          padding-right: 45px;
+          border-bottom: 1px solid $tlv-light-gray;
+          &:last-child { border-bottom: none; }
+          .item-count {
+            flex-grow: 2;
+            margin-left: 5px;
+          }
+          .add-button {
+            cursor: pointer;
+            font-size: larger;
+            background-image: url($vlm-summary-plus);
+            background-size: 20px;
+            background-repeat: no-repeat;
+            width:20px;
+            height:20px;
+            margin-top: 3px;
+            margin-left: auto;
+            &:hover {
+              cursor: pointer;
+              background-image: url($vlm-summary-plus-blue);
+            }
+          }
+
+          .summary-name-and-count {
+            &:hover {
+              cursor: pointer;
+              color: $blue;
+            }
+          }
+
+
+        }
+      }
+      .plus-icon {
+        font-size: $icon-font-size;
+        border-radius: 50%;
+        border: 1px solid $black;
+        color: $black;
+        height: 16px;
+        width: 16px;
+        padding: 2px 2px 2px 3px;
+      }
+    }
+  }
+  .vlm-list-tab-panel
+  {
+    @extend .flex;
+    .section-title {
+      flex: 1;
+    }
+    .overview-buttons-section {
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-start;
+      .button-vlm-list-view {
+        height: 32px;
+        width: 34px;
+        margin-left:10px;
+        cursor: pointer;
+      }
+      .vlm-list-icon {
+        background-size: 32px;
+        background-repeat: no-repeat;
+        background-image: url($vlm-summary-used);
+        &.selected {
+          background-image: url($vlm-summary-used-blue);
+        }
+      }
+      .entities-list-icon {
+        background-size: 32px;
+        background-repeat: no-repeat;
+        background-image: url($vlm-summary-orphans);
+        &.selected {
+          background-image: url($vlm-summary-orphans-blue);
+        }
+      }
+
+    }
+  }
+
+  .overview-list-section {
+    @extend .flex-column;
+    margin-top: 35px;
+    .section-title {
+      @extend .heading-2;
+      padding-top: 20px;
+      margin-bottom: 15px;
+      padding-bottom: 0px;
+    }
+    &.overview-list-orphans {
+      .chevron::before
+      {
+        display: none;
+      }
+      .vlm-list-view {
+        .vlm-list {
+          .vlm-list-item {
+            @include border-shadow();
+            .list-item-icon-col {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              margin-left: 5px;
+            }
+            &.vlm-list-item-la {
+              margin-left: 0;
+              .list-item-icon-col {
+                padding-left: 22px;
+
+              }
+              .la-icon {
+                background-color: $gray;
+                border-color: $gray;
+              }
+              .list-item-section {
+                &:first-child {
+                  background-color: gray;
+                }
+              }
+            }
+            &.vlm-list-item-fg {
+              cursor: default;
+              margin-left: 0;
+              border-left: 10px solid $gray;
+              .list-item-arrow-col {
+                margin-left: 0px;
+              }
+              .list-item-icon-col {
+                padding-left: 22px;
+              }
+              .fg-icon {
+                background-color: $gray;
+                border-color: $gray;
+              }
+            }
+            &.vlm-list-item-ep {
+              margin-left: 0;
+              border-left: 10px solid $gray;
+              .list-item-icon-col {
+                padding-left: 22px;
+              }
+              .ep-icon {
+                background-color: $gray;
+                border-color: $gray;
+              }
+              .list-item-section {
+                &:first-child {
+                  display: flex;
+                  color: $white;
+                  min-width: 34px;
+                }
+              }
+            }
+            &.vlm-list-item-lkg {
+              margin-left: 0;
+              border-left: 10px solid $gray;
+              .list-item-icon-col {
+                padding-left: 22px;
+              }
+              .lkg-icon {
+                background-color: $gray;
+                border-color: $gray;
+              }
+              .list-item-section {
+                &:first-child {
+                  display: flex;
+                  color: $white;
+                  min-width: 34px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .vlm-list-view {
+      flex: 1;
+      .vlm-list {
+        @extend .flex;
+        flex-direction: column;
+        .vlm-list-item {
+          @include border-shadow();
+          min-height: 90px;
+          height: 90px;
+          background-color: $tlv-gray;
+          @extend .flex;
+          border: 1px solid $tlv-light-gray;
+          margin-bottom: 0px;
+          cursor: pointer;
+          .list-item-icon-col {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+          }
+          .list-item-section {
+            padding: 10px;
+            .children-count {
+              @extend .body-1;
+              line-height: 20px;
+              color: $gray;
+              padding-left: 5px;
+              .count-value {
+                padding: 0 5px;
+              }
+            }
+            .additional-data {
+              padding-left: 50px;
+              .additional-data-name {
+                @extend .body-1-medium;
+              }
+            }
+            .additional-data-col-border {
+              border-left: 1px solid $tlv-light-gray;
+              min-height: 100%;
+              height: 100%;
+            }
+          }
+          .list-item-additional-data-col {
+            @extend .body-1;
+            @extend .flex;
+            align-items: center;
+            flex: 0.8;
+          }
+          .arrow-icon {
+            align-self: center;
+          }
+          .vlm-item-info {
+            flex: 1;
+          }
+          .vlm-list-item-title {
+            @extend .flex;
+            .item-name {
+              @extend .heading-5-medium;
+              flex: 0 1 auto;
+              margin-bottom: 4px;
+            }
+          }
+          .vlm-list-item-description {
+            @extend .body-1;
+            overflow: hidden;
+            max-height: 38px;
+          }
+          &.vlm-list-item-la {
+            margin-top: 10px;
+            border-left: 10px solid $dark-blue;
+            .la-icon {
+              @include create-circle($circle-icon-size,$dark-blue,'LA');
+              color: $white;
+            }
+            .list-item-section {
+
+              &:first-child {
+                display: flex;
+                color: $dark-blue;
+                min-width: 34px;
+              }
+            }
+            .list-item-arrow-col {
+              flex: 0.01;
+              margin-left: 14px;
+            }
+            .list-item-icon-col {
+              padding-left: 14px;
+              padding-right: 30px;
+              align-items: center;
+            }
+
+          }
+          &.vlm-list-item-fg {
+            border-left: 10px solid $blue;
+            margin-left: 20px;
+            margin-top: 10px;
+            .fg-icon {
+              @include create-circle($circle-icon-size,$blue,'FG');
+              color: $white;
+            }
+            .list-item-section {
+              &:first-child {
+                display: flex;
+                color: $blue;
+                min-width: 34px;
+
+              }
+            }
+            .list-item-arrow-col {
+              flex: 0.01;
+              margin-left: 26px;
+            }
+            .list-item-icon-col {
+              padding-left: 22px;
+              padding-right: 30px;
+              align-items: center;
+            }
+          }
+          &.vlm-list-item-ep {
+            margin-left: 40px;
+            margin-top: 10px;
+            border-left: 10px solid $light-blue;
+            cursor: default;
+            .ep-icon {
+              @include create-circle($circle-icon-size,$light-blue,'EP');
+              color: $white;
+            }
+            .list-item-icon-col {
+              padding-left: 72px;
+              padding-right: 30px;
+              align-items: center;
+            }
+            .list-item-section {
+              &:first-child {
+                display: none;
+              }
+            }
+            .list-item-additional-data-col {
+              margin-right: 20px;
+            }
+          }
+          &.vlm-list-item-lkg {
+            margin-top: 10px;
+            margin-left: 40px;
+            border-left: 10px solid $light-blue;
+            cursor: default;
+            .lkg-icon {
+              @include create-circle($circle-icon-size,$light-blue,'KG');
+              color: $white;
+            }
+            .list-item-icon-col {
+              padding-left: 72px;
+              padding-right: 30px;
+              align-items: center;
+            }
+            .list-item-section {
+              &:first-child {
+                display: none;
+              }
+
+            }
+            .list-item-additional-data-col {
+              margin-right: 20px;
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+}