scss/bootstrap/_card.scss

0001 //
0002 // Base styles
0003 //
0004
0005 .card {
0006   position: relative;
0007   display: flex;
0008   flex-direction: column;
0009   min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
0010   height: $card-height;
0011   word-wrap: break-word;
0012   background-color: $card-bg;
0013   background-clip: border-box;
0014   border: $card-border-width solid $card-border-color;
0015   @include border-radius($card-border-radius);
0016
0017   > hr {
0018     margin-right: 0;
0019     margin-left: 0;
0020   }
0021
0022   > .list-group {
0023     border-top: inherit;
0024     border-bottom: inherit;
0025
0026     &:first-child {
0027       border-top-width: 0;
0028       @include border-top-radius($card-inner-border-radius);
0029     }
0030
0031     &:last-child  {
0032       border-bottom-width: 0;
0033       @include border-bottom-radius($card-inner-border-radius);
0034     }
0035   }
0036
0037   // Due to specificity of the above selector (`.card > .list-group`), we must
0038   // use a child selector here to prevent double borders.
0039   > .card-header + .list-group,
0040   > .list-group + .card-footer {
0041     border-top: 0;
0042   }
0043 }
0044
0045 .card-body {
0046   // Enable `flex-grow: 1` for decks and groups so that card blocks take up
0047   // as much space as possible, ensuring footers are aligned to the bottom.
0048   flex: 1 1 auto;
0049   padding: $card-spacer-y $card-spacer-x;
0050   color: $card-color;
0051 }
0052
0053 .card-title {
0054   margin-bottom: $card-title-spacer-y;
0055 }
0056
0057 .card-subtitle {
0058   margin-top: -$card-title-spacer-y / 2;
0059   margin-bottom: 0;
0060 }
0061
0062 .card-text:last-child {
0063   margin-bottom: 0;
0064 }
0065
0066 .card-link {
0067   &:hover {
0068     text-decoration: none;
0069   }
0070
0071   + .card-link {
0072     margin-left: $card-spacer-x #{"/* rtl:ignore */"};
0073   }
0074 }
0075
0076 //
0077 // Optional textual caps
0078 //
0079
0080 .card-header {
0081   padding: $card-cap-padding-y $card-cap-padding-x;
0082   margin-bottom: 0; // Removes the default margin-bottom of <hN>
0083   color: $card-cap-color;
0084   background-color: $card-cap-bg;
0085   border-bottom: $card-border-width solid $card-border-color;
0086
0087   &:first-child {
0088     @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
0089   }
0090 }
0091
0092 .card-footer {
0093   padding: $card-cap-padding-y $card-cap-padding-x;
0094   color: $card-cap-color;
0095   background-color: $card-cap-bg;
0096   border-top: $card-border-width solid $card-border-color;
0097
0098   &:last-child {
0099     @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
0100   }
0101 }
0102
0103
0104 //
0105 // Header navs
0106 //
0107
0108 .card-header-tabs {
0109   margin-right: -$card-cap-padding-x / 2;
0110   margin-bottom: -$card-cap-padding-y;
0111   margin-left: -$card-cap-padding-x / 2;
0112   border-bottom: 0;
0113
0114   @if $nav-tabs-link-active-bg != $card-bg {
0115     .nav-link.active {
0116       background-color: $card-bg;
0117       border-bottom-color: $card-bg;
0118     }
0119   }
0120 }
0121
0122 .card-header-pills {
0123   margin-right: -$card-cap-padding-x / 2;
0124   margin-left: -$card-cap-padding-x / 2;
0125 }
0126
0127 // Card image
0128 .card-img-overlay {
0129   position: absolute;
0130   top: 0;
0131   right: 0;
0132   bottom: 0;
0133   left: 0;
0134   padding: $card-img-overlay-padding;
0135   @include border-radius($card-inner-border-radius);
0136 }
0137
0138 .card-img,
0139 .card-img-top,
0140 .card-img-bottom {
0141   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
0142 }
0143
0144 .card-img,
0145 .card-img-top {
0146   @include border-top-radius($card-inner-border-radius);
0147 }
0148
0149 .card-img,
0150 .card-img-bottom {
0151   @include border-bottom-radius($card-inner-border-radius);
0152 }
0153
0154
0155 //
0156 // Card groups
0157 //
0158
0159 .card-group {
0160   // The child selector allows nested `.card` within `.card-group`
0161   // to display properly.
0162   > .card {
0163     margin-bottom: $card-group-margin;
0164   }
0165
0166   @include media-breakpoint-up(sm) {
0167     display: flex;
0168     flex-flow: row wrap;
0169     // The child selector allows nested `.card` within `.card-group`
0170     // to display properly.
0171     > .card {
0172       // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
0173       flex: 1 0 0%;
0174       margin-bottom: 0;
0175
0176       + .card {
0177         margin-left: 0;
0178         border-left: 0;
0179       }
0180
0181       // Handle rounded corners
0182       @if $enable-rounded {
0183         &:not(:last-child) {
0184           @include border-end-radius(0);
0185
0186           .card-img-top,
0187           .card-header {
0188             // stylelint-disable-next-line property-disallowed-list
0189             border-top-right-radius: 0;
0190           }
0191           .card-img-bottom,
0192           .card-footer {
0193             // stylelint-disable-next-line property-disallowed-list
0194             border-bottom-right-radius: 0;
0195           }
0196         }
0197
0198         &:not(:first-child) {
0199           @include border-start-radius(0);
0200
0201           .card-img-top,
0202           .card-header {
0203             // stylelint-disable-next-line property-disallowed-list
0204             border-top-left-radius: 0;
0205           }
0206           .card-img-bottom,
0207           .card-footer {
0208             // stylelint-disable-next-line property-disallowed-list
0209             border-bottom-left-radius: 0;
0210           }
0211         }
0212       }
0213     }
0214   }
0215 }