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