_tree.scss2.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-tree-Panel-css_mixin-extjs-tree'>/**
  19. </span> * Creates the base structure of Tree.
  20. * @member Ext.tree.Panel
  21. */
  22. @mixin extjs-tree {
  23. // Tree tables must assume either full width of the View element, or, when necessary, must overflow
  24. // They must not shrink wrap the width and only be as wide as their widest node's content.
  25. .#{$prefix}autowidth-table table.#{$prefix}grid-table {
  26. table-layout: auto;
  27. width: auto!important;
  28. }
  29. .#{$prefix}tree-no-lines .#{$prefix}tree-elbow {
  30. background-color: transparent;
  31. }
  32. .#{$prefix}tree-no-lines .#{$prefix}tree-elbow-end {
  33. background-color: transparent;
  34. }
  35. .#{$prefix}tree-no-lines .#{$prefix}tree-elbow-line {
  36. background-color: transparent;
  37. }
  38. //arrows
  39. .#{$prefix}tree-arrows .#{$prefix}tree-elbow-plus {
  40. background: transparent no-repeat 0 0;
  41. }
  42. .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-plus {
  43. background: transparent no-repeat 0 0;
  44. }
  45. .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-minus {
  46. background: transparent no-repeat -16px 0;
  47. }
  48. .#{$prefix}tree-arrows .#{$prefix}tree-elbow-minus {
  49. background: transparent no-repeat -16px 0;
  50. }
  51. .#{$prefix}tree-arrows .#{$prefix}tree-elbow {
  52. background-color: transparent !important;
  53. }
  54. .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end {
  55. background-color: transparent !important;
  56. }
  57. .#{$prefix}tree-arrows .#{$prefix}tree-elbow-line {
  58. background-color: transparent !important;
  59. }
  60. //elbows
  61. .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus,
  62. .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus {
  63. background-position: -32px 0;
  64. }
  65. .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-minus,
  66. .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-minus {
  67. background-position: -48px 0;
  68. }
  69. .#{$prefix}tree-arrows .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
  70. .#{$prefix}tree-arrows .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
  71. background-position: -16px 0;
  72. }
  73. .#{$prefix}tree-arrows .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus,
  74. .#{$prefix}tree-arrows .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus {
  75. background-position: -48px 0;
  76. }
  77. .#{$prefix}tree-elbow-plus,
  78. .#{$prefix}tree-elbow-minus,
  79. .#{$prefix}tree-elbow-end-plus,
  80. .#{$prefix}tree-elbow-end-minus{
  81. cursor: pointer;
  82. }
  83. //elbows
  84. .#{$prefix}tree-lines {
  85. .#{$prefix}tree-elbow {
  86. background-image: theme-background-image($theme-name, 'tree/elbow.gif');
  87. }
  88. .#{$prefix}tree-elbow-end {
  89. background-image: theme-background-image($theme-name, 'tree/elbow-end.gif');
  90. }
  91. .#{$prefix}tree-elbow-plus {
  92. background-image: theme-background-image($theme-name, 'tree/elbow-plus.gif');
  93. }
  94. .#{$prefix}tree-elbow-end-plus {
  95. background-image: theme-background-image($theme-name, 'tree/elbow-end-plus.gif');
  96. }
  97. .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus {
  98. background-image: theme-background-image($theme-name, 'tree/elbow-minus.gif');
  99. }
  100. .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
  101. background-image: theme-background-image($theme-name, 'tree/elbow-end-minus.gif');
  102. }
  103. .#{$prefix}tree-elbow-line {
  104. background-image: theme-background-image($theme-name, 'tree/elbow-line.gif');
  105. }
  106. }
  107. .#{$prefix}tree-no-lines {
  108. .#{$prefix}tree-elbow-plus,
  109. .#{$prefix}tree-elbow-end-plus {
  110. background-image: theme-background-image($theme-name, 'tree/elbow-plus-nl.gif');
  111. }
  112. .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
  113. .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
  114. background-image: theme-background-image($theme-name, 'tree/elbow-end-minus-nl.gif');
  115. }
  116. }
  117. .#{$prefix}tree-arrows {
  118. .#{$prefix}tree-elbow-plus,
  119. .#{$prefix}tree-elbow-minus,
  120. .#{$prefix}tree-elbow-end-plus,
  121. .#{$prefix}tree-elbow-end-minus {
  122. background-image: theme-background-image($theme-name, 'tree/arrows.gif');
  123. }
  124. }
  125. .#{$prefix}tree-icon {
  126. margin: $tree-icon-margin-top $tree-icon-margin-right 0 0;
  127. }
  128. .#{$prefix}grid-with-row-lines .#{$prefix}tree-icon {
  129. margin-top: $tree-icon-margin-top - 1
  130. }
  131. .#{$prefix}tree-elbow,
  132. .#{$prefix}tree-elbow-end,
  133. .#{$prefix}tree-elbow-plus,
  134. .#{$prefix}tree-elbow-end-plus,
  135. .#{$prefix}tree-elbow-empty,
  136. .#{$prefix}tree-elbow-line {
  137. height: $tree-elbow-height;
  138. width: $tree-elbow-width;
  139. }
  140. .#{$prefix}grid-with-row-lines {
  141. .#{$prefix}tree-elbow,
  142. .#{$prefix}tree-elbow-end,
  143. .#{$prefix}tree-elbow-plus,
  144. .#{$prefix}tree-elbow-end-plus,
  145. .#{$prefix}tree-elbow-empty,
  146. .#{$prefix}tree-elbow-line {
  147. height: $tree-elbow-height - 1;
  148. background-position: 0 -1px;
  149. }
  150. }
  151. .#{$prefix}tree-icon-leaf {
  152. width: $tree-elbow-width;
  153. background-image: theme-background-image($theme-name, 'tree/leaf.gif');
  154. }
  155. .#{$prefix}tree-icon-parent {
  156. width: $tree-elbow-width;
  157. background-image: theme-background-image($theme-name, 'tree/folder.gif');
  158. }
  159. .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-icon-parent {
  160. background-image: theme-background-image($theme-name, 'tree/folder-open.gif');
  161. }
  162. .#{$prefix}grid-rowbody {
  163. padding: 0;
  164. }
  165. .#{$prefix}grid-cell-treecolumn .#{$prefix}grid-cell-inner {
  166. padding: 0;
  167. line-height: $tree-elbow-height - 1;
  168. }
  169. .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell-treecolumn .#{$prefix}grid-cell-inner {
  170. line-height: $tree-elbow-height - 3;
  171. }
  172. .#{$prefix}tree-panel .#{$prefix}grid-cell-inner {
  173. cursor: pointer;
  174. img {
  175. display: inline-block;
  176. vertical-align: top;
  177. }
  178. }
  179. @if $include-ie {
  180. .#{$prefix}ie .#{$prefix}tree-panel {
  181. .#{$prefix}tree-elbow,
  182. .#{$prefix}tree-elbow-end,
  183. .#{$prefix}tree-elbow-plus,
  184. .#{$prefix}tree-elbow-end-plus,
  185. .#{$prefix}tree-elbow-empty,
  186. .#{$prefix}tree-elbow-line {
  187. // vertical alignment is necessary for IE to show the ellipsis in the right place.
  188. vertical-align: -6px;
  189. }
  190. }
  191. }
  192. .#{$prefix}grid-editor-on-text-node {
  193. .#{$prefix}form-text {
  194. // specify padding left and padding right individually since we don't want to override padding-bottom (which can vary)
  195. padding-left: $grid-cell-treecolumn-editor-field-padding-horizontal;
  196. padding-right: $grid-cell-treecolumn-editor-field-padding-horizontal;
  197. }
  198. }
  199. @if $include-ie {
  200. .#{$prefix}ie .#{$prefix}grid-editor-on-text-node .#{$prefix}form-text {
  201. padding-left: $grid-cell-treecolumn-editor-field-padding-horizontal + 1px;
  202. padding-right: $grid-cell-treecolumn-editor-field-padding-horizontal + 1px;
  203. }
  204. }
  205. @if $include-opera {
  206. .#{$prefix}opera .#{$prefix}grid-editor-on-text-node .#{$prefix}form-text {
  207. padding-left: $grid-cell-treecolumn-editor-field-padding-horizontal + 1px;
  208. padding-right: $grid-cell-treecolumn-editor-field-padding-horizontal + 1px;
  209. }
  210. }
  211. .#{$prefix}tree-checkbox {
  212. margin: $tree-checkbox-margin-top $tree-checkbox-margin-right 0 0;
  213. display: inline-block;
  214. vertical-align: top;
  215. width: $form-checkbox-size;
  216. height: $form-checkbox-size;
  217. background: no-repeat;
  218. background-image: theme-background-image($theme-name, $form-checkbox-image);
  219. overflow: hidden;
  220. padding: 0;
  221. border: 0;
  222. &amp;::-moz-focus-inner {
  223. padding: 0;
  224. border: 0;
  225. }
  226. }
  227. .#{$prefix}grid-with-row-lines .#{$prefix}tree-checkbox {
  228. margin-top: $tree-checkbox-margin-top - 1;
  229. }
  230. .#{$prefix}tree-checkbox-checked {
  231. background-position: 0 (0 - $form-checkbox-size);
  232. }
  233. .#{$prefix}tree-drop-ok-append .#{$prefix}dd-drop-icon {
  234. background-image: theme-background-image($theme-name, 'tree/drop-append.gif');
  235. }
  236. .#{$prefix}tree-drop-ok-above .#{$prefix}dd-drop-icon {
  237. background-image: theme-background-image($theme-name, 'tree/drop-above.gif');
  238. }
  239. .#{$prefix}tree-drop-ok-below .#{$prefix}dd-drop-icon {
  240. background-image: theme-background-image($theme-name, 'tree/drop-below.gif');
  241. }
  242. .#{$prefix}tree-drop-ok-between .#{$prefix}dd-drop-icon {
  243. background-image: theme-background-image($theme-name, 'tree/drop-between.gif');
  244. }
  245. .#{$prefix}grid-tree-loading .#{$prefix}tree-icon {
  246. background-image: theme-background-image($theme-name, 'tree/loading.gif');
  247. }
  248. .#{$prefix}tree-ddindicator {
  249. height: 1px;
  250. border-width: 1px 0px 0px;
  251. border-style: dotted;
  252. border-color: green;
  253. }
  254. .#{$prefix}grid-tree-loading span {
  255. font-style: italic;
  256. color: #444444;
  257. }
  258. .#{$prefix}tree-animator-wrap {
  259. overflow: hidden;
  260. }
  261. }</pre>
  262. </body>
  263. </html>