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

ion-card-header

Browse Source
This commit is contained in:
Adam Bradley
2015-08-24 17:22:04 -05:00
parent 2ac11fb716
commit d53f540d1f
11 changed files with 48 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/app/test/material/index.ts
View File

@ -31,9 +31,9 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
<div class="padding"> <div class="padding">
<ion-card> <ion-card>
<ion-header> <ion-card-header>
New Post New Post
</ion-header> </ion-card-header>
<div class="card-content"> <div class="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. 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.
</div> </div>

4
ionic/components/app/test/sink/pages/card.ts
View File

@ -20,9 +20,9 @@ import {SinkPage} from '../sink-page';
<ion-card> <ion-card>
<ion-header> <ion-card-header>
Card Header Card Header
</ion-header> </ion-card-header>
<div class="item"> <div class="item">
<div class="item-media"> <div class="item-media">

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

@ -11,3 +11,10 @@
} }
} }
ion-card-header {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

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

@ -18,7 +18,9 @@ $card-ios-title-padding: 8px 0 8px 0;
$card-ios-title-text-color: #222 !default; $card-ios-title-text-color: #222 !default;
$card-ios-header-font-size: 1.6rem !default; $card-ios-header-font-size: 1.6rem !default;
$card-ios-header-font-weight: 500 !default;
$card-ios-header-padding: 16px !default; $card-ios-header-padding: 16px !default;
$card-ios-header-color: #333 !default;
.card.list[mode=ios] { .card.list[mode=ios] {
@ -48,11 +50,11 @@ $card-ios-header-padding: 16px !default;
left: 0; left: 0;
} }
ion-header { ion-card-header {
font-size: $card-ios-header-font-size;
text-transform: none;
letter-spacing: normal;
padding: $card-ios-header-padding; padding: $card-ios-header-padding;
font-size: $card-ios-header-font-size;
font-weight: $card-ios-header-font-weight;
color: $card-ios-header-color;
} }
.card-title { .card-title {

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

@ -18,6 +18,8 @@ $card-md-title-padding: 8px 0 8px 0;
$card-md-title-text-color: #222 !default; $card-md-title-text-color: #222 !default;
$card-md-header-font-size: 1.6rem !default; $card-md-header-font-size: 1.6rem !default;
$card-md-header-padding: 16px !default;
$card-md-header-color: #222 !default;
.card.list[mode=md] { .card.list[mode=md] {
@ -55,9 +57,10 @@ $card-md-header-font-size: 1.6rem !default;
margin-left: 0; margin-left: 0;
} }
ion-header { ion-card-header {
padding: $card-md-header-padding;
font-size: $card-md-header-font-size; font-size: $card-md-header-font-size;
color: $card-md-text-color; color: $card-md-header-color;
} }
.card-title { .card-title {

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

@ -4,9 +4,9 @@
<ion-card> <ion-card>
<ion-header> <ion-card-header>
Card Header Card Header
</ion-header> </ion-card-header>
<div class="item item-text-wrap"> <div class="item item-text-wrap">
<ion-item-content> <ion-item-content>

4
ionic/components/card/test/links/main.html
View File

@ -41,9 +41,9 @@
<ion-card> <ion-card>
<ion-header> <ion-card-header>
Card Header Card Header
</ion-header> </ion-card-header>
<a class="item" href="#"> <a class="item" href="#">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>

20
ionic/components/item/test/buttons/main.html
View File

@ -3,44 +3,44 @@
<ion-list> <ion-list>
<a ion-item href="#"> <a ion-item href="#">
a.item a[ion-item]
<icon forward item-right></icon> <icon forward item-right></icon>
</a> </a>
<a ion-item class="activated" href="#"> <a ion-item class="activated" href="#">
a.item.activated a[ion-item].activated
<icon forward item-right></icon> <icon forward item-right></icon>
</a> </a>
<button ion-item> <button ion-item>
button.item button[ion-item]
<icon forward item-right></icon> <icon forward item-right></icon>
</button> </button>
<button ion-item class="activated"> <button ion-item class="activated">
button.item.activated button[ion-item].activated
<icon forward item-right></icon> <icon forward item-right></icon>
</button> </button>
<ion-item> <ion-item>
<button item-left>Edit</button> <button item-left>Edit</button>
div.item left button ion-item left button
</ion-item> </ion-item>
<ion-item> <ion-item>
div.item right button[outline][secondary] ion-item right button[outline][secondary]
<button secondary outline item-right>Open</button> <button secondary outline item-right>Open</button>
</ion-item> </ion-item>
<ion-item> <ion-item>
div.item icon only button ion-item icon only button
<button item-right> <button item-right>
<icon name="ion-help-circled"></icon> <icon name="ion-help-circled"></icon>
</button> </button>
</ion-item> </ion-item>
<ion-item> <ion-item>
div.item right icon/text button ion-item right icon/text button
<button item-right> <button item-right>
<icon name="ion-refresh"></icon> <icon name="ion-refresh"></icon>
Refresh Refresh
@ -52,11 +52,11 @@
<icon name="ion-wrench"></icon> <icon name="ion-wrench"></icon>
Fix Fix
</button> </button>
div.item left clear button ion-item left clear button
</ion-item> </ion-item>
<ion-item> <ion-item>
div.item right clear button ion-item right clear button
<button secondary clear item-right> <button secondary clear item-right>
Edit Edit
</button> </button>

20
ionic/components/item/test/icons/main.html
View File

@ -3,48 +3,48 @@
<ion-list> <ion-list>
<ion-item> <ion-item>
Div with forward icon ion-item forward icon
<icon forward item-right></icon> <icon forward item-right></icon>
</ion-item> </ion-item>
<a ion-item href="#"> <a ion-item href="#">
Link with forward icon a[ion-item] with forward icon
<icon forward item-right></icon> <icon forward item-right></icon>
</a> </a>
<button ion-item> <button ion-item>
Button with forward icon button[ion-item] with forward icon
<icon forward item-right></icon> <icon forward item-right></icon>
</button> </button>
<a ion-item href="#"> <a ion-item href="#">
Link with right side default icon a[ion-item] with right side default icon
<icon name="ion-ios-information-outline" item-right></icon> <icon name="ion-ios-information-outline" item-right></icon>
</a> </a>
<a ion-item href="#"> <a ion-item href="#">
Link with right side large icon a[ion-item] with right side large icon
<icon large name="ion-ios-information-outline" item-right></icon> <icon large name="ion-ios-information-outline" item-right></icon>
</a> </a>
<a ion-item href="#"> <a ion-item href="#">
Link with right side small icon a[ion-item] with right side small icon
<icon small name="ion-ios-information-outline" item-right></icon> <icon small name="ion-ios-information-outline" item-right></icon>
</a> </a>
<button ion-item> <button ion-item>
<icon name="ion-star" item-left></icon> <icon name="ion-star" item-left></icon>
Button with left side icon button[ion-item] with left side icon
</button> </button>
<button ion-item> <button ion-item>
<icon name="ion-flag" item-left></icon> <icon name="ion-flag" item-left></icon>
Button with both side icons button[ion-item] with both side icons
<icon name="ion-ios-checkmark" item-right></icon> <icon name="ion-ios-checkmark" item-right></icon>
</button> </button>
<a ion-item href="#"> <a ion-item href="#">
Link with two right side icons a[ion-item] with two right side icons
<icon name="ion-checkmark-circled" item-right></icon> <icon name="ion-checkmark-circled" item-right></icon>
<icon name="ion-shuffle" item-right></icon> <icon name="ion-shuffle" item-right></icon>
</a> </a>
@ -52,7 +52,7 @@
<button ion-item> <button ion-item>
<icon name="ion-clipboard" item-left></icon> <icon name="ion-clipboard" item-left></icon>
<icon name="ion-minus-circled" item-left></icon> <icon name="ion-minus-circled" item-left></icon>
Button with two left side icons button[ion-item] with two left side icons
</button> </button>
<button ion-item> <button ion-item>

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

@ -37,7 +37,7 @@ $list-ios-header-color: #333 !default;
margin-top: $list-ios-margin-top; margin-top: $list-ios-margin-top;
} }
.list[mode=ios] + .list:not(.card) ion-header { .list[mode=ios] + .list ion-header {
margin-top: -$list-ios-margin-top; margin-top: -$list-ios-margin-top;
padding-top: 0; padding-top: 0;
} }

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

@ -32,7 +32,7 @@ $list-md-header-color: #858585 !default;
margin-top: $list-md-margin-top; margin-top: $list-md-margin-top;
} }
.list[mode=md] + .list:not(.card) ion-header { .list[mode=md] + .list ion-header {
margin-top: -$list-md-margin-top; margin-top: -$list-md-margin-top;
padding-top: 0; padding-top: 0;
} }