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

auto right arrow on lists

Browse Source
This commit is contained in:
Adam Bradley
2013-10-21 12:12:05 -05:00
parent 404fab4cc3
commit 349461675d
6 changed files with 139 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1119,7 +1119,8 @@ a.list-item {
border: 1px solid #dddddd;
z-index: 2;
margin-top: -1px;
padding: 15px;
padding: 15px 45px 15px 15px;
font-size: 16px;
-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 {
@ -1135,14 +1136,36 @@ a.list-item {
.list-icon-left .list-item-content i {
left: 7.5px; }
.list-icon-right .list-item-content {
padding-right: 45px; }
.list-icon-right .list-item-content i {
right: 7.5px; }
.list-icon-right .list-item-content i {
right: 7.5px; }
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
a .list-item-content:after,
button .list-item-content:after {
position: absolute;
top: 0;
right: 15px;
display: flex;
height: 100%;
color: #ccc;
content: "\e0fc";
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
font-family: 'ionicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
align-items: center; }
a.list-icon-right .list-item-content:after,
button.list-icon-right .list-item-content:after {
display: none; }
.list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;

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

@ -1818,7 +1818,8 @@
border: 1px solid #dddddd;
z-index: 2;
margin-top: -1px;
padding: 15px;
padding: 15px 45px 15px 15px;
font-size: 16px;
-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;
@ -1831,12 +1832,32 @@
padding-left: 45px; }
.ionic .list-icon-left .list-item-content i {
left: 7.5px; }
.ionic .list-icon-right .list-item-content {
padding-right: 45px; }
.ionic .list-icon-right .list-item-content i {
right: 7.5px; }
.ionic .list-icon-right .list-item-content i {
right: 7.5px; }
.ionic .list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
.ionic a .list-item-content:after,
.ionic button .list-item-content:after {
position: absolute;
top: 0;
right: 15px;
display: flex;
height: 100%;
color: #ccc;
content: "\e0fc";
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
font-family: 'ionicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
align-items: center; }
.ionic a.list-icon-right .list-item-content:after,
.ionic button.list-icon-right .list-item-content:after {
display: none; }
.ionic .list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;

33
dist/css/ionic.css vendored
View File

@ -2228,7 +2228,8 @@ a.list-item {
border: 1px solid #dddddd;
z-index: 2;
margin-top: -1px;
padding: 15px;
padding: 15px 45px 15px 15px;
font-size: 16px;
-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 {
@ -2244,14 +2245,36 @@ a.list-item {
.list-icon-left .list-item-content i {
left: 7.5px; }
.list-icon-right .list-item-content {
padding-right: 45px; }
.list-icon-right .list-item-content i {
right: 7.5px; }
.list-icon-right .list-item-content i {
right: 7.5px; }
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto; }
a .list-item-content:after,
button .list-item-content:after {
position: absolute;
top: 0;
right: 15px;
display: flex;
height: 100%;
color: #ccc;
content: "\e0fc";
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
font-family: 'ionicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
align-items: center; }
a.list-icon-right .list-item-content:after,
button.list-icon-right .list-item-content:after {
display: none; }
.list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;

41
scss/ionic/_listview.scss
View File

@ -110,7 +110,8 @@ a.list-item {
z-index: 2;
margin-top: $list-item-border-width * -1;
padding: $list-item-padding;
padding: $list-item-padding ($list-item-padding * 3) $list-item-padding $list-item-padding;
font-size: $list-font-size;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
}
@ -132,18 +133,44 @@ a.list-item {
}
}
.list-icon-right .list-item-content {
padding-right: ($list-item-padding * 3);
i {
right: $list-item-padding / 2;
}
.list-icon-right .list-item-content i {
right: $list-item-padding / 2;
}
.list-icon-left.list-icon-right .list-item-content i:last-child {
left: auto;
}
a .list-item-content:after,
button .list-item-content:after {
position: absolute;
top: 0;
right: $list-item-padding;
display: flex;
height: 100%;
color: #ccc;
content: "\e0fc"; // icon-chevron-right
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
font-family: 'ionicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
align-items: center;
}
// do not show the default right arrow when they want their own right side icon
a.list-icon-right,
button.list-icon-right {
.list-item-content:after {
display: none;
}
}
.list-thumbnail h2 {
overflow: hidden;
margin: 0 0 8px 0;

2
scss/ionic/_variables.scss
View File

@ -337,6 +337,8 @@ $tabs-dark-border-color: $button-dark-border;
// Lists
// -------------------------------
$list-font-size: 16px;
$list-header-bg: transparent;
$list-header-color: #222;
$list-header-padding: 5px 15px;

47
test/lists.html
View File

@ -22,15 +22,22 @@
List Header
</div>
<a href="#" class="list-item">
<div href="#" class="list-item">
<div class="list-item-content">
Madison, WI
Not a link so no default right arrow
</div>
</a>
</div>
<a href="#" class="list-item">
<div class="list-item-content slide-right">
Driving Directions
Auto Right side arrow cuz its a link
</div>
</a>
<a href="#" class="list-item list-icon-right">
<div class="list-item-content slide-right">
Custom Right Icon
<i class="icon-chevron-right"></i>
</div>
</a>
@ -74,28 +81,25 @@
<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="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-icon-right">
<a href="#" class="list-item">
<div class="list-item-content slide-left">
Driving Directions
<i class="icon-chevron-right"></i>
</div>
<div class="list-item-buttons">
<button class="button">Button</button>
</div>
</a>
<a href="#" class="list-item list-icon-right">
<a href="#" class="list-item">
<div class="list-item-content">
Computers
<span class="badge">3</span>
<i class="icon-chevron-right"></i>
</div>
</a>
@ -162,19 +166,17 @@
<div class="list padding">
<a href="#" class="list-item list-icon-left list-icon-right">
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-heart brand-danger fill-icon"></i>
Madison, WI
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-icon-left list-icon-right">
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-image brand-warning fill-icon"></i>
Driving Directions
<i class="icon-chevron-right"></i>
</div>
</a>
@ -202,52 +204,45 @@
<button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
</div>
<hr>
<div class="list">
<a href="#" class="list-item list-thumbnail list-icon-right">
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-thumbnail list-icon-right">
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
<h2>Siamese Dream</h2>
<p>Smashing Pumpkins</p>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-thumbnail list-icon-right">
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
<p>Nirvana</p>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-thumbnail list-icon-right">
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
<p>Bestie Boys</p>
<i class="icon-chevron-right"></i>
</div>
</a>
<a href="#" class="list-item list-thumbnail list-icon-right">
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>Dookie</h2>
<p>Green Day</p>
<i class="icon-chevron-right"></i>
</div>
</a>