From c6ee245f70fb1ad21cf3dcc409788714fed9f7cb Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 31 Aug 2015 15:32:04 -0500
Subject: [PATCH] iOS outer-content css

---
 ionic/components/card/test/advanced/index.ts  |   3 -
 ionic/components/card/test/advanced/main.html |  90 +++++-----
 ionic/components/card/test/basic/index.ts     |   3 -
 ionic/components/card/test/basic/main.html    |  87 ++++-----
 ionic/components/card/test/images/index.ts    |   3 -
 ionic/components/card/test/images/main.html   |  44 ++---
 ionic/components/content/modes/ios.scss       |  10 ++
 ionic/components/item/test/text/index.ts      |   2 -
 ionic/components/item/test/text/main.html     |  66 +++----
 ionic/components/list/test/headers/index.ts   |   2 -
 ionic/components/list/test/headers/main.html  | 166 +++++++++---------
 ionic/ionic.ios.scss                          |   3 +-
 12 files changed, 247 insertions(+), 232 deletions(-)
 create mode 100644 ionic/components/content/modes/ios.scss

diff --git a/ionic/components/card/test/advanced/index.ts b/ionic/components/card/test/advanced/index.ts
index f02a733534..43aed36502 100644
--- a/ionic/components/card/test/advanced/index.ts
+++ b/ionic/components/card/test/advanced/index.ts
@@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
-
-
-document.body.style.background='#eee';
diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html
index 459844ea62..3640e754cf 100644
--- a/ionic/components/card/test/advanced/main.html
+++ b/ionic/components/card/test/advanced/main.html
@@ -1,58 +1,60 @@
 
 <ion-toolbar><ion-title>Advanced Cards</ion-title></ion-toolbar>
 
+<ion-content class="outer-content">
 
-<ion-card>
+  <ion-card>
 
-  <div>
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </div>
-
-  <ion-card-content>
-    <h2 class="card-title">
-      Card Title Goes Here
-    </h2>
-    <p>
-      Keep close to Nature's heart... and break clear away,
-      once in awhile, and climb a mountain. I am within a paragraph element.
-    </p>
-  </ion-card-content>
-
-  <ion-item actions>
-    <button clear item-left>
-      <icon star></icon>
-      Favorite
-    </button>
-    <button clear item-right>
-      <icon share></icon>
-      Share
-    </button>
-  </ion-item>
-
-</ion-card>
-
-
-<ion-card>
-
-  <ion-item>
-    <div item-left class="item-media">
-      <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    <div>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <h2>Card With An Inset Picture</h2>
-    <p>Isn't it beautiful</p>
-  </ion-item>
 
-  <div>
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </div>
+    <ion-card-content>
+      <h2 class="card-title">
+        Card Title Goes Here
+      </h2>
+      <p>
+        Keep close to Nature's heart... and break clear away,
+        once in awhile, and climb a mountain. I am within a paragraph element.
+      </p>
+    </ion-card-content>
 
-  <ion-card-content>
-    <p>Hello. I am a paragraph.</p>
-  </ion-card-content>
+    <ion-item actions>
+      <button clear item-left>
+        <icon star></icon>
+        Favorite
+      </button>
+      <button clear item-right>
+        <icon share></icon>
+        Share
+      </button>
+    </ion-item>
 
