mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 09:41:11 +00:00
Code Issues Projects Releases Wiki Activity

add variant mixins

Browse Source
This commit is contained in:
Bass Jobsen 2015-10-29 13:34:41 +01:00
parent 53dddc6ed4
commit 2e92360b8b
1 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
scss/_card.scss
View File

@ -92,55 +92,49 @@
// //
.card-primary { .card-primary {
background-color: $brand-primary; @include card-variant($brand-primary, $brand-primary);
border-color: $brand-primary;
} }
.card-success { .card-success {
background-color: $brand-success; @include card-variant($brand-success, $brand-success);
border-color: $brand-success;
} }
.card-info { .card-info {
background-color: $brand-info; @include card-variant($brand-info, $brand-info);
border-color: $brand-info;
} }
.card-warning { .card-warning {
background-color: $brand-warning; @include card-variant($brand-warning, $brand-warning);
border-color: $brand-warning;
} }
.card-danger { .card-danger {
background-color: $brand-danger; @include card-variant($brand-danger, $brand-danger);
border-color: $brand-danger;
} }
// Remove all backgrounds
.card-primary-outline {
@include card-outline-variant($btn-primary-bg);
}
.card-secondary-outline {
@include card-outline-variant($btn-secondary-border);
}
.card-info-outline {
@include card-outline-variant($btn-info-bg);
}
.card-success-outline {
@include card-outline-variant($btn-success-bg);
}
.card-warning-outline {
@include card-outline-variant($btn-warning-bg);
}
.card-danger-outline {
@include card-outline-variant($btn-danger-bg);
}
// //
// Inverse text within a card for use with dark backgrounds // Inverse text within a card for use with dark backgrounds
// //
.card-inverse { .card-inverse {
.card-header, @include card-inverse;
.card-footer {
border-bottom: .075rem solid rgba(255,255,255,.2);
}
.card-header,
.card-footer,
.card-title,
.card-blockquote {
color: #fff;
}
.card-link,
.card-text,
.card-blockquote > footer {
color: rgba(255,255,255,.65);
}
.card-link {
@include hover-focus {
color: #fff;
}
}
} }
// //
// Blockquote // Blockquote
// //