/* Tablesaw Sass Mixins */ @mixin tablesaw-stack-max { .tablesaw-stack thead td, .tablesaw-stack thead th { display: none; } .tablesaw-stack tbody td, .tablesaw-stack tbody th { clear: left; float: left; width: 100%; } .tablesaw-cell-label { vertical-align: top; } .tablesaw-cell-content { max-width: 67%; display: inline-block; } .tablesaw-stack td:empty, .tablesaw-stack th:empty { display: none; } } @mixin tablesaw-stack-min { .tablesaw-stack tr { display: table-row; } /* Show the table header rows */ .tablesaw-stack td, .tablesaw-stack th, .tablesaw-stack thead td, .tablesaw-stack thead th { display: table-cell; margin: 0; } /* Hide the labels in each cell */ .tablesaw-stack td .tablesaw-cell-label, .tablesaw-stack th .tablesaw-cell-label { display: none !important; } } $use-respond-mixins: false !default; @mixin tablesaw-stack( $breakpoint: 40em ) { @if $use-respond-mixins { @include respond-max($breakpoint - .0625) { @include tablesaw-stack-max; } @include respond-min($breakpoint) { @include tablesaw-stack-min; } } @else { @media (max-width: ($breakpoint - .0625)) { @include tablesaw-stack-max; } @media (min-width: $breakpoint) { @include tablesaw-stack-min; } } }