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; padding: 15px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } -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 { .list-icon-left .list-item-content {
padding-left: 45px; } padding-left: 45px; }
.list-icon-left .list-item-content i { .list-icon-left .list-item-content i {
position: absolute; left: 7.5px; }
top: 10.5px;
left: 7.5px;
font-size: 28px; }
.list-icon-right .list-item-content { .list-icon-right .list-item-content {
padding-right: 45px; } padding-right: 45px; }
.list-icon-right .list-item-content i { .list-icon-right .list-item-content i {
position: absolute; right: 7.5px; }
top: 10.5px;
right: 7.5px;
font-size: 28px; }
.list-icon-left.list-icon-right .list-item-content i:last-child { .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; } left: auto; }

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

@ -1811,20 +1811,21 @@
margin-top: -1px; margin-top: -1px;
padding: 15px; padding: 15px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } -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 { .ionic .list-icon-left .list-item-content {
padding-left: 45px; } padding-left: 45px; }
.ionic .list-icon-left .list-item-content i { .ionic .list-icon-left .list-item-content i {
position: absolute; left: 7.5px; }
top: 10.5px;
left: 7.5px;
font-size: 28px; }
.ionic .list-icon-right .list-item-content { .ionic .list-icon-right .list-item-content {
padding-right: 45px; } padding-right: 45px; }
.ionic .list-icon-right .list-item-content i { .ionic .list-icon-right .list-item-content i {
position: absolute; right: 7.5px; }
top: 10.5px;
right: 7.5px;
font-size: 28px; }
.ionic .list-icon-left.list-icon-right .list-item-content i:last-child { .ionic .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; } left: auto; }
.ionic .list-thumbnail h2 { .ionic .list-thumbnail h2 {

18
dist/css/ionic.css vendored
View File

@ -2225,21 +2225,23 @@ a.list-item {
padding: 15px; padding: 15px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } -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 { .list-icon-left .list-item-content {
padding-left: 45px; } padding-left: 45px; }
.list-icon-left .list-item-content i { .list-icon-left .list-item-content i {
position: absolute; left: 7.5px; }
top: 10.5px;
left: 7.5px;
font-size: 28px; }
.list-icon-right .list-item-content { .list-icon-right .list-item-content {
padding-right: 45px; } padding-right: 45px; }
.list-icon-right .list-item-content i { .list-icon-right .list-item-content i {
position: absolute; right: 7.5px; }
top: 10.5px;
right: 7.5px;
font-size: 28px; }
.list-icon-left.list-icon-right .list-item-content i:last-child { .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; } 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; -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 { .list-icon-left .list-item-content {
padding-left: ($list-item-padding * 3); padding-left: ($list-item-padding * 3);
i { i {
position: absolute;
top: ($list-item-padding / 2) + 3;
left: $list-item-padding / 2; left: $list-item-padding / 2;
font-size: $list-icon-font-size;
} }
} }
@ -144,10 +150,7 @@ a.list-item {
padding-right: ($list-item-padding * 3); padding-right: ($list-item-padding * 3);
i { i {
position: absolute;
top: ($list-item-padding / 2) + 3;
right: $list-item-padding / 2; 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"> <div class="list padding">
<a href="#" class="list-item"> <a href="#" class="list-item list-icon-right">
<div class="list-item-content slide-right"> <div class="list-item-content slide-right">
Madison, WI Madison, WI
<i class="icon-chevron-right list-icon-right"></i> <i class="icon-chevron-right"></i>
</div> </div>
</a> </a>