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

   1 @mixin flipOverlayDirection($itemsInRow) {
   2     &:nth-child(#{$itemsInRow}n) {
   3         .vsp-overlay-wrapper {
   4             right: 74%;
   5             left: inherit;
   6             .vsp-overlay-arrow {
   7                 border-right-color: transparent;
   8                 border-left-color: $tlv-light-gray;
   9                 border-right-width: 2px;
  10                 border-left-width: 6px;
  11                 left: 100%;
  12                 &:after {
  13                     border-left-color: $white;
  14                     border-right-color: transparent;
  15                     left: -11px;
  16                 }
  17             }
  18         }
  19     }
  20 }
  21
  22 .catalog-tile.vendor-type {
  23     position: relative;
  24     .catalog-tile-top {
  25         .catalog-tile-item-name {
  26             margin-top: 21px;
  27             line-height: inherit;
  28             &:first-letter {
  29                 text-transform: capitalize;
  30             }
  31         }
  32         .catalog-tile-vsp-count {
  33             @extend .body-3-semibold;
  34             margin-top: 8px;
  35             margin-left: 54px;
  36             margin-bottom: 9px;
  37             color: $dark-gray;
  38             border: 1px solid $dark-gray;
  39             padding: 0 15px 0 15px;
  40             border-radius: 15px;
  41
  42             &.clickable {
  43                 &:hover {
  44                     background-color: #eceff3;
  45                     color: $dark-gray;
  46                 }
  47             }
  48             &.active {
  49                 background-color: $white;
  50                 color: $dark-gray;
  51             }
  52         }
  53     }
  54
  55     .catalog-tile-content {
  56         flex-basis: auto;
  57         max-height: 31px;
  58         height: 31px;
  59         text-align: center;
  60         color: $blue;
  61         display: block;
  62         background-color: $white;
  63         margin-bottom: 7px;
  64         padding-bottom: 0px;
  65         .create-new-vsp-button {
  66             margin-top: 1px;
  67         }
  68         &:hover {
  69             color: $dark-blue;
  70             .svg-icon.plus {
  71                 fill: $dark-blue;
  72             }
  73         }
  74         &.disabled {
  75             cursor: default;
  76         }
  77     }
  78     @media (min-width: 1900px) {
  79         @include flipOverlayDirection($itemsInRow: 8);
  80     }
  81     @media (min-width: 1586px) and (max-width: 1899px) {
  82         @include flipOverlayDirection($itemsInRow: 7);
  83     }
  84     @media (min-width: 1368px) and (max-width: 1585px) {
  85         @include flipOverlayDirection($itemsInRow: 6);
  86     }
  87     @media (max-width: 1367px) {
  88         @include flipOverlayDirection($itemsInRow: 5);
  89     }
  90     @import 'vspOverlay';
  91 }