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