table.sass 3.3 KB

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