VTable.sass 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. @use '../../styles/tools'
  2. @use '../../styles/settings'
  3. @use './variables' as *
  4. @use './mixins' as *
  5. @include tools.layer('components')
  6. // Theme
  7. .v-table
  8. font-size: $table-font-size
  9. transition-duration: $table-transition-duration
  10. transition-property: $table-transition-property
  11. transition-timing-function: $table-transition-timing-function
  12. @include tools.theme($table-theme...)
  13. .v-table-divider
  14. border-right: $table-border
  15. .v-table__wrapper
  16. > table
  17. > thead
  18. > tr
  19. > th
  20. border-bottom: $table-border
  21. > tbody
  22. > tr
  23. &:not(:last-child)
  24. > td,
  25. > th
  26. border-bottom: $table-border
  27. > tfoot
  28. > tr
  29. > td,
  30. > th
  31. border-top: $table-border
  32. &.v-table--hover
  33. > .v-table__wrapper
  34. > table
  35. > tbody
  36. > tr
  37. > td
  38. position: relative
  39. &:hover > td::after
  40. background: $table-hover-color
  41. pointer-events: none
  42. @include tools.absolute(true)
  43. &.v-table--fixed-header
  44. > .v-table__wrapper
  45. > table
  46. > thead
  47. > tr
  48. > th
  49. background: $table-background
  50. box-shadow: inset 0 -1px 0 $table-border-color
  51. z-index: 1
  52. &.v-table--fixed-footer
  53. > tfoot
  54. > tr
  55. > th,
  56. > td
  57. background: $table-background
  58. box-shadow: inset 0 1px 0 $table-border-color
  59. // Block
  60. .v-table
  61. border-radius: inherit
  62. // Do not inherit line-height
  63. line-height: $table-line-height
  64. max-width: 100%
  65. display: flex
  66. flex-direction: column
  67. > .v-table__wrapper
  68. > table
  69. width: 100%
  70. border-spacing: 0
  71. > tbody,
  72. > thead,
  73. > tfoot
  74. > tr
  75. > td,
  76. > th
  77. padding: $table-column-padding
  78. transition-duration: $table-transition-duration
  79. transition-property: $table-transition-property
  80. transition-timing-function: $table-transition-timing-function
  81. > td
  82. height: var(--v-table-row-height)
  83. > th
  84. height: var(--v-table-header-height)
  85. font-weight: $table-header-font-weight
  86. user-select: none
  87. text-align: start
  88. @at-root
  89. @include tools.density('v-table', $table-density) using ($modifier)
  90. --v-table-header-height: #{$table-header-height + $modifier}
  91. --v-table-row-height: #{$table-row-height + $modifier}
  92. // Elements
  93. .v-table__wrapper
  94. border-radius: inherit
  95. overflow: auto
  96. flex: 1 1 auto
  97. // Modifiers
  98. .v-table--has-top
  99. > .v-table__wrapper
  100. > table
  101. > tbody
  102. > tr
  103. &:first-child
  104. &:hover
  105. > td
  106. &:first-child
  107. border-top-left-radius: 0
  108. &:last-child
  109. border-top-right-radius: 0
  110. .v-table--has-bottom
  111. > .v-table__wrapper
  112. > table
  113. > tbody
  114. > tr
  115. &:last-child
  116. &:hover
  117. > td
  118. &:first-child
  119. border-bottom-left-radius: 0
  120. &:last-child
  121. border-bottom-right-radius: 0
  122. .v-table--fixed-height
  123. > .v-table__wrapper
  124. overflow-y: auto
  125. .v-table--fixed-header
  126. > .v-table__wrapper
  127. > table
  128. > thead
  129. position: sticky
  130. top: 0
  131. z-index: 2
  132. > tr
  133. > th
  134. border-bottom: 0px !important
  135. .v-table--fixed-footer
  136. > .v-table__wrapper
  137. > table
  138. > tfoot
  139. > tr
  140. position: sticky
  141. bottom: 0
  142. z-index: 1
  143. > td,
  144. > th
  145. border-top: 0px !important