From 12a6576f48bca3ac563e3690fabcfe180cfc2da2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 14 May 2020 10:48:46 -0700 Subject: [PATCH] Simplify list-group borders in cards (#30808) --- scss/_card.scss | 13 +++++++------ site/content/docs/5.0/components/card.md | 13 +++++++++++++ 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/scss/_card.scss b/scss/_card.scss index 230ab113ab..a2407c8b0f 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -33,6 +33,13 @@ @include border-bottom-radius($card-inner-border-radius); } } + + // Due to specificity of the above selector (`.card > .list-group`), we must + // use a child selector here to prevent double borders. + > .card-header + .list-group, + > .list-group + .card-footer { + border-top: 0; + } } .card-body { @@ -80,12 +87,6 @@ &:first-child { @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); } - - + .list-group { - .list-group-item:first-child { - border-top: 0; - } - } } .card-footer { diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md index 4bb116f0f9..3b250db735 100644 --- a/site/content/docs/5.0/components/card.md +++ b/site/content/docs/5.0/components/card.md @@ -101,6 +101,19 @@ Create lists of content in a card with a flush list group. {{< /example >}} +{{< example >}} +
+ + +
+{{< /example >}} + ### Kitchen sink Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.