192 lines
2.7 KiB
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
|
|
}
|
|
}
|