claroGrid.css 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. /* Claro styles for DataGrid */
  2. @import url("Grid.css");
  3. .claro .dojoxGrid {
  4. margin:0px;
  5. padding:0px;
  6. border-collapse:collapse;
  7. background-color: #fff;
  8. border: 1px solid #DBDBDB;
  9. }
  10. /* messages */
  11. .claro .dojoxGridMasterMessages {
  12. background-color: #fefefe;
  13. }
  14. .claro .dojoxGridLoading,
  15. .claro .dojoxGridError {
  16. background-position:left center;
  17. background-repeat: no-repeat;
  18. padding-left:25px;
  19. }
  20. .claro .dojoxGridLoading {
  21. background-image:url("../../../dijit/themes/claro/images/loadingAnimation.gif");
  22. }
  23. .claro .dojoxGridError {
  24. background-image: url('../../../dijit/icons/images/commonIconsObjActEnabled.png');
  25. background-position: -496px;
  26. width: 16px;
  27. height: 16px;
  28. }
  29. /* header */
  30. .claro .dojoxGridHeader {
  31. background: transparent;
  32. margin-left: -2px;
  33. }
  34. .claro .dojoxGridHeader .dojoxGridCell {
  35. padding: 2px 5px;
  36. vertical-align: top;
  37. background: transparent;
  38. border-style:solid;
  39. border-width:1px;
  40. border-color: #FFFFFF #BCBCBC #BCBCBC #FFFFFF;
  41. }
  42. .dj_ie6 .claro .dojoxGridHeader .dojoxGridCell {
  43. border-color:#BCBCBC #BCBCBC #BCBCBC #e5edf4;
  44. }
  45. .claro .dojoxGridHeader .dojoxGridCellOver {
  46. background: #9dcfff;
  47. }
  48. /* header sorting arrow */
  49. .claro .dojoxGridSortNode {
  50. text-decoration:none;
  51. display:block;
  52. white-space: normal;
  53. background: none;
  54. border: none;
  55. padding: 0;
  56. }
  57. .claro .dojoxGridCellOver .dojoxGridSortNode {
  58. background-color:#9dcfff;
  59. }
  60. .claro .dojoxGridArrowButtonChar {
  61. display:none;
  62. float:right;
  63. }
  64. .claro .dojoxGridArrowButtonNode {
  65. background:transparent url("../../../dijit/themes/claro/images/spriteArrows.png") no-repeat scroll left center;
  66. display:block;
  67. float:right;
  68. height:1em;
  69. margin:2px 4px 0 5px;
  70. padding-left:0;
  71. width:7px;
  72. }
  73. .claro .dojoxGridSortUp .dojoxGridArrowButtonNode {
  74. background-position:-21px 50%;
  75. }
  76. /* header rows */
  77. .claro .dojoxGridMasterHeader {
  78. background: url("images/header.png") #EDF2F7 repeat-x bottom;
  79. background: -moz-linear-gradient(top, #EDF2F7, #D0DFEA);
  80. background: -webkit-gradient(linear, left top, left bottom, from(#EDF2F7), to(#D0DFEA));
  81. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFEDF2F7, endColorstr=#FFD0DFEA);
  82. border: 1px solid #FFFFFF;
  83. border-right: none;
  84. }
  85. .claro .dojoxGridMasterHeader .dojoxGridRowTable {
  86. border-left: 1px solid #BCBCBC;
  87. border-right: 1px solid #FFFFFF;
  88. background-color: transparent;
  89. }
  90. .dj_ie .claro .dojoxGridHeader .dojoxGridRowTable {
  91. border-collapse:separate;
  92. }
  93. .claro .dojoxGridHeader .dojoxGridRowTable tr {
  94. background: none;
  95. }
  96. .claro .dojoxGridHeader tr:first-child .dojoxGridCell {
  97. border-top: 1px solid transparent;
  98. }
  99. .claro .dojoxGridHeader:first-child .dojoxGridRowTable {
  100. border-left-width: 0;
  101. }
  102. .claro .dojoxGridHeader:first-child {
  103. margin-left: -1px;
  104. }
  105. /* Grid view content */
  106. .claro .dojoxGridScrollbox {
  107. background-color: #fefefe;
  108. }
  109. /* rowbar - row headers */
  110. .claro .dojoxGridRowbar {
  111. background:url("images/header.png") #e5edf4 repeat-x top;
  112. border:none;
  113. border-right:1px solid #BCBCBC;
  114. }
  115. .claro .dojoxGridRowbarTable {
  116. background:transparent url("images/header_shadow.png") repeat-x scroll center bottom;
  117. }
  118. .dj_ie6 .claro .dojoxGridRowbar,
  119. .dj_ie6 .claro .dojoxGridRowbarTable {
  120. background-image:none;
  121. }
  122. .claro .dojoxGridRowbarInner {
  123. border:none;
  124. border-bottom:1px solid #ccc;
  125. }
  126. .claro .dojoxGridRowbarOver .dojoxGridRowbarTable {
  127. background-color:#abd5fd;
  128. }
  129. .claro .dojoxGridRowbarSelected {
  130. background-color:#abd5fd;
  131. border-right:1px solid #ccc;
  132. }
  133. /* rows */
  134. .claro .dojoxGridRow {
  135. border:none;
  136. background-color:#fff;
  137. }
  138. .dj_ie .claro .dojoxGridMasterView .dojoxGridRowTable {
  139. border-collapse:separate;/*IE, separate is must to show the border of tr and td*/
  140. }
  141. .claro .dojoxGridRowTable tr {
  142. background:url("images/row_back.png") #fff repeat-x;
  143. }
  144. .claro .dojoxGridRowOdd .dojoxGridRowTable tr {
  145. background-color:#f7fcff;
  146. }
  147. .claro .dojoxGridRowSelected .dojoxGridRowTable tr {
  148. background-color:#cee6fa;
  149. }
  150. /* cells */
  151. .claro .dojoxGridCell {
  152. outline: none;
  153. padding: 3px 5px;
  154. word-wrap: break-word;
  155. border:1px solid transparent;
  156. border-color: transparent #E5DAC8 #E5DAC8 transparent;
  157. }
  158. .dj_ie6 .claro .dojoxGridCell {
  159. border-color: #F5F5F5;
  160. }
  161. .dj_ie6 .claro .dojoxGridRowOdd .dojoxGridCell {
  162. border-left-color:#f4f9fd;
  163. border-right-color:#f4f9fd;
  164. }
  165. .dj_ie6 .claro .dojoxGridRowSelected .dojoxGridCell {
  166. border-left-color:#d3e9fb;
  167. border-right-color:#d3e9fb;
  168. }
  169. .claro .dojoxGridRowSelected .dojoxGridCell {
  170. border-top:1px solid #BFD6EB;
  171. border-bottom:1px solid #BFD6EB;
  172. }
  173. .claro .dojoxGridCellFocus {
  174. outline: none;
  175. border:1px dashed darkblue !important;
  176. }
  177. /* Single Affordance Hover Effect */
  178. .claro .dojoxGridRowOver .dojoxGridCell {
  179. background:url("images/row_back.png") #ABD6FF repeat-x;
  180. border-top:1px solid #769DC0;
  181. border-bottom:1px solid #769DC0;
  182. }
  183. .dj_ie6 .claro .dojoxGridRowOver .dojoxGridCell,
  184. .dj_ie7 .claro .dojoxGridRowOver .dojoxGridCell {
  185. border-left:1px solid #ABD6FF;
  186. border-right:1px solid #ABD6FF;
  187. }
  188. .claro .dojoxGridRowActive .dojoxGridCell {
  189. background:url("images/td_button_down.png") #7DBEFA repeat-x;
  190. }
  191. .dj_ie6 .claro .dojoxGridRowActive .dojoxGridCell,
  192. .dj_ie7 .claro .dojoxGridRowActive .dojoxGridCell {
  193. border-left:1px solid #7DBEFA;
  194. border-right:1px solid #7DBEFA;
  195. }
  196. /* Double Affordance Hover Effect */
  197. .claro .dojoxGridDoubleAffordance .dojoxGridRowOver .dojoxGridCellOver {
  198. border:solid 1px #769dc0;
  199. background-color:#93cafe;
  200. border-collapse:separate;/*FF*/
  201. }
  202. .claro .dojoxGridDoubleAffordance .dojoxGridRowActive .dojoxGridCell{
  203. background-image:url("images/row_back.png");
  204. }
  205. .claro .dojoxGridDoubleAffordance .dojoxGridRowActive .dojoxGridCellActive {
  206. background:url("images/td_button_down.png") #93cafe repeat-x;
  207. }
  208. .dj_ie6 .claro .dojoxGridCell {
  209. background-image:none !important;
  210. }
  211. /* editing */
  212. .claro .dojoxGridRowEditing td {
  213. /* background-color: #F4FFF4; */
  214. background-color: #cee6fa;
  215. /* padding: 0px 3px 0px 3px; */
  216. }
  217. .claro .dojoxGridRow-inserting td {
  218. background-color: #F4FFF4;
  219. }
  220. .claro .dojoxGridRow-inflight td {
  221. background-color: #F2F7B7;
  222. }
  223. .claro .dojoxGridRow-error td {
  224. background-color: #F8B8B6;
  225. }
  226. /* Drag and Drop */
  227. .claro .dojoxGrid .dojoDndItemBefore {
  228. border-left-color: #3559ac;
  229. }
  230. .claro .dojoxGrid .dojoDndItemAfter {
  231. border-right-color: #3559ac;
  232. }
  233. /* Tree Grid */
  234. .claro .dojoxGridExpando {
  235. float: left;
  236. height: 18px;
  237. width: 18px;
  238. text-align: center;
  239. margin-top: -3px;
  240. }
  241. .dijitRtl .claro .dojoxGridExpando {
  242. float: right;
  243. }
  244. .claro .dojoxGridExpandoCell {
  245. padding-top: 5px;
  246. background-position: left top !important;
  247. }
  248. .claro .dojoxGridExpandoNode {
  249. background-image: url('../../../dijit/themes/claro/images/treeExpandImages.png');
  250. width: 16px;
  251. height: 16px;
  252. cursor: pointer;
  253. background-position: 1px 0px; /* for closed state */
  254. }
  255. .dj_ie6 .claro .dojoxGridExpandoNode {
  256. background-image: url('../../../dijit/themes/claro/images/treeExpandImages8bit.png');
  257. }
  258. .claro .dojoxGridRowOver .dojoxGridExpandoNode {
  259. background-position: -17px 0px;
  260. }
  261. .claro .dojoxGridExpandoOpened .dojoxGridExpandoNode {
  262. background-position: -35px 0px;
  263. }
  264. .claro .dojoxGridRowOver .dojoxGridExpandoOpened .dojoxGridExpandoNode {
  265. background-position: -53px 0px;
  266. }
  267. .claro .dojoxGridExpandoLoading .dojoxGridExpandoNode {
  268. background-image: url('../../../dijit/themes/claro/images/loadingAnimation.gif');
  269. }
  270. .claro .dojoxGridTreeModel .dojoxGridNoChildren .dojoxGridExpando {
  271. visibility: visible !important;
  272. width: 18px !important;
  273. }
  274. .claro .dojoxGridTreeModel .dojoxGridNoChildren .dojoxGridExpandoNode,
  275. .dj_ie6 .claro .dojoxGridTreeModel .dojoxGridNoChildren .dojoxGridExpandoNode {
  276. background-image:none;
  277. }
  278. .claro .dojoxGridExpandoNodeInner {
  279. visibility: hidden;
  280. }
  281. .dijit_a11y .dojoxGridExpandoNodeInner {
  282. visibility: visible;
  283. }
  284. .claro .dojoxGridSummaryRow .dojoxGridCell {
  285. border:1px solid transparent;
  286. }
  287. .dj_ie6 .claro .dojoxGridSummaryRow .dojoxGridCell {
  288. border-color:#fff
  289. }
  290. .claro tr.dojoxGridSubRowAlt {
  291. background-color:#f4f9fd;
  292. }
  293. .claro .dojoxGridRowOdd tr.dojoxGridSubRowAlt {
  294. background-color:#fff;
  295. }
  296. .claro .dojoxGridRow .dojoxGridRowTable tr.dojoxGridRowSelected {
  297. background-color:#cee6fa;
  298. }