|
29 | 29 | /*background: #F6F6F6;*/ |
30 | 30 | margin: -30px -40px -40px; |
31 | 31 | } |
32 | | - .toggle-button { |
| 32 | + .toggle-icon { |
33 | 33 | display: inline-block; |
34 | | - background: url("/bundles/framework/images/toggler.png") no-repeat top left #ccc; |
| 34 | + background: url("{{ asset('/bundles/framework/images/toggler.png') }}") no-repeat top left #5eb5e0; |
35 | 35 | } |
36 | | - .toggle-button.closed { |
| 36 | + .closed .toggle-icon, .closed.toggle-icon { |
37 | 37 | background-position: bottom left; |
38 | 38 | } |
39 | | - .toggle-button.empty { |
40 | | - background-image: url("/bundles/framework/images/toggler_empty.png"); |
| 39 | + .toggle-icon.empty { |
| 40 | + background-image: url("{{ asset('/bundles/framework/images/toggler_empty.png') }}"); |
41 | 41 | } |
42 | 42 | .tree { |
43 | 43 | width: 230px; |
|
70 | 70 | .tree a { |
71 | 71 | text-decoration: none; |
72 | 72 | } |
73 | | - .tree .toggle-button { |
| 73 | + .tree .toggle-icon { |
74 | 74 | width: 10px; |
75 | 75 | height: 10px; |
76 | 76 | /* vertically center the button */ |
|
79 | 79 | margin-top: -5px; |
80 | 80 | margin-left: -15px; |
81 | 81 | background-size: 10px 20px; |
| 82 | + background-color: #ccc; |
82 | 83 | } |
83 | | - .tree .toggle-button.empty { |
| 84 | + .tree .toggle-icon.empty { |
84 | 85 | background-size: 10px 10px; |
85 | 86 | } |
86 | 87 | .tree ul ul .tree-inner { |
|
103 | 104 | font-weight: bold; |
104 | 105 | color: #313131; |
105 | 106 | } |
106 | | - .tree .tree-inner.active .toggle-button, .tree .tree-inner:hover .toggle-button, .tree .tree-inner.active:hover .toggle-button { |
107 | | - background-image: url("/bundles/framework/images/toggler_hover.png"); |
| 107 | + .tree .tree-inner.active .toggle-icon, .tree .tree-inner:hover .toggle-icon, .tree .tree-inner.active:hover .toggle-icon { |
| 108 | + background-image: url("{{ asset('/bundles/framework/images/toggler_hover.png') }}"); |
108 | 109 | background-color: #aaa; |
109 | 110 | } |
110 | | - .tree .tree-inner.active .toggle-button.empty, .tree .tree-inner:hover .toggle-button.empty, .tree .tree-inner.active:hover .toggle-button.empty { |
111 | | - background-image: url("/bundles/framework/images/toggler_hover_empty.png"); |
| 111 | + .tree .tree-inner.active .toggle-icon.empty, .tree .tree-inner:hover .toggle-icon.empty, .tree .tree-inner.active:hover .toggle-icon.empty { |
| 112 | + background-image: url("{{ asset('/bundles/framework/images/toggler_hover_empty.png') }}"); |
112 | 113 | } |
113 | 114 | .tree-details { |
114 | 115 | border-left: 1px solid #dfdfdf; |
|
120 | 121 | position: relative; |
121 | 122 | padding-left: 22px; |
122 | 123 | } |
123 | | - .tree-details .toggle-button { |
| 124 | + .tree-details .toggle-icon { |
124 | 125 | width: 16px; |
125 | 126 | height: 16px; |
126 | 127 | /* vertically center the button */ |
|
149 | 150 | color: #800; |
150 | 151 | } |
151 | 152 | .errors th, .errors td { |
152 | | - border: 1px solid #800; |
| 153 | + border-color: #800; |
153 | 154 | } |
154 | 155 | .errors th { |
155 | 156 | background: #a33; |
156 | 157 | color: #fff; |
157 | 158 | } |
158 | | - .errors .toggle-button { |
| 159 | + .errors .toggle-icon { |
159 | 160 | background-color: #a33; |
160 | 161 | } |
| 162 | + h3 a, h3 a:hover, h3 a:focus { |
| 163 | + color: inherit; |
| 164 | + text-decoration: inherit; |
| 165 | + } |
161 | 166 | </style> |
162 | 167 |
|
163 | 168 | {% if collector.data.forms|length %} |
|
255 | 260 |
|
256 | 261 | function TabView() { |
257 | 262 | "use strict"; |
258 | | - |
| 263 | +
|
259 | 264 | var activeTab = null, |
260 | 265 |
|
261 | 266 | activeTarget = null, |
|
328 | 333 | <li> |
329 | 334 | <div class="tree-inner" data-tab-target-id="{{ data.id }}-details"> |
330 | 335 | {% if data.children is not empty %} |
331 | | - <a class="toggle-button" data-toggle-target-id="{{ data.id }}-children" href="#"></a> |
| 336 | + <a class="toggle-button toggle-icon" data-toggle-target-id="{{ data.id }}-children" href="#"></a> |
332 | 337 | {% else %} |
333 | | - <div class="toggle-button empty"></div> |
| 338 | + <div class="toggle-icon empty"></div> |
334 | 339 | {% endif %} |
335 | 340 | {{ name }} |
336 | 341 | {% if data.errors is defined and data.errors|length > 0 %} |
|
360 | 365 | {% if data.errors is defined and data.errors|length > 0 %} |
361 | 366 | <div class="errors"> |
362 | 367 | <h3> |
363 | | - <a class="toggle-button" data-toggle-target-id="{{ data.id }}-errors" href="#"></a> |
364 | | - Errors |
| 368 | + <a class="toggle-button" data-toggle-target-id="{{ data.id }}-errors" href="#"> |
| 369 | + <span class="toggle-icon"></span> |
| 370 | + Errors |
| 371 | + </a> |
365 | 372 | </h3> |
366 | 373 |
|
367 | 374 | <table id="{{ data.id }}-errors"> |
|
381 | 388 |
|
382 | 389 | {% if data.default_data is defined %} |
383 | 390 | <h3> |
384 | | - <a class="toggle-button" data-toggle-target-id="{{ data.id }}-default_data" href="#"></a> |
385 | | - Default Data |
| 391 | + <a class="toggle-button" data-toggle-target-id="{{ data.id }}-default_data" href="#"> |
| 392 | + <span class="toggle-icon"></span> |
| 393 | + Default Data |
| 394 | + </a> |
386 | 395 | </h3> |
387 | 396 |
|
388 | 397 | <div id="{{ data.id }}-default_data"> |
|
417 | 426 |
|
418 | 427 | {% if data.submitted_data is defined %} |
419 | 428 | <h3> |
420 | | - <a class="toggle-button" data-toggle-target-id="{{ data.id }}-submitted_data" href="#"></a> |
421 | | - Submitted Data |
| 429 | + <a class="toggle-button" data-toggle-target-id="{{ data.id }}-submitted_data" href="#"> |
| 430 | + <span class="toggle-icon"></span> |
| 431 | + Submitted Data |
| 432 | + </a> |
422 | 433 | </h3> |
423 | 434 |
|
424 | 435 | <div id="{{ data.id }}-submitted_data"> |
|
457 | 468 |
|
458 | 469 | {% if data.passed_options is defined %} |
459 | 470 | <h3> |
460 | | - <a class="toggle-button" data-toggle-target-id="{{ data.id }}-passed_options" href="#"></a> |
461 | | - Passed Options |
| 471 | + <a class="toggle-button" data-toggle-target-id="{{ data.id }}-passed_options" href="#"> |
| 472 | + <span class="toggle-icon"></span> |
| 473 | + Passed Options |
| 474 | + </a> |
462 | 475 | </h3> |
463 | 476 |
|
464 | 477 | <div id="{{ data.id }}-passed_options"> |
|
491 | 504 |
|
492 | 505 | {% if data.resolved_options is defined %} |
493 | 506 | <h3> |
494 | | - <a class="toggle-button" data-toggle-target-id="{{ data.id }}-resolved_options" href="#"></a> |
495 | | - Resolved Options |
| 507 | + <a class="toggle-button" data-toggle-target-id="{{ data.id }}-resolved_options" href="#"> |
| 508 | + <span class="toggle-icon"></span> |
| 509 | + Resolved Options |
| 510 | + </a> |
496 | 511 | </h3> |
497 | 512 |
|
498 | 513 | <div id="{{ data.id }}-resolved_options" class="hidden"> |
|
513 | 528 |
|
514 | 529 | {% if data.view_vars is defined %} |
515 | 530 | <h3> |
516 | | - <a class="toggle-button" data-toggle-target-id="{{ data.id }}-view_vars" href="#"></a> |
517 | | - View Variables |
| 531 | + <a class="toggle-button" data-toggle-target-id="{{ data.id }}-view_vars" href="#"> |
| 532 | + <span class="toggle-icon"></span> |
| 533 | + View Variables |
| 534 | + </a> |
518 | 535 | </h3> |
519 | 536 |
|
520 | 537 | <div id="{{ data.id }}-view_vars" class="hidden"> |
|
0 commit comments