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.

155 lines
4.1 KiB

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