_tables.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. // Foundation by ZURB
  2. // foundation.zurb.com
  3. // Licensed under MIT Open Source
  4. @import 'global';
  5. //
  6. // @name _tables.scss
  7. // @dependencies _global.scss
  8. //
  9. //
  10. // @variables
  11. //
  12. $include-html-table-classes: $include-html-classes !default;
  13. // These control the background color for the table and even rows
  14. $table-bg: $white !default;
  15. $table-even-row-bg: $snow !default;
  16. // These control the table cell border style
  17. $table-border-style: solid !default;
  18. $table-border-size: 1px !default;
  19. $table-border-color: $gainsboro !default;
  20. // These control the table head styles
  21. $table-head-bg: $white-smoke !default;
  22. $table-head-font-size: rem-calc(14) !default;
  23. $table-head-font-color: $jet !default;
  24. $table-head-font-weight: $font-weight-bold !default;
  25. $table-head-padding: rem-calc(8 10 10) !default;
  26. // These control the table foot styles
  27. $table-foot-bg: $table-head-bg !default;
  28. $table-foot-font-size: $table-head-font-size !default;
  29. $table-foot-font-color: $table-head-font-color !default;
  30. $table-foot-font-weight: $table-head-font-weight !default;
  31. $table-foot-padding: $table-head-padding !default;
  32. // These control the caption
  33. $table-caption-bg: transparent !default;
  34. $table-caption-font-color: $table-head-font-color !default;
  35. $table-caption-font-size: rem-calc(16) !default;
  36. $table-caption-font-weight: bold !default;
  37. // These control the row padding and font styles
  38. $table-row-padding: rem-calc(9 10) !default;
  39. $table-row-font-size: rem-calc(14) !default;
  40. $table-row-font-color: $jet !default;
  41. $table-line-height: rem-calc(18) !default;
  42. // These are for controlling the layout, display and margin of tables
  43. $table-layout: auto !default;
  44. $table-display: table-cell !default;
  45. $table-margin-bottom: rem-calc(20) !default;
  46. //
  47. // @mixins
  48. //
  49. @mixin table {
  50. background: $table-bg;
  51. border: $table-border-style $table-border-size $table-border-color;
  52. margin-bottom: $table-margin-bottom;
  53. table-layout: $table-layout;
  54. caption {
  55. background: $table-caption-bg;
  56. color: $table-caption-font-color;
  57. font: {
  58. size: $table-caption-font-size;
  59. weight: $table-caption-font-weight;
  60. }
  61. }
  62. thead {
  63. background: $table-head-bg;
  64. tr {
  65. th,
  66. td {
  67. color: $table-head-font-color;
  68. font-size: $table-head-font-size;
  69. font-weight: $table-head-font-weight;
  70. padding: $table-head-padding;
  71. }
  72. }
  73. }
  74. tfoot {
  75. background: $table-foot-bg;
  76. tr {
  77. th,
  78. td {
  79. color: $table-foot-font-color;
  80. font-size: $table-foot-font-size;
  81. font-weight: $table-foot-font-weight;
  82. padding: $table-foot-padding;
  83. }
  84. }
  85. }
  86. tr {
  87. th,
  88. td {
  89. color: $table-row-font-color;
  90. font-size: $table-row-font-size;
  91. padding: $table-row-padding;
  92. text-align: $default-float;
  93. }
  94. &.even,
  95. &.alt,
  96. &:nth-of-type(even) { background: $table-even-row-bg; }
  97. }
  98. thead tr th,
  99. tfoot tr th,
  100. tfoot tr td,
  101. tbody tr th,
  102. tbody tr td,
  103. tr td { display: $table-display; line-height: $table-line-height; }
  104. }
  105. @include exports("table") {
  106. @if $include-html-table-classes {
  107. table {
  108. @include table;
  109. }
  110. }
  111. }