bug: Sample layout-header-drawer-footer did not show a scroll shadow

example/layout-header-drawer-footer/web/main.dart

@@ -5,15 +5,15 @@ import 'package:console_log_handler/console_log_handler.dart';
 
 import 'package:wsk_material/wskcomponets.dart';
 
+final Logger _logger = new Logger('layout-header-drawer-footer');
+
 void main() {
-    html.querySelector("body").classes.add("update-theme");
     configLogging();
 
     scrollChecker();
 
     registerAllWskComponents();
     upgradeAllRegistered();
-    html.querySelector("body").classes.remove("update-theme");
 }
 
 void configLogging() {
@@ -27,10 +27,14 @@ void configLogging() {
 
 void scrollChecker() {
     final html.HtmlElement body = html.querySelector("body");
-    final html.HtmlElement content = html.querySelector(".wsk-layout__content");
+
+    // .wsk-layout__content section hat overflow: scroll - kein scroll event
+    final html.HtmlElement content = html.querySelector(".wsk-layout__content section");
+
     final html.HtmlElement shadow = html.querySelector(".addscrollshadow");
     final html.ButtonElement button = html.querySelector("#totop");
 
+    _logger.info(button);
     if(content == null || shadow == null || button == null) {
         return;
     }
@@ -41,7 +45,7 @@ void scrollChecker() {
 
     content.onScroll.listen((final html.Event event) {
         final int top = content.scrollTop;
-
+        print(top);
         if(top > 25) {
             shadow.classes.add("wsk-shadow--z2");
         } else {

example/layout-header-drawer-footer/web/styles/main.css

@@ -2715,7 +2715,8 @@ dt {
   padding: 16px;
   color: #A0A0A0;
   background-color: #454545;
-  min-height: 36px; }
+  min-height: 36px;
+  box-sizing: border-box; }
   .wsk-mini-footer-flex .wsk-mini-footer--left-section {
     display: -webkit-box;
     display: -webkit-flex;
@@ -2826,7 +2827,8 @@ body {
     padding-top: 20px; }
 
 footer.wsk-mini-footer {
-  padding: 16px; }
+  min-height: 68px;
+  max-height: 68px; }
 
 .back-to-top {
   position: fixed;
@@ -2838,8 +2840,8 @@ footer.wsk-mini-footer {
   z-index: 99; }
 
 .add-back-to-top-button .back-to-top {
-  bottom: 15px;
-  right: 15px;
+  right: 24px;
+  bottom: 82px;
   opacity: 1;
   -webkit-transition: all 0.3s ease-in;
           transition: all 0.3s ease-in; }
@@ -2849,8 +2851,6 @@ footer.wsk-mini-footer {
     left: auto;
     right: -100px; }
   .add-back-to-top-button .back-to-top {
-    left: auto;
-    right: 15px;
-    bottom: 15px; }
+    left: auto; }
   .hide-on-mobile {
     display: none; } }

example/layout-header-drawer-footer/web/styles/main.scss

@@ -25,11 +25,6 @@ body {
     flex-direction : column;
 }
 
-
-//.wsk-layout {
-//    //min-height: 100vh;
-//}
-
 .wsk-layout__content {
     display        : flex;
     flex-direction : row;
@@ -50,7 +45,8 @@ body {
 }
 
 footer.wsk-mini-footer {
-    padding: 16px;
+    min-height : 68px;
+    max-height : 68px;
 }
 
 .back-to-top {
@@ -59,22 +55,20 @@ footer.wsk-mini-footer {
 }
 
 .add-back-to-top-button .back-to-top {
-    bottom     : 15px; right : 15px;
+    right      : 24px;
+    bottom     : 82px;
     opacity    : 1;
     transition : all 0.3s ease-in;
 }
 
-
 @media screen and (max-width : $layout-screen-size-threshold) {
 
     .back-to-top {
         left  : auto;
         right : -100px;
     }
     .add-back-to-top-button .back-to-top {
-        left   : auto;
-        right  : 15px;
-        bottom : 15px;
+        left : auto;
     }
 
     .hide-on-mobile {

lib/sass/footer/_mini_footer-flex.scss

@@ -17,6 +17,7 @@ $footer-btn-size : 36px !default;
     color            : $footer-color;
     background-color : $footer-bg-color;
     min-height       : $footer-btn-size;
+    box-sizing       : border-box;
 
     .wsk-mini-footer--left-section {
         display       : flex;