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-background-image($theme-name, 'tree/elbow.gif');
  75         }
  76
  77         .#{$prefix}tree-elbow-end {
  78             background-image: theme-background-image($theme-name, 'tree/elbow-end.gif');
  79         }
  80
  81         .#{$prefix}tree-elbow-plus {
  82             background-image: theme-background-image($theme-name, 'tree/elbow-plus.gif');
  83         }
  84
  85         .#{$prefix}tree-elbow-end-plus {
  86             background-image: theme-background-image($theme-name, 'tree/elbow-end-plus.gif');
  87         }
  88
  89         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus {
  90             background-image: theme-background-image($theme-name, 'tree/elbow-minus.gif');
  91         }
  92
  93         .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus {
  94             background-image: theme-background-image($theme-name, 'tree/elbow-end-minus.gif');
  95         }
  96
  97         .#{$prefix}tree-elbow-line {
  98             background-image: theme-background-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-background-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-background-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-background-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-background-image($theme-name, 'tree/leaf.gif');
 140     }
 141
 142     .#{$prefix}tree-icon-parent {
 143         width: $tree-elbow-width;
 144         background-image: theme-background-image($theme-name, 'tree/folder.gif');
 145     }
 146
 147     .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-icon-parent {
 148         background-image: theme-background-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         cursor: pointer;
 168         white-space: nowrap;
 169         vertical-align: middle;
 170
 171         img {
 172             margin-top: 0;
 173             display: inline-block;
 174             vertical-align: top;
 175         }
 176     }
 177
 178     .#{$prefix}tree-checkbox {
 179         margin: 2px 3px 0 0;
 180         display: inline-block;
 181         vertical-align: top;
 182
 183         width: $form-checkbox-size;
 184         height: $form-checkbox-size;
 185         background: no-repeat;
 186         background-image: theme-background-image($theme-name, $form-checkbox-image);
 187
 188         overflow: hidden;
 189         padding: 0;
 190         border: 0;
 191         &::-moz-focus-inner {
 192             padding: 0;
 193             border: 0;
 194         }
 195     }
 196
 197     @if $include-ie {
 198         /* Hack for IE; causes alignment problem in IE9 standards mode so exclude that */
 199         .#{$prefix}nbr.#{$prefix}ie {
 200             .#{$prefix}tree-checkbox {
 201                 font-size: 0;
 202             }
 203         }
 204     }
 205     .#{$prefix}tree-checkbox-checked {
 206         background-position: 0 (0 - $form-checkbox-size);
 207     }
 208
 209     @if $include-ie {
 210         .#{$prefix}tree-panel .#{$prefix}grid-cell-inner {
 211             border-width: 0 !important;
 212         }
 213
 214         .#{$prefix}ie6 .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner img,
 215         .#{$prefix}quirks .#{$prefix}ie .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner img {
 216             margin-top: -1px;
 217             vertical-align: middle;
 218         }
 219         .#{$prefix}strict .#{$prefix}ie7 .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner img {
 220             margin-top: -3px;
 221             vertical-align: middle;
 222         }
 223         .#{$prefix}ie6 .#{$prefix}tree-checkbox,
 224         .#{$prefix}quirks .#{$prefix}ie7 .#{$prefix}tree-checkbox {
 225             margin-top: 0;
 226             vertical-align: middle;
 227         }
 228         .#{$prefix}strict .#{$prefix}ie7 .#{$prefix}tree-checkbox {
 229             margin-top: -2px;
 230             vertical-align: middle;
 231         }
 232     }
 233
 234     @if $include-ff {
 235         .#{$prefix}gecko {
 236             .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner {
 237                 line-height: $tree-elbow-height - 2;
 238             }
 239         }
 240     }
 241
 242     .#{$prefix}tree-drop-ok-append .#{$prefix}dd-drop-icon {
 243         background-image: theme-background-image($theme-name, 'tree/drop-append.gif');
 244     }
 245
 246     .#{$prefix}tree-drop-ok-above .#{$prefix}dd-drop-icon {
 247         background-image: theme-background-image($theme-name, 'tree/drop-above.gif');
 248     }
 249
 250     .#{$prefix}tree-drop-ok-below .#{$prefix}dd-drop-icon {
 251         background-image: theme-background-image($theme-name, 'tree/drop-below.gif');
 252     }
 253
 254     .#{$prefix}tree-drop-ok-between .#{$prefix}dd-drop-icon {
 255         background-image: theme-background-image($theme-name, 'tree/drop-between.gif');
 256     }
 257
 258     .#{$prefix}grid-tree-loading .#{$prefix}tree-icon {
 259         background-image: theme-background-image($theme-name, 'tree/loading.gif');
 260     }
 261
 262     .#{$prefix}tree-ddindicator {
 263         height: 1px;
 264         border-width: 1px 0px 0px;
 265         border-style: dotted;
 266         border-color: green;
 267     }
 268
 269     .#{$prefix}grid-tree-loading span {
 270          font-style: italic;
 271          color: #444444;
 272     }
 273
 274     .#{$prefix}tree-animator-wrap {
 275         overflow: hidden;
 276     }
 277 }