summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/modules/onboardingCatalog
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/modules/onboardingCatalog')
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss2
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss62
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss68
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss277
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss138
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss60
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss24
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss38
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss168
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss145
11 files changed, 490 insertions, 500 deletions
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
index e3fc6a9143..1b6459a429 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
@@ -13,7 +13,7 @@
height: 34px;
color: $blue;
font-weight: bolder;
- text-transform: uppercase;
+ text-transform: uppercase;
}
.sdc-accordion {
padding-left: 18px;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
index 0a234a5a96..429d6cc3d3 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
@@ -1,33 +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: 8px;
- }
- .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;
- }
- }
- }
+ 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: 8px;
+ }
+ .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
index 11a739d004..c632beb382 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
@@ -1,39 +1,37 @@
.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;
- }
+ 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%;
- }
- .venodor-tile-btn {
- border: 1px solid $light-gray;
- color: $black;
- line-height: 20px;
- &:hover {
- background-color: $light-gray;
- }
- }
- }
-
- // Bottom spacing - cross browser solution
+ .catalog-items {
+ display: flex;
+ flex-wrap: wrap;
+ @import 'tile';
+ @import 'createItemTile';
+ @import 'catalogTile';
+ @import 'vendorTile';
+ &:after {
+ content: ' ';
+ height: 250px;
+ display: block;
+ width: 100%;
+ }
+ .venodor-tile-btn {
+ border: 1px solid $light-gray;
+ color: $black;
+ line-height: 20px;
+ &:hover {
+ background-color: $light-gray;
+ }
+ }
+ }
+ // 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
index 612ec495cd..a2c7997266 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -1,147 +1,144 @@
.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: 20px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- flex: 0.8;
- .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;
- flex: 0.4;
- align-self: baseline;
- color: $gray;
- line-height: 10px;
- &:first-letter {
- text-transform: capitalize;
+ &:hover {
+ box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+ border: 1px solid $light-gray;
}
- @include ellipsis(auto, inline-block, 178px);
- }
-
- }
- .catalog-tile-item-name {
- @extend .heading-5-semibold;
- color: $black;
- @include ellipsis(auto, inline-block, 175px);
- line-height: inherit;
- &:first-letter {
- text-transform: capitalize;
- }
- }
- }
- .catalog-tile-icon {
+ .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;
+ }
- width: 58px;
- height: 58px;
- text-align: center;
- justify-content: center;
- display: flex;
+ .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: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ flex: 0.8;
+ .catalog-tile-version-info {
+ display: flex;
+ justify-content: space-between;
- .icon {
- align-self: center;
- height: 58px;
- width: 58px;
- margin-left: 122px;
- background-repeat: no-repeat;
- .svg-icon {
- &.__vendor {
- fill: $dark-gray;
- &:hover {
- fill: $dark-gray;
- }
- margin-top: 22px;
- }
- &.__vsp {
- fill: $light-blue;
- }
- margin-top: 18px;
- margin-left: 3px;
- &.__vlm {
- margin-top: 18px;
- fill: $purple;
- }
- }
- }
- }
- .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-semibold;
- .svg-icon {
- &.__plus {
- width: 20px;
- height: 20px;
- fill: $blue;
- }
- }
- .catalog-tile-item-details {
- overflow: hidden;
- }
+ .catalog-tile-item-version {
+ @extend .body-2;
+ line-height: 6px;
+ }
+ }
+ .catalog-tile-vendor-name {
+ @extend .body-3;
+ flex: 0.4;
+ align-self: baseline;
+ color: $gray;
+ line-height: 10px;
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ @include ellipsis(auto, inline-block, 178px);
+ }
+ }
+ .catalog-tile-item-name {
+ @extend .heading-5-semibold;
+ color: $black;
+ @include ellipsis(auto, inline-block, 175px);
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ }
+ }
+ .catalog-tile-icon {
+ width: 58px;
+ height: 58px;
+ text-align: center;
+ justify-content: center;
+ display: flex;
- .catalog-tile-add-new-vsp {
- color: $blue;
- .svg-icon {
- &.__plus {
- width: 20px;
- height: 20px;
+ .icon {
+ align-self: center;
+ height: 58px;
+ width: 58px;
+ margin-left: 122px;
+ background-repeat: no-repeat;
+ .svg-icon {
+ &.__vendor {
+ fill: $dark-gray;
+ &:hover {
+ fill: $dark-gray;
+ }
+ margin-top: 22px;
+ }
+ &.__vsp {
+ fill: $light-blue;
+ }
+ margin-top: 18px;
+ margin-left: 3px;
+ &.__vlm {
+ margin-top: 18px;
+ fill: $purple;
+ }
+ }
+ }
+ }
+ .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-semibold;
+ .svg-icon {
+ &.__plus {
+ width: 20px;
+ height: 20px;
+ fill: $blue;
+ }
+ }
+ .catalog-tile-item-details {
+ overflow: hidden;
+ }
- }
- }
- margin-left: 40px;
- }
- .catalog-tile-locking-user-name {
- @extend .body-2;
- @include ellipsis(auto, inline-block, 180px);
- }
- .catalog-tile-check-in-status {
- .svg-icon {
- &.__locked {
- fill: $gray;
- }
- &.__unlocked {
- fill: $gray;
- }
- }
- }
- }
+ .catalog-tile-add-new-vsp {
+ color: $blue;
+ .svg-icon {
+ &.__plus {
+ width: 20px;
+ height: 20px;
+ }
+ }
+ margin-left: 40px;
+ }
+ .catalog-tile-locking-user-name {
+ @extend .body-2;
+ @include ellipsis(auto, inline-block, 180px);
+ }
+ .catalog-tile-check-in-status {
+ .svg-icon {
+ &.__locked {
+ fill: $gray;
+ }
+ &.__unlocked {
+ fill: $gray;
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index d17dcdd685..9838e65b10 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -1,73 +1,77 @@
.create-catalog-item-wrapper {
- width: 204px;
- height: 200px;
- display: flex;
- flex-direction: column;
- margin: 9px;
+ 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);
+ .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-semibold;
- }
- }
- .create-item-plus-icon{
- margin: -5px 12px 0 0;
- height: 19px;
- width: 19px;
- .svg-icon {
- &.__plus {
- width: 19px;
- height: 19px;
- }
- }
- }
- &.vlm-type {
- .create-item-text {
- color: $purple;
- }
+ 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-semibold;
+ }
+ }
+ .create-item-plus-icon {
+ margin: -5px 12px 0 0;
+ height: 19px;
+ width: 19px;
+ .svg-icon {
+ &.__plus {
+ width: 19px;
+ height: 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: $purple;
+ }
+ }
+ &.vsp-type {
+ .create-item-text {
+ color: $blue;
+ }
- .create-item-plus-icon {
- fill: $blue;
- }
- }
- .create-item-text {
- width: 140px;
- @extend .heading-5-semibold;
- }
- }
+ .create-item-plus-icon {
+ fill: $blue;
+ }
+ }
+ .create-item-text {
+ width: 140px;
+ @extend .heading-5-semibold;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
index f97641cbe3..5f8446b9ff 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -1,32 +1,32 @@
.onboard-header {
- padding-top: 8px;
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- background-color: $tlv-light-gray;
- margin-bottom: 2px;
- padding-left: 60px;
- padding-right: 40px;
- @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
- .expandable-input-top {
- margin-right: 20px;
- margin-left: auto;
- }
- .onboard-header-tabs {
- display: flex;
- flex-direction: row;
- .onboard-header-tab {
- @extend .body-1-semibold;
- 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;
- }
- }
- }
+ padding-top: 8px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ background-color: $tlv-light-gray;
+ margin-bottom: 2px;
+ padding-left: 60px;
+ padding-right: 40px;
+ @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
+ .expandable-input-top {
+ margin-right: 20px;
+ margin-left: auto;
+ }
+ .onboard-header-tabs {
+ display: flex;
+ flex-direction: row;
+ .onboard-header-tab {
+ @extend .body-1-semibold;
+ 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
index 217098fb97..fa513fb44d 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
@@ -1,14 +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;
- }
+ 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
index f1af28a0a0..a741764727 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
@@ -1,21 +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;
- }
- }
+ 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
index d490fd6e1c..63fb236ec3 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -1,91 +1,91 @@
@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;
- }
- }
- }
- }
+ &: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;
- line-height: inherit;
- &:first-letter {
- text-transform: capitalize;
- }
- }
- .catalog-tile-vsp-count {
- @extend .body-3-semibold;
- 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;
+ position: relative;
+ .catalog-tile-top {
+ .catalog-tile-item-name {
+ margin-top: 21px;
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
+ }
+ .catalog-tile-vsp-count {
+ @extend .body-3-semibold;
+ 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;
- }
- }
- }
+ &.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";
+ .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
deleted file mode 100644
index 721a4f3f22..0000000000
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.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
index e0b72bf9ff..e2617b8b04 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -1,74 +1,73 @@
-.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-semibold;
- 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: none;
- @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;
- }
-
- }
+.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-semibold;
+ 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: none;
+ @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;
+ }
+ }
}