mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 00:59:51 +02:00
convert to scss
This commit is contained in:
196
scss/_card.scss
Normal file
196
scss/_card.scss
Normal file
@@ -0,0 +1,196 @@
|
||||
//
|
||||
// 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 {
|
||||
border-left: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 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 {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
.card-set-wrapper {
|
||||
margin-left: -1.25rem;
|
||||
margin-right: -1.25rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card groups
|
||||
//
|
||||
|
||||
.card-group {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
.card {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
max-width: none;
|
||||
|
||||
+ .card {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card
|
||||
//
|
||||
|
||||
.card-columns {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
-webkit-column-gap: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
width: 100%; // Don't let them exceed the column width
|
||||
/*margin-bottom: 1rem;*/
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user