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