|
287 | 287 | 'indigo': rem(8px), |
288 | 288 | ), $variant); |
289 | 289 |
|
290 | | - $list-icon-margin-inline: ( |
291 | | - comfortable: rem(16px), |
292 | | - cosy: rem(8px), |
293 | | - compact: rem(4px) |
294 | | - ); |
295 | | - |
296 | | - $list-icon-margin-block: ( |
297 | | - comfortable: rem(8px), |
298 | | - cosy: rem(6px), |
299 | | - compact: rem(4px) |
300 | | - ); |
301 | | - |
302 | | - $list-line-margin: ( |
303 | | - comfortable: rem(16px), |
304 | | - cosy: rem(12px), |
305 | | - compact: rem(8px) |
306 | | - ); |
307 | | - |
308 | | - $list-actions-margin: ( |
309 | | - comfortable: rem(8px), |
310 | | - cosy: rem(6px), |
311 | | - compact: rem(4px) |
312 | | - ); |
313 | | - |
314 | 290 | %igx-list { |
315 | 291 | @include sizable(); |
316 | 292 |
|
|
326 | 302 | z-index: 0; |
327 | 303 | border-radius: var-get($theme, 'border-radius'); |
328 | 304 |
|
| 305 | + @if $variant == 'bootstrap' { |
| 306 | + border: rem(1px) solid var-get($theme, 'border-color'); |
| 307 | + } |
| 308 | + |
329 | 309 | &:focus-visible { |
330 | 310 | outline-style: none; |
331 | 311 | } |
|
479 | 459 | align-items: center; |
480 | 460 | justify-content: center; |
481 | 461 | color: var-get($theme, 'item-action-color'); |
482 | | - |
483 | | - @if $variant == 'indigo' { |
484 | | - gap: sizable(rem(4), rem(6), rem(8)); |
485 | | - } |
| 462 | + gap: if($variant == 'indigo', sizable(rem(4), rem(6), rem(8)), rem(8px)); |
486 | 463 |
|
487 | 464 | &:empty { |
488 | 465 | display: none; |
489 | 466 | } |
490 | 467 |
|
491 | 468 | > * { |
492 | 469 | --component-size: #{if($variant == 'indigo', 2, var(--list-size))}; |
493 | | - |
494 | | - @if $variant != 'indigo' { |
495 | | - margin-inline-start: pad-inline(map.get($list-actions-margin, 'compact'), map.get($list-actions-margin, 'cosy'), map.get($list-actions-margin, 'comfortable')); |
496 | | - } |
497 | 470 | } |
498 | 471 |
|
499 | 472 | igc-icon, |
|
517 | 490 | border-radius: var-get($theme, 'item-border-radius'); |
518 | 491 | background: inherit; |
519 | 492 | z-index: 2; |
520 | | - |
521 | | - @if $variant == 'indigo' { |
522 | | - gap: rem(8px); |
523 | | - } |
| 493 | + gap: if($variant == 'indigo', rem(8px), rem(16px)); |
524 | 494 | } |
525 | 495 |
|
526 | 496 | %igx-list-header, |
|
533 | 503 | display: flex; |
534 | 504 | align-items: center; |
535 | 505 | justify-content: center; |
536 | | - align-self: if($variant == 'indigo', center, flex-start); |
| 506 | + align-self: center; |
537 | 507 | padding: 0; |
538 | 508 | color: var-get($theme, 'item-thumbnail-color'); |
539 | 509 | gap: rem(8px); |
|
542 | 512 | > igx-icon, |
543 | 513 | > igc-icon { |
544 | 514 | --component-size: #{if($variant == 'indigo', 2, var(--list-size))}; |
545 | | - |
546 | | - @if $variant != 'indigo' { |
547 | | - margin-inline-end: pad-inline(map.get($list-icon-margin-inline, 'compact'), map.get($list-icon-margin-inline, 'cosy'), map.get($list-icon-margin-inline, 'comfortable')); |
548 | | - margin-inline-start: 0; |
549 | | - margin-block: pad-block(map.get($list-icon-margin-block, 'compact'), map.get($list-icon-margin-block, 'cosy'), map.get($list-icon-margin-block, 'comfortable')); |
550 | | - } |
551 | 515 | } |
552 | 516 |
|
553 | 517 | &:empty { |
|
557 | 521 |
|
558 | 522 | %igx-list__item-thumbnail:not(:empty) + %igx-list__item-lines { |
559 | 523 | --component-size: var(--list-size); |
560 | | - |
561 | | - @if $variant != 'indigo' { |
562 | | - margin-inline-start: pad-inline(map.get($list-line-margin, 'compact'), map.get($list-line-margin, 'cosy'), map.get($list-line-margin, 'comfortable')); |
563 | | - } |
564 | | - } |
565 | | - |
566 | | - @if $variant != 'indigo' { |
567 | | - %igx-list__item-lines + %igx-list__item-actions { |
568 | | - margin-inline-start: rem(8px); |
569 | | - } |
570 | 524 | } |
571 | 525 |
|
572 | 526 | %igx-list-item-content--active { |
|
0 commit comments