javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

iOS outer-content css

Browse Source
This commit is contained in:
Adam Bradley
2015-08-31 15:32:04 -05:00
parent bf4eea3fb2
commit c6ee245f70
12 changed files with 247 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ionic/components/card/test/advanced/index.ts
View File

@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
templateUrl: 'main.html'
})
class E2EApp {}
document.body.style.background='#eee';

90
ionic/components/card/test/advanced/main.html
View File

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

3
ionic/components/card/test/basic/index.ts
View File

@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
templateUrl: 'main.html'
})
class E2EApp {}
document.body.style.background='#eee';

87
ionic/components/card/test/basic/main.html
View File

@ -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>

3
ionic/components/card/test/images/index.ts
View File

@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
templateUrl: 'main.html'
})
class E2EApp {}
document.body.style.background='#eee';

44
ionic/components/card/test/images/main.html
View File

@ -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>

10
ionic/components/content/modes/ios.scss Normal file
View File

@ -0,0 +1,10 @@
// iOS Content
// --------------------------------------------------
$outer-content-md-background-color: #efeff4 !default;
[mode=ios] .outer-content {
background: $outer-content-md-background-color;
}

2
ionic/components/item/test/text/index.ts
View File

@ -5,5 +5,3 @@ import {App} from 'ionic/ionic';
templateUrl: 'main.html'
})
class E2EApp {}
document.body.style.background='#eee';

66
ionic/components/item/test/text/main.html
View File

@ -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>

2
ionic/components/list/test/headers/index.ts
View File

@ -5,5 +5,3 @@ import {App} from 'ionic/ionic';
templateUrl: 'main.html'
})
class E2EApp {}
document.body.style.background='#eee';

166
ionic/components/list/test/headers/main.html
View File

@ -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>

3
ionic/ionic.ios.scss
View File

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