aboutsummaryrefslogtreecommitdiffstats
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/_catalogHeader.scss33
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss31
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss139
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss71
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss31
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss14
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss21
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss88
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss74
10 files changed, 510 insertions, 0 deletions
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 0000000000..d29a95d3d6
--- /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 0000000000..071268c50d
--- /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 0000000000..5ce8e12ec3
--- /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 0000000000..b9f83fc452
--- /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 0000000000..da4c017d39
--- /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 0000000000..217098fb97
--- /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 0000000000..f1af28a0a0
--- /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 0000000000..79a64f84ee
--- /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 0000000000..721a4f3f22
--- /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 0000000000..8816ca5df9
--- /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;
+ }
+
+ }
+}