From 6070db9f42b097b1f705327241118f9b10eca267 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 8 Nov 2013 11:41:29 -0600
Subject: [PATCH] Flexbox for refresher content, vertically centered!

---
 dist/css/ionic.css                           | 14 ++++++++++++++
 dist/js/ionic-angular.js                     |  2 +-
 js/ext/angular/src/directive/ionicContent.js |  2 +-
 js/ext/angular/test/content.html             |  5 +----
 scss/_scaffolding.scss                       |  6 ++++++
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 5097435fad..72727f7df2 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2294,6 +2294,20 @@ body, .ionic-body {
   height: 100px;
   margin-top: -100px; }
 
+.scroll-refresher-content {
+  height: 100%;
+  text-align: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  align-items: center; }
+
 .scroll-refreshing {
   -webkit-transition: height 0.1s ease-in-out; }
 
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index 0c63bc16eb..ef7a46d49c 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -530,7 +530,7 @@ angular.module('ionic.ui.content', [])
     restrict: 'E',
     replace: true,
     transclude: true,
-    template: '<div class="scroll-refresher" ng-transclude></div>'
+    template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
   }
 })
 
diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
index 5abed9509e..557a991a9a 100644
--- a/js/ext/angular/src/directive/ionicContent.js
+++ b/js/ext/angular/src/directive/ionicContent.js
@@ -63,7 +63,7 @@ angular.module('ionic.ui.content', [])
     restrict: 'E',
     replace: true,
     transclude: true,
-    template: '<div class="scroll-refresher" ng-transclude></div>'
+    template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
   }
 })
 
diff --git a/js/ext/angular/test/content.html b/js/ext/angular/test/content.html
index 7814827a4e..008f63314e 100644
--- a/js/ext/angular/test/content.html
+++ b/js/ext/angular/test/content.html
@@ -41,7 +41,6 @@
       }
       #refresh-content {
         color: #999;
-        padding: 60px 0px;
         text-align: center;
         font-size: 20px;
       }
@@ -54,9 +53,7 @@
     </header>
     <content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
       <refresher>
-        <div id="refresh-content">
-          Refreshing
-        </div>
+        Refreshing
       </refresher>
       <ul class="list">
         <li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index 86ccc5ef2c..1305ee98a1 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -114,6 +114,12 @@ body, .ionic-body {
   height: 100px;
   margin-top: -100px;
 }
+.scroll-refresher-content {
+  height: 100%;
+  text-align: center;
+  @include display-flex();
+  @include align-items(center);
+}
 .scroll-refreshing {
   -webkit-transition: height 0.1s ease-in-out;
 }