Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix horizontal .list-group-flush borders. #39513

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Fix horizontal .list-group-flush borders. #39513

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fcd3458
Fix `getBoundingClientRect()` performance with <legend> elements.
Dec 15, 2023
dec0bb3
Merge branch 'twbs:main' into main
WOLFRIEND Dec 19, 2023
2095f21
Fix horizontal `.list-group-flush`.
Dec 19, 2023
2f082a2
Fix horizontal `.list-group-flush`.
Jan 6, 2024
cef9a06
Combine horizontal `.list-group-flush` in the one grid map-keys funct…
Jan 9, 2024
25ce12d
Fix horizontal `.list-group-flush` borders.
Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 20 additions & 6 deletions scss/_list-group.scss
View file
Open in desktop
Expand Up @@ -115,14 +115,14 @@
}
}

// Horizontal
//
// Change the layout of list group items from vertical (default) to horizontal.

@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

// Horizontal
//
// Change the layout of list group items from vertical (default) to horizontal.

.list-group-horizontal#{$infix} {
flex-direction: row;

Expand Down Expand Up @@ -152,10 +152,25 @@
}
}
}

// Horizontal flush list items
//
// Remove borders and border-radius to keep horizontal list group items edge-to-edge. Most
// useful within other components (e.g., cards).

.list-group-flush.list-group-horizontal#{$infix} {

> .list-group-item {
border-width: 0 var(--#{$prefix}list-group-border-width) 0 0;

&:last-child {
border-right-width: 0;
}
}
}
}
}


// Flush list items
//
// Remove borders and border-radius to keep list group items edge-to-edge. Most
Expand All @@ -173,7 +188,6 @@
}
}


// scss-docs-start list-group-modifiers
// List group contextual variants
//
Expand Down
19 changes: 18 additions & 1 deletion site/content/docs/5.3/components/list-group.md
View file
Open in desktop
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
Expand Up @@ -138,7 +138,7 @@ These work great with custom content as well.

## Horizontal

Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`.

**ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.

Expand All @@ -154,6 +154,23 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
{{< /list-group.inline >}}
{{< /example >}}

### Horizontal Flush

You can combine adding `.list-group-horizontal` and `.list-group-flush` to render horizontal list group items with some borders and rounded corners removed.
Responsive variants are also applicable, as described in the [Horizontal](#horizontal).

{{< example >}}
{{< list-group.inline >}}
{{- range $.Site.Data.breakpoints }}
<ul class="list-group list-group-horizontal{{ .abbr }} list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
{{- end -}}
{{< /list-group.inline >}}
{{< /example >}}

## Variants

{{< callout info >}}
Expand Down