Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

table.sass 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  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. text-align: left
  50. tr
  51. &.is-selected
  52. background-color: $table-row-active-background-color
  53. color: $table-row-active-color
  54. a,
  55. strong
  56. color: currentColor
  57. td,
  58. th
  59. border-color: $table-row-active-color
  60. color: currentColor
  61. thead
  62. background-color: $table-head-background-color
  63. td,
  64. th
  65. border-width: $table-head-cell-border-width
  66. color: $table-head-cell-color
  67. tfoot
  68. background-color: $table-foot-background-color
  69. td,
  70. th
  71. border-width: $table-foot-cell-border-width
  72. color: $table-foot-cell-color
  73. tbody
  74. background-color: $table-body-background-color
  75. tr
  76. &:last-child
  77. td,
  78. th
  79. border-bottom-width: 0
  80. // Modifiers
  81. &.is-bordered
  82. td,
  83. th
  84. border-width: 1px
  85. tr
  86. &:last-child
  87. td,
  88. th
  89. border-bottom-width: 1px
  90. &.is-fullwidth
  91. width: 100%
  92. &.is-hoverable
  93. tbody
  94. tr:not(.is-selected)
  95. &:hover
  96. background-color: $table-row-hover-background-color
  97. &.is-striped
  98. tbody
  99. tr:not(.is-selected)
  100. &:hover
  101. background-color: $table-row-hover-background-color
  102. &:nth-child(even)
  103. background-color: $table-striped-row-even-hover-background-color
  104. &.is-narrow
  105. td,
  106. th
  107. padding: 0.25em 0.5em
  108. &.is-striped
  109. tbody
  110. tr:not(.is-selected)
  111. &:nth-child(even)
  112. background-color: $table-striped-row-even-background-color
  113. .table-container
  114. @extend %block
  115. +overflow-touch
  116. overflow: auto
  117. overflow-y: hidden
  118. max-width: 100%