_custom-data-table.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. $table-border-radius: .3rem;
  2. .custom-data-table-header .table-responsive .top {
  3. display: flex;
  4. justify-content: space-between;
  5. padding: 0 1rem;
  6. //margin-bottom: .5rem
  7. }
  8. .custom-data-table-header .table-responsive .top .action-btns {
  9. margin-top: 1.5rem;
  10. display: flex
  11. }
  12. .custom-data-table-header .table-responsive .top .action-btns .actions-dropodown {
  13. box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .14);
  14. border-radius: $table-border-radius;
  15. margin-right: .75rem
  16. }
  17. .custom-data-table-header .table-responsive .top .action-btns .actions-dropodown .dropdown-toggle {
  18. font-size: 1.125rem;
  19. font-weight: 500
  20. }
  21. .custom-data-table-header .table-responsive .top .action-btns .actions-dropodown .dropdown-toggle:after {
  22. left: 0
  23. }
  24. .custom-data-table-header .table-responsive .top .action-btns .dt-buttons .btn {
  25. padding: .9rem .938rem
  26. }
  27. .table-responsive .table-filter {
  28. display: inline-block
  29. }
  30. .table-filter .form-control {
  31. padding: 1.25rem 2.8rem !important;
  32. border-radius: 5rem;
  33. border: 0;
  34. background: $white;//lighten(#f0f0f0, 1%);
  35. box-shadow: $shadow;
  36. font-size: .82rem;
  37. }
  38. /* #eef1f4; */
  39. //.table-filter .form-control:focus {
  40. // background: #fff;
  41. // border: 2px solid $primary;
  42. // padding: 1.12rem 2.8rem !important;
  43. // box-shadow: none;
  44. //}
  45. .table-filter label {
  46. position: relative
  47. }
  48. .table-filter label:after {
  49. content: "\E8BD";
  50. font-family: feather;
  51. position: absolute;
  52. top: 0.45rem;
  53. font-size: 1.1rem;
  54. left: 1.1rem;
  55. font-weight: 300;
  56. color: $dark70;
  57. }
  58. table.custom-data-table.data-table {
  59. border-spacing: 0 .8rem;
  60. padding: 0;
  61. }
  62. //table.custom-data-table {
  63. // background: #ededf1;
  64. // border-radius: $card-border-radius;
  65. // box-shadow: $shadow;
  66. //}
  67. table.custom-data-table tbody tr {
  68. background: $white;
  69. }
  70. table.data-table {
  71. border-collapse: separate !important;
  72. }
  73. table.custom-data-table.data-table thead th {
  74. //padding: .714rem 1.785rem;
  75. padding: 0.714rem .51rem;
  76. font-weight: 600;
  77. border-bottom: 0;
  78. border-top: 0;
  79. }
  80. table.custom-data-table.data-table thead th input:focus {
  81. outline: 0
  82. }
  83. table.custom-data-table.data-table thead th:first-child {
  84. //padding-left: 0;
  85. padding-left: .9rem;
  86. }
  87. table.custom-data-table.data-table tbody tr {
  88. background-color: #fff;
  89. //box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
  90. box-shadow: $shadow;
  91. cursor: pointer;
  92. transition: all .3s ease;
  93. border-radius:$table-border-radius
  94. }
  95. table.custom-data-table.data-table tbody tr:hover {
  96. //transform: translateY(-4px);
  97. //transition: all .3s ease;
  98. //transform: none;
  99. background: lighten($dark30, 1%);
  100. }
  101. table.custom-data-table.data-table tbody tr td:first-child {
  102. padding-left: 1rem;
  103. border-top-left-radius: $table-border-radius;
  104. border-bottom-left-radius: $table-border-radius
  105. }
  106. table.custom-data-table.data-table tbody tr td:last-child {
  107. border-top-right-radius:$table-border-radius;
  108. border-bottom-right-radius:$table-border-radius
  109. }
  110. table.custom-data-table.data-table tbody tr.selected td {
  111. border-radius: 0
  112. }
  113. table.custom-data-table.data-table tbody td {
  114. //padding: 1.357rem;
  115. border: none;
  116. vertical-align: middle;
  117. height: $table-td-height;
  118. padding: .55rem;
  119. line-height: 1.42857;
  120. }
  121. table.custom-data-table.data-table tbody td input:focus {
  122. outline: 0
  123. }
  124. table.custom-data-table.data-table tbody td:focus {
  125. outline: 0
  126. }
  127. table.custom-data-table.data-table tbody td .progress {
  128. margin-bottom: 0;
  129. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08)
  130. }