openecomp-ui/resources/scss/modules/_onboardingCatalog.scss

   1 $transitionLength: 0.6s;
   2
   3 .catalog-view {
   4   background-color: $background-gray;
   5   height: 100%;
   6   overflow: hidden;
   7   height: 100%;
   8   .catalog-header {
   9     padding-top: 20px;
  10     margin: 0 48px 0 20px;
  11     border-bottom: 1px solid $light-gray;
  12     display: flex;
  13     flex-direction: row;
  14     justify-content: space-between;
  15     .catalog-header-title {
  16       @extend .heading-2;
  17       margin: 0 0 10px 0;
  18     }
  19     .expandable-input-wrapper {
  20       margin: 0 0 10px 0;
  21     }
  22   }
  23   .catalog-list {
  24     max-height: 100%;
  25     overflow: auto;
  26     display: flex;
  27     flex-wrap: wrap;
  28     padding: 40px 10px 0 10px;
  29     &:after {
  30       content: ' ';
  31       display:block;
  32       width: 100%;
  33       height: 85px;
  34     }
  35     .tile {
  36       background-color: $white;
  37       margin: 10px;
  38       width: 214px;
  39       height: 210px;
  40       display: flex;
  41       flex-direction: column;
  42
  43     }
  44     .create-catalog-item {
  45       border: 2px dashed $light-gray;
  46       background-color: transparent;
  47       &:hover {
  48         .plus-section {
  49           display: none;
  50         }
  51         .primary-btn {
  52           display: inherit;
  53         }
  54       }
  55       justify-content: center;
  56       .plus-section {
  57         align-self: center;
  58         display: flex;
  59         flex-direction: column;
  60         .plus-icon-button {
  61           align-self: center;
  62           background-size: 23px;
  63           width: 23px;
  64           height: 23px;
  65           margin-bottom: 4px;
  66         }
  67       }
  68       .primary-btn {
  69         display: none;
  70         width: 176px;
  71         &.new-license-model {
  72           margin-bottom: 18px;
  73         }
  74         &:hover {
  75           background-color: $background-alice-blue;
  76         }
  77       }
  78     }
  79     .catalog-tile {
  80       cursor: pointer;
  81       border: 1px solid $tlv-light-gray;
  82       &:hover {
  83         @include box-shadow(3px 3px 5px 0 rgba(24,24,25,.04));
  84       }
  85       &:active {
  86         border: 1px solid $light-blue;
  87       }
  88       .catalog-tile-type {
  89         padding-top: 7px;
  90         border-radius: 50%;
  91         width: 40px;
  92         height: 40px;
  93         background: white;
  94         border: 4px solid #F2F2F2;
  95         position: relative;
  96         top: -12px;
  97         left: -7px;
  98         &:before {
  99           @extend .body-1;
 100           color: $light-blue;
 101         }
 102         &.license-model-type {
 103           padding-left: 13px;
 104           &:before {
 105             content: "L"
 106           }
 107         }
 108         &.software-product-type {
 109           padding-left: 8px;
 110           &:before {
 111             content: "SP"
 112           }
 113         }
 114       }
 115       .catalog-tile-icon {
 116         text-align: center;
 117         flex-basis: 60%;
 118         justify-content: center;
 119         background-size: 60px 60px;
 120         background-repeat: no-repeat;
 121         background-position: center;
 122         display: flex;
 123         .icon {
 124           align-self: center;
 125           height: 65px;
 126           width: 65px;
 127           background-repeat: no-repeat;
 128           margin-bottom: 27px;
 129           &.license-model-type-icon {
 130             background-image: url('../images/onboarding/vendor-license-model.svg');
 131           }
 132           &.software-product-type-icon {
 133             background-image: url('../images/onboarding/vendor-software-product.svg');
 134           }
 135         }
 136       }
 137       .catalog-tile-content {
 138         border-top: 1px solid $background-gray;
 139         flex-basis: 30%;
 140         padding: 8px;
 141         display: flex;
 142         justify-content: space-between;
 143         .catalog-tile-item-details {
 144           overflow: hidden;
 145         }
 146         .catalog-tile-item-name {
 147           @extend .body-1-medium;
 148           @include ellipsis();
 149           width: 150px;
 150           color: $dark-gray
 151         }
 152         .catalog-tile-item-version {
 153           @extend .body-1;
 154           color: $gray;
 155         }
 156         .catalog-tile-check-in-status {
 157           width: 25px;
 158           height: 19px;
 159           align-self: center;
 160         }
 161       }
 162     }
 163   }
 164 }