[SDC-29] Amdocs OnBoard 1707 initial commit.
Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
new file mode 100644
index 0000000..4ec7c8d
--- /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;
+ }
+ }
+ }
+
+ }
+ }
+ }
+
+}