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

closes #135

Browse Source
This commit is contained in:
Adam Bradley
2013-11-14 08:25:10 -06:00
parent b5d14ee43a
commit a76007442b
3 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/css/ionic.css vendored
View File

@ -4289,8 +4289,10 @@ input[type="checkbox"][readonly] {
background-color: white; } background-color: white; }
/* make sure list item content have enough padding on right to fit the toggle */ /* make sure list item content have enough padding on right to fit the toggle */
.item-toggle .item-content { .item-toggle {
padding-right: 99px; } padding-right: 99px; }
.item-toggle.active, .item-toggle:active {
box-shadow: none; }
/* position the toggle to the right within a list item */ /* position the toggle to the right within a list item */
.item-toggle .toggle { .item-toggle .toggle {

7
scss/_toggle.scss
View File

@ -68,8 +68,13 @@
} }
/* make sure list item content have enough padding on right to fit the toggle */ /* make sure list item content have enough padding on right to fit the toggle */
.item-toggle .item-content { .item-toggle {
padding-right: ($item-padding * 3) + $toggle-width; padding-right: ($item-padding * 3) + $toggle-width;
&.active,
&:active {
box-shadow: none;
}
} }
/* position the toggle to the right within a list item */ /* position the toggle to the right within a list item */

20
test/input-toggle.html
View File

@ -17,9 +17,7 @@
<ul class="list"> <ul class="list">
<li class="item item-toggle"> <li class="item item-toggle">
<div class="item-content">
HTML5 HTML5
</div>
<label class="toggle"> <label class="toggle">
<input type="checkbox" checked> <input type="checkbox" checked>
<div class="track"> <div class="track">
@ -28,9 +26,7 @@
</label> </label>
</li> </li>
<li class="item item-toggle"> <li class="item item-toggle">
<div class="item-content">
CSS3 CSS3
</div>
<label class="toggle"> <label class="toggle">
<input type="checkbox" checked> <input type="checkbox" checked>
<div class="track"> <div class="track">
@ -39,9 +35,7 @@
</label> </label>
</li> </li>
<li class="item item-toggle"> <li class="item item-toggle">
<div class="item-content">
Flashplayer Flashplayer
</div>
<label class="toggle"> <label class="toggle">
<input type="checkbox"> <input type="checkbox">
<div class="track"> <div class="track">
@ -50,9 +44,7 @@
</label> </label>
</li> </li>
<li class="item item-toggle"> <li class="item item-toggle">
<div class="item-content">
Java Applets Java Applets
</div>
<label class="toggle"> <label class="toggle">
<input type="checkbox"> <input type="checkbox">
<div class="track"> <div class="track">
@ -61,9 +53,7 @@
</label> </label>
</li> </li>
<li class="item item-toggle"> <li class="item item-toggle">
<div class="item-content">
JavaScript JavaScript
</div>
<label class="toggle"> <label class="toggle">
<input type="checkbox" checked> <input type="checkbox" checked>
<div class="track"> <div class="track">
@ -72,9 +62,17 @@
</label> </label>
</li> </li>
<li class="item item-toggle"> <li class="item item-toggle">
<div class="item-content">
Silverlight Silverlight
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div> </div>
</label>
</li>
<li class="item item-toggle item-icon-left">
<i class="icon ion-star"></i>
Silverlight
<label class="toggle"> <label class="toggle">
<input type="checkbox"> <input type="checkbox">
<div class="track"> <div class="track">