_objects.table.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. /* ==========================================================================
  2. #TABLE
  3. ========================================================================== */
  4. /**
  5. * A simple object for manipulating the structure of HTML `table`s.
  6. */
  7. .o-table {
  8. width: 100%;
  9. }
  10. /* Equal-width table cells
  11. ========================================================================== */
  12. /**
  13. * `table-layout: fixed` forces all cells within a table to occupy the same
  14. * width as each other. This also has performance benefits: because the browser
  15. * does not need to (re)calculate cell dimensions based on content it discovers,
  16. * the table can be rendered very quickly. Further reading:
  17. * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
  18. */
  19. .o-table--fixed {
  20. table-layout: fixed;
  21. }
  22. /* Size variants
  23. ========================================================================== */
  24. .o-table--tiny {
  25. th,
  26. td {
  27. padding: $inuit-global-spacing-unit-tiny;
  28. }
  29. }
  30. .o-table--small {
  31. th,
  32. td {
  33. padding: $inuit-global-spacing-unit-small;
  34. }
  35. }
  36. .o-table--large {
  37. th,
  38. td {
  39. padding: $inuit-global-spacing-unit-large;
  40. }
  41. }
  42. .o-table--huge {
  43. th,
  44. td {
  45. padding: $inuit-global-spacing-unit-huge;
  46. }
  47. }