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

inset lists, card updates

Browse Source
This commit is contained in:
Adam Bradley
2015-08-12 15:44:27 -05:00
parent 8e053f18de
commit db0413b2dd
27 changed files with 275 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,22 +2,18 @@
// Card
// --------------------------------------------------
$card-inset-margin: $list-inset-margin !default;
.card.card {
margin: 10px;
margin: $card-inset-margin;
}
.card {
display: block;
img {
width: 100%;
}
}
.card-header,
.card-footer {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

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

@@ -2,7 +2,7 @@
// iOS Card
// --------------------------------------------------
$card-ios-background-color: #fff !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;
$card-ios-font-size: 1.4rem !default;
@@ -13,27 +13,35 @@ $card-ios-footer-background-color: $card-ios-background-color !default;
$card-ios-footer-padding: 10px;
.card[mode=ios] {
.card.list[mode=ios] {
background: $card-ios-background-color;
box-shadow: $card-ios-box-shadow;
border-radius: $card-ios-border-radius;
font-size: $card-ios-font-size;
.item::before,
.item::after {
left: 0;
.item {
&:last-child {
margin-bottom: -1px;
}
&:before,
&:after {
left: 0;
}
}
.item:first-child:before {
border: none;
}
.card-header {
ion-header {
padding: $card-ios-header-padding;
background-color: $card-ios-footer-background-color;
}
.card-footer {
ion-footer {
padding: $card-ios-footer-padding;
background-color: $card-ios-footer-background-color;
}

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

@@ -2,7 +2,7 @@
// Material Design Card
// --------------------------------------------------
$card-md-background-color: #fff !default;
$card-md-background-color: $list-background-color !default;
$card-md-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
$card-md-border-radius: 2px !default;
$card-md-font-size: 1.4rem !default;
@@ -13,27 +13,39 @@ $card-md-footer-background-color: $card-md-background-color !default;
$card-md-footer-padding: 10px;
.card[mode=md] {
.card.list[mode=md] {
background: $card-md-background-color;
box-shadow: $card-md-box-shadow;
border-radius: $card-md-border-radius;
font-size: $card-md-font-size;
.item::before,
.item::after {
left: 0;
.item {
&:last-child {
margin-bottom: -1px;
}
&:before,
&:after {
left: 0;
}
}
.item:first-child {
margin-top: 1px;
}
.item:first-child:before {
border: none;
}
.card-header {
ion-header {
padding: $card-md-header-padding;
background-color: $card-md-footer-background-color;
}
.card-footer {
ion-footer {
padding: $card-md-footer-padding;
background-color: $card-md-footer-background-color;
}

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

@@ -3,17 +3,21 @@
<ion-card>
<div class="card-header">
<ion-header>
Card Header
</div>
</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 or spend a week in the woods. Wash your spirit clean.
</div>
</div>
<div class="card-footer">
<ion-footer>
Card Footer
</div>
</ion-footer>
</ion-card>
@@ -49,8 +53,19 @@
</div>
</div>
<div class="card-footer">
<ion-footer>
Card Footer
</ion-footer>
</ion-card>
<ion-card>
<div class="item">
<div class="item-content">
Card, no header or footer
</div>
</div>
</ion-card>

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

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