diff options
Diffstat (limited to 'src/sass/bootstrap4/_card.scss')
| -rw-r--r-- | src/sass/bootstrap4/_card.scss | 292 |
1 files changed, 292 insertions, 0 deletions
diff --git a/src/sass/bootstrap4/_card.scss b/src/sass/bootstrap4/_card.scss new file mode 100644 index 0000000..ecd797e --- /dev/null +++ b/src/sass/bootstrap4/_card.scss @@ -0,0 +1,292 @@ +// +// Base styles +// + +.card { + position: relative; + display: block; + margin-bottom: $card-spacer-y; + background-color: $card-bg; + border: $card-border-width solid $card-border-color; + @include border-radius($card-border-radius); +} + +.card-block { + padding: $card-spacer-x; +} + +.card-title { + margin-bottom: $card-spacer-y; +} + +.card-subtitle { + margin-top: -($card-spacer-y / 2); + margin-bottom: 0; +} + +.card-text:last-child { + margin-bottom: 0; +} + +// .card-actions { +// padding: $card-spacer-y $card-spacer-x; + +// .card-link + .card-link { +// margin-left: $card-spacer-x; +// } +// } + +.card-link { + @include hover { + text-decoration: none; + } + + + .card-link { + margin-left: $card-spacer-x; + } +} + +@if $enable-rounded { + .card { + > .list-group:first-child { + .list-group-item:first-child { + border-radius: $card-border-radius $card-border-radius 0 0; + } + } + + > .list-group:last-child { + .list-group-item:last-child { + border-radius: 0 0 $card-border-radius $card-border-radius; + } + } + } +} + + +// +// Optional textual caps +// + +.card-header { + padding: $card-spacer-y $card-spacer-x; + background-color: $card-cap-bg; + border-bottom: $card-border-width solid $card-border-color; + + &:first-child { + @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); + } +} + +.card-footer { + padding: $card-spacer-y $card-spacer-x; + background-color: $card-cap-bg; + border-top: $card-border-width solid $card-border-color; + + &:last-child { + @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); + } +} + + +// +// Background variations +// + +.card-primary { + @include card-variant($brand-primary, $brand-primary); +} +.card-success { + @include card-variant($brand-success, $brand-success); +} +.card-info { + @include card-variant($brand-info, $brand-info); +} +.card-warning { + @include card-variant($brand-warning, $brand-warning); +} +.card-danger { + @include card-variant($brand-danger, $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 +// + +.card-inverse { + @include card-inverse; +} + +// +// 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 { + @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); +} +.card-img-bottom { + @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); +} + + +// +// Card set +// + +@if $enable-flex { + @include media-breakpoint-up(sm) { + .card-deck { + display: flex; + flex-flow: row wrap; + margin-right: -.625rem; + margin-left: -.625rem; + + .card { + flex: 1 0 0; + margin-right: .625rem; + margin-left: .625rem; + } + } + } +} @else { + @include media-breakpoint-up(sm) { + .card-deck { + display: table; + table-layout: fixed; + border-spacing: 1.25rem 0; + + .card { + display: table-cell; + width: 1%; + vertical-align: top; + } + } + .card-deck-wrapper { + margin-right: -1.25rem; + margin-left: -1.25rem; + } + } +} + +// +// Card groups +// + +@include media-breakpoint-up(sm) { + .card-group { + @if $enable-flex { + display: flex; + flex-flow: row wrap; + } @else { + display: table; + width: 100%; + table-layout: fixed; + } + + .card { + @if $enable-flex { + flex: 1 0 0; + } @else { + display: table-cell; + vertical-align: top; + } + + + .card { + margin-left: 0; + border-left: 0; + } + + // Handle rounded corners + @if $enable-rounded { + &:first-child { + @include border-right-radius(0); + + .card-img-top { + border-top-right-radius: 0; + } + .card-img-bottom { + border-bottom-right-radius: 0; + } + } + &:last-child { + @include border-left-radius(0); + + .card-img-top { + border-top-left-radius: 0; + } + .card-img-bottom { + border-bottom-left-radius: 0; + } + } + + &:not(:first-child):not(:last-child) { + border-radius: 0; + + .card-img-top, + .card-img-bottom { + border-radius: 0; + } + } + } + } + } +} + + +// +// Card +// + +@include media-breakpoint-up(sm) { + .card-columns { + column-count: 3; + column-gap: 1.25rem; + + .card { + display: inline-block; + width: 100%; // Don't let them exceed the column width + } + } +} |