fuck around with card borders and more

Author: mdo

docs/components/card.md

@@ -211,6 +211,89 @@ Add an optional header and/or footer within a card.
 </div>
 {% endexample %}
 
+## Heading nav
+
+- Custom card nav (full width)
+- Tabs
+- Pills
+- Alignment:
+  - left
+  - center
+  - right
+
+{% example html %}
+<div class="card text-xs-center">
+  <div class="card-header">
+    <ul class="nav card-nav">
+      <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 %}
+
+
+
+Or, use Bootstrap's nav pills or tabs to 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.

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,14 +87,48 @@
   @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);
   }
 }
 
 
+//
+// 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);
+}
+
+.card-nav {
+
+  .nav-item {
+    float: left;
+
+    + .nav-item {
+      margin-left: $nav-item-margin;
+    }
+  }
+
+}
+
 //
 // 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

@@ -474,7 +474,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;