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

list updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-20 13:03:17 -05:00
parent c878289ed4
commit f367f53aca
11 changed files with 87 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ionic/components/card/modes/ios.scss
View File

@ -12,8 +12,9 @@ $card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
$card-ios-border-radius: 2px !default;
$card-ios-font-size: 1.4rem !default;
$card-ios-header-background-color: $card-ios-background-color !default;
$card-ios-header-padding: 10px;
$card-ios-title-font-size: 1.8rem !default;
$card-ios-title-padding: 8px 0 8px 0;
$card-ios-title-text-color: #222 !default;
.card.list[mode=ios] {
@ -43,9 +44,10 @@ $card-ios-header-padding: 10px;
left: 0;
}
ion-header {
padding: $card-ios-header-padding;
background-color: $card-ios-header-background-color;
.card-title {
padding: $card-ios-title-padding;
font-size: $card-ios-title-font-size;
color: $card-ios-title-text-color;
}
}

53
ionic/components/card/modes/material.scss
View File

@ -2,19 +2,22 @@
// Material Design Card
// --------------------------------------------------
$card-md-margin-top: 16px !default;
$card-md-margin-right: 16px !default;
$card-md-margin-bottom: 16px !default;
$card-md-margin-left: 16px !default;
$card-md-margin-top: 8px !default;
$card-md-margin-right: 8px !default;
$card-md-margin-bottom: 8px !default;
$card-md-margin-left: 8px !default;
$card-md-background-color: $list-background-color !default;
$card-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$card-md-border-radius: 2px !default;
$card-md-font-size: 1.4rem !default;
$card-md-header-font-size: 2.4rem !default;
$card-md-header-background-color: $card-md-background-color !default;
$card-md-header-padding: 16px;
$card-md-text-color: #222 !default;
$card-md-title-font-size: 2.4rem !default;
$card-md-title-padding: 8px 0 8px 0;
$card-md-title-text-color: #222 !default;
$card-md-header-font-size: 1.6rem !default;
.card.list[mode=md] {
@ -26,18 +29,25 @@ $card-md-header-padding: 16px;
font-size: $card-md-font-size;
overflow: hidden;
.item:before,
.item:after {
left: 0;
}
.item:first-child {
margin-top: 0;
&:before {
border-top: none;
}
}
.item:last-child {
margin-bottom: 0;
padding-bottom: 8px;
}
.item::before,
.item::after {
border: none;
&:after {
border-top: none;
}
}
.item-content button:first-child,
@ -45,29 +55,27 @@ $card-md-header-padding: 16px;
margin-left: 0;
}
.item-content {
margin-top: 8px;
margin-bottom: 8px;
}
ion-header {
padding: $card-md-header-padding;
font-size: $card-md-header-font-size;
background-color: $card-md-header-background-color;
color: $card-md-text-color;
}
.item > img {
padding-bottom: 8px;
.card-title {
padding: $card-md-title-padding;
font-size: $card-md-title-font-size;
color: $card-md-title-text-color;
}
h1 {
margin: 0 0 2px;
font-size: 2.4rem;
color: $card-md-text-color;
}
h2 {
margin: 2px 0 2px;
font-size: 1.6rem;
color: $card-md-text-color;
}
h3,
@ -76,11 +84,14 @@ $card-md-header-padding: 16px;
h6 {
margin: 2px 0 2px;
font-size: 1.4rem;
color: $card-md-text-color;
}
p {
font-size: 1.4rem;
margin: 0 0 2px;
line-height: 1.5;
color: $card-md-text-color;
}
}

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

@ -8,19 +8,30 @@
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-header>
Title goes here
</ion-header>
<div class="item item-text-wrap">
<div class="item-content">
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain.
<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.
</p>
</div>
</div>
<ion-item>
<button clear>Action 1</button>
<button clear>Action 2</button>
<ion-item actions>
<button clear>
<icon name="ion-star"></icon>
Favorite
</button>
<button clear>
<icon name="ion-reply"></icon>
Reply
</button>
</ion-item>
</ion-card>

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

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

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

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

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

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

12
ionic/components/item/modes/ios.scss
View File

@ -43,8 +43,18 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
border-top: 1px solid $item-ios-border-color;
}
&:last-child {
&:first-of-type {
&:before {
left: 0;
}
}
&:last-of-type {
margin-bottom: -1px;
&:after {
left: 0;
}
}
}

4
ionic/components/item/modes/material.scss
View File

@ -92,6 +92,10 @@ $item-md-forward-icon-color: $item-md-border-color !default;
margin-top: $item-md-padding-media-top;
}
.item[actions] .item-content {
margin: 8px;
}
.badge {
margin-right: $item-md-padding-right;
}

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

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

3
ionic/components/list/modes/ios.scss
View File

@ -4,7 +4,7 @@
$list-ios-margin-top: 10px !default;
$list-ios-margin-right: 0 !default;
$list-ios-margin-bottom: 10px !default;
$list-ios-margin-bottom: 32px !default;
$list-ios-margin-left: 0 !default;
$list-inset-ios-margin-top: 16px !default;
@ -20,6 +20,7 @@ $list-ios-header-color: #333 !default;
.list[mode=ios] {
margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
ion-header {
padding: $list-ios-header-padding;

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

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