codekingpro/portable-devtools

1//2// Basic Bootstrap table3//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 padding31//32 33.table-sm {34  th,35  td {36    padding: $table-cell-padding-sm;37  }38}39 40 41// Border versions42//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-striping71//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 effect82//83// Placed here since it has to come after the potential zebra striping84 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 backgrounds96//97// Exact selectors below required to override `.table-striped` and prevent98// 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 styles108//109// Same table markup, but inverted color scheme: dark background and light text.110 111// stylelint-disable-next-line no-duplicate-selectors112.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 tables162//163// Generate series of `.table-responsive-*` classes for configuring the screen164// 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}186