rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #18774 from twbs/v4-outline-cards

Browse Source 
v4: Rename .card-*-outline to .card-outline-*
This commit is contained in:
Mark Otto 2016-01-06 01:12:30 -08:00
commit 1997412bee
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/components/card.md
View File

@ -314,10 +314,10 @@ Cards include their own variant classes for quickly changing the `background-col
## Outline variants
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-*-outline` ones to style just the `border-color` of a card.
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
{% example html %}
<div class="card card-primary-outline text-xs-center">
<div class="card card-outline-primary text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -325,7 +325,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-secondary-outline text-xs-center">
<div class="card card-outline-secondary text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -333,7 +333,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-success-outline text-xs-center">
<div class="card card-outline-success text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -341,7 +341,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-info-outline text-xs-center">
<div class="card card-outline-info text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -349,7 +349,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-warning-outline text-xs-center">
<div class="card card-outline-warning text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -357,7 +357,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote>
</div>
</div>
<div class="card card-danger-outline text-xs-center">
<div class="card card-outline-danger text-xs-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

12
scss/_card.scss
View File

@ -112,22 +112,22 @@
}
// Remove all backgrounds
.card-primary-outline {
.card-outline-primary {
@include card-outline-variant($btn-primary-bg);
}
.card-secondary-outline {
.card-outline-secondary {
@include card-outline-variant($btn-secondary-border);
}
.card-info-outline {
.card-outline-info {
@include card-outline-variant($btn-info-bg);
}
.card-success-outline {
.card-outline-success {
@include card-outline-variant($btn-success-bg);
}
.card-warning-outline {
.card-outline-warning {
@include card-outline-variant($btn-warning-bg);
}
.card-danger-outline {
.card-outline-danger {
@include card-outline-variant($btn-danger-bg);
}