Project

General

Profile

« Previous | Next » 

Revision 8898d016

Added by Andreas Kohlbecker about 3 years ago

ref #7599 derivative tree view: collapsible unit tree layout improved

View differences:

themes/zen_dataportal/sass/cdm.scss
226 226
  }
227 227

  
228 228
  // derivatives tree view (see also derivation-tree.js)
229
  $tree-entry-vspace: 0; //$base-font-size / 10; TODO remove
230
  $tree-line-style: 3px solid $tabs-border;
231
  $tree-lines-top-offset: $base-line-height / 7;
229
  $tree-entry-vspace: 7px; //$base-font-size / 2 ???
230
  $tree-line-width: 3px;
231
  $tree-line-style: $tree-line-width solid $menu-bar-background-color;
232
  $tree-hline-length: 1em; // 5px;
233
  $tree-lines-top-offset: ($base-line-height / 7) ;
232 234
  $tree-lines-left-offset: $base-line-height / 7;
233 235
  div.derived-unit-tree,
234 236
  ul.derived-unit-sub-tree,
......
237 239
    margin: 0 0 0 $tree-lines-left-offset;
238 240
    padding: 0;
239 241

  
240
    .unit-content {
241
      background-color: $menu-bar-background-color;
242
      margin-left: 1em;
243
    }
244
   .unit-label {
245
      cursor: pointer;
242
   .unit-header {
243
     padding-top: $tree-entry-vspace;
244
     .unit-label {
245
       cursor: pointer;
246
       background-color: $menu-bar-background-color;
247
       padding-left: 5px;
248
     }
249
      .unit-label:hover {
250
        background-color: lighten($menu-bar-background-color, 10%)
251
      }
246 252
    }
247
    .unit-label:hover {
248
      background-color: $menu-bar-background-color;
253
    .unit-content {
254
      padding-left: 1em;
255
      background-color: lighten($menu-bar-background-color, 5%);
256
      dl {
257
        margin: 0;
258
      }
249 259
    }
250 260
  }
251

  
261
  div.derived-unit-tree {
262
    margin-top: -$tree-lines-top-offset; // needed for consistent spacing, see below
263
  }
252 264
  div.derived-unit-tree-root {
253 265
    .unit-content-wrapper {
254 266
      border-left: $tree-line-style;
255 267
      margin-left: $tree-lines-left-offset;
256 268
    }
257 269
    div.item-list { // class .item-list is defined by drupal theme function
258
      margin-top: $tree-lines-top-offset;
270
      // margin-top: $tree-lines-top-offset;
259 271
    }
260 272
  }
261 273

  
......
269 281
      margin-left: 0;
270 282
      padding-left: 1em;
271 283
      margin-top: -$tree-lines-top-offset;
272
      margin-bottom: $tree-entry-vspace;
273 284
      line-height: $base-line-height;
274 285

  
275 286
      border-left: $tree-line-style;
276 287
    }
277 288
    li:last-child {
278 289
      border-left: none;
290
      .unit-header, .unit-content {
291
        margin-left: $tree-line-width;
292
      }
279 293
    }
280 294
    li:before {
281 295
      position: absolute;
282 296
      top: $tree-lines-top-offset;
283 297
      left: 0;
284 298

  
285
      width: 0.5em; /* width of horizontal line */
286
      height: 0.5em; /* vertical position of line */
299
      width: $tree-hline-length; /* width of horizontal line */
300
      height: $base-line-height / 2 + $tree-line-width / 2; /* vertical position of line */
287 301
      vertical-align: top;
288 302
      border-bottom: $tree-line-style;
289 303
      content: "";

Also available in: Unified diff