PageRenderTime 21ms CodeModel.GetById 10ms app.highlight 7ms RepoModel.GetById 1ms app.codeStats 0ms

/glozzom/scss/bootstrap/_tables.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects
Sass | 180 lines | 115 code | 37 blank | 28 comment | 0 complexity | 2230a8924b714b0365c951a09144d277 MD5 | raw file
  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}