javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

list badges

Browse Source
This commit is contained in:
Adam Bradley
2013-10-21 10:36:10 -05:00
parent 57cfcf432e
commit 404fab4cc3
5 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/css/ionic-ios7.css vendored
View File

@ -978,9 +978,9 @@ address {
background-color: white; }
.list-item:last-child {
margin-bottom: 0; }
.list-item > .badge {
.list-item .badge {
float: right; }
.list-item > .badge + .badge {
.list-item .badge + .badge {
margin-right: 5px; }
.list-item.active, .list-item.active:hover, .list-item.active:focus {
z-index: 2; }

4
dist/css/ionic-scoped.css vendored
View File

@ -1689,9 +1689,9 @@
background-color: white; }
.ionic .list-item:last-child {
margin-bottom: 0; }
.ionic .list-item > .badge {
.ionic .list-item .badge {
float: right; }
.ionic .list-item > .badge + .badge {
.ionic .list-item .badge + .badge {
margin-right: 5px; }
.ionic .list-item.active, .ionic .list-item.active:hover, .ionic .list-item.active:focus {
z-index: 2; }

4
dist/css/ionic.css vendored
View File

@ -2087,9 +2087,9 @@ address {
background-color: white; }
.list-item:last-child {
margin-bottom: 0; }
.list-item > .badge {
.list-item .badge {
float: right; }
.list-item > .badge + .badge {
.list-item .badge + .badge {
margin-right: 5px; }
.list-item.active, .list-item.active:hover, .list-item.active:focus {
z-index: 2; }

12
scss/ionic/_listview.scss
View File

@ -37,32 +37,24 @@
}
// Align badges within list items
> .badge {
.badge {
float: right;
}
> .badge + .badge {
.badge + .badge {
margin-right: 5px;
}
// [converter] extracted a& to a.list-item
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2;
//color: $list-group-active-color;
//background-color: $list-group-active-bg;
//border-color: $list-group-active-border;
// Force color to inherit for custom content
.list-item-heading {
color: inherit;
}
.list-item-text {
//color: lighten($list-group-active-bg, 40%);
}
}
// Different themes for list items

28
test/lists.html
View File

@ -40,7 +40,30 @@
<a href="#" class="list-item">
<div class="list-item-content slide-left">
Settings
Computers
<span class="badge">3</span>
</div>
<div class="list-item-buttons">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="list-item">
<div class="list-item-content slide-left">
Monitors
<span class="badge">6</span>
</div>
<div class="list-item-buttons">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="list-item">
<div class="list-item-content slide-left">
Multiple Badges
<span class="badge">62</span>
<span class="badge">4</span>
<span class="badge">143</span>
</div>
<div class="list-item-buttons">
<button class="button">Button</button>
@ -70,7 +93,8 @@
<a href="#" class="list-item list-icon-right">
<div class="list-item-content">
Settings
Computers
<span class="badge">3</span>
<i class="icon-chevron-right"></i>
</div>
</a>