// // 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 { @include 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 { @include hover-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 } }