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

   1 .upload-modal-body-content {
   2   padding-left: 30px;
   3   padding-right: 30px;
   4   padding-bottom: 10px;
   5   .title {
   6     @extend .body-1-semibold;
   7   }
   8   .file-name {
   9     padding-left: 5px;
  10     @extend .body-1-semibold;
  11   }
  12 }
  13
  14
  15 .software-product-view {
  16   display: flex;
  17   height:100%;
  18
  19   .description {
  20     @extend .body-1;
  21     // overflow: hidden;
  22     padding-right: 20px;
  23     // text-overflow: ellipsis;
  24     // display: -webkit-box;
  25     // -webkit-line-clamp: 2;
  26     // -webkit-box-orient: vertical;
  27
  28     .missing-license {
  29       display: flex;
  30       align-items: baseline;
  31       .svg-icon{
  32         margin-right: 7px;
  33         margin-left: 3px;
  34         &.__exclamationTriangleFull {
  35           fill: $orange;
  36             width: 17px;
  37             height: 17px;
  38         }
  39       }
  40       .warning-text {
  41         position: relative;
  42         top: -2px;
  43       }
  44     }
  45   }
  46   .name {
  47     @extend .body-1-semibold;
  48   }
  49   .software-product-landing-view-right-side {
  50     @extend .flex;
  51     overflow-y: hidden;
  52     .list-editor-view {
  53       .list-editor-view-title {
  54         margin-bottom: 0;
  55       }
  56     }
  57   }
  58   .software-product-landing-view {
  59     transition: border .2s;
  60     padding-bottom: 50px;
  61
  62
  63     .list-editor-view {
  64       padding-top: 50px;
  65       padding-left: 0;
  66       padding-right: 0;
  67     }
  68     .software-product-landing-view-top {
  69       .details-container {
  70         @extend .flex-column;
  71
  72         .single-detail-section {
  73
  74           @extend  .flex-column;
  75           &.title-section {
  76             flex: 0.8;
  77             @extend .heading-5-semibold;
  78           }
  79           &.title-text {
  80             margin-bottom: 24px;
  81           }
  82           .description {
  83               @include multiline-ellipsis();
  84           }
  85         }
  86         .title {
  87           @extend .body-3;
  88           color: $gray;
  89           &.extra-large {
  90             min-width: 130px;
  91           }
  92         }
  93         .details-section {
  94           display: flex;
  95         }
  96         .multiple-details-section {
  97           @extend .flex-column;
  98           justify-content: space-between;
  99           .detail-col {
 100             padding-bottom: 10px;
 101           }
 102         }
 103       }
 104       .row {
 105         margin: 0;
 106         display: flex;
 107         .details-panel {
 108           flex: 1;
 109           margin-right: 50px;
 110           &:last-child {
 111             margin-right: 0;
 112           }
 113         }
 114         .col-md-6 {
 115           padding: 0;
 116
 117           overflow-wrap: break-word;
 118           &:first-child {
 119             padding-right: 25px;
 120           }
 121           &:last-child {
 122             padding-left: 25px;
 123           }
 124         }
 125         .title {
 126           @extend .body-1-semibold;
 127         }
 128         .software-product-landing-view-heading-title {
 129           @extend .section-title;
 130           color: $dark-gray;
 131           padding-bottom: 20px;
 132           &:first-child {
 133             padding-bottom: 20px;
 134           }
 135         }
 136         .software-product-landing-view-top-block {
 137           cursor: pointer;
 138           border: 1px solid $light-gray;
 139           padding: 20px 18px 0 18px;
 140           height: 215px;
 141           display: flex;
 142           justify-content: space-between;
 143           background-color: $white;
 144           &:hover {
 145             @extend .box-hover;
 146           }
 147           .col-md-6 {
 148             @extend .body-1;
 149           }
 150           .software-product-landing-view-top-block-col {
 151             @extend .body-1;
 152             flex: 0.8;
 153             display: flex;
 154             justify-content: space-between;
 155             flex-direction: column;
 156             .description {
 157               overflow: hidden;
 158               padding-right: 20px;
 159             }
 160             .attachment-details {
 161               padding-bottom: 10px;
 162             }
 163             .attachment-details-count {
 164               color: $light-blue;
 165             }
 166           }
 167           .software-product-landing-view-top-block-col-upl {
 168             @extend .flex;
 169             text-align: center;
 170             flex-direction: column;
 171             justify-content: center;
 172             border: 2px dashed $light-gray;
 173             margin-bottom: 20px;
 174             @extend .body-1;
 175             align-items: center;
 176             .upload-btn {
 177               padding: 15px 55px;
 178
 179             }
 180             .drag-text {
 181               color: $blue;
 182               @extend .body-1-semibold;
 183             }
 184             .or-text {
 185               margin-top: 10px;
 186               margin-bottom: 10px;
 187             }
 188           }
 189         }
 190       }
 191     }
 192   }
 193 }
 194
 195 .vsp-details-page {
 196   .vsp-general-tab {
 197     .validation-form-content {
 198       margin: 0;
 199     }
 200     .validation-buttons {
 201       margin: 43px 0;
 202       padding: 0 52px;
 203     }
 204     .validation-form-content {
 205       .vsp-general-tab-inline-section {
 206         display: flex;
 207
 208         .vsp-general-tab-sub-section:not(:last-of-type) {
 209           margin-right: 40px;
 210         }
 211         .field-section {
 212           width: 440px;
 213         }
 214         .form-group textarea {
 215           height: 192px;
 216         }
 217         select optgroup[label] {
 218           color: $dark-blue;
 219         }
 220         option {
 221           color: $dark-gray;
 222         }
 223         .Select, .input-options {
 224           width: 440px;
 225         }
 226       }
 227     }
 228     .validation-buttons {
 229       position: fixed;
 230       display: block;
 231       bottom: 0;
 232       width: 66%;
 233     }
 234     .validation-input-wrapper {
 235       select.form-control {
 236         width: 100%;
 237       }
 238     }
 239   }
 240 }