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

   1 .license-model-overview {
   2   .overview-top-section {
   3     .overview-title{
   4       @extend .heading-1;
   5       @extend .text-uppercase !optional;
   6       margin-bottom: 20px;
   7       color: $blue;
   8     }
   9     .license-model-overview-top {
  10       display: flex;
  11       justify-content: flex-start;
  12       flex-direction: row;
  13       padding-bottom: 10px;
  14       min-height: 155px;
  15       .separator {
  16         width: 1px;
  17         border-right: 1px solid $tlv-light-gray;
  18         margin-left: 20px;
  19       }
  20       .vendor-data-view {
  21         @extend .flex-column;
  22         background-color: $tlv-gray;
  23         padding: 20px 30px;
  24         border: 1px solid $tlv-light-gray;
  25         @include border-shadow();
  26         .vendor-title {
  27           margin-top:5px;
  28         }
  29         .vendor-name {
  30           @extend .heading-3-medium;
  31           text-transform: none;
  32           padding-bottom: 15px;
  33           border-bottom: 1px solid $tlv-light-gray;
  34         }
  35         .vendor-description {
  36           @extend .flex;
  37           @extend .body-1;
  38           justify-content: space-between;
  39           margin-top: 10px;
  40           overflow: hidden;
  41           border: 1px solid transparent;
  42           position: relative;
  43           left: -6px;
  44           width: 101%;
  45
  46           &:hover {
  47             border: 1px solid $tlv-light-gray;
  48             background-position: 99% 12%;
  49             background-size: 15px;
  50             padding-right: 20px;
  51             background-image: url($pencil-icon);
  52             background-repeat: no-repeat;
  53             cursor: pointer;
  54           }
  55           &.read-only {
  56             border: none;
  57           }
  58                                         .description-data {
  59                                                 @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
  60                                         }
  61         }
  62
  63         .vendor-description-readonly {
  64           @extend .flex;
  65           @extend .body-1;
  66           justify-content: space-between;
  67           margin-top: 10px;
  68           overflow: hidden;
  69           border: none;
  70           height: 49px;
  71           margin-bottom: 15px;
  72           padding: 6px;
  73           position: relative;
  74           left:-6px;
  75         }
  76
  77         .vendor-description-edit {
  78           @extend .flex;
  79           flex-direction: column;
  80           border: none;
  81           margin-top: 10px;
  82           position: relative;
  83           left: -6px;
  84           width: 101%;
  85           textarea {
  86             padding-left: 6px;
  87           }
  88           .buttons-row {
  89             @extend .flex;
  90             justify-content: flex-end;
  91             flex-direction: row;
  92             margin-top: -25px;
  93             .buttons-wrapper {
  94               @extend .flex;
  95               @extend .body-3;
  96               border: 1px solid $light-gray;
  97               width: 95px;
  98               height: 19px;
  99               background-color: $tlv-light-gray;
 100               border-radius: 2px;
 101               position: relative;
 102               flex: 0 1 auto;
 103               text-align: center;
 104               .description-button {
 105                 cursor: pointer;
 106                 flex: 1;
 107                 &:hover {
 108                   background-color: $white;
 109                 }
 110               }
 111               .description-save {
 112                 cursor: pointer;
 113                 flex: 1;
 114                 color:$blue;
 115                 &:hover {
 116                   background-color: $white;
 117                 }
 118               }
 119             }
 120           }
 121           .description-edit-textarea {
 122             height:67px;
 123             border: 1px solid $tlv-light-gray;
 124             resize: none;
 125             position: relative;
 126             left: -12px;
 127           }
 128         }
 129       }
 130       .summary-count-list {
 131         @extend .flex-column;
 132         flex: 0.6;
 133         margin-left: 20px;
 134         justify-content: space-between;
 135         border: 1px solid $tlv-light-gray;
 136         @include border-shadow();
 137         background-color: $tlv-gray;
 138         .summary-count-item {
 139           @extend .flex;
 140           @extend .heading-4-medium;
 141           padding-top: 5px;
 142           padding-left: 45px;
 143           padding-right: 45px;
 144           border-bottom: 1px solid $tlv-light-gray;
 145           &:last-child { border-bottom: none; }
 146           .item-count {
 147             flex-grow: 2;
 148             margin-left: 5px;
 149           }
 150           .add-button {
 151             cursor: pointer;
 152             font-size: larger;
 153             background-image: url($vlm-summary-plus);
 154             background-size: 20px;
 155             background-repeat: no-repeat;
 156             width:20px;
 157             height:20px;
 158             margin-top: 3px;
 159             margin-left: auto;
 160             &:hover {
 161               cursor: pointer;
 162               background-image: url($vlm-summary-plus-blue);
 163             }
 164           }
 165
 166           .summary-name-and-count {
 167             &:hover {
 168               cursor: pointer;
 169               color: $blue;
 170             }
 171           }
 172
 173
 174         }
 175       }
 176       .plus-icon {
 177         font-size: $icon-font-size;
 178         border-radius: 50%;
 179         border: 1px solid $black;
 180         color: $black;
 181         height: 16px;
 182         width: 16px;
 183         padding: 2px 2px 2px 3px;
 184       }
 185     }
 186   }
 187   .vlm-list-tab-panel
 188   {
 189     @extend .flex;
 190     .section-title {
 191       flex: 1;
 192     }
 193     .overview-buttons-section {
 194       margin-top: 20px;
 195       display: flex;
 196       justify-content: flex-start;
 197       .button-vlm-list-view {
 198         height: 32px;
 199         width: 34px;
 200         margin-left:10px;
 201         cursor: pointer;
 202       }
 203       .vlm-list-icon {
 204         background-size: 32px;
 205         background-repeat: no-repeat;
 206         background-image: url($vlm-summary-used);
 207         &.selected {
 208           background-image: url($vlm-summary-used-blue);
 209         }
 210       }
 211       .entities-list-icon {
 212         background-size: 32px;
 213         background-repeat: no-repeat;
 214         background-image: url($vlm-summary-orphans);
 215         &.selected {
 216           background-image: url($vlm-summary-orphans-blue);
 217         }
 218       }
 219
 220     }
 221   }
 222
 223   .overview-list-section {
 224     @extend .flex-column;
 225     margin-top: 35px;
 226     .section-title {
 227       @extend .heading-2;
 228       padding-top: 20px;
 229       margin-bottom: 15px;
 230       padding-bottom: 0px;
 231     }
 232     &.overview-list-orphans {
 233       .chevron::before
 234       {
 235         display: none;
 236       }
 237       .vlm-list-view {
 238         .vlm-list {
 239           .vlm-list-item {
 240             @include border-shadow();
 241             .list-item-icon-col {
 242               display: flex;
 243               flex-direction: column;
 244               justify-content: center;
 245               margin-left: 5px;
 246             }
 247             &.vlm-list-item-la {
 248               margin-left: 0;
 249               .list-item-icon-col {
 250                 padding-left: 22px;
 251
 252               }
 253               .la-icon {
 254                 background-color: $gray;
 255                 border-color: $gray;
 256               }
 257               .list-item-section {
 258                 &:first-child {
 259                   background-color: gray;
 260                 }
 261               }
 262             }
 263             &.vlm-list-item-fg {
 264               cursor: default;
 265               margin-left: 0;
 266               border-left: 10px solid $gray;
 267               .list-item-arrow-col {
 268                 margin-left: 0px;
 269               }
 270               .list-item-icon-col {
 271                 padding-left: 22px;
 272               }
 273               .fg-icon {
 274                 background-color: $gray;
 275                 border-color: $gray;
 276               }
 277             }
 278             &.vlm-list-item-ep {
 279               margin-left: 0;
 280               border-left: 10px solid $gray;
 281               .list-item-icon-col {
 282                 padding-left: 22px;
 283               }
 284               .ep-icon {
 285                 background-color: $gray;
 286                 border-color: $gray;
 287               }
 288               .list-item-section {
 289                 &:first-child {
 290                   display: flex;
 291                   color: $white;
 292                   min-width: 34px;
 293                 }
 294               }
 295             }
 296             &.vlm-list-item-lkg {
 297               margin-left: 0;
 298               border-left: 10px solid $gray;
 299               .list-item-icon-col {
 300                 padding-left: 22px;
 301               }
 302               .lkg-icon {
 303                 background-color: $gray;
 304                 border-color: $gray;
 305               }
 306               .list-item-section {
 307                 &:first-child {
 308                   display: flex;
 309                   color: $white;
 310                   min-width: 34px;
 311                 }
 312               }
 313             }
 314           }
 315         }
 316       }
 317     }
 318     .vlm-list-view {
 319       flex: 1;
 320       .vlm-list {
 321         @extend .flex;
 322         flex-direction: column;
 323         .vlm-list-item {
 324           @include border-shadow();
 325           min-height: 90px;
 326           height: 90px;
 327           background-color: $tlv-gray;
 328           @extend .flex;
 329           border: 1px solid $tlv-light-gray;
 330           margin-bottom: 0px;
 331           cursor: pointer;
 332           .list-item-icon-col {
 333             display: flex;
 334             flex-direction: column;
 335             justify-content: center;
 336
 337           }
 338           .list-item-section {
 339             padding: 10px;
 340             .children-count {
 341               @extend .body-1;
 342               line-height: 20px;
 343               color: $gray;
 344               padding-left: 5px;
 345               .count-value {
 346                 padding: 0 5px;
 347               }
 348             }
 349             .additional-data {
 350               padding-left: 50px;
 351               .additional-data-name {
 352                 @extend .body-1-medium;
 353               }
 354             }
 355             .additional-data-col-border {
 356               border-left: 1px solid $tlv-light-gray;
 357               min-height: 100%;
 358               height: 100%;
 359             }
 360           }
 361           .list-item-additional-data-col {
 362             @extend .body-1;
 363             @extend .flex;
 364             align-items: center;
 365             flex: 0.8;
 366           }
 367           .arrow-icon {
 368             align-self: center;
 369           }
 370           .vlm-item-info {
 371             flex: 1;
 372           }
 373           .vlm-list-item-title {
 374             @extend .flex;
 375             .item-name {
 376               @extend .heading-5-medium;
 377               flex: 0 1 auto;
 378               margin-bottom: 4px;
 379             }
 380           }
 381           .vlm-list-item-description {
 382             @extend .body-1;
 383             overflow: hidden;
 384             max-height: 38px;
 385           }
 386           &.vlm-list-item-la {
 387             margin-top: 10px;
 388             border-left: 10px solid $dark-blue;
 389             .la-icon {
 390               @include create-circle($circle-icon-size,$dark-blue,'LA');
 391               color: $white;
 392             }
 393             .list-item-section {
 394
 395               &:first-child {
 396                 display: flex;
 397                 color: $dark-blue;
 398                 min-width: 34px;
 399               }
 400             }
 401             .list-item-arrow-col {
 402               flex: 0.01;
 403               margin-left: 14px;
 404             }
 405             .list-item-icon-col {
 406               padding-left: 14px;
 407               padding-right: 30px;
 408               align-items: center;
 409             }
 410
 411           }
 412           &.vlm-list-item-fg {
 413             border-left: 10px solid $blue;
 414             margin-left: 20px;
 415             margin-top: 10px;
 416             .fg-icon {
 417               @include create-circle($circle-icon-size,$blue,'FG');
 418               color: $white;
 419             }
 420             .list-item-section {
 421               &:first-child {
 422                 display: flex;
 423                 color: $blue;
 424                 min-width: 34px;
 425
 426               }
 427             }
 428             .list-item-arrow-col {
 429               flex: 0.01;
 430               margin-left: 26px;
 431             }
 432             .list-item-icon-col {
 433               padding-left: 22px;
 434               padding-right: 30px;
 435               align-items: center;
 436             }
 437           }
 438           &.vlm-list-item-ep {
 439             margin-left: 40px;
 440             margin-top: 10px;
 441             border-left: 10px solid $light-blue;
 442             cursor: default;
 443             .ep-icon {
 444               @include create-circle($circle-icon-size,$light-blue,'EP');
 445               color: $white;
 446             }
 447             .list-item-icon-col {
 448               padding-left: 72px;
 449               padding-right: 30px;
 450               align-items: center;
 451             }
 452             .list-item-section {
 453               &:first-child {
 454                 display: none;
 455               }
 456             }
 457             .list-item-additional-data-col {
 458               margin-right: 20px;
 459             }
 460           }
 461           &.vlm-list-item-lkg {
 462             margin-top: 10px;
 463             margin-left: 40px;
 464             border-left: 10px solid $light-blue;
 465             cursor: default;
 466             .lkg-icon {
 467               @include create-circle($circle-icon-size,$light-blue,'KG');
 468               color: $white;
 469             }
 470             .list-item-icon-col {
 471               padding-left: 72px;
 472               padding-right: 30px;
 473               align-items: center;
 474             }
 475             .list-item-section {
 476               &:first-child {
 477                 display: none;
 478               }
 479
 480             }
 481             .list-item-additional-data-col {
 482               margin-right: 20px;
 483             }
 484           }
 485         }
 486
 487       }
 488     }
 489   }
 490
 491 }