docs/resources/themes/stylesheets/ext4/default/widgets/_tree.scss

   1 @mixin extjs-tree {
   2     .#{$prefix}tree-no-lines .#{$prefix}tree-elbow {
   3         background-color: transparent;
   4     }
   5
   6     .#{$prefix}tree-no-lines .#{$prefix}tree-elbow-end {
   7         background-color: transparent;
   8     }
   9
  10     .#{$prefix}tree-no-lines .#{$prefix}tree-elbow-line {
  11         background-color: transparent;
  12     }
  13
  14     //arrows
  15     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-plus {
  16         background: transparent no-repeat 0 0;
  17     }
  18
  19     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-plus {
  20         background: transparent no-repeat 0 0;
  21     }
  22
  23     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-minus {
  24         background: transparent no-repeat -16px 0;
  25     }
  26
  27     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-minus {
  28         background: transparent no-repeat -16px 0;
  29     }
  30
  31     .#{$prefix}tree-arrows .#{$prefix}tree-elbow {
  32         background-color: transparent !important;
  33     }
  34
  35     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end {
  36         background-color: transparent !important;
  37     }
  38
  39     .#{$prefix}tree-arrows .#{$prefix}tree-elbow-line {
  40         background-color: transparent !important;
  41     }
  42
  43     //elbows
  44     .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus,
  45     .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus {
  46         background-position: -32px 0;
  47     }
  48
  49     .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-minus,
  50     .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-minus {
  51         background-position: -48px 0;
  52     }
  53
  54     .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
  55     .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
  56         background-position: -16px 0;
  57     }
  58
  59     .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus,
  60     .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus {
  61         background-position: -48px 0;
  62     }
  63
  64     .#{$prefix}tree-elbow-plus,
  65     .#{$prefix}tree-elbow-minus,
  66     .#{$prefix}tree-elbow-end-plus,
  67     .#{$prefix}tree-elbow-end-minus{
  68         cursor: pointer;
  69     }
  70
  71     //elbows
  72     .#{$prefix}tree-lines {
  73         .#{$prefix}tree-elbow {
  74             background-image: theme-image($theme-name, 'tree/elbow.gif');
  75         }
  76
  77         .#{$prefix}tree-elbow-end {
  78             background-image: theme-image($theme-name, 'tree/elbow-end.gif');
  79         }
  80
  81         .#{$prefix}tree-elbow-plus {
  82             background-image: theme-image($theme-name, 'tree/elbow-plus.gif');
  83         }
  84
  85         .#{$prefix}tree-elbow-end-plus {
  86             background-image: theme-image($theme-name, 'tree/elbow-end-plus.gif');
  87         }
  88
  89         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus {
  90             background-image: theme-image($theme-name, 'tree/elbow-minus.gif');
  91         }
  92
  93         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
  94             background-image: theme-image($theme-name, 'tree/elbow-end-minus.gif');
  95         }
  96
  97         .#{$prefix}tree-elbow-line {
  98             background-image: theme-image($theme-name, 'tree/elbow-line.gif');
  99         }
 100     }
 101
 102     .#{$prefix}tree-no-lines {
 103         .#{$prefix}tree-elbow-plus,
 104         .#{$prefix}tree-elbow-end-plus {
 105                 background-image: theme-image($theme-name, 'tree/elbow-plus-nl.gif');
 106         }
 107
 108         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus,
 109         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
 110             background-image: theme-image($theme-name, 'tree/elbow-end-minus-nl.gif');
 111         }
 112     }
 113
 114     .#{$prefix}tree-arrows {
 115         .#{$prefix}tree-elbow-plus,
 116         .#{$prefix}tree-elbow-minus,
 117         .#{$prefix}tree-elbow-end-plus,
 118         .#{$prefix}tree-elbow-end-minus {
 119             background-image: theme-image($theme-name, 'tree/arrows.gif');
 120         }
 121     }
 122
 123     .#{$prefix}tree-icon {
 124         margin-right: 3px;
 125     }
 126
 127     .#{$prefix}tree-elbow,
 128     .#{$prefix}tree-elbow-end,
 129     .#{$prefix}tree-elbow-plus,
 130     .#{$prefix}tree-elbow-end-plus,
 131     .#{$prefix}tree-elbow-empty,
 132     .#{$prefix}tree-elbow-line {
 133         height: $tree-elbow-height;
 134         width: $tree-elbow-width;
 135     }
 136
 137     .#{$prefix}tree-icon-leaf {
 138         width: $tree-elbow-width;
 139         background-image: theme-image($theme-name, 'tree/leaf.gif');
 140     }
 141
 142     .#{$prefix}tree-icon-parent {
 143         width: $tree-elbow-width;
 144         background-image: theme-image($theme-name, 'tree/folder.gif');
 145     }
 146
 147     .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-icon-parent {
 148         background-image: theme-image($theme-name, 'tree/folder-open.gif');
 149     }
 150
 151     .#{$prefix}grid-rowbody {
 152         padding: 0;
 153     }
 154
 155     .#{$prefix}tree-panel .#{$prefix}grid-cell-inner {
 156         padding: 0px;
 157     }
 158
 159     .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell {
 160         border: none;
 161     }
 162
 163     .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
 164         height: $tree-elbow-height;
 165
 166         line-height: $tree-elbow-height;
 167         vertical-align: middle;
 168         cursor: pointer;
 169
 170         img {
 171             float: left;
 172         }
 173     }
 174
 175     .#{$prefix}ie {
 176         .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
 177             white-space: normal;
 178         }
 179     }
 180
 181
 182     .#{$prefix}tree-checkbox {
 183         float: left;
 184         margin: 2px 3px 0 0;
 185         display: block;
 186
 187         width: $form-checkbox-size;
 188         height: $form-checkbox-size;
 189         background: theme-image($theme-name, $form-checkbox-image) no-repeat;
 190
 191         overflow: hidden;
 192         padding: 0;
 193         border: 0;
 194         &::-moz-focus-inner {
 195             padding: 0;
 196             border: 0;
 197         }
 198     }
 199     @if $include-ie {
 200         /* Hack for IE; causes alignment problem in IE9 standards mode so exclude that */
 201         .#{$prefix}nbr.#{$prefix}ie {
 202             .#{$prefix}tree-checkbox {
 203                 font-size: 0;
 204             }
 205         }
 206     }
 207     .#{$prefix}tree-checkbox-checked {
 208         background-position: 0 (0 - $form-checkbox-size);
 209     }
 210
 211     @if $include-ie {
 212         .#{$prefix}tree-panel .#{$prefix}grid-cell-inner {
 213             border-width: 0 !important;
 214         }
 215     }
 216
 217     @if $include-ff {
 218         .#{$prefix}gecko {
 219             .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
 220                 line-height: $tree-elbow-height - 2;
 221             }
 222         }
 223     }
 224
 225     .#{$prefix}tree-drop-ok-append .#{$prefix}dd-drop-icon {
 226         background-image: theme-image($theme-name, 'tree/drop-append.gif');
 227     }
 228
 229     .#{$prefix}tree-drop-ok-above .#{$prefix}dd-drop-icon {
 230         background-image: theme-image($theme-name, 'tree/drop-above.gif');
 231     }
 232
 233     .#{$prefix}tree-drop-ok-below .#{$prefix}dd-drop-icon {
 234         background-image: theme-image($theme-name, 'tree/drop-below.gif');
 235     }
 236
 237     .#{$prefix}tree-drop-ok-between .#{$prefix}dd-drop-icon {
 238         background-image: theme-image($theme-name, 'tree/drop-between.gif');
 239     }
 240
 241     .#{$prefix}grid-tree-loading .#{$prefix}tree-icon {
 242         background-image: theme-image($theme-name, 'tree/loading.gif');
 243     }
 244
 245     .#{$prefix}tree-ddindicator {
 246         height: 1px;
 247         border-width: 1px 0px 0px;
 248         border-style: dotted;
 249         border-color: green;
 250     }
 251
 252     .#{$prefix}grid-tree-loading span {
 253          font-style: italic;
 254          color: #444444;
 255     }
 256
 257     .#{$prefix}tree-animator-wrap {
 258         overflow: hidden;
 259     }
 260 }