javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

md list updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-19 09:37:11 -05:00
parent 554b1b2d9a
commit 13c614d0ea
12 changed files with 256 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,8 +7,10 @@ $card-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2p
$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-footer-background-color: $card-md-background-color !default;
$card-md-footer-padding: 16px;
@@ -26,15 +28,27 @@ $card-md-footer-padding: 16px;
.item:last-child {
margin-bottom: 0;
padding-bottom: 8px;
}
.item:first-child:before,
.item:last-child:after {
.item::before,
.item::after {
border: none;
}
.item-content button:first-child,
.item-content [button]:first-child {
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-footer-background-color;
}
@@ -43,4 +57,31 @@ $card-md-footer-padding: 16px;
background-color: $card-md-footer-background-color;
}
.item > img {
padding-bottom: 8px;
}
h1 {
margin: 0 0 2px;
font-size: 2.4rem;
}
h2 {
margin: 2px 0 2px;
font-size: 1.6rem;
}
h3,
h4,
h5,
h6 {
margin: 2px 0 2px;
font-size: 1.4rem;
}
p {
font-size: 1.4rem;
margin: 0 0 2px;
}
}

1
ionic/components/card/test/advanced/e2e.ts Normal file
View File

@@ -0,0 +1 @@

10
ionic/components/card/test/advanced/index.ts Normal file
View File

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

62
ionic/components/card/test/advanced/main.html Normal file
View File

@@ -0,0 +1,62 @@
<ion-toolbar><ion-title>Advanced Cards</ion-title></ion-toolbar>
<ion-card>
<div class="item">
<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.
</div>
</div>
<ion-item>
<button clear>Action 1</button>
<button clear>Action 2</button>
</ion-item>
</ion-card>
<ion-card>
<div class="item">
<div class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<h2>Card With An Inset Picture</h2>
<p>Isn't it beautiful</p>
</div>
</div>
<div class="item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<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.
</div>
</div>
</ion-card>
<style>
.avatar {
width: 80px !important;
height: 80px;
}
img {
height: 100px;
}
</style>

2
ionic/components/item/item.scss
View File

@@ -27,6 +27,7 @@ button.item.item {
color: inherit;
text-decoration: none;
width: 100%;
min-height: 4.4rem;
line-height: normal;
justify-content: inherit;
box-shadow: none;
@@ -76,7 +77,6 @@ button.item.item {
button + .item-content,
[button] + .item-content,
icon + icon,
icon + .item-content,
.item-content + icon,
.item-media + .item-content,
.item-content + .item-media,

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

@@ -69,6 +69,10 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
color: $item-ios-note-color;
}
.item icon + .item-content {
margin-left: 0;
}
.item > icon {
margin-left: $item-ios-padding-left;
margin-right: $item-ios-padding-right;

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

@@ -5,13 +5,13 @@
$item-md-border-color: lighten($list-border-color, 10%) !default;
$item-md-font-size: 1.6rem !default;
$item-md-padding-top: 16px !default;
$item-md-padding-top: 13px !default;
$item-md-padding-right: 16px !default;
$item-md-padding-bottom: 16px !default;
$item-md-padding-bottom: 13px !default;
$item-md-padding-left: 16px !default;
$item-md-padding-media-top: 12px !default;
$item-md-padding-media-bottom: 12px !default;
$item-md-padding-media-top: 8px !default;
$item-md-padding-media-bottom: 8px !default;
$item-md-body-text-font-size: 1.4rem !default;
$item-md-body-text-line-height: 1.5 !default;
@@ -27,6 +27,7 @@ $item-md-forward-icon-color: $item-md-border-color !default;
.item {
font-size: $item-md-font-size;
margin-top: -1px;
text-transform: none;
&:before {
position: absolute;
@@ -73,7 +74,7 @@ $item-md-forward-icon-color: $item-md-border-color !default;
}
.item-input > icon {
margin-top: $item-md-padding-media-top - 1;
margin-top: $item-md-padding-media-top;
}
icon[forward] {
@@ -81,7 +82,7 @@ $item-md-forward-icon-color: $item-md-border-color !default;
color: $item-md-forward-icon-color;
}
button {
.item > button {
margin: 0 $item-md-padding-right 0 $item-md-padding-left;
padding: 2px 6px;
min-height: 26px;
@@ -106,6 +107,35 @@ $item-md-forward-icon-color: $item-md-border-color !default;
max-height: $item-md-thumbnail-size;
}
h1 {
margin: 0 0 2px;
font-size: 2.4rem;
font-weight: normal;
}
h2 {
margin: 2px 0 2px;
font-size: 1.6rem;
font-weight: normal;
}
h3,
h4,
h5,
h6 {
line-height: normal;
margin: 2px 0 2px;
font-size: 1.4rem;
font-weight: normal;
}
p {
line-height: normal;
color: #666;
font-size: 1.4rem;
margin: 0 0 2px;
}
button.item.activated {
box-shadow: none;
}

1
ionic/components/item/test/images/e2e.ts Normal file
View File

@@ -0,0 +1 @@

7
ionic/components/item/test/images/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class E2EApp {}

87
ionic/components/item/test/images/main.html Normal file
View File

@@ -0,0 +1,87 @@
<ion-toolbar><ion-title>Item Images</ion-title></ion-toolbar>
<ion-list>
<div class="item">
<div class="item-content">
Plain Ol' div w/ some text, no images
</div>
</div>
<div class="item">
<icon name="ion-email"></icon>
<div class="item-content">
One Line w/ Icon, div only text
</div>
</div>
<div class="item">
<icon name="ion-email"></icon>
<div class="item-content">
<h2>Two Lines w/ Icon, H2 Header</h2>
<p>Paragraph text.</p>
</div>
</div>
<div class="item">
<div class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
One Line w/ Avatar, div only text
</div>
</div>
<div class="item">
<div class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<h2>Two Lines w/ Avatar, H2 Header</h2>
<p>Paragraph text.</p>
</div>
</div>
<div class="item">
<div class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<h2>Three Lines w/ Avatar, H2 Header</h2>
<p>Paragraph text.</p>
<p>Paragraph text.</p>
</div>
</div>
<div class="item">
<div class="item-media">
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<h2>Two Lines w/ Thumbnail, H2 Header</h2>
<p>Paragraph text.</p>
</div>
</div>
<div class="item">
<div class="item-media">
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<h2>Three Lines w/ Thumbnail, H2 Header</h2>
<p>Paragraph text.</p>
<p>Paragraph text.</p>
</div>
</div>
</ion-list>
<style>
.avatar {
width: 80px !important;
height: 80px;
}
img {
height: 100px;
}
</style>

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

@@ -4,11 +4,11 @@
$list-md-header-padding: 16px $item-md-padding-right 16px $item-md-padding-left !default;
$list-md-header-font-size: 1.6rem !default;
$list-md-header-color: #6d6d72 !default;
$list-md-header-color: #222 !default;
$list-md-footer-padding: 16px $item-md-padding-right 16px $item-md-padding-left !default;
$list-md-footer-font-size: 1.2rem !default;
$list-md-footer-color: #8f8f94 !default;
$list-md-footer-color: #222 !default;
.list[mode=md] {

4
ionic/components/view/view-controller.ts
View File

@@ -265,9 +265,9 @@ export class ViewController extends Ion {
});
}
});
});
}
swipeBackStart() {
if (this.isTransitioning() || this.items.length < 2) {