iOS outer-content css

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';

ionic/components/card/test/advanced/main.html

@@ -1,8 +1,9 @@
 
 <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==">
@@ -29,10 +30,10 @@
       </button>
     </ion-item>
 
-</ion-card>
+  </ion-card>
 
 
-<ion-card>
+  <ion-card>
 
     <ion-item>
       <div item-left class="item-media">
@@ -50,8 +51,9 @@
       <p>Hello. I am a paragraph.</p>
     </ion-card-content>
 
-</ion-card>
+  </ion-card>
 
+</ion-content>
 
 <style>
   .avatar {

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';

ionic/components/card/test/basic/main.html

@@ -1,8 +1,9 @@
 
 <ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
 
+<ion-content class="outer-content">
 
-<ion-card>
+  <ion-card>
 
     <ion-card-header>
       Card Header
@@ -13,10 +14,10 @@
       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>
@@ -29,10 +30,10 @@
       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>
@@ -58,4 +59,6 @@
       <icon forward item-right></icon>
     </button>
 
-</ion-card>
+  </ion-card>
+
+</ion-content>

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';

ionic/components/card/test/images/main.html

@@ -2,7 +2,9 @@
 <ion-toolbar><ion-title>Card Images</ion-title></ion-toolbar>
 
 
-<ion-card>
+<ion-content class="outer-content">
+
+  <ion-card>
     <div>
       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
@@ -10,10 +12,10 @@
       <h4>H4 text inside ion-card-content</h4>
       <p>Paragraph text inside ion-card-content.</p>
     </ion-card-content>
-</ion-card>
+  </ion-card>
 
 
-<ion-card>
+  <ion-card>
 
     <ion-item>
       <div item-left class="item-media">
@@ -25,7 +27,9 @@
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
 
-</ion-card>
+  </ion-card>
+
+</ion-content>
 
 
 <style>

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;
+}

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';

ionic/components/item/test/text/main.html

@@ -1,6 +1,8 @@
 <ion-toolbar><ion-title>Item Text</ion-title></ion-toolbar>
 
-<ion-list>
+<ion-content class="outer-content">
+
+  <ion-list>
 
     <ion-item>
       Plain Ol' div with some text
@@ -38,4 +40,6 @@
       <p>Paragraph line 3</p>
     </ion-item>
 
-</ion-list>
+  </ion-list>
+
+</ion-content>

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';

ionic/components/list/test/headers/main.html

@@ -1,6 +1,8 @@
 <ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
 
-<ion-list>
+<ion-content class="outer-content">
+
+  <ion-list>
 
     <ion-header>
       List Header
@@ -30,10 +32,10 @@
       </div>
     </ion-item>
 
-</ion-list>
+  </ion-list>
 
 
-<ion-list>
+  <ion-list>
 
     <ion-header>
       List Header
@@ -55,10 +57,10 @@
       </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
@@ -88,10 +90,10 @@
       </div>
     </ion-item>
 
-</ion-list>
+  </ion-list>
 
 
-<ion-list>
+  <ion-list>
 
     <ion-item>
       <icon chatboxes item-left></icon>
@@ -103,4 +105,6 @@
       New List, no header, Item 2
     </ion-item>
 
-</ion-list>
+  </ion-list>
+
+</ion-content>

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",