openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss

   1 .vsp-overlay-wrapper {
   2     display: flex;
   3     align-items: center;
   4     position: absolute;
   5     left: 68%;
   6     top: 14%;
   7     height: 100%;
   8     pointer-events: none;
   9     z-index: 100;
  10     .vsp-overlay-list {
  11         padding: 0 20px;
  12     }
  13     .vsp-overlay-arrow {
  14         border-style: solid;
  15         position: relative;
  16         bottom: -18px;
  17         border-width: 6px;
  18         border-left-width: 2px;
  19         border-color: transparent;
  20         border-right-color: $light-gray;
  21         &:after {
  22             position: absolute;
  23             border-style: solid;
  24             bottom: -10px;
  25             left: -9px;
  26             border-width: 10px;
  27             border-color: transparent;
  28             border-right-color: $white;
  29             content: ' ';
  30         }
  31     }
  32     .vsp-overlay {
  33         pointer-events: all;
  34         width: 205px;
  35         cursor: default;
  36         background-color: $white;
  37         @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
  38         border-radius: 6px;
  39         padding: 0 0 10px 0;
  40         display: flex;
  41         flex-direction: column;
  42         margin: 10px 0 10px 0;
  43         .vsp-overlay-title {
  44             @extend .heading-5-semibold;
  45             margin-bottom: 15px;
  46             padding: 10px 20px 10px 20px;
  47             background: $highlight-gray;
  48             color: $text-black;
  49             text-transform: uppercase;
  50             border-radius: 6px 6px 0 0;
  51         }
  52         .vsp-overlay-detail {
  53             @extend .body-2;
  54             &:hover {
  55                 color: $blue;
  56             }
  57             text-transform: none;
  58             @include ellipsis(auto, block);
  59             border-bottom: 1px solid $tlv-light-gray;
  60             cursor: pointer;
  61             padding: 5px 0 5px 0;
  62             &:last-child {
  63                 border-bottom: none;
  64             }
  65         }
  66         .vsp-overlay-see-more {
  67             color: $blue;
  68             cursor: pointer;
  69             margin-top: 12px;
  70             align-self: center;
  71         }
  72     }
  73 }