fuck around with card borders and more

diff --git a/docs/components/card.md b/docs/components/card.md
index 159fa42befbebc518aebc2e6b969287ca09003ef..28db0e3fabf9ecfa473a454586a712f279d47b06 100644 (file)
--- a/docs/components/card.md
+++ b/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.

diff --git a/scss/_card.scss b/scss/_card.scss
index 3982f6e8526fd7780aaa06fab8f89e83b3a104f8..e0d98d2762885fd6fd68b1917429bb438372f71a 100644 (file)
--- a/scss/_card.scss
+++ b/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,38 @@
 }
 
 
+//
+// 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
 //

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 5115e56fa2b35bc7b7a49609c3ae1157e735ad17..f00afd1f7a2ef62b858767095015005285fec754 100644 (file)
--- a/scss/_list-group.scss
+++ b/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;
-    }
-  }
 }
 
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 29fd7044eab284dd137836df73e57c89365a08f4..98c52c3e3e0418737b57fd9ff5fed61c0fb85806 100644 (file)
--- a/scss/_variables.scss
+++ b/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;