static/scss/bootstrap-4.0.0-alpha.6/scss/mixins/_cards.scss

   1 // Card variants
   2
   3 @mixin card-variant($background, $border) {
   4   background-color: $background;
   5   border-color: $border;
   6
   7   .card-header,
   8   .card-footer {
   9     background-color: transparent;
  10   }
  11 }
  12
  13 @mixin card-outline-variant($color) {
  14   background-color: transparent;
  15   border-color: $color;
  16 }
  17
  18 //
  19 // Inverse text within a card for use with dark backgrounds
  20 //
  21
  22 @mixin card-inverse {
  23   color: rgba(255,255,255,.65);
  24
  25   .card-header,
  26   .card-footer {
  27     background-color: transparent;
  28     border-color: rgba(255,255,255,.2);
  29   }
  30   .card-header,
  31   .card-footer,
  32   .card-title,
  33   .card-blockquote {
  34     color: #fff;
  35   }
  36   .card-link,
  37   .card-text,
  38   .card-subtitle,
  39   .card-blockquote .blockquote-footer {
  40     color: rgba(255,255,255,.65);
  41   }
  42   .card-link {
  43     @include hover-focus {
  44       color: $card-link-hover-color;
  45     }
  46   }
  47 }