From fcd3458d6fc4c18f24dc975adfa4c2854cd7f49b Mon Sep 17 00:00:00 2001 From: Oleksandr Tkachenko Date: Fri, 15 Dec 2023 14:30:15 +0200 Subject: [PATCH 1/5] Fix `getBoundingClientRect()` performance with elements. --- scss/_reboot.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 18791753d0ca..f2096e28802e 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -489,23 +489,13 @@ fieldset { border: 0; // 2 } -// 1. By using `float: left`, the legend will behave like a block element. -// This way the border of a fieldset wraps around the legend if present. -// 2. Fix wrapping bug. -// See https://github.com/twbs/bootstrap/issues/29712 - legend { - float: left; // 1 width: 100%; padding: 0; margin-bottom: $legend-margin-bottom; @include font-size($legend-font-size); font-weight: $legend-font-weight; line-height: inherit; - - + * { - clear: left; // 2 - } } // Fix height of inputs with a type of datetime-local, date, month, week, or time From 2095f218aafba5448c88de42ffc0e0b2dc989032 Mon Sep 17 00:00:00 2001 From: Oleksandr Tkachenko Date: Tue, 19 Dec 2023 18:26:45 +0200 Subject: [PATCH 2/5] Fix horizontal `.list-group-flush`. --- scss/_list-group.scss | 21 +++++++++++++++++++ scss/_reboot.scss | 10 +++++++++ .../content/docs/5.3/components/list-group.md | 2 +- 3 files changed, 32 insertions(+), 1 deletion(-) diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 455531eec0aa..411b1cae5c8a 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -173,6 +173,27 @@ } } +// 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). +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .list-group-flush.list-group-horizontal#{$infix} { + @include border-radius(0); + + > .list-group-item { + border-width: 0 var(--#{$prefix}list-group-border-width) 0 0; + + &:last-child { + border-right-width: 0; + } + } + } + } +} // scss-docs-start list-group-modifiers // List group contextual variants diff --git a/scss/_reboot.scss b/scss/_reboot.scss index f2096e28802e..18791753d0ca 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -489,13 +489,23 @@ fieldset { border: 0; // 2 } +// 1. By using `float: left`, the legend will behave like a block element. +// This way the border of a fieldset wraps around the legend if present. +// 2. Fix wrapping bug. +// See https://github.com/twbs/bootstrap/issues/29712 + legend { + float: left; // 1 width: 100%; padding: 0; margin-bottom: $legend-margin-bottom; @include font-size($legend-font-size); font-weight: $legend-font-weight; line-height: inherit; + + + * { + clear: left; // 2 + } } // Fix height of inputs with a type of datetime-local, date, month, week, or time diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 8603071fc27f..98a1ae40e0c2 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -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. From 2f082a21aea3832ce6bc7ef93e849df95ed945ae Mon Sep 17 00:00:00 2001 From: Oleksandr Tkachenko Date: Sat, 6 Jan 2024 11:01:22 +0200 Subject: [PATCH 3/5] Fix horizontal `.list-group-flush`. --- scss/_list-group.scss | 1 - site/content/docs/5.3/components/list-group.md | 17 +++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 411b1cae5c8a..ecb42646224c 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -182,7 +182,6 @@ $infix: breakpoint-infix($breakpoint, $grid-breakpoints); .list-group-flush.list-group-horizontal#{$infix} { - @include border-radius(0); > .list-group-item { border-width: 0 var(--#{$prefix}list-group-border-width) 0 0; diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 98a1ae40e0c2..1a2a4367900d 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -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 }} +
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
+{{- end -}} +{{< /list-group.inline >}} +{{< /example >}} + ## Variants {{< callout info >}} From cef9a0666ced87908dc665bf6fd4be6cca9f4f23 Mon Sep 17 00:00:00 2001 From: Oleksandr Tkachenko Date: Tue, 9 Jan 2024 11:05:34 +0200 Subject: [PATCH 4/5] Combine horizontal `.list-group-flush` in the one grid map-keys function. --- scss/_list-group.scss | 46 +++++++++++++++++++------------------------ 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/scss/_list-group.scss b/scss/_list-group.scss index ecb42646224c..54a67370c782 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -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; @@ -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 @@ -173,27 +188,6 @@ } } -// 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). -@each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - .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; - } - } - } - } -} - // scss-docs-start list-group-modifiers // List group contextual variants // From 25ce12df7edc05ae23ce45c22e9e10e5a320e64f Mon Sep 17 00:00:00 2001 From: Oleksandr Tkachenko Date: Tue, 30 Jan 2024 13:12:25 +0200 Subject: [PATCH 5/5] Fix horizontal `.list-group-flush` borders. --- scss/_list-group.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 54a67370c782..3f391388ac2a 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -163,6 +163,14 @@ > .list-group-item { border-width: 0 var(--#{$prefix}list-group-border-width) 0 0; + &:first-child:not(:last-child) { + @include border-bottom-start-radius(0); + } + + &:last-child:not(:first-child) { + @include border-top-end-radius(0); + } + &:last-child { border-right-width: 0; }