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

.toggle-item for list items

Browse Source
This commit is contained in:
Adam Bradley
2013-10-17 14:05:47 -05:00
parent 04a14ba269
commit 63dfbbd9ef
4 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -185,6 +185,8 @@
/* also the appearance when the handle is "off" */ /* also the appearance when the handle is "off" */
/* The track when the toggle is "on" */ /* The track when the toggle is "on" */
/* the handle when the toggle is "on" */ /* the handle when the toggle is "on" */
/* make sure list item content have enough padding on right to fit the toggle */
/* position the toggle to the right within a list item */
@keyframes fadein { @keyframes fadein {
from { from {
opacity: 0.7; } opacity: 0.7; }
@ -2193,7 +2195,9 @@
.ionic .toggle input:checked + .handle { .ionic .toggle input:checked + .handle {
background-color: white; background-color: white;
-webkit-transform: translate3d(22px, 0, 0); } -webkit-transform: translate3d(22px, 0, 0); }
.ionic .list-item-buttons.toggle { .ionic .toggle-item .list-item-content {
padding-right: 99px; }
.ionic .toggle-item .toggle {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 15px; right: 15px;

7
dist/css/ionic.css vendored
View File

@ -2679,7 +2679,12 @@ input[type="checkbox"][readonly] {
background-color: white; background-color: white;
-webkit-transform: translate3d(22px, 0, 0); } -webkit-transform: translate3d(22px, 0, 0); }
.list-item-buttons.toggle { /* make sure list item content have enough padding on right to fit the toggle */
.toggle-item .list-item-content {
padding-right: 99px; }
/* position the toggle to the right within a list item */
.toggle-item .toggle {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 15px; right: 15px;

8
scss/ionic/_toggle.scss
View File

@ -71,7 +71,13 @@
-webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0); -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
} }
.list-item-buttons.toggle { /* make sure list item content have enough padding on right to fit the toggle */
.toggle-item .list-item-content {
padding-right: ($list-item-padding * 3) + $toggle-width;
}
/* position the toggle to the right within a list item */
.toggle-item .toggle {
position: absolute; position: absolute;
top: $list-item-padding / 3; top: $list-item-padding / 3;
right: $list-item-padding; right: $list-item-padding;

17
test/input-toggle.html
View File

@ -18,45 +18,44 @@
<main class="content has-header"> <main class="content has-header">
<ul> <ul>
<li class="list-item"> <li class="list-item toggle-item">
<div class="list-item-content"> <div class="list-item-content">
Flux Capacitor Flux Capacitor
</div> </div>
<label class="list-item-buttons toggle"> <label class="toggle">
<input type="checkbox" checked> <input type="checkbox" checked>
<div class="handle"></div> <div class="handle"></div>
</label> </label>
</li> </li>
<li class="list-item"> <li class="list-item toggle-item">
<div class="list-item-content"> <div class="list-item-content">
1.21 Gigawatts 1.21 Gigawatts
</div> </div>
<label class="list-item-buttons toggle"> <label class="toggle">
<input type="checkbox" checked> <input type="checkbox" checked>
<div class="handle"></div> <div class="handle"></div>
</label> </label>
</li> </li>
<li class="list-item"> <li class="list-item toggle-item">
<div class="list-item-content"> <div class="list-item-content">
88 MPH 88 MPH
</div> </div>
<label class="list-item-buttons toggle"> <label class="toggle">
<input type="checkbox" checked> <input type="checkbox" checked>
<div class="handle"></div> <div class="handle"></div>
</label> </label>
</li> </li>
<li class="list-item"> <li class="list-item toggle-item">
<div class="list-item-content"> <div class="list-item-content">
Plutonium Resupply Plutonium Resupply
</div> </div>
<label class="list-item-buttons toggle"> <label class="toggle">
<input type="checkbox"> <input type="checkbox">
<div class="handle"></div> <div class="handle"></div>
</label> </label>
</li> </li>
</ul> </ul>
</main> </main>
</div> </div>