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

ion-cart-content

Browse Source
This commit is contained in:
Adam Bradley
2015-08-24 17:55:58 -05:00
parent d53f540d1f
commit cb48d67d4a
6 changed files with 61 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ionic/components/card/card.scss
View File

@ -5,11 +5,10 @@
.card {
display: block;
}
img {
width: 100%;
}
.card img {
width: 100%;
}
ion-card-header {
@ -18,3 +17,7 @@ ion-card-header {
white-space: nowrap;
text-overflow: ellipsis;
}
ion-card-content {
display: block;
}

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

@ -7,6 +7,11 @@ $card-ios-margin-right: 16px !default;
$card-ios-margin-bottom: 16px !default;
$card-ios-margin-left: 16px !default;
$card-ios-padding-top: 13px !default;
$card-ios-padding-right: 16px !default;
$card-ios-padding-bottom: 14px !default;
$card-ios-padding-left: 16px !default;
$card-ios-background-color: $list-background-color !default;
$card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
$card-ios-border-radius: 2px !default;
@ -57,6 +62,11 @@ $card-ios-header-color: #333 !default;
color: $card-ios-header-color;
}
ion-card-content {
padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
font-size: $card-ios-font-size;
}
.card-title {
padding: $card-ios-title-padding;
font-size: $card-ios-title-font-size;
@ -66,11 +76,13 @@ $card-ios-header-color: #333 !default;
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,
@ -79,6 +91,7 @@ $card-ios-header-color: #333 !default;
h6 {
margin: 2px 0 2px;
font-size: 1.4rem;
font-weight: normal;
}
p {

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

@ -7,10 +7,16 @@ $card-md-margin-right: 8px !default;
$card-md-margin-bottom: 8px !default;
$card-md-margin-left: 8px !default;
$card-md-padding-top: 13px !default;
$card-md-padding-right: 16px !default;
$card-md-padding-bottom: 13px !default;
$card-md-padding-left: 16px !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-line-height: 1.5 !default;
$card-md-text-color: #222 !default;
$card-md-title-font-size: 2.4rem !default;
@ -63,6 +69,12 @@ $card-md-header-color: #222 !default;
color: $card-md-header-color;
}
ion-card-content {
padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
font-size: $card-md-font-size;
line-height: $card-md-line-height;
}
.card-title {
padding: $card-md-title-padding;
font-size: $card-md-title-font-size;

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

@ -9,19 +9,15 @@
</div>
<div class="item item-text-wrap">
<ion-item-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-item-content>
</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>
@ -53,11 +49,9 @@
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item item-text-wrap">
<ion-item-content>
Hello. I am a one liner, not a paragraph.
</ion-item-content>
</div>
<ion-card-content>
<p>Hello. I am a paragraph.</p>
</ion-card-content>
</ion-card>

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

@ -8,11 +8,10 @@
Card Header
</ion-card-header>
<div class="item item-text-wrap">
<ion-item-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-item-content>
</div>
<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>
@ -27,37 +26,18 @@
<button outline>View</button>
</div>
<div class="item item-text-wrap">
<ion-item-content>
This is a multiline content within a card that should
take up multiple lines and stuff.
</ion-item-content>
</div>
<div class="item">
<ion-item-content>
<icon small name="ion-star"></icon>
<span>255</span>
</ion-item-content>
<ion-item-content>
<icon small name="ion-reply"></icon>
<span>Reply</span>
</ion-item-content>
<ion-item-content>
<icon small name="ion-forward"></icon>
Forward
</ion-item-content>
</div>
<ion-card-content>
This is a multiline content within a card that should
take up multiple lines and stuff.
</ion-card-content>
</ion-card>
<ion-card>
<div class="item">
<ion-item-content>
Card, no header
</ion-item-content>
</div>
<ion-card-content>
Card, no header
</ion-card-content>
</ion-card>

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

@ -6,24 +6,10 @@
<div class="item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item no-border-bottom">
<ion-item-content>
<h4 style="color:gray">Item with no-border-bottom</h4>
</ion-item-content>
</div>
<div class="item item-text-wrap">
<ion-item-content>
<p>This is content text and stuff.</p>
</ion-item-content>
</div>
<div class="item">
<ion-item-content>
<a href="#">Like</a>
</ion-item-content>
<ion-item-content class="align-right">
<a href="#">Share</a>
</ion-item-content>
</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>
@ -34,8 +20,8 @@
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-item-content>
<h2>Card With An Inset Picture</h2>
<p>Isn't it beautiful</p>
<h2>Card With An Inset Picture, H2 text</h2>
<p>Isn't it beautiful.</p>
</ion-item-content>
</div>
@ -45,21 +31,6 @@
</ion-item-content>
</div>
<div class="item">
<ion-item-content>
<icon small name="ion-star"></icon>
<span>255</span>
</ion-item-content>
<ion-item-content>
<icon small name="ion-reply"></icon>
<span>Reply</span>
</ion-item-content>
<ion-item-content>
<icon small name="ion-forward"></icon>
Forward
</ion-item-content>
</div>
</ion-card>
<style>