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

refactor(card): styled buttons in actions and added card for testing, fixed border radius

Browse Source 
Closes #346, references #279
This commit is contained in:
Brandy Carney
2015-10-28 11:45:14 -04:00
parent d390290a7c
commit b22780e786
3 changed files with 66 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,6 +44,7 @@ ion-card {
padding-right: ($card-ios-padding-right / 2);
padding-left: ($card-ios-padding-left / 2);
font-size: $item-ios-font-size;
border-radius: inherit;
}
ion-item-content {
@ -68,6 +69,20 @@ ion-card {
padding-top: 0;
}
[actions] {
ion-item-content {
padding: 0;
}
button,
[button] {
margin: $item-ios-padding-icon-top ($item-ios-padding-right / 2) $item-ios-padding-icon-bottom ($item-ios-padding-left / 2);
padding: 2px 6px;
min-height: 26px;
font-size: 1.3rem;
}
}
[item-left],
[item-right] {
margin: $card-ios-padding-media-top ($card-ios-padding-right / 2) $card-ios-padding-media-bottom ($card-ios-padding-left / 2);

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

@ -70,6 +70,16 @@ ion-card {
padding-top: 0;
}
[actions] {
button,
[button] {
margin: 0 ($card-md-padding-right / 4) 0 ($card-md-padding-left / 4);
min-height: 26px;
font-size: 1.3rem;
border-color: transparent;
}
}
[item-left],
[item-right] {
margin: $card-md-padding-media-top ($card-md-padding-right / 2) $card-md-padding-media-bottom ($card-md-padding-left / 2);

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

@ -51,6 +51,47 @@
<p>Hello. I am a paragraph.</p>
</ion-card-content>
<ion-item actions>
<button clear item-left>
<icon star></icon>
Favorite
</button>
<button clear item>
<icon musical-notes></icon>
Listen
</button>
<button clear item-right>
<icon share-alt></icon>
Share
</button>
</ion-item>
</ion-card>
<ion-card>
<div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-card-content>
This card was breaking the border radius.
</ion-card-content>
<ion-item actions>
<button clear item-left danger>
<icon star></icon>
Favorite
</button>
<button clear item danger>
<icon musical-notes></icon>
Listen
</button>
<button clear item-right danger>
<icon share-alt></icon>
Share
</button>
</ion-item>
</ion-card>
</ion-content>