[Summary view] [Print] [Text view]

   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    @include box-shadow($card-box-shadow);
  17  
  18    > hr {
  19      margin-right: 0;
  20      margin-left: 0;
  21    }
  22  
  23    > .list-group {
  24      border-top: inherit;
  25      border-bottom: inherit;
  26  
  27      &:first-child {
  28        border-top-width: 0;
  29        @include border-top-radius($card-inner-border-radius);
  30      }
  31  
  32      &:last-child  {
  33        border-bottom-width: 0;
  34        @include border-bottom-radius($card-inner-border-radius);
  35      }
  36    }
  37  
  38    // Due to specificity of the above selector (`.card > .list-group`), we must
  39    // use a child selector here to prevent double borders.
  40    > .card-header + .list-group,
  41    > .list-group + .card-footer {
  42      border-top: 0;
  43    }
  44  }
  45  
  46  .card-body {
  47    // Enable `flex-grow: 1` for decks and groups so that card blocks take up
  48    // as much space as possible, ensuring footers are aligned to the bottom.
  49    flex: 1 1 auto;
  50    padding: $card-spacer-y $card-spacer-x;
  51    color: $card-color;
  52  }
  53  
  54  .card-title {
  55    margin-bottom: $card-title-spacer-y;
  56  }
  57  
  58  .card-subtitle {
  59    margin-top: -$card-title-spacer-y * .5;
  60    margin-bottom: 0;
  61  }
  62  
  63  .card-text:last-child {
  64    margin-bottom: 0;
  65  }
  66  
  67  .card-link {
  68    &:hover {
  69      text-decoration: if($link-hover-decoration == underline, none, null);
  70    }
  71  
  72    + .card-link {
  73      margin-left: $card-spacer-x;
  74    }
  75  }
  76  
  77  //
  78  // Optional textual caps
  79  //
  80  
  81  .card-header {
  82    padding: $card-cap-padding-y $card-cap-padding-x;
  83    margin-bottom: 0; // Removes the default margin-bottom of <hN>
  84    color: $card-cap-color;
  85    background-color: $card-cap-bg;
  86    border-bottom: $card-border-width solid $card-border-color;
  87  
  88    &:first-child {
  89      @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
  90    }
  91  }
  92  
  93  .card-footer {
  94    padding: $card-cap-padding-y $card-cap-padding-x;
  95    color: $card-cap-color;
  96    background-color: $card-cap-bg;
  97    border-top: $card-border-width solid $card-border-color;
  98  
  99    &:last-child {
 100      @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
 101    }
 102  }
 103  
 104  
 105  //
 106  // Header navs
 107  //
 108  
 109  .card-header-tabs {
 110    margin-right: -$card-cap-padding-x * .5;
 111    margin-bottom: -$card-cap-padding-y;
 112    margin-left: -$card-cap-padding-x * .5;
 113    border-bottom: 0;
 114  
 115    @if $nav-tabs-link-active-bg != $card-bg {
 116      .nav-link.active {
 117        background-color: $card-bg;
 118        border-bottom-color: $card-bg;
 119      }
 120    }
 121  }
 122  
 123  .card-header-pills {
 124    margin-right: -$card-cap-padding-x * .5;
 125    margin-left: -$card-cap-padding-x * .5;
 126  }
 127  
 128  // Card image
 129  .card-img-overlay {
 130    position: absolute;
 131    top: 0;
 132    right: 0;
 133    bottom: 0;
 134    left: 0;
 135    padding: $card-img-overlay-padding;
 136    @include border-radius($card-inner-border-radius);
 137  }
 138  
 139  .card-img,
 140  .card-img-top,
 141  .card-img-bottom {
 142    width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
 143  }
 144  
 145  .card-img,
 146  .card-img-top {
 147    @include border-top-radius($card-inner-border-radius);
 148  }
 149  
 150  .card-img,
 151  .card-img-bottom {
 152    @include border-bottom-radius($card-inner-border-radius);
 153  }
 154  
 155  
 156  //
 157  // Card groups
 158  //
 159  
 160  .card-group {
 161    // The child selector allows nested `.card` within `.card-group`
 162    // to display properly.
 163    > .card {
 164      margin-bottom: $card-group-margin;
 165    }
 166  
 167    @include media-breakpoint-up(sm) {
 168      display: flex;
 169      flex-flow: row wrap;
 170      // The child selector allows nested `.card` within `.card-group`
 171      // to display properly.
 172      > .card {
 173        // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
 174        flex: 1 0 0%;
 175        margin-bottom: 0;
 176  
 177        + .card {
 178          margin-left: 0;
 179          border-left: 0;
 180        }
 181  
 182        // Handle rounded corners
 183        @if $enable-rounded {
 184          &:not(:last-child) {
 185            @include border-end-radius(0);
 186  
 187            .card-img-top,
 188            .card-header {
 189              // stylelint-disable-next-line property-disallowed-list
 190              border-top-right-radius: 0;
 191            }
 192            .card-img-bottom,
 193            .card-footer {
 194              // stylelint-disable-next-line property-disallowed-list
 195              border-bottom-right-radius: 0;
 196            }
 197          }
 198  
 199          &:not(:first-child) {
 200            @include border-start-radius(0);
 201  
 202            .card-img-top,
 203            .card-header {
 204              // stylelint-disable-next-line property-disallowed-list
 205              border-top-left-radius: 0;
 206            }
 207            .card-img-bottom,
 208            .card-footer {
 209              // stylelint-disable-next-line property-disallowed-list
 210              border-bottom-left-radius: 0;
 211            }
 212          }
 213        }
 214      }
 215    }
 216  }