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.

171 lines
4.8 KiB

8 months ago
  1. //
  2. // Basic Bootstrap table
  3. //
  4. .table {
  5. // Reset needed for nesting tables
  6. --#{$prefix}table-color-type: initial;
  7. --#{$prefix}table-bg-type: initial;
  8. --#{$prefix}table-color-state: initial;
  9. --#{$prefix}table-bg-state: initial;
  10. // End of reset
  11. --#{$prefix}table-color: #{$table-color};
  12. --#{$prefix}table-bg: #{$table-bg};
  13. --#{$prefix}table-border-color: #{$table-border-color};
  14. --#{$prefix}table-accent-bg: #{$table-accent-bg};
  15. --#{$prefix}table-striped-color: #{$table-striped-color};
  16. --#{$prefix}table-striped-bg: #{$table-striped-bg};
  17. --#{$prefix}table-active-color: #{$table-active-color};
  18. --#{$prefix}table-active-bg: #{$table-active-bg};
  19. --#{$prefix}table-hover-color: #{$table-hover-color};
  20. --#{$prefix}table-hover-bg: #{$table-hover-bg};
  21. width: 100%;
  22. margin-bottom: $spacer;
  23. vertical-align: $table-cell-vertical-align;
  24. border-color: var(--#{$prefix}table-border-color);
  25. // Target th & td
  26. // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
  27. // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
  28. // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
  29. // stylelint-disable-next-line selector-max-universal
  30. > :not(caption) > * > * {
  31. padding: $table-cell-padding-y $table-cell-padding-x;
  32. // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
  33. color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
  34. background-color: var(--#{$prefix}table-bg);
  35. border-bottom-width: $table-border-width;
  36. box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
  37. }
  38. > tbody {
  39. vertical-align: inherit;
  40. }
  41. > thead {
  42. vertical-align: bottom;
  43. }
  44. }
  45. .table-group-divider {
  46. border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
  47. }
  48. //
  49. // Change placement of captions with a class
  50. //
  51. .caption-top {
  52. caption-side: top;
  53. }
  54. //
  55. // Condensed table w/ half padding
  56. //
  57. .table-sm {
  58. // stylelint-disable-next-line selector-max-universal
  59. > :not(caption) > * > * {
  60. padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
  61. }
  62. }
  63. // Border versions
  64. //
  65. // Add or remove borders all around the table and between all the columns.
  66. //
  67. // When borders are added on all sides of the cells, the corners can render odd when
  68. // these borders do not have the same color or if they are semi-transparent.
  69. // Therefore we add top and border bottoms to the `tr`s and left and right borders
  70. // to the `td`s or `th`s
  71. .table-bordered {
  72. > :not(caption) > * {
  73. border-width: $table-border-width 0;
  74. // stylelint-disable-next-line selector-max-universal
  75. > * {
  76. border-width: 0 $table-border-width;
  77. }
  78. }
  79. }
  80. .table-borderless {
  81. // stylelint-disable-next-line selector-max-universal
  82. > :not(caption) > * > * {
  83. border-bottom-width: 0;
  84. }
  85. > :not(:first-child) {
  86. border-top-width: 0;
  87. }
  88. }
  89. // Zebra-striping
  90. //
  91. // Default zebra-stripe styles (alternating gray and transparent backgrounds)
  92. // For rows
  93. .table-striped {
  94. > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
  95. --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
  96. --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
  97. }
  98. }
  99. // For columns
  100. .table-striped-columns {
  101. > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
  102. --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
  103. --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
  104. }
  105. }
  106. // Active table
  107. //
  108. // The `.table-active` class can be added to highlight rows or cells
  109. .table-active {
  110. --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
  111. --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
  112. }
  113. // Hover effect
  114. //
  115. // Placed here since it has to come after the potential zebra striping
  116. .table-hover {
  117. > tbody > tr:hover > * {
  118. --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
  119. --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
  120. }
  121. }
  122. // Table variants
  123. //
  124. // Table variants set the table cell backgrounds, border colors
  125. // and the colors of the striped, hovered & active tables
  126. @each $color, $value in $table-variants {
  127. @include table-variant($color, $value);
  128. }
  129. // Responsive tables
  130. //
  131. // Generate series of `.table-responsive-*` classes for configuring the screen
  132. // size of where your table will overflow.
  133. @each $breakpoint in map-keys($grid-breakpoints) {
  134. $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  135. @include media-breakpoint-down($breakpoint) {
  136. .table-responsive#{$infix} {
  137. overflow-x: auto;
  138. -webkit-overflow-scrolling: touch;
  139. }
  140. }
  141. }