_tables.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. // ================================================================================================
  2. // File Name: tables.scss
  3. // Description: Tables pages custom scss
  4. // ----------------------------------------------------------------------------------------------
  5. // Item name: Vuexy - Vuejs, 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, td {
  12. white-space: nowrap;
  13. }
  14. }
  15. // table th, td padding
  16. .table {
  17. thead th{
  18. vertical-align: top;
  19. }
  20. th, td {
  21. padding: 1rem;
  22. vertical-align: middle;
  23. }
  24. //table heading font-size
  25. th{
  26. font-size: $table-th-font-size;
  27. }
  28. }
  29. // Table - inverse
  30. .table-inverse {
  31. color: $white;
  32. background-color: $info;
  33. }
  34. // Table - hover animation
  35. .table-hover-animation{
  36. background-color: $body-bg;
  37. thead{
  38. th{
  39. border-top: 2px solid $table-border-color;
  40. border-bottom: 0;
  41. background-color: $white;
  42. }
  43. }
  44. th, td {
  45. border: 0;
  46. }
  47. tbody{
  48. tr{
  49. transition: all 0.25s ease;
  50. background-color: $white;
  51. &:hover{
  52. transform: translateY(-4px);
  53. }
  54. }
  55. }
  56. }
  57. // IE Specific CSS
  58. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  59. .table-hover-animation{
  60. tr{
  61. &:hover{
  62. border-bottom-color: $table-border-color;
  63. }
  64. }
  65. }
  66. }