1 $list-indentation: 20px;
4 $arrow-element-width: 30px;
5 $list-item-padding: 15px;
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));
14 .license-model-overview {
15 .overview-top-section {
18 @extend .text-uppercase !optional;
22 .license-model-overview-top {
24 justify-content: flex-start;
30 border-right: 1px solid $tlv-light-gray;
35 background-color: $tlv-gray;
37 border: 1px solid $tlv-light-gray;
38 @include overview-tile-shadow();
43 @extend .heading-4-semibold;
46 border-bottom: 1px solid $tlv-light-gray;
49 .vendor-description-readonly {
52 justify-content: space-between;
58 &:not(.read-only) .vendor-description {
59 border: 1px solid transparent;
61 padding: 2px 0 2px 6px;
70 $hover-padding-right: 16px;
71 @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
73 padding-right: $hover-padding-right;
74 border: 1px solid $light-gray;
77 background-color: $white;
82 .description-data:after {
91 .vendor-description-readonly {
96 @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
100 .vendor-description-edit {
102 flex-direction: column;
114 justify-content: flex-end;
120 border: 1px solid $light-gray;
123 background-color: $tlv-light-gray;
128 .description-button {
132 background-color: $white;
140 background-color: $white;
145 .description-edit-textarea {
147 border: 1px solid $tlv-light-gray;
152 .validation-error-message.tooltip {
155 background-color: $red;
160 .summary-count-list {
161 @extend .flex-column;
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 {
170 @extend .heading-5-semibold;
174 border-bottom: 1px solid $tlv-light-gray;
182 .summary-name-and-count {
198 .summary-name-and-count {
207 font-size: $icon-font-size;
209 border: 1px solid $black;
213 padding: 2px 2px 2px 3px;
217 .vlm-list-tab-panel {
223 .overview-buttons-section {
226 justify-content: flex-start;
227 .button-vlm-list-view {
235 background-size: 32px;
236 background-repeat: no-repeat;
237 background-image: url($vlm-summary-used);
239 background-image: url($vlm-summary-used-blue);
242 .entities-list-icon {
243 background-size: 32px;
244 background-repeat: no-repeat;
245 background-image: url($vlm-summary-orphans);
247 background-image: url($vlm-summary-orphans-blue);
254 .overview-list-section {
255 @extend .flex-column;
263 &.overview-list-orphans {
269 .vlm-list-item.orphan-list-item {
270 @include overview-tile-shadow();
273 .vlm-list-item-title {
278 .list-item-icon-col {
279 .overview-list-icon {
280 background-color: $gray;
288 min-width: $arrow-element-width;
290 &.list-item-icon-col {
292 margin-right: 65px - $list-item-padding;
303 flex-direction: column;
305 @include border-shadow();
308 background-color: $tlv-gray;
310 border: 1px solid $tlv-light-gray;
320 &.list-item-icon-col {
322 flex-direction: column;
323 justify-content: center;
326 margin-right: 40px - $list-item-padding;
327 margin-left: $icon-margin;
328 .overview-list-icon {
333 &.list-item-arrow-col {
347 flex-direction: column;
348 justify-content: space-between;
352 .additional-data-name {
353 @extend .body-2-semibold;
356 .additional-data-col-border {
357 border-left: 1px solid $tlv-light-gray;
362 .list-item-additional-data-col {
365 align-items: stretch;
369 padding-bottom: 11px;
377 .vlm-list-item-title {
379 align-items: baseline;
381 @extend .heading-5-semibold;
384 text-transform: uppercase;
387 .vlm-list-item-description {
389 @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
395 @include create-circle($circle-icon-size, $la-color);
398 .vlm-list-item-title {
407 min-width: $arrow-element-width;
410 .list-item-arrow-col {
412 margin-left: $arrow-margin;
413 justify-content: center;
417 margin-left: $list-indentation;
419 .fg-pipeline-separator {
423 .list-item-icon-col {
427 @include create-circle($circle-icon-size, $fg-color);
431 .vlm-list-item-title {
440 min-width: $arrow-element-width;
443 .list-item-arrow-col {
445 margin-left: $arrow-margin - $list-indentation;
446 padding-left: $list-indentation;
450 margin-left: $list-indentation * 2;
454 @include create-circle($circle-icon-size, $lkg-ep-color);
457 .vlm-list-item-title {
459 color: $lkg-ep-color;
466 &.list-item-icon-col {
471 &.vlm-list-item-lkg {
473 margin-left: $list-indentation * 2;
476 @include create-circle($circle-icon-size, $lkg-ep-color);
479 .vlm-list-item-title {
481 color: $lkg-ep-color;
488 &.list-item-icon-col {