Fix card list group borders & radii (#30497)

diff --git a/scss/_card.scss b/scss/_card.scss
index 3099109b1f2b03dfa406aeba82766b8341876e5c..666092779bfaea9edde5a4bc02f489d858a2a926 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -19,15 +19,18 @@
     margin-left: 0;
   }
 
-  > .list-group:first-child {
-    .list-group-item:first-child {
-      @include border-top-radius($card-border-radius);
+  > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
+
+    &:first-child {
+      border-top-width: 0;
+      @include border-top-radius($card-inner-border-radius);
     }
-  }
 
-  > .list-group:last-child {
-    .list-group-item:last-child {
-      @include border-bottom-radius($card-border-radius);
+    &:last-child  {
+      border-bottom-width: 0;
+      @include border-bottom-radius($card-inner-border-radius);
     }
   }
 }

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index fe97ce526986494a990020f00200553d488a1f94..8513cdd9d168204a99e842ca2eb005c7a03ad9c9 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -9,6 +9,7 @@
   // No need to set list-style: none; since .list-group-item is block level
   padding-left: 0; // reset padding because ul and ol
   margin-bottom: 0;
+  @include border-radius($list-group-border-radius);
 }
 
 
@@ -52,11 +53,11 @@
   border: $list-group-border-width solid $list-group-border-color;
 
   &:first-child {
-    @include border-top-radius($list-group-border-radius);
+    @include border-top-radius(inherit);
   }
 
   &:last-child {
-    @include border-bottom-radius($list-group-border-radius);
+    @include border-bottom-radius(inherit);
   }
 
   &.disabled,
@@ -132,18 +133,12 @@
 // useful within other components (e.g., cards).
 
 .list-group-flush {
-  .list-group-item {
-    border-right-width: 0;
-    border-left-width: 0;
-    @include border-radius(0);
+  @include border-radius(0);
 
-    &:first-child {
-      border-top-width: 0;
-    }
-  }
+  .list-group-item {
+    border-width: 0 0 $list-group-border-width;
 
-  &:last-child {
-    .list-group-item:last-child {
+    &:last-child {
       border-bottom-width: 0;
     }
   }