css/bootstrap/_card.scss

   1 //
   2 // Base styles
   3 //
   4
   5 .card {
   6   position: relative;
   7   display: flex;
   8   flex-direction: column;
   9   min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
  10   height: $card-height;
  11   word-wrap: break-word;
  12   background-color: $card-bg;
  13   background-clip: border-box;
  14   border: $card-border-width solid $card-border-color;
  15   @include border-radius($card-border-radius);
  16
  17   > hr {
  18     margin-right: 0;
  19     margin-left: 0;
  20   }
  21
  22   > .list-group {
  23     border-top: inherit;
  24     border-bottom: inherit;
  25
  26     &:first-child {
  27       border-top-width: 0;
  28       @include border-top-radius($card-inner-border-radius);
  29     }
  30
  31     &:last-child  {
  32       border-bottom-width: 0;
  33       @include border-bottom-radius($card-inner-border-radius);
  34     }
  35   }
  36
  37   // Due to specificity of the above selector (`.card > .list-group`), we must
  38   // use a child selector here to prevent double borders.
  39   > .card-header + .list-group,
  40   > .list-group + .card-footer {
  41     border-top: 0;
  42   }
  43 }
  44
  45 .card-body {
  46   // Enable `flex-grow: 1` for decks and groups so that card blocks take up
  47   // as much space as possible, ensuring footers are aligned to the bottom.
  48   flex: 1 1 auto;
  49   // Workaround for the image size bug in IE
  50   // See: https://github.com/twbs/bootstrap/pull/28855
  51   min-height: 1px;
  52   padding: $card-spacer-x;
  53   color: $card-color;
  54 }
  55
  56 .card-title {
  57   margin-bottom: $card-spacer-y;
  58 }
  59
  60 .card-subtitle {
  61   margin-top: -$card-spacer-y * .5;
  62   margin-bottom: 0;
  63 }
  64
  65 .card-text:last-child {
  66   margin-bottom: 0;
  67 }
  68
  69 .card-link {
  70   @include hover() {
  71     text-decoration: none;
  72   }
  73
  74   + .card-link {
  75     margin-left: $card-spacer-x;
  76   }
  77 }
  78
  79 //
  80 // Optional textual caps
  81 //
  82
  83 .card-header {
  84   //padding: $card-spacer-y $card-spacer-x;
  85   padding: $card-spacer-yt $card-spacer-x $card-spacer-yb $card-spacer-x; // Nick
  86   margin-bottom: 0; // Removes the default margin-bottom of <hN>
  87   color: $card-cap-color;
  88   background-color: $card-cap-bg;
  89   border-bottom: $card-border-width solid $card-border-color;
  90
  91   &:first-child {
  92     @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
  93   }
  94 }
  95
  96 .card-footer {
  97   //padding: $card-spacer-y $card-spacer-x;
  98   padding: $card-spacer-yt $card-spacer-x $card-spacer-yb $card-spacer-x; // Nick
  99   color: $card-cap-color;
 100   background-color: $card-cap-bg;
 101   border-top: $card-border-width solid $card-border-color;
 102
 103   &:last-child {
 104     @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
 105   }
 106 }
 107
 108
 109 //
 110 // Header navs
 111 //
 112
 113 .card-header-tabs {
 114   margin-right: -$card-spacer-x * .5;
 115   margin-bottom: -$card-spacer-y;
 116   margin-left: -$card-spacer-x * .5;
 117   border-bottom: 0;
 118 }
 119
 120 .card-header-pills {
 121   margin-right: -$card-spacer-x * .5;
 122   margin-left: -$card-spacer-x * .5;
 123 }
 124
 125 // Card image
 126 .card-img-overlay {
 127   position: absolute;
 128   top: 0;
 129   right: 0;
 130   bottom: 0;
 131   left: 0;
 132   padding: $card-img-overlay-padding;
 133   @include border-radius($card-inner-border-radius);
 134 }
 135
 136 .card-img,
 137 .card-img-top,
 138 .card-img-bottom {
 139   flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
 140   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
 141 }
 142
 143 .card-img,
 144 .card-img-top {
 145   @include border-top-radius($card-inner-border-radius);
 146 }
 147
 148 .card-img,
 149 .card-img-bottom {
 150   @include border-bottom-radius($card-inner-border-radius);
 151 }
 152
 153
 154 // Card deck
 155
 156 .card-deck {
 157   .card {
 158     margin-bottom: $card-deck-margin;
 159   }
 160
 161   @include media-breakpoint-up(sm) {
 162     display: flex;
 163     flex-flow: row wrap;
 164     margin-right: -$card-deck-margin;
 165     margin-left: -$card-deck-margin;
 166
 167     .card {
 168       // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
 169       flex: 1 0 0%;
 170       margin-right: $card-deck-margin;
 171       margin-bottom: 0; // Override the default
 172       margin-left: $card-deck-margin;
 173     }
 174   }
 175 }
 176
 177
 178 //
 179 // Card groups
 180 //
 181
 182 .card-group {
 183   // The child selector allows nested `.card` within `.card-group`
 184   // to display properly.
 185   > .card {
 186     margin-bottom: $card-group-margin;
 187   }
 188
 189   @include media-breakpoint-up(sm) {
 190     display: flex;
 191     flex-flow: row wrap;
 192     // The child selector allows nested `.card` within `.card-group`
 193     // to display properly.
 194     > .card {
 195       // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
 196       flex: 1 0 0%;
 197       margin-bottom: 0;
 198
 199       + .card {
 200         margin-left: 0;
 201         border-left: 0;
 202       }
 203
 204       // Handle rounded corners
 205       @if $enable-rounded {
 206         &:not(:last-child) {
 207           @include border-right-radius(0);
 208
 209           .card-img-top,
 210           .card-header {
 211             // stylelint-disable-next-line property-disallowed-list
 212             border-top-right-radius: 0;
 213           }
 214           .card-img-bottom,
 215           .card-footer {
 216             // stylelint-disable-next-line property-disallowed-list
 217             border-bottom-right-radius: 0;
 218           }
 219         }
 220
 221         &:not(:first-child) {
 222           @include border-left-radius(0);
 223
 224           .card-img-top,
 225           .card-header {
 226             // stylelint-disable-next-line property-disallowed-list
 227             border-top-left-radius: 0;
 228           }
 229           .card-img-bottom,
 230           .card-footer {
 231             // stylelint-disable-next-line property-disallowed-list
 232             border-bottom-left-radius: 0;
 233           }
 234         }
 235       }
 236     }
 237   }
 238 }
 239
 240
 241 //
 242 // Columns
 243 //
 244
 245 .card-columns {
 246   .card {
 247     margin-bottom: $card-columns-margin;
 248   }
 249
 250   @include media-breakpoint-up(sm) {
 251     column-count: $card-columns-count;
 252     column-gap: $card-columns-gap;
 253     orphans: 1;
 254     widows: 1;
 255
 256     .card {
 257       display: inline-block; // Don't let them vertically span multiple columns
 258       width: 100%; // Don't let their width change
 259     }
 260   }
 261 }
 262
 263
 264 //
 265 // Accordion
 266 //
 267
 268 .accordion {
 269   overflow-anchor: none;
 270
 271   > .card {
 272     overflow: hidden;
 273
 274     &:not(:last-of-type) {
 275       border-bottom: 0;
 276       @include border-bottom-radius(0);
 277     }
 278
 279     &:not(:first-of-type) {
 280       @include border-top-radius(0);
 281     }
 282
 283     > .card-header {
 284       @include border-radius(0);
 285       margin-bottom: -$card-border-width;
 286     }
 287   }
 288 }