Sin descripción
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.

_tables.scss 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. /* Tables
  2. ******************************************************************************** */
  3. /* ios fix for drodown-menu being clipped off when used in tables */
  4. .ios .table tr > td .dropdown {
  5. position: relative;
  6. }
  7. /* Firefox fix for table head border bottom */
  8. .table {
  9. > :not(caption) > * > * {
  10. background-clip: padding-box;
  11. }
  12. tr {
  13. > td {
  14. .dropdown {
  15. position: static;
  16. }
  17. }
  18. }
  19. .btn-icon,
  20. .btn:not([class*="btn-"]) {
  21. color: var(--#{$prefix}table-color);
  22. }
  23. // Table heading style
  24. th {
  25. color: var(--#{$prefix}heading-color);
  26. font-size: $font-size-sm;
  27. letter-spacing: .2px;
  28. text-transform: uppercase;
  29. }
  30. &:not(.table-borderless):not(.dataTable) thead th {
  31. border-block-start-width: var(--#{$prefix}border-width);
  32. }
  33. // Removed left padding from the first column and right padding from the last column
  34. &.table-flush-spacing {
  35. thead,
  36. tbody {
  37. tr > td:first-child {
  38. padding-inline-start: 0;
  39. }
  40. tr > td:last-child {
  41. padding-inline-end: 0;
  42. }
  43. }
  44. }
  45. // Style for table inside card
  46. .card & {
  47. margin-block-end: 0;
  48. }
  49. &.table-dark,
  50. .table-dark {
  51. border-color: #{$border-color-dark};
  52. th {
  53. --#{$prefix}heading-color: #{$white-dark};
  54. }
  55. }
  56. &.table-light,
  57. .table-light {
  58. border-color: var(--#{$prefix}border-color);
  59. th {
  60. --#{$prefix}heading-color: var(--#{$prefix}heading-color);
  61. }
  62. }
  63. caption {
  64. padding-block: $table-cell-padding-y;
  65. padding-inline: $table-cell-padding-x;
  66. }
  67. thead tr th {
  68. padding-block: $table-head-padding-y;
  69. }
  70. &.table-borderless:not(.table-sm) {
  71. > :not(thead) > * > * {
  72. padding-block: $table-cell-padding-y + .0313rem;
  73. }
  74. > thead > * > * {
  75. padding-block: $table-head-padding-y + .0313rem;
  76. }
  77. }
  78. }
  79. /* class for to remove table border bottom */
  80. .table-border-bottom-0 {
  81. tr:last-child {
  82. td {
  83. border-block-end-width: 0;
  84. }
  85. }
  86. }
  87. /* class for to remove table border top */
  88. .table-border-top-0 {
  89. tr:first-child {
  90. td,
  91. th {
  92. border-block-start-width: 0 !important;
  93. }
  94. }
  95. }
  96. @if $enable-dark-mode {
  97. @include color-mode(dark) {
  98. .table {
  99. --#{$prefix}table-hover-bg: rgba(var(--#{$prefix}body-bg-rgb), #{$table-hover-bg-factor-dark});
  100. --#{$prefix}table-active-bg: rgba(var(--#{$prefix}body-bg-rgb), #{$table-active-bg-factor-dark});
  101. }
  102. }
  103. }
  104. // TODO: CheckInBS6 Review the `table-variants` mixin in Bootstrap 6 and update our overrides if needed to reflect any changes.
  105. @each $state in map-keys($theme-colors) {
  106. .table-#{$state} {
  107. --#{$prefix}table-bg: rgba(var(--#{$prefix}#{$state}-rgb), .2);
  108. --#{$prefix}table-hover-bg: color-mix(in sRGB, var(--#{$prefix}body-bg) #{$table-hover-bg-factor-amount}, var(--#{$prefix}table-bg));
  109. --#{$prefix}table-border-color: color-mix(in sRGB, var(--#{$prefix}table-bg) #{$table-border-factor-amount}, var(--#{$prefix}table-color));
  110. --#{$prefix}table-active-bg: color-mix(in sRGB, var(--#{$prefix}body-bg) #{$table-active-bg-factor-amount}, var(--#{$prefix}table-bg));
  111. @if $state == "dark" or $state == "light" {
  112. --#{$prefix}table-bg: var(--#{$prefix}#{$state});
  113. --#{$prefix}table-hover-bg: color-mix(in sRGB, var(--#{$prefix}table-color) 3.5%, var(--#{$prefix}table-bg));
  114. --#{$prefix}table-active-bg: color-mix(in sRGB, var(--#{$prefix}table-color) 4%, var(--#{$prefix}table-bg));
  115. }
  116. @if $state == "default" or $state == "active" {
  117. --#{$prefix}table-border-color: #{$gray-200};
  118. }
  119. }
  120. }
  121. @if $enable-dark-mode {
  122. @include color-mode(dark) {
  123. @each $state in map-keys($theme-colors) {
  124. .table-#{$state} {
  125. --#{$prefix}table-color: var(--#{$prefix}#{$state}-contrast);
  126. --#{$prefix}table-hover-color: var(--#{$prefix}table-color);
  127. --#{$prefix}table-striped-color: var(--#{$prefix}table-color);
  128. --#{$prefix}table-active-color: var(--#{$prefix}table-color);
  129. }
  130. }
  131. }
  132. }