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
  23 .catalog-tile.vendor-type {
  24   position: relative;
  25   .catalog-tile-top {
  26                 .catalog-tile-item-name {
  27                         margin-top:21px;
  28                 }
  29                 .catalog-tile-vsp-count {
  30                         @extend .body-3-medium;
  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 }