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" */
/* The track 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 {
from {
opacity: 0.7; }
@ -2193,7 +2195,9 @@
.ionic .toggle input:checked + .handle {
background-color: white;
-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;
top: 5px;
right: 15px;

7
dist/css/ionic.css vendored
View File

@ -2679,7 +2679,12 @@ input[type="checkbox"][readonly] {
background-color: white;
-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;
top: 5px;
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);
}
.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;
top: $list-item-padding / 3;
right: $list-item-padding;

17
test/input-toggle.html
View File

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