|
448 | 448 | isolation: isolate; |
449 | 449 | } |
450 | 450 | } |
| 451 | + .list { |
| 452 | + display: flex; |
| 453 | + flex-direction: column; |
| 454 | + font-size: 0.875rem; |
| 455 | + :where(.list-row) { |
| 456 | + --list-grid-cols: minmax(0, auto) 1fr; |
| 457 | + position: relative; |
| 458 | + display: grid; |
| 459 | + grid-auto-flow: column; |
| 460 | + gap: calc(0.25rem * 4); |
| 461 | + border-radius: var(--radius-box); |
| 462 | + padding: calc(0.25rem * 4); |
| 463 | + word-break: break-word; |
| 464 | + grid-template-columns: var(--list-grid-cols); |
| 465 | + &:has(.list-col-grow:nth-child(1)) { |
| 466 | + --list-grid-cols: 1fr; |
| 467 | + } |
| 468 | + &:has(.list-col-grow:nth-child(2)) { |
| 469 | + --list-grid-cols: minmax(0, auto) 1fr; |
| 470 | + } |
| 471 | + &:has(.list-col-grow:nth-child(3)) { |
| 472 | + --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; |
| 473 | + } |
| 474 | + &:has(.list-col-grow:nth-child(4)) { |
| 475 | + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; |
| 476 | + } |
| 477 | + &:has(.list-col-grow:nth-child(5)) { |
| 478 | + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; |
| 479 | + } |
| 480 | + &:has(.list-col-grow:nth-child(6)) { |
| 481 | + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) |
| 482 | + minmax(0, auto) 1fr; |
| 483 | + } |
| 484 | + :not(.list-col-wrap) { |
| 485 | + grid-row-start: 1; |
| 486 | + } |
| 487 | + } |
| 488 | + & > :not(:last-child) { |
| 489 | + &.list-row, .list-row { |
| 490 | + &:after { |
| 491 | + content: ""; |
| 492 | + border-bottom: var(--border) solid; |
| 493 | + inset-inline: var(--radius-box); |
| 494 | + position: absolute; |
| 495 | + bottom: calc(0.25rem * 0); |
| 496 | + border-color: var(--color-base-content); |
| 497 | + @supports (color: color-mix(in lab, red, red)) { |
| 498 | + border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); |
| 499 | + } |
| 500 | + } |
| 501 | + } |
| 502 | + } |
| 503 | + } |
451 | 504 | .table { |
452 | 505 | font-size: 0.875rem; |
453 | 506 | position: relative; |
|
0 commit comments