diff options
| -rw-r--r-- | docs/components/card.md | 83 | ||||
| -rw-r--r-- | scss/_card.scss | 44 | ||||
| -rw-r--r-- | scss/_list-group.scss | 13 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 |
4 files changed, 125 insertions, 17 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index 159fa42be..28db0e3fa 100644 --- 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 3982f6e85..e0d98d276 100644 --- 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); @@ -92,6 +98,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 5115e56fa..f00afd1f7 100644 --- 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 29fd7044e..98c52c3e3 100644 --- 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; |