philo/contrib/gilbert/static/gilbert/murano/sass/murano/components/_tree.scss

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