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

improve list icon alignments

Browse Source
This commit is contained in:
Adam Bradley
2013-10-18 15:23:12 -05:00
parent 41147a4f98
commit 3ee2e4d6bf
6 changed files with 159 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
test/lists.html
View File

@@ -43,17 +43,17 @@
<div class="list padding">
<a href="#" class="list-item list-icon-right">
<a href="#" class="list-item">
<div class="list-item-content slide-right">
Madison, WI
<i class="align-icon-right icon-chevron-right"></i>
<i class="icon-chevron-right list-icon-right"></i>
</div>
</a>
<a href="#" class="list-item list-icon-right">
<div class="list-item-content slide-left">
Driving Directions
<i class="align-icon-right icon-chevron-right"></i>
<i class="icon-chevron-right"></i>
</div>
<div class="list-item-buttons">
<button class="button">Button</button>
@@ -63,7 +63,7 @@
<a href="#" class="list-item list-icon-right">
<div class="list-item-content">
Settings
<i class="align-icon-right icon-chevron-right"></i>
<i class="icon-chevron-right"></i>
</div>
</a>
@@ -73,7 +73,7 @@
<a href="#" class="list-item list-icon-left">
<div class="list-item-content slide-left">
<i class="align-icon-left icon-heart brand-danger"></i>
<i class="icon-heart brand-danger"></i>
Madison, WI asdf
</div>
<div class="list-item-buttons">
@@ -83,14 +83,14 @@
<a href="#" class="list-item list-icon-left">
<div class="list-item-content slide-right">
<i class="align-icon-left icon-image brand-warning"></i>
<i class="icon-image brand-warning"></i>
Driving Directions
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="align-icon-left icon-ios7-cog gray"></i>
<i class="icon-ios7-cog gray"></i>
Settings
</div>
</a>
@@ -101,17 +101,17 @@
<a href="#" class="list-item list-icon-left list-icon-right">
<div class="list-item-content">
<i class="align-icon-left icon-heart brand-danger fill-icon"></i>
<i class="icon-heart brand-danger fill-icon"></i>
Madison, WI
<i class="align-icon-right icon-chevron-right"></i>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-icon-left list-icon-right">
<div class="list-item-content slide-left">
<i class="align-icon-left icon-image brand-warning fill-icon"></i>
<i class="icon-image brand-warning fill-icon"></i>
Driving Directions
<i class="align-icon-right icon-chevron-right"></i>
<i class="icon-chevron-right"></i>
</div>
<div class="list-item-buttons">
<button class="button">Button</button>
@@ -120,9 +120,9 @@
<a href="#" class="list-item list-icon-left list-icon-right">
<div class="list-item-content slide-right">
<i class="align-icon-left icon-ios7-cog gray fill-icon"></i>
<i class="icon-ios7-cog gray fill-icon"></i>
Settings
<i class="align-icon-right icon-chevron-right"></i>
<i class="icon-chevron-right"></i>
</div>
</a>
@@ -132,25 +132,27 @@
<a href="#" class="list-item list-icon-left list-icon-right">
<div class="list-item-content">
<i class="align-icon-left icon-heart brand-danger fill-icon"></i>
<i class="icon-heart brand-danger fill-icon"></i>
Madison, WI
<i class="align-icon-right icon-chevron-right"></i>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-icon-left list-icon-right">
<div class="list-item-content">
<i class="align-icon-left icon-image brand-warning fill-icon"></i>
<i class="icon-image brand-warning fill-icon"></i>
Driving Directions
<i class="align-icon-right icon-chevron-right"></i>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-icon-left list-icon-right">
<div class="list-item-content slide-left slide-right">
<i class="align-icon-left icon-ios7-cog gray fill-icon"></i>
Settings
<i class="align-icon-right icon-chevron-right"></i>
<i class="icon-ios7-cog gray fill-icon"></i>
This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon-chevron-right"></i>
</div>
<div class="list-item-buttons">
<button class="button">Button</button>