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         }
  29         .catalog-tile-vsp-count {
  30           @extend .body-3-semibold;
  31           margin-top: 8px;
  32           margin-left: 54px;
  33           margin-bottom: 9px;
  34           color: $dark-gray;
  35           border: 1px solid $dark-gray;
  36           padding: 0 15px 0 15px;
  37           border-radius: 15px;
  38
  39           &.clickable {
  40                 &:hover {
  41                   background-color: #eceff3;
  42                   color: $dark-gray;
  43                 }
  44           }
  45           &.active {
  46                 background-color: $white;
  47                 color: $dark-gray;
  48           }
  49         }
  50   }
  51
  52   .catalog-tile-content {
  53         flex-basis: auto;
  54         max-height: 31px;
  55         height: 31px;
  56         text-align: center;
  57         color: $blue;
  58         display: block;
  59         background-color: $white;
  60         margin-bottom: 7px;
  61         padding-bottom: 0px;
  62         .create-new-vsp-button {
  63           margin-top: 1px;
  64         }
  65         &:hover {
  66           color: $dark-blue;
  67           .svg-icon.plus {
  68                 fill: $dark-blue;
  69           }
  70         }
  71         &.disabled {
  72           cursor: default;
  73         }
  74   }
  75   @media (min-width: 1900px) {
  76         @include flipOverlayDirection($itemsInRow: 8);
  77   }
  78   @media (min-width: 1586px) and (max-width: 1899px) {
  79         @include flipOverlayDirection($itemsInRow: 7);
  80   }
  81   @media (min-width: 1368px) and (max-width: 1585px) {
  82         @include flipOverlayDirection($itemsInRow: 6);
  83   }
  84   @media (max-width: 1367px) {
  85         @include flipOverlayDirection($itemsInRow: 5);
  86   }
  87   @import "vspOverlay";
  88 }