source: css/mini/_table.scss@ 5c9a606

Last change on this file since 5c9a606 was 5c9a606, checked in by w96k <w96k.ru@…>, on May 5, 2019 at 2:16:42 AM

Delete Hugo; Add basic haunt blog

  • Property mode set to 100644
File size: 12.2 KB
Line 
1/*
2 Definitions for the responsive table component.
3*/
4// The tables use the common table elements and syntax - <tfoot> is not supported.
5$table-mobile-breakpoint: 768px !default; // Breakpoint for <table> mobile view.
6$table-max-height: 400px !default; // Maximum height of <table> elements (non-horizontal).
7$table-caption-font-size: 1.5rem !default; // Font size for <caption> elements.
8$table-mobile-card-label: 'data-label' !default; // Attribute used to replace column headers in mobile view.
9$table-mobile-label-font-weight: 600 !default; // Font weight for column header labels in mobile view.
10$table-border-color: #aaa !default; // Border color for <table> elements.
11$table-border-separator-color: #666 !default; // Border color for the border between <thead> and <tbody>.
12$table-th-back-color: #e6e6e6 !default; // Background color for <th> elements.
13$table-th-fore-color: #111 !default; // Text color for <th> elements.
14$table-td-back-color: #f8f8f8 !default; // Background color for <td> elements.
15$table-td-fore-color: #111 !default; // Text color for <td> elements.
16$_include-horizontal-table: true !default; // [Hidden] Flag for horizontal tables (`true`/`false`).
17$table-horizontal-name: 'horizontal' !default; // Class name for horizontal <table> elements.
18$_include-striped-table: true !default; // [Hidden] Flag for striped tables.
19$table-striped-name: 'striped' !default; // Class name for striped <table> elements.
20$table-td-alt-back-color: #eee !default; // Alternative background color for <td> elements in striped tables.
21$_include-hoverable-table: true !default; // [Hidden] Flag for striped tables.
22$table-hoverable-name: 'hoverable' !default; // Class name for hoverable <table> elements.
23$table-td-hover-back-color: #90caf9 !default; // Hover background color for <td> elements in hoverable tables.
24// CSS variable name definitions [exercise caution if modifying these]
25$table-border-color-var: '--table-border-color' !default;
26$table-border-separator-color-var: '--table-border-separator-color' !default;
27$table-th-back-color-var: '--table-head-back-color' !default;
28$table-th-fore-color-var: '--table-head-fore-color' !default;
29$table-td-back-color-var: '--table-body-back-color' !default;
30$table-td-fore-color-var: '--table-body-fore-color' !default;
31$table-td-alt-back-color-var: '--table-body-alt-back-color' !default;
32$table-td-hover-back-color-var: '--table-body-hover-back-color' !default;
33// == Uncomment below code if this module is used on its own ==
34//
35// $universal-margin: 0.5rem !default; // Universal margin for the most elements
36// $universal-padding: 0.5rem !default; // Universal padding for the most elements
37// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
38// $universal-box-shadow: none !default; // Universal box-shadow for most elements
39// $universal-margin-var: '--universal-margin' !default;
40// $universal-padding-var: '--universal-padding' !default;
41// $universal-border-radius-var: '--universal-border-radius' !default;
42// $universal-box-shadow-var: '--universal-box-shadow' !default;
43// :root {
44// #{$universal-margin-var}: $universal-margin;
45// #{$universal-padding-var}: $universal-padding;
46// #{$universal-border-radius-var}: $universal-border-radius;
47// @if $universal-box-shadow != none {
48// #{$universal-box-shadow-var}: $universal-box-shadow;
49// }
50// }
51//
52// ============================================================
53/* Table module CSS variable definitions. */
54:root {
55 #{$table-border-color-var}: $table-border-color;
56 #{$table-border-separator-color-var}: $table-border-separator-color;
57 #{$table-th-back-color-var}: $table-th-back-color;
58 #{$table-th-fore-color-var}: $table-th-fore-color;
59 #{$table-td-back-color-var}: $table-td-back-color;
60 #{$table-td-fore-color-var}: $table-td-fore-color;
61 #{$table-td-alt-back-color-var}: $table-td-alt-back-color;
62}
63// Desktop view (scrollable vertical tables).
64table {
65 border-collapse: separate;
66 border-spacing: 0;
67 margin: 0;
68 display: flex;
69 flex: 0 1 auto;
70 flex-flow: row wrap;
71 padding: var(#{$universal-padding-var});
72 padding-top: 0;
73 @if not($_include-horizontal-table) {
74 overflow: auto;
75 max-height: $table-max-height;
76 }
77 caption {
78 font-size: $table-caption-font-size;
79 margin: calc(2 * var(#{$universal-margin-var})) 0;
80 max-width: 100%;
81 flex: 0 0 100%;
82 }
83 thead, tbody {
84 display: flex;
85 flex-flow: row wrap;
86 border: $__1px solid var(#{$table-border-color-var});
87 @if not($_include-horizontal-table) {
88 max-width: 100%;
89 flex: 0 0 100%;
90 }
91 }
92 thead {
93 z-index: 999; // Fixes the visibility of the element.
94 border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
95 border-bottom: $__1px solid var(#{$table-border-separator-color-var});
96 @if not($_include-horizontal-table) {
97 position: sticky;
98 top: 0;
99 }
100 }
101 tbody {
102 border-top: 0;
103 margin-top: calc(0 - var(#{$universal-margin-var}));
104 border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
105 }
106 tr {
107 display: flex;
108 padding: 0; // Apply always to overwrite default.
109 @if not($_include-horizontal-table) {
110 flex-flow: row wrap;
111 flex: 0 0 100%;
112 }
113 }
114 th, td {
115 padding: calc(2 * var(#{$universal-padding-var})); // Apply always to overwrite default.
116 @if not($_include-horizontal-table) {
117 flex: 1 0 0%;
118 overflow: hidden;
119 text-overflow: ellipsis;
120 }
121 }
122 th {
123 text-align: left;
124 background: var(#{$table-th-back-color-var});
125 color: var(#{$table-th-fore-color-var});
126 }
127 td {
128 background: var(#{$table-td-back-color-var});
129 color: var(#{$table-td-fore-color-var});
130 border-top: $__1px solid var(#{$table-border-color-var});
131 }
132 @if not($_include-horizontal-table) {
133 tbody tr:first-child td {
134 border-top: 0;
135 }
136 }
137}
138// Styling for horizontal tables
139@if $_include-horizontal-table {
140 table:not(.#{$table-horizontal-name}) {
141 overflow: auto;
142 max-height: $table-max-height;
143 thead, tbody {
144 max-width: 100%;
145 flex: 0 0 100%;
146 }
147 tr {
148 flex-flow: row wrap;
149 flex: 0 0 100%;
150 }
151 th, td {
152 flex: 1 0 0%;
153 overflow: hidden;
154 text-overflow: ellipsis;
155 }
156 thead {
157 position: sticky;
158 top: 0;
159 }
160 tbody tr:first-child td {
161 border-top: 0;
162 }
163 }
164 table.#{$table-horizontal-name} {
165 border: 0;
166 thead, tbody {
167 border: 0;
168 flex: .2 0 0;
169 flex-flow: row nowrap;
170 }
171 tbody {
172 overflow: auto;
173 justify-content: space-between;
174 flex: .8 0 0;
175 margin-left: 0;
176 padding-bottom: calc(var(#{$universal-padding-var}) / 4);
177 }
178 tr {
179 flex-direction: column;
180 flex: 1 0 auto;
181 }
182 th, td {
183 width: auto;
184 border: 0;
185 border-bottom: $__1px solid var(#{$table-border-color-var});
186 &:not(:first-child){
187 border-top: 0;
188 }
189 }
190 th {
191 text-align: right;
192 border-left: $__1px solid var(#{$table-border-color-var});
193 border-right: $__1px solid var(#{$table-border-separator-color-var});
194 }
195 thead {
196 tr:first-child {
197 padding-left: 0;
198 }
199 }
200 th:first-child, td:first-child {
201 border-top: $__1px solid var(#{$table-border-color-var});
202 }
203 tbody tr:last-child td {
204 border-right: $__1px solid var(#{$table-border-color-var});
205 &:first-child{
206 border-top-right-radius: 0.25rem;
207 }
208 &:last-child{
209 border-bottom-right-radius: 0.25rem;
210 }
211 }
212 thead tr:first-child th {
213 &:first-child{
214 border-top-left-radius: 0.25rem;
215 }
216 &:last-child{
217 border-bottom-left-radius: 0.25rem;
218 }
219 }
220 }
221}
222// Mobile
223@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
224 @if $_include-horizontal-table {
225 table, table.#{$table-horizontal-name} {
226 border-collapse: collapse;
227 border: 0;
228 width: 100%;
229 display: table;
230 // Accessibility (element is not visible, but screen readers read it normally)
231 thead, th {
232 border: 0;
233 height: 1px;
234 width: 1px;
235 margin: -1px;
236 overflow: hidden;
237 padding: 0;
238 position: absolute;
239 clip: rect(0 0 0 0);
240 -webkit-clip-path: inset(100%);
241 clip-path: inset(100%);
242 }
243 tbody {
244 border: 0;
245 display: table-row-group;
246 }
247 tr {
248 display: block;
249 border: $__1px solid var(#{$table-border-color-var});
250 border-radius: var(#{$universal-border-radius-var});
251 @if $universal-box-shadow != none {
252 box-shadow: var(#{$universal-box-shadow-var});
253 }
254 background: #fafafa; // use variables, this is a test (body)
255 padding: var(#{$universal-padding-var});
256 margin: var(#{$universal-margin-var});
257 margin-bottom: calc(2 * var(#{$universal-margin-var}));
258 }
259 th, td {
260 width: auto;
261 }
262 td {
263 display: block;
264 border: 0;
265 text-align: right;
266 }
267 td:before {
268 content: attr(#{$table-mobile-card-label});
269 float: left;
270 font-weight: $table-mobile-label-font-weight;
271 }
272 th:first-child, td:first-child {
273 border-top: 0;
274 }
275 tbody tr:last-child td {
276 border-right: 0;
277 }
278 }
279 }
280 @else {
281 table {
282 border-collapse: collapse;
283 border: 0;
284 width: 100%;
285 display: table;
286 // Accessibility (element is not visible, but screen readers read it normally)
287 thead, th {
288 border: 0;
289 height: 1px;
290 width: 1px;
291 margin: -1px;
292 overflow: hidden;
293 padding: 0;
294 position: absolute;
295 clip: rect(0 0 0 0);
296 -webkit-clip-path: inset(100%);
297 clip-path: inset(100%);
298 }
299 tbody {
300 border: 0;
301 display: table-row-group;
302 }
303 tr {
304 display: block;
305 border: $__1px solid var(#{$table-border-color-var});
306 border-radius: var(#{$universal-border-radius-var});
307 @if $universal-box-shadow != none {
308 box-shadow: var(#{$universal-box-shadow-var});
309 }
310 background: #fafafa; // use variables, this is a test (body)
311 padding: var(#{$universal-padding-var});
312 margin: var(#{$universal-margin-var});
313 margin-bottom: calc(2 * var(#{$universal-margin-var}));
314 }
315 td {
316 display: block;
317 border: 0;
318 text-align: right;
319 }
320 td:before {
321 content: attr(#{$table-mobile-card-label});
322 float: left;
323 font-weight: $table-mobile-label-font-weight;
324 }
325 }
326 }
327}
328// Striped tables.
329@if $_include-striped-table {
330 :root {
331 #{$table-td-alt-back-color-var} : $table-td-alt-back-color;
332 }
333 table.#{$table-striped-name} {
334 tr:nth-of-type(2n) > td {
335 background: var(#{$table-td-alt-back-color-var});
336 }
337 }
338 // Responsiveness for striped tables.
339 @media screen and (max-width: #{$table-mobile-breakpoint}) {
340 table.#{$table-striped-name} {
341 tr:nth-of-type(2n) {
342 background: var(#{$table-td-alt-back-color-var});
343 }
344 }
345 }
346}
347// Hoverable tables.
348@if $_include-striped-table {
349 :root {
350 #{$table-td-hover-back-color-var} : $table-td-hover-back-color;
351 }
352 table.#{$table-hoverable-name} {
353 tr {
354 &:hover, &:focus {
355 &, & > td {
356 background: var(#{$table-td-hover-back-color-var});
357 }
358 }
359 }
360 }
361 @media screen and (max-width: #{$table-mobile-breakpoint}) {
362 table.#{$table-hoverable-name} {
363 tr {
364 &:hover, &:focus {
365 &, & > td {
366 background: var(#{$table-td-hover-back-color-var});
367 }
368 }
369 }
370 }
371 }
372}
Note: See TracBrowser for help on using the repository browser.