rewrite much of cards and the docs
This commit is contained in:
Mark Otto
parent
e07cebc90e
commit
74d17ab7a0
|
|
@ -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 %}
|
||||
|
||||
## Content types
|
||||
|
||||
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.
|
||||
|
||||
{% 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">
|
||||
<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>
|
||||
{% 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>
|
||||
{% 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 custom styles, our predefined grid classes, or our grid mixins.
|
||||
|
||||
Using the card size variations:
|
||||
|
||||
{% 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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
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,47 +305,24 @@ 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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Sets
|
||||
|
||||
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`.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-set-wrapper">
|
||||
<div class="card-set">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
|
||||
<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 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">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 class="card">
|
||||
<img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
|
||||
</div>
|
||||
<div class="card">
|
||||
<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 class="card">
|
||||
<img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
|
||||
</div>
|
||||
<div class="card">
|
||||
<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>
|
||||
|
|
@ -290,6 +331,41 @@ Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapper
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Decks
|
||||
|
||||
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-deck-wrapper">
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
<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/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/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>
|
||||
{% endexample %}
|
||||
|
||||
## Columns
|
||||
|
||||
Cards can be organized into columns by wrapping a group with `.card-columns`.
|
||||
|
|
|
|||
170
scss/_card.scss
170
scss/_card.scss
|
|
@ -2,28 +2,68 @@
|
|||
// 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-subtitle {
|
||||
margin-top: -($card-spacer-y / 2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.card-actions {
|
||||
.card-link + .card-link {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// .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;
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-rounded {
|
||||
.card {
|
||||
> .list-group:first-child {
|
||||
.list-group-item:first-child {
|
||||
border-radius: $card-border-radius $card-border-radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .list-group:last-child {
|
||||
.list-group-item:last-child {
|
||||
border-radius: 0 0 $card-border-radius $card-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -32,33 +72,21 @@
|
|||
//
|
||||
|
||||
.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);
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
border-bottom: $card-border-width solid #eee;
|
||||
|
||||
&:first-child {
|
||||
@include border-radius($card-border-radius $card-border-radius 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);
|
||||
}
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
border-top: $card-border-width solid #eee;
|
||||
|
||||
|
||||
//
|
||||
// Sizing variations
|
||||
//
|
||||
|
||||
.card-sm {
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.card-md {
|
||||
width: 30rem;
|
||||
}
|
||||
|
||||
.card-lg {
|
||||
width: 45rem;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
} @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-set-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
//
|
||||
|
|
|
|||
Loading…
Reference in New Issue