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

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

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

@ -1119,7 +1119,8 @@ a.list-item {
border: 1px solid #dddddd; border: 1px solid #dddddd;
z-index: 2; z-index: 2;
margin-top: -1px; 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; } -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 { .list-item-content i {
@ -1135,14 +1136,36 @@ a.list-item {
.list-icon-left .list-item-content i { .list-icon-left .list-item-content i {
left: 7.5px; } left: 7.5px; }
.list-icon-right .list-item-content {
padding-right: 45px; }
.list-icon-right .list-item-content i { .list-icon-right .list-item-content i {
right: 7.5px; } right: 7.5px; }
.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; }
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 { .list-thumbnail h2 {
overflow: hidden; overflow: hidden;
margin: 0 0 8px 0; margin: 0 0 8px 0;

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

@ -1818,7 +1818,8 @@
border: 1px solid #dddddd; border: 1px solid #dddddd;
z-index: 2; z-index: 2;
margin-top: -1px; 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; } -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 { .ionic .list-item-content i {
position: absolute; position: absolute;
@ -1831,12 +1832,32 @@
padding-left: 45px; } padding-left: 45px; }
.ionic .list-icon-left .list-item-content i { .ionic .list-icon-left .list-item-content i {
left: 7.5px; } left: 7.5px; }
.ionic .list-icon-right .list-item-content {
padding-right: 45px; }
.ionic .list-icon-right .list-item-content i { .ionic .list-icon-right .list-item-content i {
right: 7.5px; } right: 7.5px; }
.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 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 { .ionic .list-thumbnail h2 {
overflow: hidden; overflow: hidden;
margin: 0 0 8px 0; margin: 0 0 8px 0;

29
dist/css/ionic.css vendored
View File

@ -2228,7 +2228,8 @@ a.list-item {
border: 1px solid #dddddd; border: 1px solid #dddddd;
z-index: 2; z-index: 2;
margin-top: -1px; 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; } -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 { .list-item-content i {
@ -2244,14 +2245,36 @@ a.list-item {
.list-icon-left .list-item-content i { .list-icon-left .list-item-content i {
left: 7.5px; } left: 7.5px; }
.list-icon-right .list-item-content {
padding-right: 45px; }
.list-icon-right .list-item-content i { .list-icon-right .list-item-content i {
right: 7.5px; } right: 7.5px; }
.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; }
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 { .list-thumbnail h2 {
overflow: hidden; overflow: hidden;
margin: 0 0 8px 0; margin: 0 0 8px 0;

39
scss/ionic/_listview.scss
View File

@ -110,7 +110,8 @@ a.list-item {
z-index: 2; z-index: 2;
margin-top: $list-item-border-width * -1; 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; -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 { .list-icon-right .list-item-content i {
padding-right: ($list-item-padding * 3);
i {
right: $list-item-padding / 2; right: $list-item-padding / 2;
} }
}
.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;
} }
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 { .list-thumbnail h2 {
overflow: hidden; overflow: hidden;
margin: 0 0 8px 0; margin: 0 0 8px 0;

2
scss/ionic/_variables.scss
View File

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

47
test/lists.html
View File

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