rewrite much of cards and the docs

diff --git a/docs/components/card.md b/docs/components/card.md
index 8b53d3fc65adb868c612f7d7a9abd8d8e04401a8..1a7a2aaca86c3cde268c21a57f2a2dc7b8e4bbb8 100644 (file)
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -7,56 +7,96 @@ A **card** is a flexible and extensible content container. It includes options f
 
 If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
 
-## Basic example
+## Example
 
-Cards require very little markup, but do require some additional classes to give you as much control as possible. Create a `.card`, add any heading with `.card-title`, and use `.card-text` on paragraphs. These classes ensure proper spacing and alignment.
+Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease.
 
 {% example html %}
 <div class="card">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="btn btn-primary">Button</a>
+  </div>
 </div>
 {% endexample %}
 
-## Sizing
+## Content types
 
-Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via custom styles, our predefined grid classes, or our grid mixins.
+Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
 
-Using the card size variations:
+{% example html %}
+<div class="card">
+  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+  <div class="card-block">
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+{% endexample %}
 
 {% example html %}
-<div class="card card-sm">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+<div class="card">
+  <img class="card-img-top" data-src="holder.js/100%x180/?text=Image cap" alt="Card image cap">
+  <div class="card-block">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
 </div>
-<div class="card card-md">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+{% endexample %}
+
+{% example html %}
+<div class="card">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
 </div>
-<div class="card card-lg">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+{% endexample %}
+
+{% example html %}
+<div class="card">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <h6 class="card-subtitle text-muted">Support card subtitle</h6>
+  </div>
+  <img data-src="holder.js/100%x180/?text=Image" alt="Card image">
+  <div class="card-block">
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
 </div>
 {% endexample %}
 
+## Sizing
+
+Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via inline styles, our predefined grid classes, or with custom styles using our grid mixins.
 
 Using the grid:
 
 {% example html %}
 <div class="row">
   <div class="col-sm-6">
-    <div class="card">
+    <div class="card card-block">
       <h3 class="card-title">Special title treatment</h3>
       <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
   </div>
   <div class="col-sm-6">
-    <div class="card">
+    <div class="card card-block">
       <h3 class="card-title">Special title treatment</h3>
       <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -68,7 +108,7 @@ Using the grid:
 Using custom widths:
 
 {% example html %}
-<div class="card" style="width: 20rem;">
+<div class="card card-block" style="width: 20rem;">
   <h3 class="card-title">Special title treatment</h3>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -80,19 +120,19 @@ Using custom widths:
 You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]().
 
 {% example html %}
-<div class="card">
+<div class="card card-block">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 
-<div class="card text-center">
+<div class="card card-block text-center">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>
 
-<div class="card text-right">
+<div class="card card-block text-right">
   <h4 class="card-title">Special title treatment</h4>
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
@@ -108,19 +148,23 @@ Add an optional header and/or footer within a card.
   <div class="card-header">
     Featured
   </div>
-  <h4 class="card-title">Special title treatment</h4>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+  <div class="card-block">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
 </div>
 
 <div class="card">
   <div class="card-header">
     Quote
   </div>
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 {% endexample %}
 
@@ -129,9 +173,11 @@ Add an optional header and/or footer within a card.
   <div class="card-header">
     Featured
   </div>
-  <h4 class="card-title">Special title treatment</h4>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+  <div class="card-block">
+    <h4 class="card-title">Special title treatment</h4>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
   <div class="card-footer text-muted">
     2 days ago
   </div>
@@ -141,10 +187,12 @@ Add an optional header and/or footer within a card.
   <div class="card-header">
     Quote
   </div>
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
   <div class="card-footer text-muted">
     2 days ago
   </div>
@@ -157,16 +205,20 @@ Similar to headers and footers, cards include top and bottom image caps.
 
 {% example html %}
 <div class="card">
-  <img class="card-img-top" data-src="holder.js/240x180/" alt="Card image cap">
-  <h4 class="card-title">Card title</h4>
-  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
 </div>
 <div class="card">
-  <h4 class="card-title">Card title</h4>
-  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-  <img class="card-img-bottom" data-src="holder.js/240x180/" alt="Card image cap">
+  <div class="card-block">
+    <h4 class="card-title">Card title</h4>
+    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+  </div>
+  <img class="card-img-bottom" data-src="holder.js/100%x180/" alt="Card image cap">
 </div>
 {% endexample %}
 
@@ -191,9 +243,11 @@ Cards include a class for quickly toggling the text color. By default, cards use
 
 {% example html %}
 <div class="card card-inverse" style="background-color: #333; border-color: #333;">
