table.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. @mixin light-table {
  2. --bs-table-color: var(--content-primary);
  3. --bs-table-bg: var(--bg-light-primary);
  4. --bs-table-striped-color: var(--content-secondary);
  5. --bs-table-striped-bg: var(--bg-light-secondary);
  6. --bs-table-active-color: var(--content-secondary);
  7. --bs-table-active-bg: var(--link-web-hover);
  8. --bs-table-hover-color: var(--content-secondary);
  9. --bs-table-hover-bg: var(--bg-light-secondary);
  10. --bs-border-divider: var(--border-divider);
  11. --table-bg-tertiary: var(--bg-light-tertiary);
  12. }
  13. @mixin dark-table {
  14. --bs-table-color: var(--content-primary-dark);
  15. --bs-table-bg: var(--bg-dark-primary);
  16. --bs-table-striped-color: var(--content-secondary-dark);
  17. --bs-table-striped-bg: var(--bg-dark-secondary);
  18. --bs-table-active-color: var(--content-secondary-dark);
  19. --bs-table-active-bg: var(--link-web-hover);
  20. --bs-table-hover-color: var(--content-secondary-dark);
  21. --bs-table-hover-bg: var(--bg-dark-secondary);
  22. --bs-border-divider: var(--border-divider-dark);
  23. --table-bg-tertiary: var(--bg-dark-tertiary);
  24. }
  25. :root {
  26. @include light-table;
  27. @include theme('default') {
  28. .project-ds-nav-page {
  29. .table,
  30. .table-container {
  31. @include dark-table;
  32. }
  33. }
  34. }
  35. }
  36. .table-container {
  37. flex: 1;
  38. margin-bottom: var(--spacing-06);
  39. background-color: var(--bs-table-bg);
  40. padding: var(--spacing-04);
  41. border-color: var(--bs-border-divider);
  42. .table {
  43. margin-bottom: initial;
  44. }
  45. }
  46. .table {
  47. border-color: var(--bs-border-divider);
  48. th,
  49. td {
  50. a {
  51. text-decoration: none;
  52. }
  53. }
  54. tbody {
  55. tr {
  56. &:last-child {
  57. td,
  58. th {
  59. border-bottom-width: 0;
  60. }
  61. }
  62. th[scope='row'] {
  63. font-weight: normal;
  64. }
  65. th {
  66. .form-label {
  67. font-weight: normal;
  68. }
  69. }
  70. }
  71. }
  72. .dropdown {
  73. .dropdown-table-button-toggle {
  74. @include action-button;
  75. padding: var(--spacing-04);
  76. }
  77. }
  78. }
  79. .table-container-bordered {
  80. padding: var(--spacing-04);
  81. border-color: var(--bs-border-divider);
  82. border-radius: var(--border-radius-base);
  83. border-width: var(--bs-border-width);
  84. border-style: solid;
  85. }
  86. .table-striped {
  87. tr,
  88. td,
  89. th {
  90. border-top-width: 0;
  91. border-bottom-width: 0;
  92. }
  93. > tbody > tr:nth-of-type(#{$table-striped-order}) {
  94. &:hover > * {
  95. --#{$prefix}table-hover-bg: var(--table-bg-tertiary);
  96. }
  97. }
  98. }