git.roojs.org Git - roojs1/blob - scss/bootstrap/_tables.scss

   1 //
   2 // Basic Bootstrap table
   3 //
   4
   5 .table {
   6   width: 100%;
   7   margin-bottom: $spacer;
   8   color: $table-color;
   9   background-color: $table-bg; // Reset for nesting within parents with `background-color`.
  10
  11   th,
  12   td {
  13     padding: $table-cell-padding;
  14     vertical-align: top;
  15     border-top: $table-border-width solid $table-border-color;
  16   }
  17
  18   thead th {
  19     vertical-align: bottom;
  20     border-bottom: (2 * $table-border-width) solid $table-border-color;
  21   }
  22
  23   tbody + tbody {
  24     border-top: (2 * $table-border-width) solid $table-border-color;
  25   }
  26 }
  27
  28
  29 //
  30 // Condensed table w/ half padding
  31 //
  32
  33 .table-sm {
  34   th,
  35   td {
  36     padding: $table-cell-padding-sm;
  37   }
  38 }
  39
  40
  41 // Border versions
  42 //
  43 // Add or remove borders all around the table and between all the columns.
  44
  45 .table-bordered {
  46   border: $table-border-width solid $table-border-color;
  47
  48   th,
  49   td {
  50     border: $table-border-width solid $table-border-color;
  51   }
  52
  53   thead {
  54     th,
  55     td {
  56       border-bottom-width: 2 * $table-border-width;
  57     }
  58   }
  59 }
  60
  61 .table-borderless {
  62   th,
  63   td,
  64   thead th,
  65   tbody + tbody {
  66     border: 0;
  67   }
  68 }
  69
  70 // Zebra-striping
  71 //
  72 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  73
  74 .table-striped {
  75   tbody tr:nth-of-type(#{$table-striped-order}) {
  76     background-color: $table-accent-bg;
  77   }
  78 }
  79
  80
  81 // Hover effect
  82 //
  83 // Placed here since it has to come after the potential zebra striping
  84
  85 .table-hover {
  86   tbody tr {
  87     @include hover() {
  88       color: $table-hover-color;
  89       background-color: $table-hover-bg;
  90     }
  91   }
  92 }
  93
  94
  95 // Table backgrounds
  96 //
  97 // Exact selectors below required to override `.table-striped` and prevent
  98 // inheritance to nested tables.
  99
 100 @each $color, $value in $theme-colors {
 101   @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
 102 }
 103
 104 @include table-row-variant(active, $table-active-bg);
 105
 106
 107 // Dark styles
 108 //
 109 // Same table markup, but inverted color scheme: dark background and light text.
 110
 111 // stylelint-disable-next-line no-duplicate-selectors
 112 .table {
 113   .thead-dark {
 114     th {
 115       color: $table-dark-color;
 116       background-color: $table-dark-bg;
 117       border-color: $table-dark-border-color;
 118     }
 119   }
 120
 121   .thead-light {
 122     th {
 123       color: $table-head-color;
 124       background-color: $table-head-bg;
 125       border-color: $table-border-color;
 126     }
 127   }
 128 }
 129
 130 .table-dark {
 131   color: $table-dark-color;
 132   background-color: $table-dark-bg;
 133
 134   th,
 135   td,
 136   thead th {
 137     border-color: $table-dark-border-color;
 138   }
 139
 140   &.table-bordered {
 141     border: 0;
 142   }
 143
 144   &.table-striped {
 145     tbody tr:nth-of-type(#{$table-striped-order}) {
 146       background-color: $table-dark-accent-bg;
 147     }
 148   }
 149
 150   &.table-hover {
 151     tbody tr {
 152       @include hover() {
 153         color: $table-dark-hover-color;
 154         background-color: $table-dark-hover-bg;
 155       }
 156     }
 157   }
 158 }
 159
 160
 161 // Responsive tables
 162 //
 163 // Generate series of `.table-responsive-*` classes for configuring the screen
 164 // size of where your table will overflow.
 165
 166 .table-responsive {
 167   @each $breakpoint in map-keys($grid-breakpoints) {
 168     $next: breakpoint-next($breakpoint, $grid-breakpoints);
 169     $infix: breakpoint-infix($next, $grid-breakpoints);
 170
 171     &#{$infix} {
 172       @include media-breakpoint-down($breakpoint) {
 173         display: block;
 174         width: 100%;
 175         overflow-x: auto;
 176         -webkit-overflow-scrolling: touch;
 177
 178         // Prevent double border on horizontal scroll due to use of `display: block;`
 179         > .table-bordered {
 180           border: 0;
 181         }
 182       }
 183     }
 184   }
 185 }