diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules/onboardingCatalog')
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; + } + + } +} |