javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-26 16:21:55 +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

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

@ -5,11 +5,10 @@
.card { .card {
display: block; display: block;
}
img { .card img {
width: 100%; width: 100%;
}
} }
ion-card-header { ion-card-header {
@ -18,3 +17,7 @@ ion-card-header {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; 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-bottom: 16px !default;
$card-ios-margin-left: 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-background-color: $list-background-color !default;
$card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default; $card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
$card-ios-border-radius: 2px !default; $card-ios-border-radius: 2px !default;
@ -57,6 +62,11 @@ $card-ios-header-color: #333 !default;
color: $card-ios-header-color; 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 { .card-title {
padding: $card-ios-title-padding; padding: $card-ios-title-padding;
font-size: $card-ios-title-font-size; font-size: $card-ios-title-font-size;
@ -66,11 +76,13 @@ $card-ios-header-color: #333 !default;
h1 { h1 {
margin: 0 0 2px; margin: 0 0 2px;
font-size: 2.4rem; font-size: 2.4rem;
font-weight: normal;
} }
h2 { h2 {
margin: 2px 0 2px; margin: 2px 0 2px;
font-size: 1.6rem; font-size: 1.6rem;
font-weight: normal;
} }
h3, h3,
@ -79,6 +91,7 @@ $card-ios-header-color: #333 !default;
h6 { h6 {
margin: 2px 0 2px; margin: 2px 0 2px;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: normal;
} }
p { 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-bottom: 8px !default;
$card-md-margin-left: 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-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-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-border-radius: 2px !default;
$card-md-font-size: 1.4rem !default; $card-md-font-size: 1.4rem !default;
$card-md-line-height: 1.5 !default;
$card-md-text-color: #222 !default; $card-md-text-color: #222 !default;
$card-md-title-font-size: 2.4rem !default; $card-md-title-font-size: 2.4rem !default;
@ -63,6 +69,12 @@ $card-md-header-color: #222 !default;
color: $card-md-header-color; 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 { .card-title {
padding: $card-md-title-padding; padding: $card-md-title-padding;
font-size: $card-md-title-font-size; font-size: $card-md-title-font-size;

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

@ -9,19 +9,15 @@
</div> </div>
<div class="item item-text-wrap"> <ion-card-content>
<ion-item-content>
<h2 class="card-title"> <h2 class="card-title">
Card Title Goes Here Card Title Goes Here
</h2> </h2>
<p> <p>
Keep close to Nature's heart... and break clear away, Keep close to Nature's heart... and break clear away,
once in awhile, and climb a mountain. I am within a paragraph element. once in awhile, and climb a mountain. I am within a paragraph element.
</p> </p>
</ion-item-content> </ion-card-content>
</div>
<ion-item actions> <ion-item actions>
<button clear item-left> <button clear item-left>
@ -53,11 +49,9 @@
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item item-text-wrap"> <ion-card-content>
<ion-item-content> <p>Hello. I am a paragraph.</p>
Hello. I am a one liner, not a paragraph. </ion-card-content>
</ion-item-content>
</div>
</ion-card> </ion-card>

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

@ -8,11 +8,10 @@
Card Header Card Header
</ion-card-header> </ion-card-header>
<div class="item item-text-wrap"> <ion-card-content>
<ion-item-content> Keep close to Nature's heart... and break clear away, once in awhile,
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. and climb a mountain or spend a week in the woods. Wash your spirit clean.
</ion-item-content> </ion-card-content>
</div>
</ion-card> </ion-card>
@ -27,37 +26,18 @@
<button outline>View</button> <button outline>View</button>
</div> </div>
<div class="item item-text-wrap"> <ion-card-content>
<ion-item-content>
This is a multiline content within a card that should This is a multiline content within a card that should
take up multiple lines and stuff. take up multiple lines and stuff.
</ion-item-content> </ion-card-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> </ion-card>
<ion-card> <ion-card>
<div class="item"> <ion-card-content>
<ion-item-content>
Card, no header Card, no header
</ion-item-content> </ion-card-content>
</div>
</ion-card> </ion-card>

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

@ -6,24 +6,10 @@
<div class="item"> <div class="item">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item no-border-bottom"> <ion-card-content>
<ion-item-content> <h4>H4 text inside ion-card-content</h4>
<h4 style="color:gray">Item with no-border-bottom</h4> <p>Paragraph text inside ion-card-content.</p>
</ion-item-content> </ion-card-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> </ion-card>
@ -34,8 +20,8 @@
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<ion-item-content> <ion-item-content>
<h2>Card With An Inset Picture</h2> <h2>Card With An Inset Picture, H2 text</h2>
<p>Isn't it beautiful</p> <p>Isn't it beautiful.</p>
</ion-item-content> </ion-item-content>
</div> </div>
@ -45,21 +31,6 @@
</ion-item-content> </ion-item-content>
</div> </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> </ion-card>
<style> <style>