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