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

rearrage use of radio classes

Browse Source
This commit is contained in:
Adam Bradley
2013-09-23 17:36:00 -05:00
parent f894d6befa
commit 4125f91daa
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scss/ionic/_radio.scss
View File

@ -3,21 +3,21 @@
// ------------------------------- // -------------------------------
/* hide a radio button's icon by default */ /* hide a radio button's icon by default */
.radio-content { .radio-item {
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
display: none; display: none;
} }
} }
.radio-item input { .radio-list input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */ /* hide any radio button inputs elements (the ugly circles) */
display: none; display: none;
/* when this radio-item is checked */ /* when this radio-item is checked */
&:checked + .radio-content { &:checked + .radio-item {
/* show the radio-content icon when checked */ /* show the radio-item icon when checked */
[class^="icon-"], [class^="icon-"],
[class*=" icon-"] { [class*=" icon-"] {
position: absolute; position: absolute;

22
test/input-radio.html
View File

@ -22,38 +22,38 @@
<div class="content has-header has-footer"> <div class="content has-header has-footer">
<div class="list"> <div class="list radio-list">
<label class="list-item radio-item"> <label class="list-item">
<input type="radio" name="serverside" value="go" checked="checked"> <input type="radio" name="serverside" value="go" checked="checked">
<div class="radio-content"> <div class="radio-item">
Go Go
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>
</label> </label>
<label class="list-item radio-item"> <label class="list-item">
<input type="radio" name="serverside" value="python"> <input type="radio" name="serverside" value="python">
<div class="radio-content"> <div class="radio-item">
Python Python
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>
</label> </label>
<label class="list-item radio-item"> <label class="list-item">
<input type="radio" name="serverside" value=".net"> <input type="radio" name="serverside" value=".net">
<div class="radio-content"> <div class="radio-item">
.Net .Net
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>
</label> </label>
<label class="list-item radio-item"> <label class="list-item">
<input type="radio" name="serverside" value="ruby"> <input type="radio" name="serverside" value="ruby">
<div class="radio-content"> <div class="radio-item">
Ruby Ruby
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>
</label> </label>
<label class="list-item radio-item"> <label class="list-item">
<input type="radio" name="serverside" value="java"> <input type="radio" name="serverside" value="java">
<div class="radio-content"> <div class="radio-item">
Java Java
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>