-</ion-card>
+  </ion-card>
 
 
+  <ion-card>
+
+    <ion-item>
+      <div item-left class="item-media">
+        <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </div>
+      <h2>Card With An Inset Picture</h2>
+      <p>Isn't it beautiful</p>
+    </ion-item>
+
+    <div>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </div>
+
+    <ion-card-content>
+      <p>Hello. I am a paragraph.</p>
+    </ion-card-content>
+
+  </ion-card>
+
+</ion-content>
+
 <style>
   .avatar {
     width: 80px !important;
diff --git a/ionic/components/card/test/basic/index.ts b/ionic/components/card/test/basic/index.ts
index f02a733534..43aed36502 100644
--- a/ionic/components/card/test/basic/index.ts
+++ b/ionic/components/card/test/basic/index.ts
@@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
-
-
-document.body.style.background='#eee';
diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html
index 097d924445..9c0cb1e955 100644
--- a/ionic/components/card/test/basic/main.html
+++ b/ionic/components/card/test/basic/main.html
@@ -1,61 +1,64 @@
 
 <ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
 
+<ion-content class="outer-content">
 
-<ion-card>
+  <ion-card>
 
-  <ion-card-header>
-    Card Header
-  </ion-card-header>
+    <ion-card-header>
+      Card Header
+    </ion-card-header>
 
-  <ion-card-content>
-    Keep close to Nature's heart... and break clear away, once in awhile,
-    and climb a mountain or spend a week in the woods. Wash your spirit clean.
-  </ion-card-content>
+    <ion-card-content>
+      Keep close to Nature's heart... and break clear away, once in awhile,
+      and climb a mountain or spend a week in the woods. Wash your spirit clean.
+    </ion-card-content>
 
-</ion-card>
+  </ion-card>
 
 
-<ion-card>
+  <ion-card>
 
-  <ion-item>
-    <icon pin item-left></icon>
-    ion-iteam in a card, icon left, button right
-    <button outline item-right>View</button>
-  </ion-item>
+    <ion-item>
+      <icon pin item-left></icon>
+      ion-iteam in a card, icon left, button right
+      <button outline item-right>View</button>
+    </ion-item>
 
-  <ion-card-content>
-    This is content, without any paragraph or header tags,
-    within an ion-card-content element.
-  </ion-card-content>
+    <ion-card-content>
+      This is content, without any paragraph or header tags,
+      within an ion-card-content element.
+    </ion-card-content>
 
-</ion-card>
+  </ion-card>
 
 
-<ion-card>
+  <ion-card>
 
-  <a ion-item href="#">
-    <icon wifi item-left></icon>
-    Card Link Item 1
-    <icon forward item-right></icon>
-  </a>
+    <a ion-item href="#">
+      <icon wifi item-left></icon>
+      Card Link Item 1
+      <icon forward item-right></icon>
+    </a>
 
-  <a ion-item href="#">
-    <icon wine item-left></icon>
-    Card Link Item 2
-    <icon forward item-right></icon>
-  </a>
+    <a ion-item href="#">
+      <icon wine item-left></icon>
+      Card Link Item 2
+      <icon forward item-right></icon>
+    </a>
 
-  <button ion-item>
-    <icon warning item-left></icon>
-    Card Button Item 1
-    <icon forward item-right></icon>
-  </button>
+    <button ion-item>
+      <icon warning item-left></icon>
+      Card Button Item 1
+      <icon forward item-right></icon>
+    </button>
 
-  <button ion-item>
-    <icon walk item-left></icon>
-    Card Button Item 2
-    <icon forward item-right></icon>
-  </button>
+    <button ion-item>
+      <icon walk item-left></icon>
+      Card Button Item 2
+      <icon forward item-right></icon>
+    </button>
 
-</ion-card>
+  </ion-card>
+
+</ion-content>
diff --git a/ionic/components/card/test/images/index.ts b/ionic/components/card/test/images/index.ts
index f02a733534..43aed36502 100644
--- a/ionic/components/card/test/images/index.ts
+++ b/ionic/components/card/test/images/index.ts
@@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
-
-
-document.body.style.background='#eee';
diff --git a/ionic/components/card/test/images/main.html b/ionic/components/card/test/images/main.html
index 1ec08e325a..d52c6a0775 100644
--- a/ionic/components/card/test/images/main.html
+++ b/ionic/components/card/test/images/main.html
@@ -2,30 +2,34 @@
 <ion-toolbar><ion-title>Card Images</ion-title></ion-toolbar>
 
 
-<ion-card>
-  <div>
-    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-  </div>
-  <ion-card-content>
-    <h4>H4 text inside ion-card-content</h4>
-    <p>Paragraph text inside ion-card-content.</p>
-  </ion-card-content>
-</ion-card>
+<ion-content class="outer-content">
 
-
-<ion-card>
-
-  <ion-item>
-    <div item-left class="item-media">
-      <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+  <ion-card>
+    <div>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <h2>Card With An Inset Picture, H2 text</h2>
-    <p>Isn't it beautiful.</p>
-  </ion-item>
+    <ion-card-content>
+      <h4>H4 text inside ion-card-content</h4>
+      <p>Paragraph text inside ion-card-content.</p>
+    </ion-card-content>
+  </ion-card>
 
-  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
 
-</ion-card>
+  <ion-card>
+
+    <ion-item>
+      <div item-left class="item-media">
+        <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </div>
+      <h2>Card With An Inset Picture, H2 text</h2>
+      <p>Isn't it beautiful.</p>
+    </ion-item>
+
+    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+
+  </ion-card>
+
+</ion-content>
 
 
 <style>
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
new file mode 100644
index 0000000000..bd5df78ed8
--- /dev/null
+++ b/ionic/components/content/modes/ios.scss
@@ -0,0 +1,10 @@
+
+// iOS Content
+// --------------------------------------------------
+
+$outer-content-md-background-color:         #efeff4 !default;
+
+
+[mode=ios] .outer-content {
+  background: $outer-content-md-background-color;
+}
diff --git a/ionic/components/item/test/text/index.ts b/ionic/components/item/test/text/index.ts
index e3c40c1136..43aed36502 100644
--- a/ionic/components/item/test/text/index.ts
+++ b/ionic/components/item/test/text/index.ts
@@ -5,5 +5,3 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
-
-document.body.style.background='#eee';
diff --git a/ionic/components/item/test/text/main.html b/ionic/components/item/test/text/main.html
index bbb03d4143..9878a21562 100644
--- a/ionic/components/item/test/text/main.html
+++ b/ionic/components/item/test/text/main.html
@@ -1,41 +1,45 @@
 <ion-toolbar><ion-title>Item Text</ion-title></ion-toolbar>
 
-<ion-list>
+<ion-content class="outer-content">
 
-  <ion-item>
-    Plain Ol' div with some text
-  </ion-item>
+  <ion-list>
 
-  <ion-item>
-    Single line text that should have ellipses when it doesn't all fit in the item
-  </ion-item>
+    <ion-item>
+      Plain Ol' div with some text
+    </ion-item>
 
-  <ion-item class="item-text-wrap">
-    Multiline text that should wrap when it is too long
-    to fit on one line in the item. Class on .item
-  </ion-item>
+    <ion-item>
+      Single line text that should have ellipses when it doesn't all fit in the item
+    </ion-item>
 
-  <ion-item class="item-text-wrap">
-    <h1>H1 Title Text</h1>
-    <p>Paragraph line 1</p>
-  </ion-item>
+    <ion-item class="item-text-wrap">
+      Multiline text that should wrap when it is too long
+      to fit on one line in the item. Class on .item
+    </ion-item>
 
-  <ion-item class="item-text-wrap">
-    <h2>H2 Title Text</h2>
-    <p>Paragraph line 1</p>
-  </ion-item>
+    <ion-item class="item-text-wrap">
+      <h1>H1 Title Text</h1>
+      <p>Paragraph line 1</p>
+    </ion-item>
 
-  <ion-item class="item-text-wrap">
-    <h3>H3 Title Text</h3>
-    <p>Paragraph line 1</p>
-    <p>Paragraph line 2</p>
-  </ion-item>
+    <ion-item class="item-text-wrap">
+      <h2>H2 Title Text</h2>
+      <p>Paragraph line 1</p>
+    </ion-item>
 
-  <ion-item class="item-text-wrap">
-    <h4>H4 Title Text</h4>
-    <p>Paragraph line 1</p>
-    <p>Paragraph line 2</p>
-    <p>Paragraph line 3</p>
-  </ion-item>
+    <ion-item class="item-text-wrap">
+      <h3>H3 Title Text</h3>
+      <p>Paragraph line 1</p>
+      <p>Paragraph line 2</p>
+    </ion-item>
 
-</ion-list>
+    <ion-item class="item-text-wrap">
+      <h4>H4 Title Text</h4>
+      <p>Paragraph line 1</p>
+      <p>Paragraph line 2</p>
+      <p>Paragraph line 3</p>
+    </ion-item>
+
+  </ion-list>
+
+</ion-content>
diff --git a/ionic/components/list/test/headers/index.ts b/ionic/components/list/test/headers/index.ts
index e3c40c1136..43aed36502 100644
--- a/ionic/components/list/test/headers/index.ts
+++ b/ionic/components/list/test/headers/index.ts
@@ -5,5 +5,3 @@ import {App} from 'ionic/ionic';
   templateUrl: 'main.html'
 })
 class E2EApp {}
