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

fix(badge): fixed badge styles and added modes to differentiate border radius

Browse Source 
references #689
This commit is contained in:
Brandy Carney
2015-12-08 17:49:28 -05:00
parent 6eb2c7eaeb
commit 12f61c2fba
6 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components.ios.scss
View File

@ -7,6 +7,7 @@
@import @import
"components/app/modes/ios", "components/app/modes/ios",
"components/action-sheet/modes/ios", "components/action-sheet/modes/ios",
"components/badge/modes/ios",
"components/button/modes/ios", "components/button/modes/ios",
"components/card/modes/ios", "components/card/modes/ios",
"components/checkbox/modes/ios", "components/checkbox/modes/ios",

1
ionic/components.md.scss
View File

@ -7,6 +7,7 @@
@import @import
"components/app/modes/md", "components/app/modes/md",
"components/action-sheet/modes/md", "components/action-sheet/modes/md",
"components/badge/modes/md",
"components/button/modes/md", "components/button/modes/md",
"components/card/modes/md", "components/card/modes/md",
"components/checkbox/modes/md", "components/checkbox/modes/md",

2
ionic/components/badge/badge.scss
View File

@ -5,7 +5,6 @@
$badge-font-size: 1.3rem !default; $badge-font-size: 1.3rem !default;
$badge-font-weight: bold !default; $badge-font-weight: bold !default;
$badge-border-radius: 10px !default;
ion-badge { ion-badge {
@ -13,7 +12,6 @@ ion-badge {
padding: 3px 8px; padding: 3px 8px;
min-width: 10px; min-width: 10px;
border-radius: $badge-border-radius;
vertical-align: baseline; vertical-align: baseline;
text-align: center; text-align: center;

11
ionic/components/badge/modes/ios.scss Normal file
View File

@ -0,0 +1,11 @@
@import "../badge";
// iOS Badge
// --------------------------------------------------
$badge-ios-border-radius: 10px !default;
ion-badge {
border-radius: $badge-ios-border-radius;
}

11
ionic/components/badge/modes/md.scss Normal file
View File

@ -0,0 +1,11 @@
@import "../badge";
// Material Design Badge
// --------------------------------------------------
$badge-md-border-radius: 4px !default;
ion-badge {
border-radius: $badge-md-border-radius;
}

20
ionic/components/badge/test/basic/main.html
View File

@ -13,23 +13,23 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
Primary Badge Primary Badge
<ion-badge item-right class="badge-primary">99</ion-badge> <ion-badge item-right primary>99</ion-badge>
</ion-item> </ion-item>
<ion-item> <ion-item>
Secondary Badge Secondary Badge
<ion-badge item-right class="badge-secondary">99</ion-badge> <ion-badge item-right secondary>99</ion-badge>
</ion-item> </ion-item>
<ion-item> <ion-item>
Danger Badge Danger Badge
<ion-badge item-right class="badge-danger">99</ion-badge> <ion-badge item-right danger>99</ion-badge>
</ion-item> </ion-item>
<ion-item> <ion-item>
Light Badge Light Badge
<ion-badge item-right class="badge-light">99</ion-badge> <ion-badge item-right light>99</ion-badge>
</ion-item> </ion-item>
<ion-item> <ion-item>
Dark Badge Dark Badge
<ion-badge item-right class="badge-dark">99</ion-badge> <ion-badge item-right dark>99</ion-badge>
</ion-item> </ion-item>
</ion-list> </ion-list>
<ion-list> <ion-list>
@ -42,23 +42,23 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
Primary Badge Primary Badge
<ion-badge item-left class="badge-primary">99</ion-badge> <ion-badge item-left primary>99</ion-badge>
</ion-item> </ion-item>
<ion-item> <ion-item>
Secondary Badge Secondary Badge
<ion-badge item-left class="badge-secondary">99</ion-badge> <ion-badge item-left secondary>99</ion-badge>
</ion-item> </ion-item>
<ion-item> <ion-item>
Danger Badge Danger Badge
<ion-badge item-left class="badge-danger">99</ion-badge> <ion-badge item-left danger>99</ion-badge>
</ion-item> </ion-item>
<ion-item> <ion-item>
Light Badge Light Badge
<ion-badge item-left class="badge-light">99</ion-badge> <ion-badge item-left light>99</ion-badge>
</ion-item> </ion-item>
<ion-item> <ion-item>
Dark Badge Dark Badge
<ion-badge item-left class="badge-dark">99</ion-badge> <ion-badge item-left dark>99</ion-badge>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>