tables.stack-mixin.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /* Tablesaw Sass Mixins */
  2. @mixin tablesaw-stack-max {
  3. .tablesaw-stack thead td,
  4. .tablesaw-stack thead th {
  5. display: none;
  6. }
  7. .tablesaw-stack tbody td,
  8. .tablesaw-stack tbody th {
  9. clear: left;
  10. float: left;
  11. width: 100%;
  12. }
  13. .tablesaw-cell-label {
  14. vertical-align: top;
  15. }
  16. .tablesaw-cell-content {
  17. max-width: 67%;
  18. display: inline-block;
  19. }
  20. .tablesaw-stack td:empty,
  21. .tablesaw-stack th:empty {
  22. display: none;
  23. }
  24. }
  25. @mixin tablesaw-stack-min {
  26. .tablesaw-stack tr {
  27. display: table-row;
  28. }
  29. /* Show the table header rows */
  30. .tablesaw-stack td,
  31. .tablesaw-stack th,
  32. .tablesaw-stack thead td,
  33. .tablesaw-stack thead th {
  34. display: table-cell;
  35. margin: 0;
  36. }
  37. /* Hide the labels in each cell */
  38. .tablesaw-stack td .tablesaw-cell-label,
  39. .tablesaw-stack th .tablesaw-cell-label {
  40. display: none !important;
  41. }
  42. }
  43. $use-respond-mixins: false !default;
  44. @mixin tablesaw-stack( $breakpoint: 40em ) {
  45. @if $use-respond-mixins {
  46. @include respond-max($breakpoint - .0625) {
  47. @include tablesaw-stack-max;
  48. }
  49. @include respond-min($breakpoint) {
  50. @include tablesaw-stack-min;
  51. }
  52. }
  53. @else {
  54. @media (max-width: ($breakpoint - .0625)) {
  55. @include tablesaw-stack-max;
  56. }
  57. @media (min-width: $breakpoint) {
  58. @include tablesaw-stack-min;
  59. }
  60. }
  61. }