Sticky footer for all pages

Currently the footer is based on top margins which looks odd on big screen sizes.
Also, the footer shows up on the top of the page on pages take a moment to load (while ng-view is rendering).

- True sticky footer based on flexbox
- Ensure footer stays at bottom while ng-view div does not exist yet

public/sass/components/_footer.scss

@@ -4,7 +4,7 @@
 
 
 .footer {
 .footer {
   color: $footer-link-color;
   color: $footer-link-color;
-  padding: 5rem 0 1rem 0;
+  padding: 1rem 0 1rem 0;
   font-size: $font-size-sm;
   font-size: $font-size-sm;
   position: relative;
   position: relative;
   width: 98%; /* was causing horiz scrollbars - need to examine */
   width: 98%; /* was causing horiz scrollbars - need to examine */
@@ -38,6 +38,7 @@
   }
   }
 }
 }
 
 
+// Keeping footer inside the graphic on Login screen
 .login-page {
 .login-page {
   .footer {
   .footer {
     bottom: $spacer;
     bottom: $spacer;

public/sass/layout/_page.scss

@@ -40,6 +40,29 @@
   &--dashboard {
   &--dashboard {
     height: calc(100% - 56px);
     height: calc(100% - 56px);
   }
   }
+
+  // Sticky footer
+  display: flex;
+  flex-direction: column;
+
+  > div {
+    flex-grow: 1;
+  }
+
+  > .footer {
+    flex-shrink: 0;
+  }
+
+  // Render in correct position even ng-view div is not rendered yet
+  > .footer:first-child {
+    flex-grow: 1;
+    display: flex;
+
+    > * {
+      width: 100%;
+      align-self: flex-end;
+    }
+  }
 }
 }
 
 
 // fix for phantomjs
 // fix for phantomjs