ng-table.less 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. @table-border-color: #999;
  2. @cell-border-color: #eee;
  3. .ng-table {
  4. th {
  5. text-align: center;
  6. -webkit-touch-callout: none;
  7. -webkit-user-select: none;
  8. -khtml-user-select: none;
  9. -moz-user-select: none;
  10. -ms-user-select: none;
  11. user-select: none;
  12. &.sortable {
  13. cursor: pointer;
  14. .sort-indicator {
  15. padding-right: 18px;
  16. position: relative;
  17. &:after, &:before {
  18. content: "";
  19. border-width: 0 4px 4px;
  20. border-style: solid;
  21. border-color: #000 transparent;
  22. visibility: visible;
  23. right: 5px;
  24. top: 50%;
  25. position: absolute;
  26. opacity: .3;
  27. margin-top: -4px;
  28. }
  29. &:before {
  30. margin-top: 2px;
  31. border-bottom: none;
  32. border-left: 4px solid transparent;
  33. border-right: 4px solid transparent;
  34. border-top: 4px solid #000;
  35. }
  36. }
  37. .sort-indicator:hover:after, .sort-indicator:hover:before {
  38. opacity: 1;
  39. visibility: visible;
  40. }
  41. &.sort-desc, &.sort-asc {
  42. background-color: rgba(141, 192, 219, 0.25);
  43. text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  44. .sort-indicator:after {
  45. margin-top: -2px;
  46. }
  47. .sort-indicator:before {
  48. visibility: hidden;
  49. }
  50. }
  51. &.sort-asc .sort-indicator:after, &.sort-asc .sort-indicator:hover:after {
  52. visibility: visible;
  53. filter: alpha(opacity=60);
  54. -khtml-opacity: 0.6;
  55. -moz-opacity: 0.6;
  56. opacity: 0.6;
  57. }
  58. &.sort-desc .sort-indicator:after {
  59. border-bottom: none;
  60. border-left: 4px solid transparent;
  61. border-right: 4px solid transparent;
  62. border-top: 4px solid #000;
  63. visibility: visible;
  64. -webkit-box-shadow: none;
  65. -moz-box-shadow: none;
  66. box-shadow: none;
  67. filter: alpha(opacity=60);
  68. -khtml-opacity: 0.6;
  69. -moz-opacity: 0.6;
  70. opacity: 0.6;
  71. }
  72. }
  73. &.filter {
  74. .input-filter {
  75. margin: 0;
  76. display: block;
  77. width: 100%;
  78. min-height: 30px;
  79. -webkit-box-sizing: border-box;
  80. -moz-box-sizing: border-box;
  81. box-sizing: border-box;
  82. }
  83. }
  84. }
  85. & + .pagination {
  86. margin-top: 0;
  87. }
  88. }
  89. @media only screen and (max-width: 800px) {
  90. .ng-table-responsive {
  91. border-bottom: 1px solid @table-border-color;
  92. tr {
  93. border-top: 1px solid @table-border-color;
  94. border-left: 1px solid @table-border-color;
  95. border-right: 1px solid @table-border-color;
  96. }
  97. td:before {
  98. position: absolute;
  99. padding: 8px;
  100. left: 0;
  101. top: 0;
  102. width: 50%;
  103. white-space: nowrap;
  104. text-align: left;
  105. font-weight: bold;
  106. }
  107. thead {
  108. tr {
  109. th {
  110. text-align: left;
  111. }
  112. &.ng-table-filters {
  113. th {
  114. padding: 0;
  115. form > div {
  116. padding: 8px;
  117. }
  118. }
  119. }
  120. }
  121. }
  122. td {
  123. border: none;
  124. border-bottom: 1px solid @cell-border-color;
  125. position: relative;
  126. padding-left: 50%;
  127. white-space: normal;
  128. text-align: left;
  129. &:before {
  130. content: attr(data-title-text);
  131. }
  132. }
  133. &, thead, tbody, th, td, tr {
  134. display: block;
  135. }
  136. }
  137. .ng-table-pager {}
  138. .ng-table-pagination {}
  139. .ng-table-counts {}
  140. }