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         }
 168
 169         .software-product-landing-view-top-block-col-upl {
 170           @extend .flex;
 171           height: 215px;
 172           text-align: center;
 173           flex-direction: column;
 174           justify-content: center;
 175           border: 2px dashed $light-gray;
 176           margin-bottom: 20px;
 177           @extend .body-1;
 178           align-items: center;
 179           .upload-btn {
 180             padding: 15px 55px;
 181
 182           }
 183           .drag-text {
 184             color: $blue;
 185             @extend .body-1-semibold;
 186           }
 187           .or-text {
 188             margin-top: 10px;
 189             margin-bottom: 10px;
 190           }
 191         }
 192       }
 193     }
 194   }
 195 }
 196
 197 .vsp-details-page {
 198   .vsp-general-tab {
 199     .validation-form-content {
 200       margin: 0;
 201     }
 202     .validation-buttons {
 203       margin: 43px 0;
 204       padding: 0 52px;
 205     }
 206     .validation-form-content {
 207       .vsp-general-tab-inline-section {
 208         display: flex;
 209
 210         .vsp-general-tab-sub-section:not(:last-of-type) {
 211           margin-right: 40px;
 212         }
 213         .field-section {
 214           width: 440px;
 215         }
 216         .form-group textarea {
 217           height: 192px;
 218         }
 219         select optgroup[label] {
 220           color: $dark-blue;
 221         }
 222         option {
 223           color: $dark-gray;
 224         }
 225         .Select, .input-options {
 226           width: 440px;
 227         }
 228       }
 229     }
 230     .validation-buttons {
 231       position: fixed;
 232       display: block;
 233       bottom: 0;
 234       width: 66%;
 235     }
 236     .validation-input-wrapper {
 237       select.form-control {
 238         width: 100%;
 239       }
 240     }
 241   }
 242 }