_tables.scss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. /* Table */
  2. .table {
  3. > {
  4. thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
  5. vertical-align: middle;
  6. }
  7. tbody > tr > {
  8. td, th {
  9. padding: 8px;
  10. }
  11. }
  12. tfoot > tr > {
  13. td, th {
  14. padding: 8px;
  15. }
  16. }
  17. }
  18. thead th {
  19. border-bottom-width: 2px;
  20. font-weight: $font-weight-bold;
  21. }
  22. td, th {
  23. font-size: 14px;
  24. border-top-width: 0px;
  25. border-bottom: 1px solid;
  26. border-color: #ebedf2 !important;
  27. padding: 0 25px !important;
  28. height: 60px;
  29. vertical-align: middle !important;
  30. }
  31. }
  32. /* table full-width */
  33. .table-full-width {
  34. margin-left: -15px;
  35. margin-right: -15px;
  36. }
  37. /* table bordered states */
  38. .table-bordered-bd-default {
  39. td, th {
  40. border: 1px solid $dark-color !important;
  41. }
  42. }
  43. .table-bordered-bd-primary {
  44. td, th {
  45. border: 1px solid $primary-color !important;
  46. }
  47. }
  48. .table-bordered-bd-secondary {
  49. td, th {
  50. border: 1px solid $secondary-color !important;
  51. }
  52. }
  53. .table-bordered-bd-info {
  54. td, th {
  55. border: 1px solid $info-color !important;
  56. }
  57. }
  58. .table-bordered-bd-success {
  59. td, th {
  60. border: 1px solid $success-color !important;
  61. }
  62. }
  63. .table-bordered-bd-warning {
  64. td, th {
  65. border: 1px solid $warning-color !important;
  66. }
  67. }
  68. .table-bordered-bd-danger {
  69. td, th {
  70. border: 1px solid $danger-color !important;
  71. }
  72. }
  73. .table-striped {
  74. td, th {
  75. border-top: 0 !important;
  76. border-bottom: 0 !important;
  77. }
  78. }
  79. /* table head background states*/
  80. .table-head-bg-default {
  81. thead {
  82. border: 1px solid $dark-color !important;
  83. }
  84. }
  85. .table-head-bg-primary {
  86. thead {
  87. border: 1px solid $primary-color !important;
  88. }
  89. }
  90. .table-head-bg-secondary {
  91. thead {
  92. border: 1px solid $secondary-color !important;
  93. }
  94. }
  95. .table-head-bg-info {
  96. thead {
  97. border: 1px solid $info-color !important;
  98. }
  99. }
  100. .table-head-bg-success {
  101. thead {
  102. border: 1px solid $success-color !important;
  103. }
  104. }
  105. .table-head-bg-warning {
  106. thead {
  107. border: 1px solid $warning-color !important;
  108. }
  109. }
  110. .table-head-bg-danger {
  111. thead {
  112. border: 1px solid $danger-color !important;
  113. }
  114. }
  115. @mixin table-bg-state($color){
  116. background: $color !important;
  117. color: $white-color !important;
  118. border: 0px !important;
  119. }
  120. .table-head-bg-default thead th, .table-striped-bg-default tbody tr:nth-of-type(odd) {
  121. @include table-bg-state($dark-color);
  122. }
  123. .table-head-bg-primary thead th, .table-striped-bg-primary tbody tr:nth-of-type(odd) {
  124. @include table-bg-state($primary-color);
  125. }
  126. .table-head-bg-secondary thead th, .table-striped-bg-secondary tbody tr:nth-of-type(odd) {
  127. @include table-bg-state($secondary-color);
  128. }
  129. .table-head-bg-info thead th, .table-striped-bg-info tbody tr:nth-of-type(odd) {
  130. @include table-bg-state($info-color);
  131. }
  132. .table-head-bg-success thead th, .table-striped-bg-success tbody tr:nth-of-type(odd) {
  133. @include table-bg-state($success-color);
  134. }
  135. .table-head-bg-warning thead th, .table-striped-bg-warning tbody tr:nth-of-type(odd) {
  136. @include table-bg-state($warning-color);
  137. }
  138. .table-head-bg-danger thead th, .table-striped-bg-danger tbody tr:nth-of-type(odd) {
  139. @include table-bg-state($danger-color);
  140. }
  141. /* table-responsive */
  142. .table-responsive {
  143. width: 100% !important;
  144. overflow-x: auto;
  145. -webkit-overflow-scrolling: touch;
  146. -ms-overflow-style: -ms-autohiding-scrollbar;
  147. }