tree.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. .tree {
  2. margin: 0;
  3. padding: 0;
  4. list-style-type: none;
  5. }
  6. .tree li {
  7. white-space: nowrap;
  8. }
  9. .tree li ul {
  10. list-style-type: none;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. .tree-node {
  15. height: 26px;
  16. white-space: nowrap;
  17. cursor: pointer;
  18. }
  19. .tree-hit {
  20. cursor: pointer;
  21. }
  22. .tree-expanded,
  23. .tree-collapsed,
  24. .tree-folder,
  25. .tree-file,
  26. .tree-checkbox,
  27. .tree-indent {
  28. display: inline-block;
  29. width: 16px;
  30. height: 18px;
  31. margin: 4px 0;
  32. vertical-align: middle;
  33. overflow: hidden;
  34. }
  35. .tree-expanded {
  36. background: url('images/tree_icons.png') no-repeat -18px 0px;
  37. }
  38. .tree-expanded-hover {
  39. background: url('images/tree_icons.png') no-repeat -50px 0px;
  40. }
  41. .tree-collapsed {
  42. background: url('images/tree_icons.png') no-repeat 0px 0px;
  43. }
  44. .tree-collapsed-hover {
  45. background: url('images/tree_icons.png') no-repeat -32px 0px;
  46. }
  47. .tree-lines .tree-expanded,
  48. .tree-lines .tree-root-first .tree-expanded {
  49. background: url('images/tree_icons.png') no-repeat -144px 0;
  50. }
  51. .tree-lines .tree-collapsed,
  52. .tree-lines .tree-root-first .tree-collapsed {
  53. background: url('images/tree_icons.png') no-repeat -128px 0;
  54. }
  55. .tree-lines .tree-node-last .tree-expanded,
  56. .tree-lines .tree-root-one .tree-expanded {
  57. background: url('images/tree_icons.png') no-repeat -80px 0;
  58. }
  59. .tree-lines .tree-node-last .tree-collapsed,
  60. .tree-lines .tree-root-one .tree-collapsed {
  61. background: url('images/tree_icons.png') no-repeat -64px 0;
  62. }
  63. .tree-line {
  64. background: url('images/tree_icons.png') no-repeat -176px 0;
  65. }
  66. .tree-join {
  67. background: url('images/tree_icons.png') no-repeat -192px 0;
  68. }
  69. .tree-joinbottom {
  70. background: url('images/tree_icons.png') no-repeat -160px 0;
  71. }
  72. .tree-folder {
  73. background: url('images/tree_icons.png') no-repeat -208px 0;
  74. }
  75. .tree-folder-open {
  76. background: url('images/tree_icons.png') no-repeat -224px 0;
  77. }
  78. .tree-file {
  79. background: url('images/tree_icons.png') no-repeat -240px 0;
  80. }
  81. .tree-loading {
  82. background: url('images/loading.gif') no-repeat center center;
  83. }
  84. .tree-checkbox0 {
  85. background: url('images/tree_icons.png') no-repeat -208px -18px;
  86. }
  87. .tree-checkbox1 {
  88. background: url('images/tree_icons.png') no-repeat -224px -18px;
  89. }
  90. .tree-checkbox2 {
  91. background: url('images/tree_icons.png') no-repeat -240px -18px;
  92. }
  93. .tree-title {
  94. font-size: 14px;
  95. display: inline-block;
  96. text-decoration: none;
  97. vertical-align: middle;
  98. white-space: nowrap;
  99. padding: 0 2px;
  100. margin: 4px 0;
  101. height: 18px;
  102. line-height: 18px;
  103. }
  104. .tree-node-proxy {
  105. font-size: 14px;
  106. line-height: 20px;
  107. padding: 0 2px 0 20px;
  108. border-width: 1px;
  109. border-style: solid;
  110. z-index: 9900000;
  111. }
  112. .tree-dnd-icon {
  113. display: inline-block;
  114. position: absolute;
  115. width: 16px;
  116. height: 18px;
  117. left: 2px;
  118. top: 50%;
  119. margin-top: -9px;
  120. }
  121. .tree-dnd-yes {
  122. background: url('images/tree_icons.png') no-repeat -256px 0;
  123. }
  124. .tree-dnd-no {
  125. background: url('images/tree_icons.png') no-repeat -256px -18px;
  126. }
  127. .tree-node-top {
  128. border-top: 1px dotted red;
  129. }
  130. .tree-node-bottom {
  131. border-bottom: 1px dotted red;
  132. }
  133. .tree-node-append .tree-title {
  134. border: 1px dotted red;
  135. }
  136. .tree-editor {
  137. border: 1px solid #ddd;
  138. font-size: 14px;
  139. height: 26px;
  140. line-height: 26px;
  141. padding: 0 4px;
  142. margin: 0;
  143. width: 80px;
  144. outline-style: none;
  145. vertical-align: middle;
  146. position: absolute;
  147. top: 0;
  148. }
  149. .tree-node-proxy {
  150. background-color: #fff;
  151. color: #444;
  152. border-color: #ddd;
  153. }
  154. .tree-node-hover {
  155. background: #E6E6E6;
  156. color: #444;
  157. }
  158. .tree-node-selected {
  159. background: #CCE6FF;
  160. color: #000;
  161. }
  162. .tree-node-hidden {
  163. display: none;
  164. }