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