// // Viele Browser haben ein Problem mit 'position:fixed', wenn gleichzeitig 'transform' // beim Elternelement genutzt wird. Da Foundation 'transform' fuer das Verschieben des // Contents nutzt, wir aber trotzdem nicht auf unsere fixierte Top-Bar verzichten // wollen, sind wir zu einem Workaround gezwungen: // // '.off-canvas-content' ist in unserem Fall ein leeres Dummy Element, welches von // Foundation vorgegeben wird und das wir für die Abfrage des // Status (ein- oder ausgeblendet) nutzen koennen. Das eigentliche Verschieben des // Contentbereichs passiert dann ueber das 'main' Element und den Header jeweils // separat. // // Zudem haben wir eine weitere Groessenangabe 'offcanvas-size-large' hinzugefuegt, // um die Navi an Desktop Geraeten grosser darstellen zu koennen. // // -lh, 07/2017 // .off-canvas-wrapper { display: flex; flex-direction: column; min-height: 100vh; // wichtig fuer sticky footer } // IE fix @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .off-canvas-wrapper { display: block; } } main { width: 100%; flex: 1; } .off-canvas-content { + header, + header + main, + header + main + footer { @include off-canvas-content; } &.is-open-left { + header, + header + main, + header + main + footer { transform: translateX($offcanvas-size); } } } // Large @include breakpoint(offcanvaslarge) { .off-canvas { width: $offcanvas-size-large; transform: translateX(-$offcanvas-size-large); &.is-open-left { transform: translateX($offcanvas-size-large); } } .off-canvas-content.is-open-left { + header, + header + main, + header + main + footer { transform: translateX( $offcanvas-size-large ); } } } // Noch ein paar Anpassungen fuer sehr grosse Screens @include breakpoint( $max-width + $offcanvas-size-large ) { .off-canvas-content.is-open-left { + header, + header + main, + header + main + footer { transform: translateX( $offcanvas-size-large/2 ); } } } @include breakpoint( $max-width + $offcanvas-size-large*2 ) { .off-canvas-content.is-open-left { + header, + header + main, + header + main + footer { transform: none; } } } .js-off-canvas-overlay { top: 50px; left: 275px; @include breakpoint(offcanvaslarge){ left: 380px; } }