[Summary view] [Print] [Text view]

   1  //
   2  // Basic Bootstrap table
   3  //
   4  
   5  .table {
   6    --#{$variable-prefix}table-bg: #{$table-bg};
   7    --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
   8    --#{$variable-prefix}table-striped-color: #{$table-striped-color};
   9    --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
  10    --#{$variable-prefix}table-active-color: #{$table-active-color};
  11    --#{$variable-prefix}table-active-bg: #{$table-active-bg};
  12    --#{$variable-prefix}table-hover-color: #{$table-hover-color};
  13    --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
  14  
  15    width: 100%;
  16    margin-bottom: $spacer;
  17    color: $table-color;
  18    vertical-align: $table-cell-vertical-align;
  19    border-color: $table-border-color;
  20  
  21    // Target th & td
  22    // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
  23    // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
  24    // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
  25    // stylelint-disable-next-line selector-max-universal
  26    > :not(caption) > * > * {
  27      padding: $table-cell-padding-y $table-cell-padding-x;
  28      background-color: var(--#{$variable-prefix}table-bg);
  29      border-bottom-width: $table-border-width;
  30      box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
  31    }
  32  
  33    > tbody {
  34      vertical-align: inherit;
  35    }
  36  
  37    > thead {
  38      vertical-align: bottom;
  39    }
  40  
  41    // Highlight border color between thead, tbody and tfoot.
  42    > :not(:first-child) {
  43      border-top: (2 * $table-border-width) solid $table-group-separator-color;
  44    }
  45  }
  46  
  47  
  48  //
  49  // Change placement of captions with a class
  50  //
  51  
  52  .caption-top {
  53    caption-side: top;
  54  }
  55  
  56  
  57  //
  58  // Condensed table w/ half padding
  59  //
  60  
  61  .table-sm {
  62    // stylelint-disable-next-line selector-max-universal
  63    > :not(caption) > * > * {
  64      padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
  65    }
  66  }
  67  
  68  
  69  // Border versions
  70  //
  71  // Add or remove borders all around the table and between all the columns.
  72  //
  73  // When borders are added on all sides of the cells, the corners can render odd when
  74  // these borders do not have the same color or if they are semi-transparent.
  75  // Therefor we add top and border bottoms to the `tr`s and left and right borders
  76  // to the `td`s or `th`s
  77  
  78  .table-bordered {
  79    > :not(caption) > * {
  80      border-width: $table-border-width 0;
  81  
  82      // stylelint-disable-next-line selector-max-universal
  83      > * {
  84        border-width: 0 $table-border-width;
  85      }
  86    }
  87  }
  88  
  89  .table-borderless {
  90    // stylelint-disable-next-line selector-max-universal
  91    > :not(caption) > * > * {
  92      border-bottom-width: 0;
  93    }
  94  
  95    > :not(:first-child) {
  96      border-top-width: 0;
  97    }
  98  }
  99  
 100  // Zebra-striping
 101  //
 102  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 103  
 104  .table-striped {
 105    > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
 106      --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
 107      color: var(--#{$variable-prefix}table-striped-color);
 108    }
 109  }
 110  
 111  // Active table
 112  //
 113  // The `.table-active` class can be added to highlight rows or cells
 114  
 115  .table-active {
 116    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
 117    color: var(--#{$variable-prefix}table-active-color);
 118  }
 119  
 120  // Hover effect
 121  //
 122  // Placed here since it has to come after the potential zebra striping
 123  
 124  .table-hover {
 125    > tbody > tr:hover > * {
 126      --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
 127      color: var(--#{$variable-prefix}table-hover-color);
 128    }
 129  }
 130  
 131  
 132  // Table variants
 133  //
 134  // Table variants set the table cell backgrounds, border colors
 135  // and the colors of the striped, hovered & active tables
 136  
 137  @each $color, $value in $table-variants {
 138    @include table-variant($color, $value);
 139  }
 140  
 141  // Responsive tables
 142  //
 143  // Generate series of `.table-responsive-*` classes for configuring the screen
 144  // size of where your table will overflow.
 145  
 146  @each $breakpoint in map-keys($grid-breakpoints) {
 147    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 148  
 149    @include media-breakpoint-down($breakpoint) {
 150      .table-responsive#{$infix} {
 151        overflow-x: auto;
 152        -webkit-overflow-scrolling: touch;
 153      }
 154    }
 155  }