javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 07:41:51 +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; } background-color: white; }
.list-item:last-child { .list-item:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.list-item > .badge { .list-item .badge {
float: right; } float: right; }
.list-item > .badge + .badge { .list-item .badge + .badge {
margin-right: 5px; } margin-right: 5px; }
.list-item.active, .list-item.active:hover, .list-item.active:focus { .list-item.active, .list-item.active:hover, .list-item.active:focus {
z-index: 2; } z-index: 2; }

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

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

4
dist/css/ionic.css vendored
View File

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

12
scss/ionic/_listview.scss
View File

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

28
test/lists.html
View File

@ -40,7 +40,30 @@
<a href="#" class="list-item"> <a href="#" class="list-item">
<div class="list-item-content slide-left"> <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>
<div class="list-item-buttons"> <div class="list-item-buttons">
<button class="button">Button</button> <button class="button">Button</button>
@ -70,7 +93,8 @@
<a href="#" class="list-item list-icon-right"> <a href="#" class="list-item list-icon-right">
<div class="list-item-content"> <div class="list-item-content">
Settings Computers
<span class="badge">3</span>
<i class="icon-chevron-right"></i> <i class="icon-chevron-right"></i>
</div> </div>
</a> </a>