// 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(); } }