-
-document.body.style.background='#eee';
diff --git a/ionic/components/list/test/headers/main.html b/ionic/components/list/test/headers/main.html
index 416774ddce..462c8e321e 100644
--- a/ionic/components/list/test/headers/main.html
+++ b/ionic/components/list/test/headers/main.html
@@ -1,106 +1,110 @@
 <ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
 
-<ion-list>
+<ion-content class="outer-content">
 
-  <ion-header>
-    List Header
-  </ion-header>
+  <ion-list>
 
-  <ion-item>
-    <icon wifi item-left></icon>
-    Wifi
-    <div class="item-note" item-right>
-      Terrible
-    </div>
-  </ion-item>
+    <ion-header>
+      List Header
+    </ion-header>
 
-  <ion-item>
-    <icon heart item-left></icon>
-    Affection
-    <div class="item-note" item-right>
-      Very Little
-    </div>
-  </ion-item>
+    <ion-item>
+      <icon wifi item-left></icon>
+      Wifi
+      <div class="item-note" item-right>
+        Terrible
+      </div>
+    </ion-item>
 
-  <ion-item>
-    <icon home item-left></icon>
-    Home
-    <div class="item-note" item-right>
-      Where the heart is
-    </div>
-  </ion-item>
+    <ion-item>
+      <icon heart item-left></icon>
+      Affection
+      <div class="item-note" item-right>
+        Very Little
+      </div>
+    </ion-item>
 