-  <h3 class="card-title">Special title treatment</h3>
-  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-  <a href="#" class="btn btn-primary">Go somewhere</a>
+  <div class="card-block">
+    <h3 class="card-title">Special title treatment</h3>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Button</a>
+  </div>
 </div>
 {% endexample %}
 
@@ -203,34 +257,44 @@ Cards include their own variant classes for quickly changing the `background-col
 
 {% example html %}
 <div class="card card-inverse card-primary text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 <div class="card card-inverse card-success text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 <div class="card card-inverse card-info text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 <div class="card card-inverse card-warning text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 <div class="card card-inverse card-danger text-center">
-  <blockquote class="card-blockquote">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
-  </blockquote>
+  <div class="card-block">
+    <blockquote class="card-blockquote">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+    </blockquote>
+  </div>
 </div>
 {% endexample %}
 
@@ -241,50 +305,62 @@ Set a `width` on the `.card-group`, content automatically sizes for equal column
 {% example html %}
 <div class="card-group">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
-    <h4 class="card-title">Card title</h4>
-    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
-    <h4 class="card-title">Card title</h4>
-    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
-    <h4 class="card-title">Card title</h4>
-    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
   </div>
 </div>
 {% endexample %}
 
-## Sets
+## Decks
 
-Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapper` and a `.card-set`. We use table styles for the sizing and the gutters on `.card-set`. The `.card-set-wrapper` is used to negative margin out the `border-spacing` on the `.card-set`.
+Get equal-width and equal-height cards by using two wrappers: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
 
 {% example html %}
-<div class="card-set-wrapper">
-  <div class="card-set">
+<div class="card-deck-wrapper">
+  <div class="card-deck">
     <div class="card">
-      <img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
-      <h4 class="card-title">Card title</h4>
-      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <div class="card-block">
+        <h4 class="card-title">Card title</h4>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      </div>
     </div>
     <div class="card">
-      <img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
-      <h4 class="card-title">Card title</h4>
-      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <div class="card-block">
+        <h4 class="card-title">Card title</h4>
+        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      </div>
     </div>
     <div class="card">
-      <img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
-      <h4 class="card-title">Card title</h4>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <img class="card-img-top" data-src="holder.js/100%x200/" alt="Card image cap">
+      <div class="card-block">
+        <h4 class="card-title">Card title</h4>
+        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      </div>
     </div>
   </div>
 </div>

diff --git a/scss/_card.scss b/scss/_card.scss
index d7423f33cc72f37dfe633eb6c13b987eeb9f3bdc..b3d6e39615fbd330a70fefc080d68c2115c19cf5 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -2,63 +2,91 @@
 // Base styles
 //
 
+$card-spacer-x:      1.25rem;
+$card-spacer-y:      .75rem;
+$card-border-width:  .0625rem;
+$card-border-radius: .25rem;
+
 .card {
   position: relative;
-  padding: 1.25rem;
-  margin-bottom: 1.25rem;
-  border: .075rem solid #eee;
+  margin-bottom: $card-spacer-y;
+  border: $card-border-width solid #e5e5e5;
+  @include border-radius($card-border-radius);
+}
+
+.card-block {
+  padding: $card-spacer-x;
 }
+
 .card-title {
   margin-top: 0;
-  margin-bottom: .75rem;
+  margin-bottom: $card-spacer-y;
 }
