talos

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
}
186