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

vertical align list icons

Browse Source
This commit is contained in:
Adam Bradley
2013-10-18 22:20:48 -05:00
parent bd8689feb8
commit 31ea84bbf1
5 changed files with 40 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1116,21 +1116,23 @@ a.list-item {
padding: 15px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.list-item-content i {
position: absolute;
top: 0;
display: flex;
height: 100%;
font-size: 28px;
align-items: center; }
.list-icon-left .list-item-content {
padding-left: 45px; }
.list-icon-left .list-item-content i {
position: absolute;
top: 10.5px;
left: 7.5px;
font-size: 28px; }
left: 7.5px; }
.list-icon-right .list-item-content {
padding-right: 45px; }
.list-icon-right .list-item-content i {
position: absolute;
top: 10.5px;
right: 7.5px;
font-size: 28px; }
right: 7.5px; }
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }

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

@ -1811,20 +1811,21 @@
margin-top: -1px;
padding: 15px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.ionic .list-item-content i {
position: absolute;
top: 0;
display: flex;
height: 100%;
font-size: 28px;
align-items: center; }
.ionic .list-icon-left .list-item-content {
padding-left: 45px; }
.ionic .list-icon-left .list-item-content i {
position: absolute;
top: 10.5px;
left: 7.5px;
font-size: 28px; }
left: 7.5px; }
.ionic .list-icon-right .list-item-content {
padding-right: 45px; }
.ionic .list-icon-right .list-item-content i {
position: absolute;
top: 10.5px;
right: 7.5px;
font-size: 28px; }
right: 7.5px; }
.ionic .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
.ionic .list-thumbnail h2 {

18
dist/css/ionic.css vendored
View File

@ -2225,21 +2225,23 @@ a.list-item {
padding: 15px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.list-item-content i {
position: absolute;
top: 0;
display: flex;
height: 100%;
font-size: 28px;
align-items: center; }
.list-icon-left .list-item-content {
padding-left: 45px; }
.list-icon-left .list-item-content i {
position: absolute;
top: 10.5px;
left: 7.5px;
font-size: 28px; }
left: 7.5px; }
.list-icon-right .list-item-content {
padding-right: 45px; }
.list-icon-right .list-item-content i {
position: absolute;
top: 10.5px;
right: 7.5px;
font-size: 28px; }
right: 7.5px; }
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }

15
scss/ionic/_listview.scss
View File

@ -129,14 +129,20 @@ a.list-item {
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
}
.list-item-content i {
position: absolute;
top: 0;
display: flex;
height: 100%;
font-size: $list-icon-font-size;
align-items: center;
}
.list-icon-left .list-item-content {
padding-left: ($list-item-padding * 3);
i {
position: absolute;
top: ($list-item-padding / 2) + 3;
left: $list-item-padding / 2;
font-size: $list-icon-font-size;
}
}
@ -144,10 +150,7 @@ a.list-item {
padding-right: ($list-item-padding * 3);
i {
position: absolute;
top: ($list-item-padding / 2) + 3;
right: $list-item-padding / 2;
font-size: $list-icon-font-size;
}
}

4
test/lists.html
View File

@ -43,10 +43,10 @@
<div class="list padding">
<a href="#" class="list-item">
<a href="#" class="list-item list-icon-right">
<div class="list-item-content slide-right">
Madison, WI
<i class="icon-chevron-right list-icon-right"></i>
<i class="icon-chevron-right"></i>
</div>
</a>