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