-</ion-list>
+    <ion-item>
+      <icon home item-left></icon>
+      Home
+      <div class="item-note" item-right>
+        Where the heart is
+      </div>
+    </ion-item>
+
+  </ion-list>
 
 
-<ion-list>
+  <ion-list>
 
-  <ion-header>
-    List Header
-  </ion-header>
+    <ion-header>
+      List Header
+    </ion-header>
 
-  <ion-item>
-    <icon color-wand item-left></icon>
-    Magic
-    <div class="item-note" item-right>
-      Activated
-    </div>
-  </ion-item>
+    <ion-item>
+      <icon color-wand item-left></icon>
+      Magic
+      <div class="item-note" item-right>
+        Activated
+      </div>
+    </ion-item>
 
-  <ion-item>
-    <icon star item-left></icon>
-    Star status
-    <div class="item-note" item-right>
-      Super
-    </div>
-  </ion-item>
+    <ion-item>
+      <icon star item-left></icon>
+      Star status
+      <div class="item-note" item-right>
+        Super
+      </div>
+    </ion-item>
 
-</ion-list>
+  </ion-list>
 
 
-<ion-list>
+  <ion-list>
 
-  <ion-header>
-    List Header with text that is too long to fit inside the list header
-  </ion-header>
+    <ion-header>
+      List Header with text that is too long to fit inside the list header
+    </ion-header>
 
-  <ion-item>
-    <icon pizza item-left></icon>
-    Pizza
-    <div class="item-note" item-right>
-      Always
-    </div>
-  </ion-item>
+    <ion-item>
+      <icon pizza item-left></icon>
+      Pizza
+      <div class="item-note" item-right>
+        Always
+      </div>
+    </ion-item>
 
-  <ion-item>
-    <icon beer item-left></icon>
-    Beer
-    <div class="item-note" item-right>
-      Yes Plz
-    </div>
-  </ion-item>
+    <ion-item>
+      <icon beer item-left></icon>
+      Beer
+      <div class="item-note" item-right>
+        Yes Plz
+      </div>
+    </ion-item>
 
-  <ion-item>
-    <icon wine item-left></icon>
-    Wine
-    <div class="item-note" item-right>
-      All the time
-    </div>
-  </ion-item>
+    <ion-item>
+      <icon wine item-left></icon>
+      Wine
+      <div class="item-note" item-right>
+        All the time
+      </div>
+    </ion-item>
 
-</ion-list>
+  </ion-list>
 
 
-<ion-list>
+  <ion-list>
 
-  <ion-item>
-    <icon chatboxes item-left></icon>
-    New List, no header, Item 1
-  </ion-item>
+    <ion-item>
+      <icon chatboxes item-left></icon>
+      New List, no header, Item 1
+    </ion-item>
 
-  <ion-item>
-    <icon chatboxes item-left></icon>
-    New List, no header, Item 2
-  </ion-item>
+    <ion-item>
+      <icon chatboxes item-left></icon>
+      New List, no header, Item 2
+    </ion-item>
 
-</ion-list>
+  </ion-list>
+
+</ion-content>
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index 138b026348..91f35c6197 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -5,11 +5,12 @@
   "components/toolbar/modes/ios",
   "components/action-menu/modes/ios",
   "components/card/modes/ios",
-  "components/checkbox/modes/ios",
+  "components/content/modes/ios",
   "components/list/modes/ios",
   "components/text-input/modes/ios",
   "components/nav-bar/modes/ios",
   "components/popup/modes/ios",
+  "components/checkbox/modes/ios",
   "components/radio/modes/ios",
   "components/search-bar/modes/ios",
   "components/segment/modes/ios",