portal-FE-common/src/styles/bootstrap/_tables.scss

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