_tables.scss — VK Blocks 0.16.2

vk-blocks / lib / bootstrap / scss / _tables.scss

vk-blocks / lib / bootstrap / scss Last commit date

_tables.scss

186 lines

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(odd) {
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