1 | //
|
---|
2 | // Basic Bootstrap table
|
---|
3 | //
|
---|
4 |
|
---|
5 | .table {
|
---|
6 | // Reset needed for nesting tables
|
---|
7 | --#{$prefix}table-color-type: initial;
|
---|
8 | --#{$prefix}table-bg-type: initial;
|
---|
9 | --#{$prefix}table-color-state: initial;
|
---|
10 | --#{$prefix}table-bg-state: initial;
|
---|
11 | // End of reset
|
---|
12 | --#{$prefix}table-color: #{$table-color};
|
---|
13 | --#{$prefix}table-bg: #{$table-bg};
|
---|
14 | --#{$prefix}table-border-color: #{$table-border-color};
|
---|
15 | --#{$prefix}table-accent-bg: #{$table-accent-bg};
|
---|
16 | --#{$prefix}table-striped-color: #{$table-striped-color};
|
---|
17 | --#{$prefix}table-striped-bg: #{$table-striped-bg};
|
---|
18 | --#{$prefix}table-active-color: #{$table-active-color};
|
---|
19 | --#{$prefix}table-active-bg: #{$table-active-bg};
|
---|
20 | --#{$prefix}table-hover-color: #{$table-hover-color};
|
---|
21 | --#{$prefix}table-hover-bg: #{$table-hover-bg};
|
---|
22 |
|
---|
23 | width: 100%;
|
---|
24 | margin-bottom: $spacer;
|
---|
25 | vertical-align: $table-cell-vertical-align;
|
---|
26 | border-color: var(--#{$prefix}table-border-color);
|
---|
27 |
|
---|
28 | // Target th & td
|
---|
29 | // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
|
---|
30 | // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
|
---|
31 | // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
|
---|
32 | // stylelint-disable-next-line selector-max-universal
|
---|
33 | > :not(caption) > * > * {
|
---|
34 | padding: $table-cell-padding-y $table-cell-padding-x;
|
---|
35 | // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
|
---|
36 | color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
|
---|
37 | background-color: var(--#{$prefix}table-bg);
|
---|
38 | border-bottom-width: $table-border-width;
|
---|
39 | box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
|
---|
40 | }
|
---|
41 |
|
---|
42 | > tbody {
|
---|
43 | vertical-align: inherit;
|
---|
44 | }
|
---|
45 |
|
---|
46 | > thead {
|
---|
47 | vertical-align: bottom;
|
---|
48 | }
|
---|
49 | }
|
---|
50 |
|
---|
51 | .table-group-divider {
|
---|
52 | border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
|
---|
53 | }
|
---|
54 |
|
---|
55 | //
|
---|
56 | // Change placement of captions with a class
|
---|
57 | //
|
---|
58 |
|
---|
59 | .caption-top {
|
---|
60 | caption-side: top;
|
---|
61 | }
|
---|
62 |
|
---|
63 |
|
---|
64 | //
|
---|
65 | // Condensed table w/ half padding
|
---|
66 | //
|
---|
67 |
|
---|
68 | .table-sm {
|
---|
69 | // stylelint-disable-next-line selector-max-universal
|
---|
70 | > :not(caption) > * > * {
|
---|
71 | padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
|
---|
72 | }
|
---|
73 | }
|
---|
74 |
|
---|
75 |
|
---|
76 | // Border versions
|
---|
77 | //
|
---|
78 | // Add or remove borders all around the table and between all the columns.
|
---|
79 | //
|
---|
80 | // When borders are added on all sides of the cells, the corners can render odd when
|
---|
81 | // these borders do not have the same color or if they are semi-transparent.
|
---|
82 | // Therefore we add top and border bottoms to the `tr`s and left and right borders
|
---|
83 | // to the `td`s or `th`s
|
---|
84 |
|
---|
85 | .table-bordered {
|
---|
86 | > :not(caption) > * {
|
---|
87 | border-width: $table-border-width 0;
|
---|
88 |
|
---|
89 | // stylelint-disable-next-line selector-max-universal
|
---|
90 | > * {
|
---|
91 | border-width: 0 $table-border-width;
|
---|
92 | }
|
---|
93 | }
|
---|
94 | }
|
---|
95 |
|
---|
96 | .table-borderless {
|
---|
97 | // stylelint-disable-next-line selector-max-universal
|
---|
98 | > :not(caption) > * > * {
|
---|
99 | border-bottom-width: 0;
|
---|
100 | }
|
---|
101 |
|
---|
102 | > :not(:first-child) {
|
---|
103 | border-top-width: 0;
|
---|
104 | }
|
---|
105 | }
|
---|
106 |
|
---|
107 | // Zebra-striping
|
---|
108 | //
|
---|
109 | // Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
---|
110 |
|
---|
111 | // For rows
|
---|
112 | .table-striped {
|
---|
113 | > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
|
---|
114 | --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
|
---|
115 | --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
|
---|
116 | }
|
---|
117 | }
|
---|
118 |
|
---|
119 | // For columns
|
---|
120 | .table-striped-columns {
|
---|
121 | > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
|
---|
122 | --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
|
---|
123 | --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
|
---|
124 | }
|
---|
125 | }
|
---|
126 |
|
---|
127 | // Active table
|
---|
128 | //
|
---|
129 | // The `.table-active` class can be added to highlight rows or cells
|
---|
130 |
|
---|
131 | .table-active {
|
---|
132 | --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
|
---|
133 | --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
|
---|
134 | }
|
---|
135 |
|
---|
136 | // Hover effect
|
---|
137 | //
|
---|
138 | // Placed here since it has to come after the potential zebra striping
|
---|
139 |
|
---|
140 | .table-hover {
|
---|
141 | > tbody > tr:hover > * {
|
---|
142 | --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
|
---|
143 | --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
|
---|
144 | }
|
---|
145 | }
|
---|
146 |
|
---|
147 |
|
---|
148 | // Table variants
|
---|
149 | //
|
---|
150 | // Table variants set the table cell backgrounds, border colors
|
---|
151 | // and the colors of the striped, hovered & active tables
|
---|
152 |
|
---|
153 | @each $color, $value in $table-variants {
|
---|
154 | @include table-variant($color, $value);
|
---|
155 | }
|
---|
156 |
|
---|
157 | // Responsive tables
|
---|
158 | //
|
---|
159 | // Generate series of `.table-responsive-*` classes for configuring the screen
|
---|
160 | // size of where your table will overflow.
|
---|
161 |
|
---|
162 | @each $breakpoint in map-keys($grid-breakpoints) {
|
---|
163 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
---|
164 |
|
---|
165 | @include media-breakpoint-down($breakpoint) {
|
---|
166 | .table-responsive#{$infix} {
|
---|
167 | overflow-x: auto;
|
---|
168 | -webkit-overflow-scrolling: touch;
|
---|
169 | }
|
---|
170 | }
|
---|
171 | }
|
---|