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

   1 .catalog-tile {
   2                 &:hover {
   3                 box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
   4                 border: 1px solid $light-gray;
   5         }
   6   .catalog-tile-top {
   7         position: relative;
   8         flex: 1;
   9         display: flex;
  10         padding-top: 29px;
  11         padding-left: 10px;
  12         align-items: flex-start;
  13         flex-direction: column;
  14                 .catalog-tile-content {
  15                         margin-top: auto;
  16                         width: 180px;
  17                 }
  18
  19
  20         .catalog-tile-type {
  21                 display: block;
  22     margin-top: -25px;
  23                 font-size: $heading-font-5;
  24                 &.license-model-type {
  25                         color: $purple;
  26                 }
  27                 &.software-product-type {
  28                         color: $blue;
  29                 }
  30         }
  31         .catalog-tile-entity-details {
  32                 margin-top:23px;
  33                 .catalog-tile-version-info{
  34                         display: flex;
  35                         justify-content: space-between;
  36
  37                         .catalog-tile-item-version {
  38                                 @extend .body-2;
  39                                 line-height: 6px;
  40                         }
  41                 }
  42                 .catalog-tile-vendor-name {
  43                         @extend .body-3-medium;
  44                         color: $gray;
  45                         line-height: 12px;
  46                         @include ellipsis(auto,inline-block,178px);
  47                 }
  48
  49   }
  50                 .catalog-tile-item-name {
  51                         @extend .heading-5-medium;
  52                         color: $black;
  53                         @include ellipsis(auto,inline-block,175px);
  54                 }
  55         }
  56   .catalog-tile-icon {
  57
  58         width: 58px;
  59         height: 58px;
  60         text-align: center;
  61         justify-content: center;
  62         display: flex;
  63
  64         .icon {
  65           align-self: center;
  66           height: 58px;
  67           width: 58px;
  68                 margin-left: 122px;
  69           background-repeat: no-repeat;
  70           .svg-icon {
  71                 &.vendor {
  72                   fill: $dark-gray;
  73                   margin-top: 22px;
  74                   width: 53px;
  75                   height: 47px;
  76                   &:hover {
  77                         fill: $dark-gray;
  78                   }
  79                 }
  80                 &.vsp {
  81                   fill: $light-blue;
  82                   margin-top: 18px;
  83                   margin-left: 3px;
  84                   width: 60px;
  85                   height: 40px;
  86                 }
  87                 &.vlm {
  88                   fill: $purple;
  89                   margin-top: 18px;
  90                   width: 45px;
  91                   height: 53px;
  92                 }
  93
  94           }
  95         }
  96   }
  97   .catalog-tile-content {
  98         border-top: 1px solid $background-gray;
  99         padding-top: 5px;
 100         display: flex;
 101         justify-content: space-between;
 102         margin-top:2px;
 103         padding-bottom: 3px;
 104         @extend .body-2-medium;
 105         .svg-icon.plus {
 106           height: 9px;
 107           width: 9px;
 108           fill: $blue;
 109         }
 110         .catalog-tile-item-details {
 111           overflow: hidden;
 112         }
 113
 114         .catalog-tile-add-new-vsp {
 115           color: $blue;
 116           margin-left:40px;
 117         }
 118         .catalog-tile-locking-user-name {
 119           @extend .body-2;
 120           @include ellipsis(auto,inline-block,180px);
 121         }
 122                 .catalog-tile-check-in-status {
 123                         .svg-icon-wrapper {
 124                                 .svg-icon {
 125                                         &.locked {
 126                                         margin-left: 7px;
 127                                         width: 11px;
 128                                         fill: $gray;
 129                                         }
 130                                         &.unlocked {
 131                                         margin-left: 7px;
 132                                         width: 11px;
 133                                         fill: $gray;
 134                                         }
 135                                 }
 136                         }
 137                 }
 138   }
 139 }