From ffd6ed6376de1cec3447f189d4b24e3bcff3ef77 Mon Sep 17 00:00:00 2001
From: Arturo <arturo@kunder.cl>
Date: Fri, 28 Nov 2014 16:00:57 -0300
Subject: [PATCH 1/2] Adding sass variables for footer, subfooter and subheader
 heights Allowing to footers and subheader with diferent height.

FIX #2334
---
 scss/_bar.scss         |  9 +++++++--
 scss/_modal.scss       |  4 ++--
 scss/_platform.scss    |  5 ++---
 scss/_scaffolding.scss | 10 +++++-----
 scss/_variables.scss   |  4 ++++
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/scss/_bar.scss b/scss/_bar.scss
index f147b26e9e..e35c91b7a0 100644
--- a/scss/_bar.scss
+++ b/scss/_bar.scss
@@ -333,6 +333,8 @@
   border-bottom-width: 0;
   background-position: top;
 
+  height: $bar-footer-height;
+
   &.item-input-inset {
     position: absolute;
   }
@@ -346,10 +348,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 {
@@ -365,4 +371,3 @@
 .bar .buttons .hide {
   display: none;
 }
-
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 3e701c9592..0b56bb5e61 100644
--- a/scss/_modal.scss
+++ b/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;
     }
   }
 }
diff --git a/scss/_platform.scss b/scss/_platform.scss
index 0f26c54d4c..f9aaa2390a 100644
--- a/scss/_platform.scss
+++ b/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;
 }
-
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index e50e5b0bfa..8ecdf1f294 100644
--- a/scss/_scaffolding.scss
+++ b/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
diff --git a/scss/_variables.scss b/scss/_variables.scss
index ed9e4d4004..0bf5ff6d06 100644
--- a/scss/_variables.scss
+++ b/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;

From 3e0dce73a37026b28db24c11afd94b433ce0cd3e Mon Sep 17 00:00:00 2001
From: Arturo <arturo@kunder.cl>
Date: Fri, 28 Nov 2014 16:26:56 -0300
Subject: [PATCH 2/2] adding tests for both subheaders and subfooters

---
 test/css/subfooters.html | 88 ++++++++++++++++++++++++++++++++++++++++
 test/css/subheaders.html | 88 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 176 insertions(+)
 create mode 100644 test/css/subfooters.html
 create mode 100644 test/css/subheaders.html

diff --git a/test/css/subfooters.html b/test/css/subfooters.html
new file mode 100644
index 0000000000..820e8da3d3
--- /dev/null
+++ b/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>
diff --git a/test/css/subheaders.html b/test/css/subheaders.html
new file mode 100644
index 0000000000..6724c05bc2
--- /dev/null
+++ b/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>