Merge branch 'v4-card-fuckery' into v4-dev

dist/css/bootstrap.css

@@ -3767,8 +3767,9 @@ input[type="button"].btn-block {
   display: block;
   margin-bottom: .75rem;
   background-color: #fff;
-  border: 1px solid #e5e5e5;
   border-radius: .25rem;
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
 }
 
 .card-block {
@@ -3813,7 +3814,8 @@ input[type="button"].btn-block {
 .card-header {
   padding: .75rem 1.25rem;
   background-color: #f5f5f5;
-  border-bottom: 1px solid #e5e5e5;
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
 }
 
 .card-header::after {
@@ -3829,7 +3831,8 @@ input[type="button"].btn-block {
 .card-footer {
   padding: .75rem 1.25rem;
   background-color: #f5f5f5;
-  border-top: 1px solid #e5e5e5;
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
 }
 
 .card-footer::after {
@@ -3842,6 +3845,22 @@ input[type="button"].btn-block {
   border-radius: 0 0 .25rem .25rem;
 }
 
+.card-header-tabs {
+  margin-right: -.625rem;
+  margin-bottom: -.75rem;
+  margin-left: -.625rem;
+  border-bottom: 0;
+}
+
+.card-header-tabs .nav-item {
+  margin-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -.625rem;
+  margin-left: -.625rem;
+}
+
 .card-primary {
   background-color: #0275d8;
   border-color: #0275d8;
@@ -4633,18 +4652,9 @@ base::-moz-progress-bar,
 }
 
 .list-group-flush .list-group-item {
-  border-width: 1px 0;
   border-radius: 0;
 }
 
-.list-group-flush:first-child .list-group-item:first-child {
-  border-top: 0;
-}
-
-.list-group-flush:last-child .list-group-item:last-child {
-  border-bottom: 0;
-}
-
 a.list-group-item,
 button.list-group-item {
   width: 100%;

docs/components/card.md

@@ -211,6 +211,56 @@ Add an optional header and/or footer within a card.
 </div>
 {% endexample %}
 
+## Header nav
+
+Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment.
+
+{% example html %}
+<div class="card text-xs-center">
+  <div class="card-header">
+    <ul class="nav nav-tabs card-header-tabs pull-xs-left">
+      <li class="nav-item">
+        <a class="nav-link active" href="#">Active</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#">Disabled</a>
+      </li>
+    </ul>
+  </div>
+  <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>
+{% endexample %}
+
+{% example html %}
+<div class="card text-xs-center">
+  <div class="card-header">
+    <ul class="nav nav-pills card-header-pills pull-xs-left">
+      <li class="nav-item">
+        <a class="nav-link active" href="#">Active</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#">Disabled</a>
+      </li>
+    </ul>
+  </div>
+  <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>
+{% endexample %}
+
 ## Image caps
 
 Similar to headers and footers, cards include top and bottom image caps.

docs/dist/css/bootstrap.css

@@ -3767,8 +3767,9 @@ input[type="button"].btn-block {
   display: block;
   margin-bottom: .75rem;
   background-color: #fff;
-  border: 1px solid #e5e5e5;
   border-radius: .25rem;
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
 }
 
 .card-block {
@@ -3813,7 +3814,8 @@ input[type="button"].btn-block {
 .card-header {
   padding: .75rem 1.25rem;
   background-color: #f5f5f5;
-  border-bottom: 1px solid #e5e5e5;
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
 }
 
 .card-header::after {
@@ -3829,7 +3831,8 @@ input[type="button"].btn-block {
 .card-footer {
   padding: .75rem 1.25rem;
   background-color: #f5f5f5;
-  border-top: 1px solid #e5e5e5;
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .125);
 }
 
 .card-footer::after {
@@ -3842,6 +3845,22 @@ input[type="button"].btn-block {
   border-radius: 0 0 .25rem .25rem;
 }
 
+.card-header-tabs {
+  margin-right: -.625rem;
+  margin-bottom: -.75rem;
+  margin-left: -.625rem;
+  border-bottom: 0;
+}
+
+.card-header-tabs .nav-item {
+  margin-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -.625rem;
+  margin-left: -.625rem;
+}
+
 .card-primary {
   background-color: #0275d8;
   border-color: #0275d8;
@@ -4633,18 +4652,9 @@ base::-moz-progress-bar,
 }
 
 .list-group-flush .list-group-item {
-  border-width: 1px 0;
   border-radius: 0;
 }
 
-.list-group-flush:first-child .list-group-item:first-child {
-  border-top: 0;
-}
-
-.list-group-flush:last-child .list-group-item:last-child {
-  border-bottom: 0;
-}
-
 a.list-group-item,
 button.list-group-item {
   width: 100%;

scss/_card.scss

@@ -7,8 +7,10 @@
   display: block;
   margin-bottom: $card-spacer-y;
   background-color: $card-bg;
-  border: $card-border-width solid $card-border-color;
+  // border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
+  // Doesn't use mixin so that cards always have a "border"
+  box-shadow: inset 0 0 0 $card-border-width $card-border-color;
 }
 
 .card-block {
@@ -72,7 +74,9 @@
   @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
-  border-bottom: $card-border-width solid $card-border-color;
+  // border-bottom: $card-border-width solid $card-border-color;
+  // Doesn't use mixin so that cards always have a "border"
+  box-shadow: inset 0 0 0 $card-border-width $card-border-color;
 
   &:first-child {
     @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
@@ -83,7 +87,9 @@
   @include clearfix;
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
-  border-top: $card-border-width solid $card-border-color;
+  // border-top: $card-border-width solid $card-border-color;
+  // Doesn't use mixin so that cards always have a "border"
+  box-shadow: inset 0 0 0 $card-border-width $card-border-color;
 
   &:last-child {
     @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
@@ -91,6 +97,27 @@
 }
 
 
+//
+// Header navs
+//
+
+.card-header-tabs {
+  margin-right: -($card-spacer-x / 2);
+  margin-bottom: -$card-spacer-y;
+  margin-left: -($card-spacer-x / 2);
+  border-bottom: 0;
+
+  .nav-item {
+    margin-bottom: 0;
+  }
+}
+
+.card-header-pills {
+  margin-right: -($card-spacer-x / 2);
+  margin-left: -($card-spacer-x / 2);
+}
+
+
 //
 // Background variations
 //

scss/_list-group.scss

@@ -34,21 +34,8 @@
 
 .list-group-flush {
   .list-group-item {
-    border-width: $list-group-border-width 0;
     border-radius: 0;
   }
-
-  &:first-child {
-    .list-group-item:first-child {
-      border-top: 0;
-    }
-  }
-
-  &:last-child {
-    .list-group-item:last-child {
-      border-bottom: 0;
-    }
-  }
 }
 
 

scss/_variables.scss

@@ -538,7 +538,7 @@ $card-spacer-x:            1.25rem !default;
 $card-spacer-y:            .75rem !default;
 $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
-$card-border-color:        #e5e5e5 !default;
+$card-border-color:        rgba(0,0,0,.125) !default;
 $card-border-radius-inner: $card-border-radius !default;
 $card-cap-bg:              #f5f5f5 !default;
 $card-bg:                  #fff !default;