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