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

   1 /*!
   2  * -
   3  *  ============LICENSE_START=======================================================
   4  *  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   5  *  Modifications Copyright (C) 2021 Nordix Foundation.
   6  *  ================================================================================
   7  *  Licensed under the Apache License, Version 2.0 (the "License");
   8  *  you may not use this file except in compliance with the License.
   9  *  You may obtain a copy of the License at
  10  *
  11  *       http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  *  Unless required by applicable law or agreed to in writing, software
  14  *  distributed under the License is distributed on an "AS IS" BASIS,
  15  *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  *  See the License for the specific language governing permissions and
  17  *  limitations under the License.
  18  *
  19  *  SPDX-License-Identifier: Apache-2.0
  20  *  ============LICENSE_END=========================================================
  21  */
  22
  23 .upload-modal-body-content {
  24     padding-left: 30px;
  25     padding-right: 30px;
  26     padding-bottom: 10px;
  27     .title {
  28         @extend .body-1-semibold;
  29     }
  30     .file-name {
  31         padding-left: 5px;
  32         @extend .body-1-semibold;
  33     }
  34 }
  35
  36 .software-product-view {
  37     display: flex;
  38     height: 100%;
  39
  40     .description {
  41         @extend .body-1;
  42         padding-right: 20px;
  43
  44         .missing-license {
  45             display: flex;
  46             align-items: baseline;
  47             .svg-icon {
  48                 margin-right: 7px;
  49                 margin-left: 3px;
  50                 &.__exclamationTriangleFull {
  51                     fill: $orange;
  52                     width: 17px;
  53                     height: 17px;
  54                 }
  55             }
  56             .warning-text {
  57                 position: relative;
  58                 top: -2px;
  59             }
  60         }
  61     }
  62     .name {
  63         @extend .body-1-semibold;
  64     }
  65     .software-product-landing-view-right-side {
  66         @extend .flex;
  67         overflow-y: hidden;
  68         .list-editor-view {
  69             .list-editor-view-title {
  70                 margin-bottom: 0;
  71             }
  72         }
  73     }
  74     .software-product-landing-view {
  75         padding-bottom: 50px;
  76
  77         .software-product-landing-view-top {
  78             .details-container {
  79                 @extend .flex-column;
  80
  81                 .single-detail-section {
  82                     @extend .flex-column;
  83                     &.title-section {
  84                         flex: 0.8;
  85                         @extend .heading-5-semibold;
  86                     }
  87                     &.title-text {
  88                         margin-bottom: 24px;
  89                     }
  90                     .description {
  91                         @include multiline-ellipsis();
  92                     }
  93                 }
  94                 .title {
  95                     @extend .body-3;
  96                     color: $gray;
  97                     &.extra-large {
  98                         min-width: 130px;
  99                     }
 100                 }
 101                 .details-section {
 102                     display: flex;
 103                 }
 104                 .multiple-details-section {
 105                     @extend .flex-column;
 106                     justify-content: space-between;
 107                     .detail-col {
 108                         padding-bottom: 10px;
 109                     }
 110                 }
 111             }
 112             .row {
 113                 margin: 0;
 114                 display: flex;
 115                 .details-panel {
 116                     flex: 1;
 117                     margin-right: 50px;
 118                     &:last-child {
 119                         margin-right: 0;
 120                     }
 121                     .software-product-landing-view-top-block-col-upl {
 122                         height: 225px;
 123                         width: initial;
 124                     }
 125                 }
 126                 .col-md-6 {
 127                     padding: 0;
 128
 129                     overflow-wrap: break-word;
 130                     &:first-child {
 131                         padding-right: 25px;
 132                     }
 133                     &:last-child {
 134                         padding-left: 25px;
 135                     }
 136                 }
 137                 .title {
 138                     @extend .body-1-semibold;
 139                 }
 140                 .software-product-landing-view-heading-title {
 141                     @extend .section-title;
 142                     color: $dark-gray;
 143                     padding-bottom: 20px;
 144                     &:first-child {
 145                         padding-bottom: 20px;
 146                     }
 147                 }
 148                 .software-product-landing-view-top-block {
 149                     &.clickable {
 150                         cursor: pointer;
 151                         &:hover {
 152                             @extend .box-hover;
 153                         }
 154                     }
 155                     border: 1px solid $light-gray;
 156                     padding: 20px 18px 0 18px;
 157                     min-height: 285px;
 158                     height: 100%;
 159                     display: flex;
 160                     justify-content: space-between;
 161                     background-color: $white;
 162
 163                     .col-md-6 {
 164                         @extend .body-1;
 165                     }
 166                     .software-product-landing-view-top-block-col {
 167                         @extend .body-1;
 168                         flex: 0.8;
 169                         display: flex;
 170                         justify-content: space-between;
 171                         flex-direction: column;
 172                         .description {
 173                             overflow: hidden;
 174                             padding-right: 20px;
 175                         }
 176                         .attachment-details {
 177                             padding-bottom: 10px;
 178                         }
 179                         .attachment-details-count {
 180                             color: $light-blue;
 181                         }
 182                     }
 183                 }
 184
 185                 .software-product-landing-view-top-block-col-upl {
 186                     @extend .flex;
 187                     height: 225px;
 188                     text-align: center;
 189                     flex-direction: column;
 190                     justify-content: center;
 191                     border: 2px dashed $light-gray;
 192                     margin-bottom: 20px;
 193                     @extend .body-1;
 194                     align-items: center;
 195                     .upload-btn {
 196                         padding: 15px 55px;
 197                     }
 198                     .drag-text {
 199                         color: $blue;
 200                         @extend .body-1-semibold;
 201                     }
 202                     .or-text {
 203                         margin-top: 10px;
 204                         margin-bottom: 10px;
 205                         color: $light-gray;
 206                     }
 207                     .upload {
 208                         width: 50%;
 209                         border: 0px !important;
 210                     }
 211                     .vnfRepo {
 212                         width: 50%;
 213                         cursor: pointer;
 214                         .searchRepo-text {
 215                             color: $blue;
 216                             @extend .body-1-semibold;
 217                             width: 72px;
 218                             line-height: 24px;
 219                             margin-left: auto;
 220                             margin-right: auto;
 221                         }
 222                         .svg-icon-wrapper {
 223                             .svg-icon.__search {
 224                                 width: 34px;
 225                                 height: 34px;
 226                                 margin-top: 10px;
 227                             }
 228                             &.__positive {
 229                                 fill: $blue;
 230                                 color: $blue;
 231                             }
 232                         }
 233                     }
 234                     .verticalLine {
 235                         height: 90%;
 236                         border-left: 1px solid $light-gray;
 237                     }
 238                 }
 239                 .showVnf {
 240                     flex-direction: row;
 241                 }
 242             }
 243         }
 244     }
 245     .licenceLabel {
 246         float: right;
 247         margin-left: 5px;
 248     }
 249 }
 250
 251 .vsp-details-page {
 252     .grid-section-general {
 253         padding-bottom: 30px;
 254     }
 255     .vsp-general-tab {
 256         .validation-form-content {
 257             margin: 0;
 258         }
 259         .validation-buttons {
 260             margin: 43px 0;
 261             padding: 0 52px;
 262         }
 263         .validation-form-content {
 264             .vsp-general-tab-inline-section {
 265                 display: flex;
 266
 267                 .vsp-general-tab-sub-section:not(:last-of-type) {
 268                     margin-right: 40px;
 269                 }
 270                 .field-section {
 271                     width: 440px;
 272                 }
 273                 .form-group textarea {
 274                     height: 192px;
 275                 }
 276                 select optgroup[label] {
 277                     color: $dark-blue;
 278                 }
 279                 option {
 280                     color: $dark-gray;
 281                 }
 282                 .Select,
 283                 .input-options {
 284                     width: 440px;
 285                 }
 286             }
 287         }
 288         .validation-buttons {
 289             position: fixed;
 290             display: block;
 291             bottom: 0;
 292             width: 66%;
 293         }
 294         .validation-input-wrapper {
 295             select.form-control {
 296                 width: 100%;
 297             }
 298         }
 299     }
 300 }