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

move radio to its own file

Browse Source
This commit is contained in:
Adam Bradley
2013-09-23 15:36:01 -05:00
parent bd55aecbae
commit f894d6befa
4 changed files with 45 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
scss/ionic.scss
View File

@ -18,6 +18,11 @@
"ionic/menu", "ionic/menu",
"ionic/listview", "ionic/listview",
// Forms
"ionic/form",
"ionic/toggle",
"ionic/radio",
// Buttons // Buttons
"ionic/button", "ionic/button",
"ionic/button-group", "ionic/button-group",
@ -28,8 +33,6 @@
// Components // Components
"ionic/alerts", "ionic/alerts",
"ionic/card", "ionic/card",
"ionic/form",
"ionic/toggle",
// Animations // Animations
"ionic/animations"; "ionic/animations";

25
scss/ionic/_form.scss
View File

@ -236,31 +236,6 @@ textarea {
} }
// Radio Buttons
// -------------------------------
/* hide a radio button's icon by default */
.radio-item {
[class^="icon-"],
[class*=" icon-"] {
display: none;
}
}
.input-wrapper input[type="radio"] {
/* hide any radio button inputs (the ugly circles) */
display: none;
/* when this radio-item is checked */
&:checked + .radio-item {
[class^="icon-"],
[class*=" icon-"] {
display: inline;
}
}
}
// DISABLED STATE // DISABLED STATE
// ------------------------------- // -------------------------------

29
scss/ionic/_radio.scss Normal file
View File

@ -0,0 +1,29 @@
// Radio Buttons
// -------------------------------
/* hide a radio button's icon by default */
.radio-content {
[class^="icon-"],
[class*=" icon-"] {
display: none;
}
}
.radio-item input {
/* hide any radio button inputs elements (the ugly circles) */
display: none;
/* when this radio-item is checked */
&:checked + .radio-content {
/* show the radio-content icon when checked */
[class^="icon-"],
[class*=" icon-"] {
position: absolute;
top: 16px;
right: $content-padding;
display: inline;
}
}
}

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="input-group"> <div class="list">
<label class="input-wrapper"> <label class="list-item radio-item">
<input type="radio" name="serverside" value="go" checked="checked"> <input type="radio" name="serverside" value="go" checked="checked">
<div class="radio-item"> <div class="radio-content">
Go Go
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>
</label> </label>
<label class="input-wrapper"> <label class="list-item radio-item">
<input type="radio" name="serverside" value="python"> <input type="radio" name="serverside" value="python">
<div class="radio-item"> <div class="radio-content">
Python Python
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>
</label> </label>
<label class="input-wrapper"> <label class="list-item radio-item">
<input type="radio" name="serverside" value=".net"> <input type="radio" name="serverside" value=".net">
<div class="radio-item"> <div class="radio-content">
.Net .Net
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>
</label> </label>
<label class="input-wrapper"> <label class="list-item radio-item">
<input type="radio" name="serverside" value="ruby"> <input type="radio" name="serverside" value="ruby">
<div class="radio-item"> <div class="radio-content">
Ruby Ruby
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>
</label> </label>
<label class="input-wrapper"> <label class="list-item radio-item">
<input type="radio" name="serverside" value="java"> <input type="radio" name="serverside" value="java">
<div class="radio-item"> <div class="radio-content">
Java Java
<i class="icon-ok"></i> <i class="icon-ok"></i>
</div> </div>