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/_catalogTile.scss167
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss12
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss2
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss130
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss2
5 files changed, 165 insertions, 148 deletions
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 5ce8e12ec3..07f86aba2a 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -1,8 +1,8 @@
.catalog-tile {
- &:hover {
- box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
- border: 1px solid $light-gray;
- }
+ &: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;
@@ -11,48 +11,54 @@
padding-left: 10px;
align-items: flex-start;
flex-direction: column;
- .catalog-tile-content {
- margin-top: auto;
- width: 180px;
- }
-
+ .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;
- }
+ 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;
+ 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-medium;
- color: $gray;
- line-height: 12px;
- @include ellipsis(auto,inline-block,178px);
+ .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;
+ @include ellipsis(auto, inline-block, 178px);
+ }
- }
- .catalog-tile-item-name {
- @extend .heading-5-medium;
- color: $black;
- @include ellipsis(auto,inline-block,175px);
- }
}
+ .catalog-tile-item-name {
+ @extend .heading-5-semibold;
+ color: $black;
+ @include ellipsis(auto, inline-block, 175px);
+ line-height: inherit;
+ }
+ }
.catalog-tile-icon {
width: 58px;
@@ -65,32 +71,39 @@
align-self: center;
height: 58px;
width: 58px;
- margin-left: 122px;
+ margin-left: 122px;
background-repeat: no-repeat;
- .svg-icon {
+ .svg-icon-wrapper {
&.vendor {
- fill: $dark-gray;
- margin-top: 22px;
- width: 53px;
- height: 47px;
- &:hover {
+ .svg-icon {
fill: $dark-gray;
+ width: 53px;
+ height: 47px;
+ &:hover {
+ fill: $dark-gray;
+ }
}
+ margin-top: 22px;
+
}
&.vsp {
- fill: $light-blue;
+ .svg-icon {
+ fill: $light-blue;
+ width: 60px;
+ height: 40px;
+ }
margin-top: 18px;
margin-left: 3px;
- width: 60px;
- height: 40px;
}
&.vlm {
- fill: $purple;
margin-top: 18px;
- width: 45px;
- height: 53px;
- }
+ .svg-icon {
+ fill: $purple;
+ width: 45px;
+ height: 53px;
+ }
+ }
}
}
}
@@ -99,13 +112,17 @@
padding-top: 5px;
display: flex;
justify-content: space-between;
- margin-top:2px;
+ margin-top: 2px;
padding-bottom: 3px;
- @extend .body-2-medium;
- .svg-icon.plus {
- height: 9px;
- width: 9px;
- fill: $blue;
+ @extend .body-2-semibold;
+ .svg-icon-wrapper {
+ &.plus {
+ .svg-icon {
+ height: 9px;
+ width: 9px;
+ fill: $blue;
+ }
+ }
}
.catalog-tile-item-details {
overflow: hidden;
@@ -113,27 +130,27 @@
.catalog-tile-add-new-vsp {
color: $blue;
- margin-left:40px;
+ margin-left: 40px;
}
.catalog-tile-locking-user-name {
@extend .body-2;
- @include ellipsis(auto,inline-block,180px);
+ @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;
- }
- }
- }
+ .catalog-tile-check-in-status {
+ .svg-icon-wrapper {
+ &.locked {
+ .svg-icon {
+ width: 11px;
+ fill: $gray;
+ }
}
+ &.unlocked {
+ .svg-icon {
+ width: 11px;
+ fill: $gray;
+ }
+ }
+ }
+ }
}
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index b9f83fc452..aa3cf04c4f 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -22,7 +22,7 @@
}
&:hover {
box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
-
+
border: 1px solid $light-gray;
}
&:only-child {
@@ -33,7 +33,7 @@
margin: 0 0 15px 0;
}
.create-item-text {
- @extend .heading-4-medium;
+ @extend .heading-4-semibold;
}
}
.create-item-plus-icon{
@@ -42,14 +42,14 @@
margin: -5px 12px 0 0;
.svg-icon.plus {
height: 19px;
- width: 19px;
+ width: 19px;
}
}
&.vlm-type {
.create-item-text {
color: $purple;
}
-
+
.create-item-plus-icon {
fill: $purple;
}
@@ -58,14 +58,14 @@
.create-item-text {
color: $blue;
}
-
+
.create-item-plus-icon {
fill: $blue;
}
}
.create-item-text {
width: 140px;
- @extend .heading-5-medium;
+ @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 da4c017d39..32ebac98cf 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -15,7 +15,7 @@
flex-direction: row;
margin-left: 60px;
.onboard-header-tab {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
margin-right: 40px;
cursor: pointer;
display: flex;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index 79a64f84ee..5972bb2d67 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -1,87 +1,87 @@
@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;
- }
- .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-item-name {
+ margin-top: 21px;
+ line-height: inherit;
+ }
+ .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;
+ }
+ }
}
.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;
- }
+ 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){
+ @media (min-width: 1900px) {
@include flipOverlayDirection($itemsInRow: 8);
}
- @media (min-width: 1586px) and (max-width: 1899px){
+ @media (min-width: 1586px) and (max-width: 1899px) {
@include flipOverlayDirection($itemsInRow: 7);
}
- @media (min-width: 1368px) and (max-width: 1585px){
+ @media (min-width: 1368px) and (max-width: 1585px) {
@include flipOverlayDirection($itemsInRow: 6);
}
- @media (max-width: 1367px){
+ @media (max-width: 1367px) {
@include flipOverlayDirection($itemsInRow: 5);
}
@import "vspOverlay";
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
index 8816ca5df9..80ed7385e0 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -41,7 +41,7 @@
flex-direction: column;
margin: 10px 0 10px 0;
.vsp-overlay-title {
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
margin-bottom: 15px;
padding: 10px 20px 10px 20px;
background: $highlight-gray;