Sorter.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /*
  2. .dojoxGrid
  3. Sorted, SingleSorted | NestSorted
  4. .dojoxGridCell
  5. Over, SortFocus, ShowIndex
  6. .dojoxGridSortNode
  7. Asc | Desc, Main|Sub
  8. .dojoxGridSortBtn
  9. :hover, Single|Nested
  10. */
  11. .dojoxGrid .dojoxGridSortNode {
  12. position: relative;
  13. border: 1px solid transparent;
  14. cursor: pointer;
  15. }
  16. .dj_ie6 .dojoxGrid .dojoxGridSortNode,
  17. .dj_ie7 .dojoxGrid .dojoxGridSortNode {
  18. overflow: hidden;
  19. width:100%;
  20. }
  21. .dojoxGrid .dojoxGridSortNoWrap {
  22. white-space:nowrap;
  23. word-wrap: normal;
  24. }
  25. .dojoxGridSortBtn {
  26. width: 10px;
  27. height:100%;
  28. visibility: hidden;
  29. top: 0;
  30. display:block;
  31. position: absolute;
  32. color: #000;
  33. background: #DFEAF1 url(images/sprite_icons.png) no-repeat 100px 0;
  34. text-decoration: none;
  35. outline: none;
  36. right: 0;
  37. border: 1px solid transparent;
  38. box-sizing: border-box; /* css3 rec */
  39. -moz-box-sizing: border-box; /* ff */
  40. -ms-box-sizing: border-box; /* ie8 */
  41. -webkit-box-sizing: border-box; /* safari3 */
  42. -khtml-box-sizing: border-box; /* konqueror */
  43. }
  44. .dj_ie6 .dojoxGridSortBtn,
  45. .dj_ie6 .dojoxGrid .dojoxGridSortNode {
  46. border: none;
  47. }
  48. .dojoxGridSortBtnNested {
  49. right: 10px;
  50. }
  51. .dojoxGridCellSortFocus .dojoxGridSortBtn {
  52. border-left: 1px solid #999999;
  53. background-color: #DFEAF1;
  54. }
  55. .dojoxGridCellOver .dojoxGridSortBtn {
  56. border-left: 1px solid #999999;
  57. background-color: #9dcfff;
  58. }
  59. .dojoxGridSortNode {
  60. outline: none;
  61. }
  62. /*Control the title node width*/
  63. .dojoxGridSorted .dojoxGridCellOver .dojoxGridSortNode,
  64. .dojoxGridCellSortFocus .dojoxGridSortNode,
  65. .dojoxGridSingleSorted .dojoxGridHeader .dojoxGridCellOver .dojoxGridSortNodeMain,
  66. .dojoxGridSingleSorted .dojoxGridHeader .dojoxGridCellSortFocus .dojoxGridSortNodeMain {
  67. margin-right: 5px;
  68. }
  69. .dojoxGridSorted .dojoxGridCellOver .dojoxGridSortNode,
  70. .dojoxGridSorted .dojoxGridCellSortFocus .dojoxGridSortNode {
  71. margin-right: 24px;
  72. }
  73. /*html > body used for !dj_ie6, TBD - a better way*/
  74. html > body .dojoxGridCellOver .dojoxGridSortNode .dojoxGridSortBtnSingle {
  75. right: -5px;
  76. }
  77. html > body .dojoxGridCellSortFocus .dojoxGridSortNode .dojoxGridSortBtnSingle,
  78. html > body .dojoxGridSorted .dojoxGridCellOver .dojoxGridSortNodeMain .dojoxGridSortBtnSingle,
  79. html > body .dojoxGridSorted .dojoxGridCellSortFocus .dojoxGridSortNodeMain .dojoxGridSortBtnSingle {
  80. right: -10px;
  81. }
  82. html > body .dojoxGridSorted .dojoxGridCellOver .dojoxGridSortBtnSingle,
  83. html > body .dojoxGridSorted .dojoxGridCellSortFocus .dojoxGridSortBtnSingle,
  84. html > body .dojoxGridNestSorted .dojoxGridCellOver .dojoxGridSortNodeMain .dojoxGridSortBtnSingle,
  85. html > body .dojoxGridNestSorted .dojoxGridCellSortFocus .dojoxGridSortNodeMain .dojoxGridSortBtnSingle {
  86. right: -28px;
  87. }
  88. html > body .dojoxGridSorted .dojoxGridCellOver .dojoxGridSortBtnNested,
  89. html > body .dojoxGridSorted .dojoxGridCellSortFocus .dojoxGridSortBtnNested {
  90. right: -17px;
  91. }
  92. .dojoxGrid .dojoxGridHeader .dojoxGridRowTable .dojoxGridNoSort .dojoxGridSortNode {
  93. margin: 0!important;
  94. }
  95. .dj_ie7 .dojoxGridSortBtn {
  96. right: 0!important;
  97. }
  98. .dj_ie7 .dojoxGridSortBtnNested {
  99. right: 10px!important;
  100. }
  101. /*Focus border*/
  102. /*Control visibility*/
  103. .dojoxGrid .dojoxGridCellOver .dojoxGridSortNode .dojoxGridSortBtnSingle, /* single sort btn is always visible when mouseover*/
  104. .dojoxGrid .dojoxGridCellSortFocus .dojoxGridSortNode .dojoxGridSortBtnSingle,
  105. .dojoxGridSorted .dojoxGridCellOver .dojoxGridSortNode .dojoxGridSortBtnNested, /* in a sorted grid, nest btn is always visible when mouseover (except 1)*/
  106. .dojoxGridSorted .dojoxGridCellSortFocus .dojoxGridSortNode .dojoxGridSortBtnNested,
  107. .dojoxGrid .dojoxGridCellShowIndex .dojoxGridSortNode .dojoxGridSortBtnNested, /* in a single sort grid, when mouseover other columns, show 1 on the main sort column*/
  108. .dojoxGrid .dojoxGridSortNodeSorted .dojoxGridSortBtn { /* in a sorted column, single or nested sort btn are always visible (except 2)*/
  109. visibility: visible;
  110. }
  111. .dojoxGridSingleSorted .dojoxGridCellOver .dojoxGridSortNodeMain .dojoxGridSortBtnNested, /*(1)in a single sorted grid, nest btn is hidden in sort column when mouseover*/
  112. .dojoxGridSingleSorted .dojoxGridCellSortFocus .dojoxGridSortNodeMain .dojoxGridSortBtnNested,
  113. .dojoxGridSingleSorted .dojoxGridSortNode .dojoxGridSortBtnNested { /*(2)all nested btn is hidden in single sort grid without mouse over*/
  114. visibility: hidden;
  115. }
  116. /*
  117. -119 asc
  118. -99 desc
  119. -159 do asc
  120. -139 do desc
  121. -179 no sort
  122. */
  123. /*Control background image*/
  124. .dojoxGridSortNodeAsc .dojoxGridSortBtnSingle {
  125. background-position: -119px 5px;
  126. visibility: visible;
  127. }
  128. .dojoxGridSortNodeDesc .dojoxGridSortBtnSingle {
  129. background-position: -99px 5px;
  130. visibility: visible;
  131. }
  132. /*hover single sort*/
  133. .dojoxGridCellOver .dojoxGridSortBtnSingle,
  134. .dojoxGridCellSortFocus .dojoxGridSortBtnSingle {
  135. background-position: -159px 5px;
  136. }
  137. .dojoxGridCellOver .dojoxGridSortNodeAsc .dojoxGridSortBtnSingle,
  138. .dojoxGridCellSortFocus .dojoxGridSortNodeAsc .dojoxGridSortBtnSingle,
  139. .dojoxGrid .dojoxGridCellOver .dojoxGridSortNode .dojoxGridSortBtnAsc,
  140. .dojoxGrid .dojoxGridCellSortFocus .dojoxGridSortNode .dojoxGridSortBtnAsc {
  141. background-position: -139px 5px;
  142. }
  143. .dojoxGridCellOver .dojoxGridSortNodeDesc .dojoxGridSortBtnSingle,
  144. .dojoxGridCellSortFocus .dojoxGridSortNodeDesc .dojoxGridSortBtnSingle,
  145. .dojoxGrid .dojoxGridCellOver .dojoxGridSortNode .dojoxGridSortBtnDesc,
  146. .dojoxGrid .dojoxGridCellSortFocus .dojoxGridSortNode .dojoxGridSortBtnDesc {
  147. background-position: -179px 5px;
  148. }
  149. /*hover nested sort*/
  150. .dojoxGridCellOver .dojoxGridSortBtnNested,
  151. .dojoxGridCellSortFocus .dojoxGridSortBtnNested {
  152. background-position: -149px 5px;
  153. width: 19px;
  154. }
  155. .dojoxGridCellOver .dojoxGridSortNodeAsc .dojoxGridSortBtnNested,
  156. .dojoxGridCellSortFocus .dojoxGridSortNodeAsc .dojoxGridSortBtnNested {
  157. background-position: -129px 5px;
  158. }
  159. .dojoxGridCellOver .dojoxGridSortNodeDesc .dojoxGridSortBtnNested,
  160. .dojoxGridCellSortFocus .dojoxGridSortNodeDesc .dojoxGridSortBtnNested {
  161. background-position: -169px 5px;
  162. }
  163. .dojoxGridNestSorted .dojoxGridCellOver .dojoxGridSortBtnSingle,
  164. .dojoxGridNestSorted .dojoxGridCellSortFocus .dojoxGridSortBtnSingle {
  165. background-position: -159px 5px;
  166. }
  167. .dojoxGridCellOver .dojoxGridSortBtn:hover {
  168. background-color:#A3E4FF;
  169. }
  170. .dojoxGrid .dojoxGridSortNodeFocus,
  171. .dojoxGridCellSortFocus .dojoxGridRowSelector,
  172. .dojoxGridCellSortFocus .dojoxGridSortBtnFocus {
  173. border: 1px dashed #666;
  174. }