@@ -17,9 +17,15 @@ html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:1
17
17
18
18
{# Basic styles
19
19
========================================================================= #}
20
+ html, body {
21
+ height: 100%;
22
+ width: 100%;
23
+ }
20
24
body {
21
25
background-color: #F9F9F9;
22
26
color: #222;
27
+ display: flex;
28
+ flex-direction: column;
23
29
{{ mixins .sans_serif_font | raw }}
24
30
font-size: 14px;
25
31
line-height: 1.4;
@@ -405,16 +411,34 @@ tr.status-warning td {
405
411
max-width: 1300px;
406
412
padding-right: 15px;
407
413
}
414
+ #header {
415
+ flex: 0 0 auto;
416
+ }
417
+ #header .container {
418
+ display: flex;
419
+ flex-direction: row;
420
+ justify-content: space-between;
421
+ }
422
+ #summary {
423
+ flex: 0 0 auto;
424
+ }
408
425
#content {
409
- min-height: 1024px;
410
- overflow: hidden;
426
+ height: 100%;
427
+ }
428
+ #main {
429
+ display: flex;
430
+ flex-direction: row-reverse;
431
+ min-height: 100%;
432
+ }
433
+ #sidebar {
434
+ flex: 0 0 220px;
411
435
}
412
436
#collector-wrapper {
413
- float: left ;
414
- width: 100% ;
437
+ flex: 0 1 100% ;
438
+ min- width: 0 ;
415
439
}
416
440
#collector-content {
417
- margin: 0 0 30px 220px ;
441
+ margin: 0 0 30px 0 ;
418
442
padding: 14px 0 14px 20px;
419
443
}
420
444
@@ -432,7 +456,6 @@ tr.status-warning td {
432
456
color: #FFF;
433
457
font-weight: normal;
434
458
font-size: 21px;
435
- float: left;
436
459
margin: 0;
437
460
padding: 10px 10px 8px;
438
461
}
@@ -449,7 +472,6 @@ tr.status-warning td {
449
472
fill: #FFF;
450
473
}
451
474
#header .search {
452
- float: right;
453
475
padding-top: 11px;
454
476
}
455
477
#header .search input {
@@ -519,10 +541,7 @@ tr.status-warning td {
519
541
#sidebar {
520
542
background: #444;
521
543
color: #CCC;
522
- float: left;
523
- margin-bottom: -99999px; {# needed for 'same-height columns' trick #}
524
- margin-left: -100%;
525
- padding-bottom: 99999px; {# needed for 'same-height columns' trick #}
544
+ padding-bottom: 30px;
526
545
position: relative;
527
546
width: 220px;
528
547
z-index: 9999;
@@ -605,7 +624,6 @@ tr.status-warning td {
605
624
#menu-profiler li {
606
625
position: relative;
607
626
margin-bottom: 0;
608
- width: 220px;
609
627
}
610
628
#menu-profiler li a {
611
629
border: solid transparent;
@@ -939,17 +957,13 @@ table.logs .sf-call-stack abbr {
939
957
}
940
958
941
959
@media (max-width: 768px) {
942
- #collector-content {
943
- margin-left: 50px;
944
- }
945
-
946
960
#sidebar {
947
- width : 50px;
948
- overflow-y : hidden;
949
- transition: width 200ms ease-out;
961
+ flex-basis : 50px;
962
+ overflow-x : hidden;
963
+ transition: flex-basis 200ms ease-out;
950
964
}
951
965
#sidebar:hover, #sidebar.expanded {
952
- width : 220px;
966
+ flex-basis : 220px;
953
967
}
954
968
955
969
#sidebar-search {
0 commit comments