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

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 */
.radio-content {
.radio-item {
[class^="icon-"],
[class*=" icon-"] {
display: none;
}
}
.radio-item input {
.radio-list input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */
display: none;
/* 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-"] {
position: absolute;

22
test/input-radio.html
View File

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