src/scss/bootstrap-4.0.0-alpha.6/scss/_card.scss

   1 //
   2 // Base styles
   3 //
   4
   5 .card {
   6   position: relative;
   7   display: flex;
   8   flex-direction: column;
   9   background-color: $card-bg;
  10   border: $card-border-width solid $card-border-color;
  11   @include border-radius($card-border-radius);
  12 }
  13
  14 .card-block {
  15   // Enable `flex-grow: 1` for decks and groups so that card blocks take up
  16   // as much space as possible, ensuring footers are aligned to the bottom.
  17   flex: 1 1 auto;
  18   padding: $card-spacer-x;
  19 }
  20
  21 .card-title {
  22   margin-bottom: $card-spacer-y;
  23 }
  24
  25 .card-subtitle {
  26   margin-top: -($card-spacer-y / 2);
  27   margin-bottom: 0;
  28 }
  29
  30 .card-text:last-child {
  31   margin-bottom: 0;
  32 }
  33
  34 .card-link {
  35   @include hover {
  36     text-decoration: none;
  37   }
  38
  39   + .card-link {
  40     margin-left: $card-spacer-x;
  41   }
  42 }
  43
  44 .card {
  45   > .list-group:first-child {
  46     .list-group-item:first-child {
  47       @include border-top-radius($card-border-radius);
  48     }
  49   }
  50
  51   > .list-group:last-child {
  52     .list-group-item:last-child {
  53       @include border-bottom-radius($card-border-radius);
  54     }
  55   }
  56 }
  57
  58
  59 //
  60 // Optional textual caps
  61 //
  62
  63 .card-header {
  64   padding: $card-spacer-y $card-spacer-x;
  65   margin-bottom: 0; // Removes the default margin-bottom of <hN>
  66   background-color: $card-cap-bg;
  67   border-bottom: $card-border-width solid $card-border-color;
  68
  69   &:first-child {
  70     @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
  71   }
  72 }
  73
  74 .card-footer {
  75   padding: $card-spacer-y $card-spacer-x;
  76   background-color: $card-cap-bg;
  77   border-top: $card-border-width solid $card-border-color;
  78
  79   &:last-child {
  80     @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
  81   }
  82 }
  83
  84
  85 //
  86 // Header navs
  87 //
  88
  89 .card-header-tabs {
  90   margin-right: -($card-spacer-x / 2);
  91   margin-bottom: -$card-spacer-y;
  92   margin-left: -($card-spacer-x / 2);
  93   border-bottom: 0;
  94 }
  95
  96 .card-header-pills {
  97   margin-right: -($card-spacer-x / 2);
  98   margin-left: -($card-spacer-x / 2);
  99 }
 100
 101
 102 //
 103 // Background variations
 104 //
 105
 106 .card-primary {
 107   @include card-variant($brand-primary, $brand-primary);
 108 }
 109 .card-success {
 110   @include card-variant($brand-success, $brand-success);
 111 }
 112 .card-info {
 113   @include card-variant($brand-info, $brand-info);
 114 }
 115 .card-warning {
 116   @include card-variant($brand-warning, $brand-warning);
 117 }
 118 .card-danger {
 119   @include card-variant($brand-danger, $brand-danger);
 120 }
 121
 122 // Remove all backgrounds
 123 .card-outline-primary {
 124   @include card-outline-variant($btn-primary-bg);
 125 }
 126 .card-outline-secondary {
 127   @include card-outline-variant($btn-secondary-border);
 128 }
 129 .card-outline-info {
 130   @include card-outline-variant($btn-info-bg);
 131 }
 132 .card-outline-success {
 133   @include card-outline-variant($btn-success-bg);
 134 }
 135 .card-outline-warning {
 136   @include card-outline-variant($btn-warning-bg);
 137 }
 138 .card-outline-danger {
 139   @include card-outline-variant($btn-danger-bg);
 140 }
 141
 142 //
 143 // Inverse text within a card for use with dark backgrounds
 144 //
 145
 146 .card-inverse {
 147   @include card-inverse;
 148 }
 149
 150 //
 151 // Blockquote
 152 //
 153
 154 .card-blockquote {
 155   padding: 0;
 156   margin-bottom: 0;
 157   border-left: 0;
 158 }
 159
 160 // Card image
 161 .card-img {
 162   // margin: -1.325rem;
 163   @include border-radius($card-border-radius-inner);
 164 }
 165 .card-img-overlay {
 166   position: absolute;
 167   top: 0;
 168   right: 0;
 169   bottom: 0;
 170   left: 0;
 171   padding: $card-img-overlay-padding;
 172 }
 173
 174
 175
 176 // Card image caps
 177 .card-img-top {
 178   @include border-top-radius($card-border-radius-inner);
 179 }
 180 .card-img-bottom {
 181   @include border-bottom-radius($card-border-radius-inner);
 182 }
 183
 184
 185 // Card deck
 186
 187 @include media-breakpoint-up(sm) {
 188   .card-deck {
 189     display: flex;
 190     flex-flow: row wrap;
 191
 192     .card {
 193       display: flex;
 194       flex: 1 0 0;
 195       flex-direction: column;
 196
 197       // Selectively apply horizontal margins to cards to avoid doing the
 198       // negative margin dance like our grid. This differs from the grid
 199       // due to the use of margins as gutters instead of padding.
 200       &:not(:first-child) { margin-left: $card-deck-margin; }
 201       &:not(:last-child) { margin-right: $card-deck-margin; }
 202     }
 203   }
 204 }
 205
 206
 207 //
 208 // Card groups
 209 //
 210
 211 @include media-breakpoint-up(sm) {
 212   .card-group {
 213     display: flex;
 214     flex-flow: row wrap;
 215
 216     .card {
 217       flex: 1 0 0;
 218
 219       + .card {
 220         margin-left: 0;
 221         border-left: 0;
 222       }
 223
 224       // Handle rounded corners
 225       @if $enable-rounded {
 226         &:first-child {
 227           @include border-right-radius(0);
 228
 229           .card-img-top {
 230             border-top-right-radius: 0;
 231           }
 232           .card-img-bottom {
 233             border-bottom-right-radius: 0;
 234           }
 235         }
 236         &:last-child {
 237           @include border-left-radius(0);
 238
 239           .card-img-top {
 240             border-top-left-radius: 0;
 241           }
 242           .card-img-bottom {
 243             border-bottom-left-radius: 0;
 244           }
 245         }
 246
 247         &:not(:first-child):not(:last-child) {
 248           border-radius: 0;
 249
 250           .card-img-top,
 251           .card-img-bottom {
 252             border-radius: 0;
 253           }
 254         }
 255       }
 256     }
 257   }
 258 }
 259
 260
 261 //
 262 // Columns
 263 //
 264
 265 @include media-breakpoint-up(sm) {
 266   .card-columns {
 267     column-count: $card-columns-count;
 268     column-gap: $card-columns-gap;
 269
 270     .card {
 271       display: inline-block; // Don't let them vertically span multiple columns
 272       width: 100%; // Don't let their width change
 273       margin-bottom: $card-columns-margin;
 274     }
 275   }
 276 }