.list-group-flush within .card causes double border

[jabbett]

Saw this locally when I upgraded to alpha 3, confirmed in the public documentation:

Seeing this in Chrome 51, Firefox 46, and Safari 9.1.2.

[judetucker]

+1 For me as well when migrating.

Also occurring in the plain list-in-a-card example.

Potentially this commit removed the different border when list groups are flush.
955e040#diff-cd8ec88dc7823a5c78f7111e37a78adbL37

[Starsam80]

I thought that mdo fixed these with #19861 and #19885, but I guess he never fixed/reverted all of the changes he made.

[hugofloss]

Also occurring for me:

[judetucker]

Happy Friday! Since this seems to be a common problem and since the fix seems pretty benign, can this be added to the alpha.3.1 patch release?

[judetucker]

Hi @mdo, just wanted to follow up on this since its still present in the alpha.4 (http://v4-alpha.getbootstrap.com/components/card/#content-types)

Any chance this fix can catch the alpha.5 milestone?

[betorina]

Temporary fix / monkey patch:

// Documentation example: Remove double borders
.card > .list-group > .list-group-item {
  border-left: 0;
  border-right: 0;
}

// Plain list card example: Remove also first + last border
.card > .list-group > .list-group-item {
  border-left: 0;
  border-right: 0;
  &:first-of-type {
    border-top: 0;
  }
  &:last-of-type {
    border-bottom: 0;
  }
}

[jabbett]

The above fix works when the .list-group is the only element within the .card. The following version allows for the .list-group to be combined with other elements within .card

.card > .list-group {
  > .list-group-item {
    border-left: 0;
    border-right: 0;
  }
  &:first-child .list-group-item:first-of-type {
    border-top: 0;
  }

  &:last-child .list-group-item:last-of-type {
    border-bottom: 0;
  }
}