Sorter.css 6.2 KB

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