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