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

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