table.sass 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. $table-color: $grey-darker !default
  2. $table-background-color: $white !default
  3. $table-cell-border: 1px solid $grey-lighter !default
  4. $table-cell-border-width: 0 0 1px !default
  5. $table-cell-padding: 0.5em 0.75em !default
  6. $table-cell-heading-color: $text-strong !default
  7. $table-head-cell-border-width: 0 0 2px !default
  8. $table-head-cell-color: $text-strong !default
  9. $table-foot-cell-border-width: 2px 0 0 !default
  10. $table-foot-cell-color: $text-strong !default
  11. $table-head-background-color: transparent !default
  12. $table-body-background-color: transparent !default
  13. $table-foot-background-color: transparent !default
  14. $table-row-hover-background-color: $white-bis !default
  15. $table-row-active-background-color: $primary !default
  16. $table-row-active-color: $primary-invert !default
  17. $table-striped-row-even-background-color: $white-bis !default
  18. $table-striped-row-even-hover-background-color: $white-ter !default
  19. .table
  20. @extend %block
  21. background-color: $table-background-color
  22. color: $table-color
  23. td,
  24. th
  25. border: $table-cell-border
  26. border-width: $table-cell-border-width
  27. padding: $table-cell-padding
  28. vertical-align: top
  29. // Colors
  30. @each $name, $pair in $colors
  31. $color: nth($pair, 1)
  32. $color-invert: nth($pair, 2)
  33. &.is-#{$name}
  34. background-color: $color
  35. border-color: $color
  36. color: $color-invert
  37. // Modifiers
  38. &.is-narrow
  39. white-space: nowrap
  40. width: 1%
  41. &.is-selected
  42. background-color: $table-row-active-background-color
  43. color: $table-row-active-color
  44. a,
  45. strong
  46. color: currentColor
  47. th
  48. color: $table-cell-heading-color
  49. &:not([align])
  50. text-align: left
  51. tr
  52. &.is-selected
  53. background-color: $table-row-active-background-color
  54. color: $table-row-active-color
  55. a,
  56. strong
  57. color: currentColor
  58. td,
  59. th
  60. border-color: $table-row-active-color
  61. color: currentColor
  62. thead
  63. background-color: $table-head-background-color
  64. td,
  65. th
  66. border-width: $table-head-cell-border-width
  67. color: $table-head-cell-color
  68. tfoot
  69. background-color: $table-foot-background-color
  70. td,
  71. th
  72. border-width: $table-foot-cell-border-width
  73. color: $table-foot-cell-color
  74. tbody
  75. background-color: $table-body-background-color
  76. tr
  77. &:last-child
  78. td,
  79. th
  80. border-bottom-width: 0
  81. // Modifiers
  82. &.is-bordered
  83. td,
  84. th
  85. border-width: 1px
  86. tr
  87. &:last-child
  88. td,
  89. th
  90. border-bottom-width: 1px
  91. &.is-fullwidth
  92. width: 100%
  93. &.is-hoverable
  94. tbody
  95. tr:not(.is-selected)
  96. &:hover
  97. background-color: $table-row-hover-background-color
  98. &.is-striped
  99. tbody
  100. tr:not(.is-selected)
  101. &:hover
  102. background-color: $table-row-hover-background-color
  103. &:nth-child(even)
  104. background-color: $table-striped-row-even-hover-background-color
  105. &.is-narrow
  106. td,
  107. th
  108. padding: 0.25em 0.5em
  109. &.is-striped
  110. tbody
  111. tr:not(.is-selected)
  112. &:nth-child(even)
  113. background-color: $table-striped-row-even-background-color
  114. .table-container
  115. @extend %block
  116. +overflow-touch
  117. overflow: auto
  118. overflow-y: hidden
  119. max-width: 100%