patchcablemgr/assets/plugins/tablesaw/src/tables.stack-mixin.scss
2020-11-22 22:50:42 +00:00

64 lines
1.3 KiB
SCSS
Executable File

/* 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;
}
}
}