// THIS FILE IS AUTOGENERATED, DO NOT MODIFY!
//
// To change the contents of this file,
// edit `_sass/pooleparty/_table.pre.scss`
// and run `npm run build:css`.
//
// During development you can run `npm run watch:css`
// to continuosly rebuild this file.
// Copyright (c) 2017 Florian Klampfer
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see .
table:not(.highlight) {
display: block;
vertical-align: top;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
thead {
@extend .color-transition;
background-color: var(--body-bg);
}
thead + tbody,
tbody + tbody,
tfoot {
@extend .color-transition;
border-top: 3px double var(--border-color);
}
tbody tr:nth-child(even) td,
tbody tr:nth-child(even) th {
@extend .color-transition;
background-color: var(--body-bg);
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
@extend .color-transition;
background-color: var(--gray-bg);
}
}
@media print {
table:not(.highlight) {
width: 100%!important;
}
}
// CSS only Responsive Tables
// http://dbushell.com/2016/03/04/css-only-responsive-tables/
// by David Bushell
@mixin scroll-table() {
white-space: nowrap; // optional - looks better for small cell values
}
@mixin flip-table() {
display: flex;
overflow: hidden;
thead,
thead + tbody,
tbody + tbody {
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
thead, tbody {
display: flex;
}
thead {
flex-shrink: 0;
min-width: min-content;
th {
padding-left: 1rem;
}
}
tbody {
position: relative;
overflow-x: auto;
overflow-y: hidden;
padding-left: 1px;
-webkit-overflow-scrolling: touch;
}
tr {
display: flex;
flex-direction: column;
min-width: min-content;
flex-shrink: 0;
td {
border-left: none;
}
&:first-child {
td {
border-left: 1px solid var(--border-color);
}
}
&:last-child {
td {
padding-right: 1rem;
border-right: 1px solid var(--border-color);
}
}
}
td, th {
display: block;
border-bottom: none;
&:first-child {
padding-left: .5rem;
border-top: none;
}
&:last-child {
padding-right: .5rem;
}
}
}
table.stretch-table {
display: table;
width: 100% !important;
width: calc(100% + 2rem) !important;
}
table.scroll-table {
@include scroll-table();
}
table.flip-table {
@include flip-table();
}
@media screen and (max-width: $break-point-4) {
table.scroll-table-small {
@include scroll-table();
}
table.flip-table-small {
@include flip-table();
}
}