_table.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. //
  2. // Component: Table
  3. //
  4. .table {
  5. &:not(.table-dark) {
  6. color: inherit;
  7. }
  8. // fixed table head
  9. &.table-head-fixed {
  10. thead tr:nth-child(1) th {
  11. background-color: $white;
  12. border-bottom: 0;
  13. box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color;
  14. position: sticky;
  15. top: 0;
  16. z-index: 10;
  17. }
  18. &.table-dark {
  19. thead tr {
  20. &:nth-child(1) th {
  21. background-color: $table-dark-bg;
  22. box-shadow: inset 0 1px 0 $table-dark-border-color, inset 0 -1px 0 $table-dark-border-color;
  23. }
  24. }
  25. }
  26. }
  27. // no border
  28. &.no-border {
  29. &,
  30. td,
  31. th {
  32. border: 0;
  33. }
  34. }
  35. // .text-center in tables
  36. &.text-center {
  37. &,
  38. td,
  39. th {
  40. text-align: center;
  41. }
  42. }
  43. &.table-valign-middle {
  44. thead > tr > th,
  45. thead > tr > td,
  46. tbody > tr > th,
  47. tbody > tr > td {
  48. vertical-align: middle;
  49. }
  50. }
  51. .card-body.p-0 & {
  52. thead > tr > th,
  53. thead > tr > td,
  54. tfoot > tr > th,
  55. tfoot > tr > td,
  56. tbody > tr > th,
  57. tbody > tr > td {
  58. &:first-of-type {
  59. padding-left: map-get($spacers, 4);
  60. }
  61. &:last-of-type {
  62. padding-right: map-get($spacers, 4);
  63. }
  64. }
  65. }
  66. }
  67. // Expandable Table
  68. .table-hover tbody tr.expandable-body:hover {
  69. background-color: inherit !important;
  70. }
  71. [data-widget="expandable-table"] {
  72. cursor: pointer;
  73. i.expandable-table-caret {
  74. transition: transform $transition-speed linear;
  75. }
  76. &[aria-expanded="true"] {
  77. i.expandable-table-caret {
  78. // stylelint-disable selector-max-attribute
  79. &[class*="right"] {
  80. transform: rotate(90deg);
  81. }
  82. &[class*="left"] {
  83. transform: rotate(-90deg);
  84. }
  85. // stylelint-enable selector-max-attribute
  86. }
  87. }
  88. }
  89. [aria-expanded="true"] {
  90. cursor: pointer;
  91. i.expandable-table-caret {
  92. transition: transform $transition-speed linear;
  93. }
  94. [data-widget="expandable-table"] {
  95. i.expandable-table-caret {
  96. // stylelint-disable selector-max-attribute
  97. &[class*="right"] {
  98. transform: rotate(90deg);
  99. }
  100. &[class*="left"] {
  101. transform: rotate(-90deg);
  102. }
  103. // stylelint-enable selector-max-attribute
  104. }
  105. }
  106. }
  107. .expandable-body {
  108. > td {
  109. padding: 0 !important;
  110. width: 100%;
  111. > div,
  112. > p {
  113. padding: $table-cell-padding;
  114. }
  115. }
  116. .table {
  117. width: calc(100% - #{$table-cell-padding});
  118. margin: 0 0 0 $table-cell-padding;
  119. tr:first-child {
  120. td,
  121. th {
  122. border-top: none;
  123. }
  124. }
  125. }
  126. }
  127. @include dark-mode () {
  128. .table-bordered {
  129. &,
  130. td,
  131. th {
  132. border-color: $gray-600;
  133. }
  134. }
  135. .table-hover {
  136. tbody tr:hover {
  137. color: $gray-300;
  138. background-color: lighten($dark, 2.5%);
  139. border-color: $gray-600;
  140. }
  141. }
  142. .table {
  143. thead th {
  144. border-bottom-color: $gray-600;
  145. }
  146. th,
  147. td {
  148. border-top-color: $gray-600;
  149. }
  150. &.table-head-fixed {
  151. thead tr:nth-child(1) th {
  152. background-color: lighten($dark, 5%);
  153. }
  154. }
  155. }
  156. }