Build/Resources/Public/Sass/typo3/_element_tree.scss

   1 //
   2 // Variables
   3 //
   4 $navigation-text: #000;
   5 $navigation-bg: $gray-lighter;
   6 $navigation-border: rgb(195, 195, 195);
   7
   8 //
   9 // Trees Variables
  10 //
  11 $tree-indentation: 16px;
  12 $tree-intendation-space: 6px;
  13 $tree-line-height: 21px;
  14 $tree-border: #666;
  15 $tree-bg: white;
  16 $tree-control-size: 20px;
  17 $tree-control-icon-size: 12px;
  18
  19 //
  20 // Tree
  21 //
  22 .list-tree,
  23 .list-tree ul {
  24     margin-left: ceil(($tree-indentation / 2));
  25     padding: 0;
  26     list-style: none;
  27     position: relative;
  28
  29     &:before {
  30         content: "";
  31         display: block;
  32         width: 0;
  33         position: absolute;
  34         top: 0;
  35         bottom: ceil($tree-line-height / 2);
  36         left: 0;
  37         margin-bottom: -2px;
  38         border-left: 1px dotted $tree-border;
  39     }
  40 }
  41
  42 .list-tree {
  43     li {
  44         &.active {
  45             > .list-tree-group {
  46                 &:before {
  47                     content: '';
  48                     position: absolute;
  49                     right: -$tree-intendation-space;
  50                     left: -$tree-intendation-space;
  51                     top: -1px;
  52                     bottom: -1px;
  53                     display: block;
  54                     border: 1px solid rgba(0, 0, 0, 0.25);
  55                     background-color: rgba(255, 255, 255, 0.75);
  56                     border-radius: 2px;
  57                 }
  58             }
  59         }
  60
  61         &:before {
  62             content: '';
  63             display: block;
  64             width: ceil($tree-indentation - $tree-intendation-space - 1px);
  65             height: 0;
  66             border-top: 1px dotted $tree-border;
  67             margin-top: -2px;
  68             position: absolute;
  69             top: ceil($tree-line-height / 2) + 1;
  70             left: 2px;
  71         }
  72
  73         &:last-child:before {
  74             background: $tree-bg;
  75             height: auto;
  76             left: 0;
  77             width: ceil($tree-indentation - $tree-intendation-space) + 1;
  78             bottom: 0;
  79         }
  80
  81         margin: 0;
  82         padding-left: $tree-indentation;
  83         line-height: $tree-line-height;
  84         position: relative;
  85
  86         .icon {
  87             margin-right: 2px;
  88         }
  89     }
  90 }
  91
  92 .list-tree-group {
  93     position: relative;
  94     display: block;
  95     white-space: nowrap;
  96
  97     > span {
  98         position: relative;
  99     }
 100 }
 101
 102 .list-tree-value {
 103     font-weight: bold;
 104 }
 105
 106 .list-tree-icon {
 107     top: -2px;
 108 }
 109
 110 .list-tree-show {
 111     position: relative;
 112     display: inline-block;
 113     width: $tree-control-size;
 114     text-align: center;
 115     margin-left: -2px;
 116 }
 117
 118 .list-tree-control {
 119     @include user-select(none);
 120
 121     position: relative;
 122     display: block;
 123     float: left;
 124     margin-top: ceil($tree-line-height / 2) - ceil($tree-control-size / 2);
 125     margin-left: -($tree-indentation + ceil($tree-control-size / 2));
 126     text-align: center;
 127     line-height: $tree-control-size;
 128     width: $tree-control-size;
 129     height: $tree-control-size;
 130
 131     &:before {
 132         content: '';
 133         position: absolute;
 134         top: 50%;
 135         left: 50%;
 136         margin-top: ceil(-($tree-control-icon-size / 2));
 137         margin-left: ceil(-($tree-control-icon-size / 2));
 138         width: $tree-control-icon-size;
 139         height: $tree-control-icon-size;
 140     }
 141
 142     &:active,
 143     &:focus,
 144     &:hover {
 145         outline: none;
 146         text-decoration: none;
 147     }
 148
 149     > .fa {
 150         display: inline-block;
 151         text-align: center;
 152         cursor: pointer;
 153
 154         &:before {
 155             width: $tree-control-icon-size;
 156             height: $tree-control-icon-size;
 157             background-color: $tree-bg;
 158             display: block;
 159         }
 160     }
 161
 162     &.list-tree-control-open > .fa:before {
 163         content: "\f0d7";
 164     }
 165
 166     &.list-tree-control-closed > .fa:before {
 167         content: "\f0da";
 168     }
 169 }
 170
 171 .list-tree-root {
 172     margin-left: 0;
 173
 174     &:before {
 175         display: none;
 176     }
 177
 178     > li {
 179         padding-left: $tree-control-size;
 180
 181         &:before {
 182             display: none;
 183         }
 184
 185         &.list-tree-path {
 186             margin-left: -$tree-control-size;
 187         }
 188
 189         > .list-tree-group {
 190             > .list-tree-control {
 191                 margin-left: -$tree-control-size;
 192
 193                 &:before {
 194                     background-color: transparent;
 195                 }
 196             }
 197         }
 198     }
 199 }
 200
 201 .list-tree-root-clean {
 202     > li {
 203         padding-left: 0;
 204     }
 205 }
 206
 207 //
 208 // Tree Variations
 209 //
 210 [id=imp-exp-mod] {
 211     .list-tree li:last-child:before,
 212     .list-tree-control > .fa:before {
 213         background-color: #f1f1f1;
 214     }
 215 }
 216
 217 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] {
 218     .list-tree li:last-child:before,
 219     .list-tree-control > .fa:before {
 220         background-color: #f5f5f5;
 221     }
 222
 223     .module-body {
 224         padding-left: 10px;
 225         padding-right: 10px;
 226     }
 227 }
 228
 229 [id=ext-lowlevel-Modules-Configuration-index-php] {
 230     .active {
 231         > .list-tree-group {
 232             display: inline-block;
 233             color: $brand-danger;
 234         }
 235     }
 236 }
 237
 238 //
 239 // Treeline Icons
 240 //
 241 .treeline-icon {
 242     position: relative;
 243     display: inline-block;
 244     margin-top: -6px;
 245     margin-bottom: -6px;
 246     margin-right: 2px;
 247     padding: 0;
 248     height: 31px;
 249     width: 16px;
 250     white-space: nowrap;
 251     overflow: hidden;
 252     vertical-align: top;
 253
 254     &:after,
 255     &:before {
 256         position: absolute;
 257         content: '';
 258         left: 50%;
 259     }
 260
 261     &:before {
 262         top: 0;
 263         height: 100%;
 264         width: 2px;
 265         margin-left: -1px;
 266         border-left: 1px dotted $tree-border;
 267     }
 268
 269     &:after {
 270         border-top: 1px dotted $tree-border;
 271         height: 2px;
 272         width: 100%;
 273         top: 50%;
 274         margin-top: -1px;
 275     }
 276 }
 277
 278 .treeline-icon-jointop:before {
 279     top: 50%;
 280 }
 281
 282 .treeline-icon-joinbottom:before {
 283     top: -50%;
 284 }
 285
 286 .treeline-icon-line:after {
 287     display: none;
 288 }
 289
 290 .treeline-icon-blank {
 291     display: none;
 292 }
 293
 294 .treeline-icon-clear {
 295     &:before,
 296     &:after {
 297         display: none;
 298     }
 299 }
 300
 301 #typo3-pagetree #typo3-docheader div.buttonsright {
 302     margin-right: 3px;
 303 }
 304
 305 body#typo3-alt-db-navframe-php div.c-notice {
 306     border: 1px solid black;
 307     margin-top: 5px;
 308     margin-bottom: 10px;
 309     padding: 5px;
 310     width: 95%;
 311 }
 312
 313 //
 314 // AJAX Page Tree
 315 //
 316 body#typo3-pagetree {
 317     margin: 0;
 318     padding: 0;
 319 }
 320
 321 #typo3-pagetree #typo3-inner-docbody {
 322     padding: 10px 0;
 323 }
 324
 325 span.dragIcon {
 326     display: inline-block;
 327     height: 16px;
 328 }
 329
 330 #dragIcon {
 331     position: absolute;
 332     visibility: hidden;
 333     z-index: 20;
 334     filter: alpha(opacity=50);
 335     opacity: 0.5;
 336     white-space: nowrap;
 337 }
 338
 339 //
 340 // Tree
 341 //
 342 #typo3-pagetree-deletionDropZone .x-panel-body {
 343     background-position: right;
 344     background-repeat: repeat-y;
 345 }
 346
 347 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php],
 348 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-body,
 349 [id=typo3-pagetree-treeContainer] {
 350     background-color: $navigation-bg;
 351     height: 100%;
 352 }
 353
 354 [id=typo3-pagetree-tree] {
 355     height: 100%;
 356
 357     .x-panel-body {
 358         height: 100% !important;
 359     }
 360 }
 361
 362 [id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-docheader {
 363     padding-left: 10px;
 364     padding-right: 10px;
 365 }
 366
 367 .x-layout-split {
 368     width: 1px;
 369     background-color: $navigation-border;
 370 }
 371
 372 //
 373 // Info Pagetree Overview
 374 [id=InfoModuleController] a.t3js-contextmenutrigger {
 375     margin-right: 4px;
 376 }