Merge branch 'arturokunder-variable-subheader-height'

scss/_bar.scss

@@ -334,6 +334,8 @@
   border-bottom-width: 0;
   background-position: top;
 
+  height: $bar-footer-height;
+
   &.item-input-inset {
     position: absolute;
   }
@@ -347,10 +349,14 @@
 .bar-subheader {
   top: $bar-height;
   display: block;
+
+  height: $bar-subheader-height;
 }
 .bar-subfooter {
-  bottom: $bar-height;
+  bottom: $bar-footer-height;
   display: block;
+
+  height: $bar-subfooter-height;
 }
 
 .nav-bar-block {
@@ -366,4 +372,3 @@
 .bar .buttons .hide {
   display: none;
 }
-

scss/_modal.scss

@@ -65,13 +65,13 @@
       top: $bar-height;
     }
     .has-subheader {
-      top: (2 * $bar-height);
+      top: $bar-height + $bar-subheader-height;
     }
     .has-tabs-top {
       top: $bar-height + $tabs-height;
     }
     .has-header.has-subheader.has-tabs-top {
-      top: 2 * $bar-height + $tabs-height;
+      top: $bar-height + $bar-subheader-height + $tabs-height;
     }
   }
 }

scss/_platform.scss

@@ -31,13 +31,13 @@
       top: $bar-height + $ios-statusbar-height;
     }
     .has-subheader {
-      top: (2 * $bar-height) + $ios-statusbar-height;
+      top: $bar-height + $bar-subheader-height + $ios-statusbar-height;
     }
     .has-tabs-top {
       top: $bar-height + $tabs-height + $ios-statusbar-height;
     }
     .has-header.has-subheader.has-tabs-top {
-      top: 2 * $bar-height + $tabs-height + $ios-statusbar-height;
+      top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height;
     }
   }
   &.status-bar-hide {
@@ -57,4 +57,3 @@
   -webkit-transition: none !important;
   transition: none !important;
 }
-

scss/_scaffolding.scss

@@ -311,20 +311,20 @@ ion-infinite-scroll {
 }
 
 .has-subheader {
-  top: $bar-height * 2;
+  top: $bar-height + $bar-subheader-height;
 }
 .has-tabs-top {
   top: $bar-height + $tabs-height;
 }
 .has-header.has-subheader.has-tabs-top {
-  top: 2 * $bar-height + $tabs-height;
+  top: $bar-height + $bar-subheader-height + $tabs-height;
 }
 
 .has-footer {
-  bottom: $bar-height;
+  bottom: $bar-footer-height;
 }
 .has-subfooter {
-  bottom: $bar-height * 2;
+  bottom: $bar-footer-height + $bar-subfooter-height;
 }
 
 .has-tabs,
@@ -333,7 +333,7 @@ ion-infinite-scroll {
 }
 
 .has-footer.has-tabs {
-  bottom: $tabs-height + $bar-height;
+  bottom: $tabs-height + $bar-footer-height;
 }
 
 // A full screen section with a solid background

scss/_variables.scss

@@ -162,6 +162,10 @@ $bar-padding-portrait:            5px !default;
 $bar-padding-landscape:           5px !default;
 $bar-transparency:                1 !default;
 
+$bar-footer-height:               44px !default;
+$bar-subheader-height:            44px !default;
+$bar-subfooter-height:            44px !default;
+
 $bar-light-bg:                    rgba($button-light-bg, $bar-transparency) !default;
 $bar-light-text:                  $button-light-text !default;
 $bar-light-border:                $button-light-border !default;

test/css/subfooters.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html ng-app="ionic">
+  <head>
+    <script src="../../dist/js/ionic.bundle.js"></script>
+    <meta charset="utf-8">
+    <title>Footers</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link href="../../dist/css/ionic.css" rel="stylesheet">
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Sub Footer Test</h1>
+    </header>
+
+    <ion-content class="content padding has-header has-footer has-subfooter">
+      <p>Footer and subfooter should always stay at the bottom of the screen, and on top of the main content.</p>
+      <p>Content element must have "has-footer" and "has-subfooter" as a classname.</p>
+      <p>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+      </p>
+    </ion-content>
+
+    <div class="bar bar-subfooter bar-positive">
+      <h3 class="title">Subfooter</h3>
+    </div>
+
+    <footer class="bar bar-footer bar-positive">
+      <h3 class="title">Footer</h3>
+    </footer>
+
+  </body>
+</html>

test/css/subheaders.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html ng-app="ionic">
+  <head>
+    <script src="../../dist/js/ionic.bundle.js"></script>
+    <meta charset="utf-8">
+    <title>Header</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link href="../../dist/css/ionic.css" rel="stylesheet">
+    <style>
+      .bar {
+        position: relative;
+        top: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="bar bar-header">
+      <h1 class="title">Header title</h1>
+    </div>
+
+    <div class="bar bar-subheader">
+      <h3 class="title">Subheader title</h3>
+    </div>
+
+    <ion-content class="content padding has-header has-subheader">
+      <p>Content element must have "has-header" "has-subheader" as a classname.</p>
+      <p>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+      </p>
+    </ion-content>
+  </body>
+</html>