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-medium;
   7   }
   8   .file-name {
   9     padding-left: 5px;
  10     @extend .body-1-medium;
  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.exclamation-triangle-full {
  32         fill: $orange;
  33       }
  34       .warning-text {
  35         position: relative;
  36         top: -2px;
  37       }
  38       .svg-icon-wrapper {
  39         margin-right: 7px;
  40         margin-left: 3px;
  41         .svg-icon {
  42           height: 17px;
  43           width: 17px;
  44         }
  45       }
  46     }
  47   }
  48   .name {
  49     @extend .body-1-medium;
  50   }
  51   .software-product-landing-view-right-side {
  52     @extend .flex;
  53     overflow-y: hidden;
  54     .list-editor-view {
  55       .list-editor-view-title {
  56         margin-bottom: 0;
  57       }
  58     }
  59   }
  60   .software-product-landing-view {
  61     transition: border .2s;
  62     padding-bottom: 50px;
  63
  64
  65     .list-editor-view {
  66       padding-top: 50px;
  67       padding-left: 0;
  68       padding-right: 0;
  69     }
  70     .software-product-landing-view-top {
  71       .details-container {
  72         @extend .flex-column;
  73
  74         .single-detail-section {
  75
  76           @extend  .flex-column;
  77           &.title-section {
  78             flex: 0.8;
  79             @extend .heading-5-medium;
  80           }
  81           &.title-text {
  82             margin-bottom: 24px;
  83           }
  84           .description {
  85               @include multiline-ellipsis();
  86           }
  87         }
  88         .title {
  89           @extend .body-3;
  90           color: $gray;
  91           &.extra-large {
  92             min-width: 130px;
  93           }
  94         }
  95         .details-section {
  96           display: flex;
  97         }
  98         .multiple-details-section {
  99           @extend .flex-column;
 100           justify-content: space-between;
 101           .detail-col {
 102             padding-bottom: 10px;
 103           }
 104         }
 105       }
 106       .row {
 107         margin: 0;
 108         display: flex;
 109         .details-panel {
 110           flex: 1;
 111           margin-right: 50px;
 112           &:last-child {
 113             margin-right: 0;
 114           }
 115         }
 116         .col-md-6 {
 117           padding: 0;
 118
 119           overflow-wrap: break-word;
 120           &:first-child {
 121             padding-right: 25px;
 122           }
 123           &:last-child {
 124             padding-left: 25px;
 125           }
 126         }
 127         .title {
 128           @extend .body-1-medium;
 129         }
 130         .software-product-landing-view-heading-title {
 131           @extend .section-title;
 132           color: $dark-gray;
 133           padding-bottom: 20px;
 134           &:first-child {
 135             padding-bottom: 20px;
 136           }
 137         }
 138         .software-product-landing-view-top-block {
 139           cursor: pointer;
 140           border: 1px solid $light-gray;
 141           padding: 20px 18px 0 18px;
 142           height: 215px;
 143           display: flex;
 144           justify-content: space-between;
 145           background-color: $white;
 146           &:hover {
 147             @extend .box-hover;
 148           }
 149           .col-md-6 {
 150             @extend .body-1;
 151           }
 152           .software-product-landing-view-top-block-col {
 153             @extend .body-1;
 154             flex: 0.8;
 155             display: flex;
 156             justify-content: space-between;
 157             flex-direction: column;
 158             .description {
 159               overflow: hidden;
 160               padding-right: 20px;
 161             }
 162             .attachment-details {
 163               padding-bottom: 10px;
 164             }
 165             .attachment-details-count {
 166               color: $light-blue;
 167             }
 168           }
 169           .software-product-landing-view-top-block-col-upl {
 170             @extend .flex;
 171             text-align: center;
 172             flex-direction: column;
 173             justify-content: center;
 174             border: 2px dashed $light-gray;
 175             margin-bottom: 20px;
 176             @extend .body-1;
 177             align-items: center;
 178             .upload-btn {
 179               padding: 15px 55px;
 180
 181             }
 182             .drag-text {
 183               color: $blue;
 184               font-weight: bolder;
 185             }
 186             .or-text {
 187               margin-top: 10px;
 188               margin-bottom: 10px;
 189             }
 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 }