csit.infra.dash/app/pal/static/sass/bootstrap/_tables.scss

   1 //
   2 // Basic Bootstrap table
   3 //
   4
   5 .table {
   6   --#{$prefix}table-color: #{$table-color};
   7   --#{$prefix}table-bg: #{$table-bg};
   8   --#{$prefix}table-border-color: #{$table-border-color};
   9   --#{$prefix}table-accent-bg: #{$table-accent-bg};
  10   --#{$prefix}table-striped-color: #{$table-striped-color};
  11   --#{$prefix}table-striped-bg: #{$table-striped-bg};
  12   --#{$prefix}table-active-color: #{$table-active-color};
  13   --#{$prefix}table-active-bg: #{$table-active-bg};
  14   --#{$prefix}table-hover-color: #{$table-hover-color};
  15   --#{$prefix}table-hover-bg: #{$table-hover-bg};
  16
  17   width: 100%;
  18   margin-bottom: $spacer;
  19   color: var(--#{$prefix}table-color);
  20   vertical-align: $table-cell-vertical-align;
  21   border-color: var(--#{$prefix}table-border-color);
  22
  23   // Target th & td
  24   // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
  25   // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
  26   // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
  27   // stylelint-disable-next-line selector-max-universal
  28   > :not(caption) > * > * {
  29     padding: $table-cell-padding-y $table-cell-padding-x;
  30     background-color: var(--#{$prefix}table-bg);
  31     border-bottom-width: $table-border-width;
  32     box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
  33   }
  34
  35   > tbody {
  36     vertical-align: inherit;
  37   }
  38
  39   > thead {
  40     vertical-align: bottom;
  41   }
  42 }
  43
  44 .table-group-divider {
  45   border-top: ($table-border-width * 2) solid $table-group-separator-color;
  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 // For rows
 105 .table-striped {
 106   > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
 107     --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
 108     color: var(--#{$prefix}table-striped-color);
 109   }
 110 }
 111
 112 // For columns
 113 .table-striped-columns {
 114   > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
 115     --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
 116     color: var(--#{$prefix}table-striped-color);
 117   }
 118 }
 119
 120 // Active table
 121 //
 122 // The `.table-active` class can be added to highlight rows or cells
 123
 124 .table-active {
 125   --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
 126   color: var(--#{$prefix}table-active-color);
 127 }
 128
 129 // Hover effect
 130 //
 131 // Placed here since it has to come after the potential zebra striping
 132
 133 .table-hover {
 134   > tbody > tr:hover > * {
 135     --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
 136     color: var(--#{$prefix}table-hover-color);
 137   }
 138 }
 139
 140
 141 // Table variants
 142 //
 143 // Table variants set the table cell backgrounds, border colors
 144 // and the colors of the striped, hovered & active tables
 145
 146 @each $color, $value in $table-variants {
 147   @include table-variant($color, $value);
 148 }
 149
 150 // Responsive tables
 151 //
 152 // Generate series of `.table-responsive-*` classes for configuring the screen
 153 // size of where your table will overflow.
 154
 155 @each $breakpoint in map-keys($grid-breakpoints) {
 156   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 157
 158   @include media-breakpoint-down($breakpoint) {
 159     .table-responsive#{$infix} {
 160       overflow-x: auto;
 161       -webkit-overflow-scrolling: touch;
 162     }
 163   }
 164 }