_tables.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. // ================================================================================================
  2. // File Name: tables.scss
  3. // Description: Tables pages custom scss
  4. // ----------------------------------------------------------------------------------------------
  5. // Item Name: Vuexy - Vuejs, React, Angular, HTML & Laravel Admin Dashboard Template
  6. // Author: PIXINVENT
  7. // Author URL: http://www.themeforest.net/user/pixinvent
  8. // ================================================================================================
  9. // table-white-space
  10. .table-white-space {
  11. th,
  12. td {
  13. white-space: nowrap;
  14. }
  15. }
  16. // table th, td padding
  17. .table {
  18. thead,
  19. tfoot {
  20. th {
  21. vertical-align: top;
  22. text-transform: uppercase;
  23. font-size: $table-th-font-size;
  24. letter-spacing: 0.5px;
  25. }
  26. }
  27. th,
  28. td {
  29. padding: $table-cell-padding 2rem;
  30. vertical-align: middle;
  31. }
  32. &.table-sm {
  33. th,
  34. td {
  35. padding: $table-cell-padding-sm 0.5rem;
  36. &:first-child {
  37. padding-left: 0.75rem;
  38. }
  39. }
  40. }
  41. }
  42. // if we are not using table-light class then also header color should apply
  43. .table:not(.table-dark):not(.table-light) {
  44. thead:not(.thead-dark) th,
  45. tfoot:not(.thead-dark) th {
  46. background-color: $table-head-bg;
  47. }
  48. }
  49. // table inside card, don't need margin bottom
  50. .table-hover {
  51. tbody {
  52. tr {
  53. cursor: pointer;
  54. }
  55. }
  56. }
  57. // table border radius
  58. .card .table {
  59. margin-bottom: 0;
  60. border-bottom-left-radius: $border-radius;
  61. border-bottom-right-radius: $border-radius;
  62. tbody {
  63. tr:last-child {
  64. td:first-child {
  65. border-bottom-left-radius: $border-radius;
  66. }
  67. td:last-child {
  68. border-bottom-right-radius: $border-radius;
  69. }
  70. }
  71. }
  72. }
  73. // Contexual table inside card radius
  74. .card {
  75. table {
  76. tr[class*='table-']:last-child {
  77. td:first-child {
  78. border-bottom-left-radius: $border-radius;
  79. }
  80. td:last-child {
  81. border-bottom-right-radius: $border-radius;
  82. }
  83. }
  84. }
  85. }