-.card-text:last-child {
+
+.card-subtitle {
+  margin-top: -($card-spacer-y / 2);
   margin-bottom: 0;
 }
-.card-actions {
-  .card-link + .card-link {
-    margin-left: .75rem;
-  }
+
+.card-text:last-child {
+  margin-bottom: 0;
 }
+
+// .card-actions {
+//   padding: $card-spacer-y $card-spacer-x;
+
+//   .card-link + .card-link {
+//     margin-left: $card-spacer-x;
+//   }
+// }
+
 .card-link {
   @include hover {
     text-decoration: none;
   }
-}
 
+  + .card-link {
+    margin-left: $card-spacer-x;
+  }
+}
 
-//
-// Optional textual caps
-//
+@if $enable-rounded {
+  .card {
+    > .list-group:first-child {
+      .list-group-item:first-child {
+        border-radius: $card-border-radius $card-border-radius 0 0;
+      }
+    }
 
-.card-header {
-  padding: .75rem 1.25rem;
-  margin: -1.25rem -1.25rem 1.25rem;
-  border-bottom: .075rem solid #eee;
-  @include border-radius(.25rem .25rem 0 0);
-}
-.card-footer {
-  padding: .75rem 1.25rem;
-  margin: 1.25rem -1.25rem -1.25rem;
-  border-top: .075rem solid #eee;
-  @include border-radius(0 0 .25rem .25rem);
+    > .list-group:last-child {
+      .list-group-item:last-child {
+        border-radius: 0 0 $card-border-radius $card-border-radius;
+      }
+    }
+  }
 }
 
 
 //
-// Sizing variations
+// Optional textual caps
 //
 
-.card-sm {
-  width: 15rem;
-}
+.card-header {
+  padding: $card-spacer-y $card-spacer-x;
+  border-bottom: $card-border-width solid #eee;
 
-.card-md {
-  width: 30rem;
+  &:first-child {
+    @include border-radius($card-border-radius $card-border-radius 0 0);
+  }
 }
 
-.card-lg {
-  width: 45rem;
+.card-footer {
+  padding: $card-spacer-y $card-spacer-x;
+  border-top: $card-border-width solid #eee;
+
+  &:last-child {
+    @include border-radius(0 0 $card-border-radius $card-border-radius);
+  }
 }
 
 
@@ -128,7 +156,7 @@
 
 // Card image
 .card-img {
-  margin: -1.325rem;
+  // margin: -1.325rem;
   @include border-radius(.25rem);
 }
 .card-img-overlay {
@@ -144,11 +172,9 @@
 
 // Card image caps
 .card-img-top {
-  margin: -1.325rem -1.325rem 1.25rem;
   @include border-radius(.25rem .25rem 0 0);
 }
 .card-img-bottom {
-  margin: 1.25rem -1.325rem -1.325rem;
   @include border-radius(0 0 .25rem .25rem);
 }
 
@@ -157,22 +183,36 @@
 // Card set
 //
 
-.card-set {
-  display: table;
-  table-layout: fixed;
-  border-spacing: 1.25rem 0;
+@if $enable-flex {
+  .card-deck {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -.75rem;
+    margin-left: -.75rem;
 
-  .card {
-    display: table-cell;
-    float: none;
-    max-width: none;
+    .card {
+      flex: 1 0 0;
+      margin-left: .75rem;
+      margin-right: .75rem;
+    }
   }
-}
-.card-set-wrapper {
-  margin-right: -1.25rem;
-  margin-left: -1.25rem;
-}
+} @else {
+  .card-deck {
+    display: table;
+    table-layout: fixed;
+    border-spacing: 1.25rem 0;
 
+    .card {
+      display: table-cell;
+      float: none;
+      max-width: none;
+    }
+  }
+  .card-deck-wrapper {
+    margin-right: -1.25rem;
+    margin-left: -1.25rem;
+  }
+}
 
 //
 // Card groups
@@ -199,6 +239,38 @@
       margin-left: 0;
       border-left: 0;
     }
+
+    // Handle rounded corners
+    &:first-child {
+      .card-img-top {
+        @if $enable-rounded {
+          border-top-right-radius: 0;
+        }
+      }
+      .card-img-bottom {
+        @if $enable-rounded {
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+    &:last-child {
+      .card-img-top {
+        @if $enable-rounded {
+          border-top-left-radius: 0;
+        }
+      }
+      .card-img-bottom {
+        @if $enable-rounded {
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+    &:not(:first-child):not(:last-child) {
+      .card-img-top,
+      .card-img-bottom {
+        @include border-radius(0);
+      }
+    }
   }
 }
 

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index f1af67640d6a9a45564a9cb8700bdd9d21941b76..0dd7afb82f3f79e0fdd6ba8fd6ed1d75e518a8b4 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -10,7 +10,7 @@
 .list-group {
   // 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: 20px;
+  margin-bottom: 0;
 }
 
 
@@ -21,11 +21,11 @@
 .list-group-item {
   position: relative;
   display: block;
-  padding: 10px 15px;
+  padding: .75rem 1.25rem;
   // Place the border on the list items and negative margin up for better styling
-  margin-bottom: -1px;
+  margin-bottom: -.0625rem;
   background-color: $list-group-bg;
-  border: 1px solid $list-group-border;
+  border: .0625rem solid $list-group-border;
 
   // Round the first and last items
   &:first-child {
@@ -37,6 +37,13 @@
   }
 }
 
+.list-group-flush {
+  .list-group-item {
+    border-width: .0625rem 0;
+    border-radius: 0;
+  }
+}
+
 
 // Linked list items
 //