0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/scss/_card.scss

192 lines
2.7 KiB
SCSS

//
// Base styles
//
.card {
position: relative;
padding: 1.25rem;
margin-bottom: 1.25rem;
border: .075rem solid #eee;
}
.card-title {
margin-top: 0;
margin-bottom: .75rem;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-actions {
.card-link + .card-link {
margin-left: .75rem;
}
}
.card-link:hover {
text-decoration: none;
}
//
// Optional textual caps
//
.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);
}
.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);
}
//
// Background variations
//
.card-primary {
background-color: $brand-primary;
border-color: $brand-primary;
}
.card-success {
background-color: $brand-success;
border-color: $brand-success;
}
.card-info {
background-color: $brand-info;
border-color: $brand-info;
}
.card-warning {
background-color: $brand-warning;
border-color: $brand-warning;
}
.card-danger {
background-color: $brand-danger;
border-color: $brand-danger;
}
//
// Inverse text within a card for use with dark backgrounds
//
.card-inverse {
.card-header,
.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:hover,
.card-link:focus {
color: #fff;
}
}
//
// Blockquote
//
.card-blockquote {
padding: 0;
margin-bottom: 0;
border-left: 0;
}
// Card image
.card-img {
margin: -1.325rem;
@include border-radius(.25rem);
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
// 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);
}
//
// Card set
//
.card-set {
display: table;
table-layout: fixed;
border-spacing: 1.25rem 0;
.card {
display: table-cell;
float: none;
max-width: none;
}
}
.card-set-wrapper {
margin-right: -1.25rem;
margin-left: -1.25rem;
}
//
// Card groups
//
.card-group {
display: table;
width: 100%;
table-layout: fixed;
.card {
display: table-cell;
float: none;
max-width: none;
+ .card {
margin-left: 0;
border-left: 0;
}
}
}
//
// Card
//
.card-columns {
column-count: 3;
column-gap: 1rem;
.card {
display: inline-block;
width: 100%; // Don't let them exceed the column width
}
}