[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/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
index df7cea4..0e0a72a 100644
--- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -35,29 +35,13 @@
.tab-content {
padding: 50px;
}
- .entitlement-pools-form-row {
-
- display: flex;
- justify-content: space-between;
- & > * {
- flex: 0 1 47%;
- }
- .validation-input-wrapper {
- .form-group {
- textarea {
- height: 184px;
- }
- .entitlement-pools-form-row-threshold-value {
- margin-top: 23px;
- margin-left: 10px;
- width: 189px;
- }
- .dropdown-multi-select .Select {
- z-index: 1080;
- }
- }
- }
- }
+ .threshold-section {
+ display: flex;
+ justify-content: space-between;
+ .validation-input-wrapper {
+ flex: 0 0 46%;
+ }
+ }
}
.validation-buttons {
padding: 20px 50px;
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index f66a01c..71e7cee 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -28,21 +28,6 @@
padding: 0;
}
.feature-group-form {
- .button-tab {
- @extend .body-1-medium;
- color: $dark-gray;
- padding: 6px;
- border: 0;
- background-color: $white;
- box-shadow: none;
- &:first-child {
- margin-right: 28px;
- }
- &.active, &:hover {
- color: $text-black;
- border-bottom: 2px solid $blue;
- }
- }
.no-items-msg {
margin-top: 55px;
color: $dark-gray;
diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
index a7afd01..7a7b876 100644
--- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
@@ -37,21 +37,6 @@
padding: 0;
}
.license-agreement-form {
- .button-tab{
- @extend .body-1-medium;
- color: $dark-gray;
- padding: 6px;
- border: 0;
- background-color: $white;
- box-shadow: none;
- &:first-child {
- margin-right: 28px;
- }
- &.active, &:hover {
- color: $text-black;
- border-bottom: 2px solid $blue;
- }
- }
.no-items-msg {
margin-top: 55px;
color: $dark-gray;
@@ -70,21 +55,6 @@
}
}
}
- .license-agreement-form-row {
- display: flex;
- justify-content: space-between;
- .license-agreement-form-col {
- flex: 0 1 45%;
- }
- .validation-input-wrapper {
- flex: 0 1 45%;
- .form-group {
- textarea {
- height: 100px;
- }
- }
- }
- }
.validation-buttons {
padding: 20px 50px;
}
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index 19b4792..5ea84e9 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -30,22 +30,6 @@
width: 400px;
color: $black;
}
- .license-key-groups-form-row {
- display: flex;
- justify-content: space-between;
- .options-input-form-row {
- width: 370px;
- }
- .validation-input-wrapper {
- flex: 0 1 45%;
- .form-group {
- textarea {
- height: 100px;
- }
-
- }
- }
- }
}
.validation-buttons {
padding: 20px 50px;
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;
+ }
+ }
+ }
+
+ }
+ }
+ }
+
+}
diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
index 6020866..6c56d11 100644
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -1,164 +1,24 @@
$transitionLength: 0.6s;
.catalog-view {
- background-color: $background-gray;
- height: 100%;
- overflow: hidden;
- height: 100%;
- .catalog-header {
- padding-top: 20px;
- margin: 0 48px 0 20px;
- border-bottom: 1px solid $light-gray;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- .catalog-header-title {
- @extend .heading-2;
- margin: 0 0 10px 0;
- }
- .expandable-input-wrapper {
- margin: 0 0 10px 0;
- }
- }
- .catalog-list {
- max-height: 100%;
- overflow: auto;
- display: flex;
- flex-wrap: wrap;
- padding: 40px 10px 0 10px;
- &:after {
- content: ' ';
- display:block;
- width: 100%;
- height: 85px;
- }
- .tile {
- background-color: $white;
- margin: 10px;
- width: 214px;
- height: 210px;
- display: flex;
- flex-direction: column;
-
- }
- .create-catalog-item {
- border: 2px dashed $light-gray;
- background-color: transparent;
- &:hover {
- .plus-section {
- display: none;
- }
- .primary-btn {
- display: inherit;
- }
- }
- justify-content: center;
- .plus-section {
- align-self: center;
- display: flex;
- flex-direction: column;
- .plus-icon-button {
- align-self: center;
- background-size: 23px;
- width: 23px;
- height: 23px;
- margin-bottom: 4px;
- }
- }
- .primary-btn {
- display: none;
- width: 176px;
- &.new-license-model {
- margin-bottom: 18px;
- }
- &:hover {
- background-color: $background-alice-blue;
- }
- }
- }
- .catalog-tile {
- cursor: pointer;
- border: 1px solid $tlv-light-gray;
- &:hover {
- @include box-shadow(3px 3px 5px 0 rgba(24,24,25,.04));
- }
- &:active {
- border: 1px solid $light-blue;
- }
- .catalog-tile-type {
- padding-top: 7px;
- border-radius: 50%;
- width: 40px;
- height: 40px;
- background: white;
- border: 4px solid #F2F2F2;
- position: relative;
- top: -12px;
- left: -7px;
- &:before {
- @extend .body-1;
- color: $light-blue;
- }
- &.license-model-type {
- padding-left: 13px;
- &:before {
- content: "L"
- }
- }
- &.software-product-type {
- padding-left: 8px;
- &:before {
- content: "SP"
- }
- }
- }
- .catalog-tile-icon {
- text-align: center;
- flex-basis: 60%;
- justify-content: center;
- background-size: 60px 60px;
- background-repeat: no-repeat;
- background-position: center;
- display: flex;
- .icon {
- align-self: center;
- height: 65px;
- width: 65px;
- background-repeat: no-repeat;
- margin-bottom: 27px;
- &.license-model-type-icon {
- background-image: url('../images/onboarding/vendor-license-model.svg');
- }
- &.software-product-type-icon {
- background-image: url('../images/onboarding/vendor-software-product.svg');
- }
- }
- }
- .catalog-tile-content {
- border-top: 1px solid $background-gray;
- flex-basis: 30%;
- padding: 8px;
- display: flex;
- justify-content: space-between;
- .catalog-tile-item-details {
- overflow: hidden;
- }
- .catalog-tile-item-name {
- @extend .body-1-medium;
- @include ellipsis();
- width: 150px;
- color: $dark-gray
- }
- .catalog-tile-item-version {
- @extend .body-1;
- color: $gray;
- }
- .catalog-tile-check-in-status {
- width: 25px;
- height: 19px;
- align-self: center;
- }
- }
- }
- }
+ background-color: $background-gray;
+ overflow: hidden;
+ height: 100%;
+ @import "onboardingCatalog/onboardHeader";
+ @import "onboardingCatalog/catalogHeader";
+ @import "onboardingCatalog/vendorPageHeader";
+ @import "onboardingCatalog/catalogList";
+ .catalog-wrapper {
+ height: 100%;
+ overflow: auto;
+ .tab-separator {
+ content: '';
+ height: 25px;
+ border-right: 1px solid $dark-gray;
+ }
+ .catalog-list {
+ overflow: hidden;
+ height: auto;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index 657bb54..3706897 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -1,29 +1,169 @@
-.software-product-attachments {
- @extend .body-1;
- width: 100%;
- height: 100%;
- display: flex;
- .software-product-attachments-tree {
+.vsp-attachments-view {
+ position: relative;
+ #attachments-tabs {
+ .nav-tabs {
+ background-color: $tlv-gray;
+ box-shadow: none;
+ border-bottom: 1px solid $light-gray;
+ & > li {
+ & > a {
+ font-size: 24px;
+ font-weight: lighter;
+ padding-left: 0;
+ padding-right: 0;
+ margin-right: 40px;
+ };
+ &.active > a {color: $blue;};
+ }
+ }
+ }
+ .attachments-view-controllers {
+ position: absolute;
+ right: 40px;
+ top: 15px;
+ display: flex;
+ .icon-label {
+ color: $dark-gray;
+ }
+
+ .go-to-overview-icon {
+ .icon-label {
+ color: $blue;
+ }
+ &.disabled {
+ .icon-label {
+ color: $gray;
+ }
+ }
+ }
+
+ .icon-component {
+ margin-right: 30px;
+
+ }
+
+ input[type="file"] {
+ visibility: hidden;
+ width: 1px;
+ padding: 0;
+ margin-left: -1px;
+ }
+ }
+}
+
+.vsp-attachments-heat-validation {
+ @extend .body-1;
+ display: flex;
+ .svg-icon.exclamation-triangle-line {
+ fill: $orange;
+ width: 15px;
+ height: 15px;
+ &.large {
+ width: 20px;
+ height: 20px;
+ }
+ }
+ .validation-tree-section {
display: flex;
- border-right: 1px solid $light-gray;
- margin: 0px;
- padding: 5px 3px 10px 3px;
+ width: 400px;
+ justify-content: space-between;
+ }
+ .vsp-attachments-heat-validation-tree {
+ @extend .flex-column;
+ margin: 0;
overflow: auto;
height: 100%;
-
+ .attachments-tree-header {
+ display: flex;
+ justify-content: space-between;
+ height: 55px;
+ align-items: center;
+ &.header-selected {
+ background: $tlv-gray;
+ }
+ .header-icon {
+ top: -3px;
+ position: relative;
+ margin-left: 20px;
+ }
+ .tree-header-title-text {
+ @extend .heading-4-medium;
+ padding-left: 32px;
+ cursor: pointer;
+ &.tree-header-title-selected{
+ color: $blue;
+ }
+ }
+ .tree-header-title {
+ display: flex;
+ }
+ }
+ .counters {
+ display: flex;
+ justify-content: space-between;
+ z-index: 1;
+ padding-right: 20px;
+ .counter {
+ display: flex;
+ &:first-child {
+ margin-right: 20px;
+ }
+ &:only-child {
+ margin-right: 0;
+ }
+ .svg-icon-wrapper {
+ margin-right: 5px;
+ }
+ .counter-icon {
+ margin-right: 5px;
+ }
+ .error-text, .warning-text {
+ @extend .body-3;
+ &.large {
+ @extend .heading-4-medium;
+ }
+ }
+ }
+ }
.tree-wrapper {
flex: 1 1;
position: relative;
padding-bottom: 10px;
+ @-moz-document url-prefix() {
+ .tree-block-inside {
+ top: 0;
+ position: relative;
+ }
+ }
.tree-block-inside {
- padding-left: 17px;
- padding-top: 8px;
- padding-bottom: 1px;
+ padding-left: 20px;
.tree-node-row {
cursor: default;
white-space: nowrap;
+ display: flex;
+ justify-content: space-between;
+ height: 40px;
+ align-items: center;
+ .svg-icon.chevron-down, .svg-icon.chevron-up {
+ height: 10px;
+ width: 10px;
+ }
+
+ &:after {
+ border-top: 1px solid $tlv-gray;
+ height: 40px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ content: ' ';
+ }
+ @-moz-document url-prefix() {
+ &:after {
+ top: 0;
+ }
+ }
&.tree-node-selected::before {
position: absolute;
left: 0;
@@ -31,123 +171,67 @@
height: 20px;
display: inline-block;
content: ' ';
- background-color: $light-gray;
+ background-color: $tlv-gray;
+ color: $blue;
}
- &.tree-node-clicked::before {
- position: absolute;
- left: 4px;
- right: 4px;
- height: 20px;
- display: inline-block;
- content: ' ';
- font-weight: bold;
- background-color: $white;
+ &.tree-node-clicked {
+ color: $blue;
+ &:after {
+ background: $tlv-gray;
+ height: 40px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ content: ' ';
+ }
}
-
+ .tree-node-name {
+ cursor: pointer;
+ }
+ .name-section {
+ z-index: 1;
+ flex: 1;
+ @include ellipsis(auto);
+ }
.tree-node-expander {
position: relative;
display: inline-block;
cursor: pointer;
- .fa {
- position: absolute;
- left: -7px;
- top: -11px;
- @include transition(transform 0.3s);
- }
- &.tree-node-expander-collapsed .fa {
- @include transform-rotate(-90);
- }
}
-
.tree-node-icon {
margin: 0 7px;
- color: $text-black;
- opacity: .5;
- .tree-node-validation-error::after {
- content: "!";
- font-weight: bold;
- position: absolute;
- color: $red;
- font-size: large;
- left: -7px;
- bottom: -5px;
- }
- }
-
- .error-status {
- color: $red;
- &.error-status-selected {
- font-weight: bold;
- }
- &.error-status-hovered {
- font-weight: bold;
- background-color: $blue;
- }
- }
-
- .tree-element-text {
- @extend %noselect;
- position: relative;
- padding-right: 5px;
- &.error-status-selected {
- font-weight: bold;
- }
}
}
-
}
}
}
- .software-product-attachments-separator {
- border: 1px solid $tlv-light-gray;
+ .vsp-attachments-heat-validation-separator {
+ border-left: 1px solid $tlv-light-gray;
height: 100%;
width: 5px;
cursor: e-resize;
}
- .software-product-attachments-error-list {
- text-align: center;
- margin-top: 12px;
- display: flex;
- align-content: flex-start;
- flex-direction: column;
- padding-left: 70px;
- padding-right: 50px;
+ .message-board-section {
+ @extend .flex-column;
+ padding-left: 25px;
+ padding-top: 10px;
+ padding-right: 60px;
overflow: auto;
margin-bottom: 70px;
.error-item {
- &.selected {
- background-color: $light-gray;
- }
- &.clicked {
- color: $blue;
- }
- &.shifted {
- margin-top: 20px;
- }
- text-align: left;
- .error-item-file-name {
- font-weight: bold;
- }
+ display: flex;
+ margin: 10px 0;
.error-item-file-type {
+ margin-left: 15px;
+ }
+ .error-file-name {
+ @extend .body-1-medium;
margin-right: 5px;
- &.strong {
- font-weight: bold;
- }
- &.ERROR {
- color: $red;
- }
- &.WARNING {
- color: $yellow;
- }
}
}
- .error-item:hover {
- cursor: default;
- background-color: $tlv-hover;
- }
}
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
new file mode 100644
index 0000000..164e3bc
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss
@@ -0,0 +1,3 @@
+.section-title.software-product-compute-number-of-vms{
+ text-transform: initial;
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
index 4ff2d2c..67d76f5 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
@@ -3,6 +3,9 @@
.one-line-textarea {
height: 30px;
}
+ .multi-line-textarea > textarea {
+ height: 113px;
+ }
}
.additional-validation-form {
margin-top: 50px;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
index 6097f3e..e14ab02 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
@@ -1,10 +1,5 @@
.vsp-components-network {
.network-data {
- .network-data-title {
- @extend .body-2-medium;
- padding-bottom: 20px;
- padding-left: 15px;
- }
.single-col {
.validation-input-wrapper {
label {
@@ -27,7 +22,14 @@
padding-right: 50px;
padding-top: 20px;
height: 500px;
- overflow-y: auto;
+ .grid-section {
+ padding-bottom: 15px;
+ .section-title {
+ @extend .heading-5;
+ padding-bottom: 10px;
+ padding-left: 0px;
+ }
+ }
.part-title {
@extend .heading-5;
padding-bottom: 10px;
@@ -36,11 +38,44 @@
.part-title-small {
@extend .heading-3;
padding-bottom: 10px;
- padding-left: 14px;
+ padding-left: 0px;
}
.network-radio label {
font-size: 15px;
}
+
+ .packets-bytes-gen {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ .top-row {
+ display: flex;
+ .part-title-small {
+ padding-left: 0px;
+ &.packets {
+ flex: 0 0 52%;
+ }
+ &.bytes {
+ flex: 0 0 48%;
+ }
+ }
+ }
+ .bottom-row {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ flex: 1;
+ .inputs-wrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ flex: 1;
+ .validation-input-wrapper {
+ flex: 0 0 22%;
+ }
+ }
+ }
+ }
}
}
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
new file mode 100644
index 0000000..a661319
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
@@ -0,0 +1,8 @@
+.edit-process-modal {
+ .vsp-process-dropzone-view .grid-section {
+ padding-bottom: 30px !important;
+ }
+ .component-process-description > textarea {
+ height: 113px;
+ }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
new file mode 100644
index 0000000..01a50dd
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
@@ -0,0 +1,25 @@
+.software-product-dependencies {
+ .software-product-dependencies-title {
+ @extend .heading-1;
+ @extend .text-uppercase !optional;
+ margin-bottom: 20px;
+ color: $blue;
+ }
+ .select-action-table-controllers {
+ justify-content: flex-end;
+ cursor: pointer;
+ color: $blue;
+ padding-right: 33px;
+ margin-bottom: 3px;
+ &:hover {
+ color: $dark-blue;
+ }
+ }
+ .select-action-table-view {
+ min-width: 770px;
+ }
+ .select-action-table-header {
+ @extend .body-1-medium;
+ color: $text-black;
+ }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index e40bb38..e75b110 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -10,18 +10,40 @@
@extend .body-1-medium;
}
}
+
+
.software-product-view {
display: flex;
height:100%;
.description {
@extend .body-1;
- overflow: hidden;
+ // overflow: hidden;
padding-right: 20px;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
+ // text-overflow: ellipsis;
+ // display: -webkit-box;
+ // -webkit-line-clamp: 2;
+ // -webkit-box-orient: vertical;
+
+ .missing-license {
+ display: flex;
+ align-items: baseline;
+ .svg-icon.exclamation-triangle-full {
+ fill: $orange;
+ }
+ .warning-text {
+ position: relative;
+ top: -2px;
+ }
+ .svg-icon-wrapper {
+ margin-right: 7px;
+ margin-left: 3px;
+ .svg-icon {
+ height: 17px;
+ width: 17px;
+ }
+ }
+ }
}
.name {
@extend .body-1-medium;
@@ -29,11 +51,6 @@
.software-product-landing-view-right-side {
@extend .flex;
overflow-y: hidden;
- .processes-page-title {
- padding-top: 38px;
- padding-left: 53px;
- padding-bottom: 20px;
- }
.list-editor-view {
.list-editor-view-title {
margin-bottom: 0;
@@ -53,22 +70,36 @@
.software-product-landing-view-top {
.details-container {
@extend .flex-column;
+
.single-detail-section {
+
@extend .flex-column;
&.title-section {
flex: 0.8;
@extend .heading-5-medium;
}
+ &.title-text {
+ margin-bottom: 24px;
+ }
+ .description {
+ @include multiline-ellipsis();
+ }
+ }
+ .title {
+ @extend .body-3;
+ color: $gray;
+ &.extra-large {
+ min-width: 130px;
+ }
+ }
+ .details-section {
+ display: flex;
}
.multiple-details-section {
- @extend .flex;
+ @extend .flex-column;
justify-content: space-between;
.detail-col {
- .title {
- &.extra-large {
- min-width: 130px;
- }
- }
+ padding-bottom: 10px;
}
}
}
@@ -107,8 +138,8 @@
.software-product-landing-view-top-block {
cursor: pointer;
border: 1px solid $light-gray;
- padding: 28px 28px;
- height: 250px;
+ padding: 20px 18px 0 18px;
+ height: 215px;
display: flex;
justify-content: space-between;
background-color: $white;
@@ -141,6 +172,7 @@
flex-direction: column;
justify-content: center;
border: 2px dashed $light-gray;
+ margin-bottom: 20px;
@extend .body-1;
align-items: center;
.upload-btn {
@@ -171,21 +203,10 @@
margin: 43px 0;
padding: 0 52px;
}
- .section-title {
- padding: 50px 0 30px 0;
- &.general {
- padding-top: 0;
- }
- }
.validation-form-content {
.vsp-general-tab-inline-section {
display: flex;
- &.coupling-items {
- justify-content: flex-start;
- .validation-input-wrapper:not(:last-child) {
- margin-right: 40px;
- }
- }
+
.vsp-general-tab-sub-section:not(:last-of-type) {
margin-right: 40px;
}
@@ -205,16 +226,6 @@
width: 440px;
}
}
-
- .vsp-general-tab-section {
- &.licenses {
- >.vsp-general-tab-inline-section {
- .validation-input-wrapper:first-child {
- margin-right: 40px;
- }
- }
- }
- }
}
.validation-buttons {
position: fixed;
@@ -223,7 +234,9 @@
width: 66%;
}
.validation-input-wrapper {
- flex: none;
+ select.form-control {
+ width: 100%;
+ }
}
}
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss
deleted file mode 100644
index 780f348..0000000
--- a/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.vsp-networks {
- .wrapper {
- display: flex;
- height: 100%;
- .left-side{
- height:100%
- }
- .right-side {
- width:100%;
- .network-data {
- padding-left: 60px;
- padding-right: 60px;
- padding-top: 18px;
- .network-data-title {
- @extend .body-2-medium;
- padding-bottom: 20px;
- padding-left: 15px;
- }
- }
-
- }
- }
-}
-
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
index 167dad9..4956616 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
@@ -51,12 +51,15 @@
opacity: 0.5;
}
}
+ .grid-section {
+ .section-title {
+ padding-bottom: 0px;
+ }
+ }
}
.validation-input-wrapper {
- .form-group {
- .vsp-process-description {
- height: 200px;
- }
+ .form-group.vsp-process-description > textarea {
+ height: 113px;
}
}
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index 731ab89..04cb3c2 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,4 +1,13 @@
.vsp-components-load-balancing {
+ .svg-icon-wrapper {
+ position: relative;
+ top: -3px;
+ .svg-icon.chevron-up, .svg-icon.chevron-down {
+ width: 10px;
+ height: 10px;
+ }
+ }
+
.halb-data {
.load-balancing-page-title {
@extend .section-title;
@@ -14,22 +23,15 @@
}
.title {
@extend .body-1-medium;
- cursor: pointer;
margin-bottom: 8px;
- .fa {
+ cursor: pointer;
+ .svg-icon {
@include transition(transform 0.3s);
margin-right: 5px;
- font-size: $icon-font-size;
position: relative;
- top: -1px;
+ top: 4px;
}
}
- .row {
- padding-left: 24px;
- }
- .col-md-9 {
- padding-left: 8px;
- }
.add-padding {
padding-bottom: 20px;
}
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
index aad628a..d194c67 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
@@ -11,18 +11,13 @@
}
.component-questionnaire-validation-form {
-
- .section-sub-title {
- @extend .heading-5;
- padding-bottom: 10px;
- }
.section-field {
textarea {
height: 80px;
}
}
- .rows-section {
+ .rows-section, .grid-items {
.row-flex-components {
display: flex;
}
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
new file mode 100644
index 0000000..59e9836
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -0,0 +1,316 @@
+@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;
+}
+
+.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 {
+ padding-bottom: 20px;
+ margin-bottom: 20px;
+ 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;
+
+ .Select-value-label {
+ @include ellipsis(85%);
+ }
+
+ .validation-input-wrapper {
+ flex-basis: 48%;
+ }
+
+ .control-label {
+ margin-bottom: 4px;
+ }
+
+ .form-group {
+ margin-bottom: 12px;
+ }
+ }
+ }
+
+ .modules-list-controllers {
+ text-align: right;
+ .btn-link {
+ &[disabled] {
+ color: $gray;
+ }
+ @extend .body-1;
+ color: $blue;
+ &:last-child {
+ padding-right: 0;
+ }
+ &:hover {
+ color: $dark-blue;
+ text-decoration: none;
+ }
+ }
+ }
+
+ .modules-list-item-controllers {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 7px;
+
+ .btn {
+ min-width: 0;
+ }
+
+ .svg-icon.trash-o {
+ fill: $dark-gray;
+ height: 18px;
+ width: 18px;
+ &:hover {
+ fill: $black;
+ }
+ }
+ .module-title-by-type {
+ @extend .heading-5-medium;
+ margin-right: 3px;
+ }
+ .modules-list-item-filename {
+ display: flex;
+ align-items: center;
+
+ .svg-icon.pencil {
+ height: 15px;
+ width: 15px;
+ margin-left: 3px;
+ opacity: 0;
+ }
+
+ .filename-text {
+ @extend .heading-5-medium;
+
+ }
+
+ .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-medium;
+ 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;
+ 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-medium;
+ background-color: $white;
+ }
+ &.is-focused {
+ background-color: $blue;
+ color: $white;
+ }
+ }
+ .add-or-delete-volumes {
+ .svg-icon-wrapper {
+ margin-right: 8px;
+ .svg-icon {
+ height: 10px;
+ width: 10px;
+ fill: $blue;
+ }
+ }
+ cursor: pointer;
+ color: $blue;
+ margin-bottom: 11px;
+ &:hover {
+ color: $dark-blue;
+ .svg-icon {
+ fill: $dark-blue;
+ }
+ }
+ }
+ &: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;
+ margin-top: 20px;
+
+ &.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-medium;
+ display: flex;
+ margin-bottom: 10px;
+ justify-content: space-between;
+ .image-icon.artifacts {
+ margin-right: 10px;
+ }
+
+ span {
+ display: flex;
+ }
+
+ .add-all-unassigned {
+ @extend .body-1;
+ margin-bottom: 0;
+ color: $blue;
+ cursor: pointer;
+ &:hover {
+ color: $dark-blue;
+ }
+ }
+ }
+ }
+ }
+
+ .unassigned-files {
+ margin-top: 30px;
+ border: 1px solid $light-gray;
+ width: 25%;
+ background-color: $white;
+ height: 250px;
+ width: 250px;
+
+ // Will work in chrome from chrome 56
+ position: sticky;
+ top: 10px;
+
+ .unassigned-files-title {
+ @extend .heading-5-medium;
+ 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;
+ }
+ .link {
+ color: $blue;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ .svg-icon.angle-right {
+ height: 10px;
+ width: 10px;
+ margin-left: 7px;
+ fill: $blue;
+ }
+ &:hover {
+ color: $dark-blue;
+ .svg-icon.angle-right {
+ fill: $dark-blue;
+ }
+ }
+ }
+ }
+
+ .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;
+ }
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
new file mode 100644
index 0000000..d29a95d
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
@@ -0,0 +1,33 @@
+.catalog-header {
+ margin: 34px 0 29px 50px;
+ display: flex;
+ flex-direction: row;
+ .expandable-input-top {
+ margin-right: 60px;
+ }
+ &.workspace-header {
+ @extend .heading-1;
+ color: $blue;
+ }
+ .catalog-header-tabs {
+ display: flex;
+ flex-direction: row;
+ .tab-separator {
+ position: relative;
+ top: 13px;
+ }
+ .catalog-header-tab {
+ @extend .heading-1;
+ cursor: pointer;
+ padding: 0 15px 0 15px;
+ display: flex;
+ align-items: center;
+ &.active {
+ color: $blue;
+ }
+ &:first-child {
+ padding-left: 0;
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
new file mode 100644
index 0000000..071268c
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
@@ -0,0 +1,31 @@
+.catalog-list {
+ height: 100%;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ padding: 0 10px 0 42px;
+ .catalog-title {
+ @extend .heading-1;
+ color: $blue;
+ margin:0 0 12px 18px;
+ }
+
+ .catalog-items {
+ display: flex;
+ flex-wrap: wrap;
+ @import "tile";
+ @import "createItemTile";
+ @import "catalogTile";
+ @import "vendorTile";
+ @import "vlmTile";
+ &:after {
+ content: " ";
+ height: 250px;
+ display: block;
+ width: 100%;
+ }
+ }
+
+ // Bottom spacing - cross browser solution
+
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
new file mode 100644
index 0000000..5ce8e12
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -0,0 +1,139 @@
+.catalog-tile {
+ &:hover {
+ box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+ border: 1px solid $light-gray;
+ }
+ .catalog-tile-top {
+ position: relative;
+ flex: 1;
+ display: flex;
+ padding-top: 29px;
+ padding-left: 10px;
+ align-items: flex-start;
+ flex-direction: column;
+ .catalog-tile-content {
+ margin-top: auto;
+ width: 180px;
+ }
+
+
+ .catalog-tile-type {
+ display: block;
+ margin-top: -25px;
+ font-size: $heading-font-5;
+ &.license-model-type {
+ color: $purple;
+ }
+ &.software-product-type {
+ color: $blue;
+ }
+ }
+ .catalog-tile-entity-details {
+ margin-top:23px;
+ .catalog-tile-version-info{
+ display: flex;
+ justify-content: space-between;
+
+ .catalog-tile-item-version {
+ @extend .body-2;
+ line-height: 6px;
+ }
+ }
+ .catalog-tile-vendor-name {
+ @extend .body-3-medium;
+ color: $gray;
+ line-height: 12px;
+ @include ellipsis(auto,inline-block,178px);
+ }
+
+ }
+ .catalog-tile-item-name {
+ @extend .heading-5-medium;
+ color: $black;
+ @include ellipsis(auto,inline-block,175px);
+ }
+ }
+ .catalog-tile-icon {
+
+ width: 58px;
+ height: 58px;
+ text-align: center;
+ justify-content: center;
+ display: flex;
+
+ .icon {
+ align-self: center;
+ height: 58px;
+ width: 58px;
+ margin-left: 122px;
+ background-repeat: no-repeat;
+ .svg-icon {
+ &.vendor {
+ fill: $dark-gray;
+ margin-top: 22px;
+ width: 53px;
+ height: 47px;
+ &:hover {
+ fill: $dark-gray;
+ }
+ }
+ &.vsp {
+ fill: $light-blue;
+ margin-top: 18px;
+ margin-left: 3px;
+ width: 60px;
+ height: 40px;
+ }
+ &.vlm {
+ fill: $purple;
+ margin-top: 18px;
+ width: 45px;
+ height: 53px;
+ }
+
+ }
+ }
+ }
+ .catalog-tile-content {
+ border-top: 1px solid $background-gray;
+ padding-top: 5px;
+ display: flex;
+ justify-content: space-between;
+ margin-top:2px;
+ padding-bottom: 3px;
+ @extend .body-2-medium;
+ .svg-icon.plus {
+ height: 9px;
+ width: 9px;
+ fill: $blue;
+ }
+ .catalog-tile-item-details {
+ overflow: hidden;
+ }
+
+ .catalog-tile-add-new-vsp {
+ color: $blue;
+ margin-left:40px;
+ }
+ .catalog-tile-locking-user-name {
+ @extend .body-2;
+ @include ellipsis(auto,inline-block,180px);
+ }
+ .catalog-tile-check-in-status {
+ .svg-icon-wrapper {
+ .svg-icon {
+ &.locked {
+ margin-left: 7px;
+ width: 11px;
+ fill: $gray;
+ }
+ &.unlocked {
+ margin-left: 7px;
+ width: 11px;
+ fill: $gray;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
new file mode 100644
index 0000000..b9f83fc
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -0,0 +1,71 @@
+.create-catalog-item-wrapper {
+ width: 204px;
+ height: 200px;
+ display: flex;
+ flex-direction: column;
+ margin: 9px;
+
+ .tile.create-catalog-item {
+ margin: 9px 0 9px 0;
+ display: flex;
+ background-color: $white;
+ &:first-child{margin-top: 0;}
+ &:last-child{margin-bottom: 0;}
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ &.disabled {
+ color: $gray;
+ .create-item-plus-icon {
+ fill: $gray;
+ }
+ }
+ &:hover {
+ box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+
+ border: 1px solid $light-gray;
+ }
+ &:only-child {
+ text-align: center;
+ flex-direction: column;
+ justify-content: center;
+ .create-item-plus-icon {
+ margin: 0 0 15px 0;
+ }
+ .create-item-text {
+ @extend .heading-4-medium;
+ }
+ }
+ .create-item-plus-icon{
+ width: 19px;
+ height: 19px;
+ margin: -5px 12px 0 0;
+ .svg-icon.plus {
+ height: 19px;
+ width: 19px;
+ }
+ }
+ &.vlm-type {
+ .create-item-text {
+ color: $purple;
+ }
+
+ .create-item-plus-icon {
+ fill: $purple;
+ }
+ }
+ &.vsp-type {
+ .create-item-text {
+ color: $blue;
+ }
+
+ .create-item-plus-icon {
+ fill: $blue;
+ }
+ }
+ .create-item-text {
+ width: 140px;
+ @extend .heading-5-medium;
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
new file mode 100644
index 0000000..da4c017
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -0,0 +1,31 @@
+.onboard-header {
+ padding-top: 8px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ background-color: $tlv-light-gray;
+ margin-bottom: 2px;
+ @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
+ .expandable-input-top {
+ margin-right: 60px;
+ margin-left: auto;
+ }
+ .onboard-header-tabs {
+ display: flex;
+ flex-direction: row;
+ margin-left: 60px;
+ .onboard-header-tab {
+ @extend .body-1-medium;
+ margin-right: 40px;
+ cursor: pointer;
+ display: flex;
+ padding-bottom: 5px;
+ align-items: flex-end;
+ &.active {
+ color: $blue;
+ padding-bottom: 2px;
+ border-bottom: 3px solid $blue;
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
new file mode 100644
index 0000000..217098f
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
@@ -0,0 +1,14 @@
+.tile {
+ background-color: $white;
+ margin: 9px;
+ width: 204px;
+ height: 200px;
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ border: 1px solid $tlv-light-gray;
+ @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+ &:active {
+ border: 1px solid $light-blue;
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
new file mode 100644
index 0000000..f1af28a
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
@@ -0,0 +1,21 @@
+.vendor-page-header {
+ display: flex;
+ align-items: center;
+ margin-top: 34px;
+ margin-left: 9px;
+ margin-bottom: 29px;
+ .vendor-name {
+ @extend .heading-1;
+ color: $blue;
+ margin-left: 20px;
+ text-transform: uppercase;
+ }
+ .svg-icon-wrapper {
+ padding: 5px 18px 5px 0;
+ .svg-icon.back {
+ height: 25px;
+ width: 25px;
+ fill: $blue;
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
new file mode 100644
index 0000000..79a64f8
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -0,0 +1,88 @@
+@mixin flipOverlayDirection($itemsInRow) {
+ &:nth-child(#{$itemsInRow}n){
+ .vsp-overlay-wrapper {
+ right: 74%;
+ left: inherit;
+ .vsp-overlay-arrow {
+ border-right-color: transparent;
+ border-left-color: $tlv-light-gray;
+ border-right-width: 2px;
+ border-left-width: 6px;
+ left: 100%;
+ &:after {
+ border-left-color: $white;
+ border-right-color: transparent;
+ left: -11px;
+ }
+ }
+ }
+ }
+}
+
+
+.catalog-tile.vendor-type {
+ position: relative;
+ .catalog-tile-top {
+ .catalog-tile-item-name {
+ margin-top:21px;
+ }
+ .catalog-tile-vsp-count {
+ @extend .body-3-medium;
+ margin-top: 8px;
+ margin-left: 54px;
+ margin-bottom: 9px;
+ color: $dark-gray;
+ border: 1px solid $dark-gray;
+ padding: 0 15px 0 15px;
+ border-radius: 15px;
+
+ &.clickable {
+ &:hover {
+ background-color: #eceff3;
+ color: $dark-gray ;
+ }
+ }
+ &.active {
+ background-color: $white;
+ color: $dark-gray ;
+ }
+ }
+ }
+
+ .catalog-tile-content {
+ flex-basis: auto;
+ max-height: 31px;
+ height: 31px;
+ text-align: center;
+ color: $blue;
+ display: block;
+ background-color: $white;
+ margin-bottom: 7px;
+ padding-bottom: 0px;
+ .create-new-vsp-button {
+ margin-top: 1px;
+ }
+ &:hover {
+ color: $dark-blue;
+ .svg-icon.plus {
+ fill: $dark-blue;
+ }
+ }
+ &.disabled {
+ cursor: default;
+ }
+ }
+ @media (min-width: 1900px){
+ @include flipOverlayDirection($itemsInRow: 8);
+ }
+ @media (min-width: 1586px) and (max-width: 1899px){
+ @include flipOverlayDirection($itemsInRow: 7);
+ }
+ @media (min-width: 1368px) and (max-width: 1585px){
+ @include flipOverlayDirection($itemsInRow: 6);
+ }
+ @media (max-width: 1367px){
+ @include flipOverlayDirection($itemsInRow: 5);
+ }
+ @import "vspOverlay";
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
new file mode 100644
index 0000000..721a4f3
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
@@ -0,0 +1,8 @@
+.catalog-tile.license-model-type {
+ .catalog-tile-top {
+ &:hover {
+ //background-color: $purple;
+ //color: $white;
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
new file mode 100644
index 0000000..8816ca5
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -0,0 +1,74 @@
+.vsp-overlay-wrapper{
+ display:flex;
+ align-items: center;
+ position:absolute;
+ left: 68%;
+ top: 14%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 100;
+ .vsp-overlay-list {
+ padding: 0 20px;
+ }
+ .vsp-overlay-arrow {
+ border-style: solid;
+ position: relative;
+ bottom: -18px;
+ border-width: 6px;
+ border-left-width: 2px;
+ border-color: transparent;
+ border-right-color: $light-gray;
+ &:after {
+ position: absolute;
+ border-style: solid;
+ bottom: -10px;
+ left: -9px;
+ border-width: 10px;
+ border-color: transparent;
+ border-right-color: $white;
+ content:' ';
+ }
+ }
+ .vsp-overlay {
+ pointer-events: all;
+ width: 205px;
+ cursor: default;
+ background-color: $white;
+ @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
+ border-radius: 6px;
+ padding: 0 0 10px 0;
+ display: flex;
+ flex-direction: column;
+ margin: 10px 0 10px 0;
+ .vsp-overlay-title {
+ @extend .heading-5-medium;
+ margin-bottom: 15px;
+ padding: 10px 20px 10px 20px;
+ background: $highlight-gray;
+ color: $text-black;
+ text-transform: uppercase;
+ border-radius: 6px 6px 0 0;
+ }
+ .vsp-overlay-detail{
+ @extend .body-2;
+ &:hover {
+ color: $blue;
+ }
+ text-transform: uppercase;
+ @include ellipsis(auto, block);
+ border-bottom: 1px solid $tlv-light-gray;
+ cursor: pointer;
+ padding: 5px 0 5px 0;
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ .vsp-overlay-see-more{
+ color: $blue;
+ cursor: pointer;
+ margin-top: 12px;
+ align-self:center;
+ }
+
+ }
+}