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

   1 .create-catalog-item-wrapper {
   2     width: 204px;
   3     height: 200px;
   4     display: flex;
   5     flex-direction: column;
   6     margin: 9px;
   7
   8     .tile.create-catalog-item {
   9         margin: 9px 0 9px 0;
  10         display: flex;
  11         background-color: $white;
  12         &:first-child {
  13             margin-top: 0;
  14         }
  15         &:last-child {
  16             margin-bottom: 0;
  17         }
  18         flex-direction: row;
  19         align-items: center;
  20         justify-content: center;
  21         &.disabled {
  22             color: $gray;
  23             .create-item-plus-icon {
  24                 fill: $gray;
  25             }
  26         }
  27         &:hover {
  28             box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
  29
  30             border: 1px solid $light-gray;
  31         }
  32         &:only-child {
  33             text-align: center;
  34             flex-direction: column;
  35             justify-content: center;
  36             .create-item-plus-icon {
  37                 margin: 0 0 15px 0;
  38             }
  39             .create-item-text {
  40                 @extend .heading-4-semibold;
  41             }
  42         }
  43         .create-item-plus-icon {
  44             margin: -5px 12px 0 0;
  45             height: 19px;
  46             width: 19px;
  47             .svg-icon {
  48                 &.__plus {
  49                     width: 19px;
  50                     height: 19px;
  51                 }
  52             }
  53         }
  54         &.vlm-type {
  55             .create-item-text {
  56                 color: $purple;
  57             }
  58
  59             .create-item-plus-icon {
  60                 fill: $purple;
  61             }
  62         }
  63         &.vsp-type {
  64             .create-item-text {
  65                 color: $blue;
  66             }
  67
  68             .create-item-plus-icon {
  69                 fill: $blue;
  70             }
  71         }
  72         .create-item-text {
  73             width: 140px;
  74             @extend .heading-5-semibold;
  75         }
  76     }
  77 }