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

radio button updates

Browse Source
This commit is contained in:
Adam Bradley
2013-10-16 20:35:30 -05:00
parent d41b33249c
commit 73d25eb39a
5 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
dist/css/ionic-ios7.css vendored
View File

@ -1523,17 +1523,22 @@ input[type="checkbox"][readonly] {
-webkit-transform: none;
transition-delay: 0.05s, 0s; }
.radio-buttton-list .list-item-buttons {
visibility: hidden; }
.radio-buttton-list [class^="icon-"],
.radio-buttton-list [class*=" icon-"] {
position: absolute;
top: 25%;
left: 25%;
visibility: hidden;
font-size: 24px; }
.radio-buttton-list input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */
display: none; }
.radio-buttton-list input[type="radio"]:checked + [class^="icon-"], .radio-buttton-list input[type="radio"]:checked + [class*=" icon-"] {
.radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
/* style the list item when its checked */
background: #f7f7f7; }
.radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons {
/* show the icon when its checked */
visibility: visible; }
.radio-buttton-list .list-item-content {
padding-right: 60px; }

9
dist/css/ionic-scoped.css vendored
View File

@ -2181,17 +2181,22 @@
.ionic .toggle :checked + .track .handle {
background-color: white;
-webkit-transform: translate3d(22px, 0, 0); }
.ionic .radio-buttton-list .list-item-buttons {
visibility: hidden; }
.ionic .radio-buttton-list [class^="icon-"],
.ionic .radio-buttton-list [class*=" icon-"] {
position: absolute;
top: 25%;
left: 25%;
visibility: hidden;
font-size: 24px; }
.ionic .radio-buttton-list input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */
display: none; }
.ionic .radio-buttton-list input[type="radio"]:checked + [class^="icon-"], .ionic .radio-buttton-list input[type="radio"]:checked + [class*=" icon-"] {
.ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
/* style the list item when its checked */
background: #f7f7f7; }
.ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons {
/* show the icon when its checked */
visibility: visible; }
.ionic .radio-buttton-list .list-item-content {
padding-right: 60px; }

9
dist/css/ionic.css vendored
View File

@ -2663,17 +2663,22 @@ input[type="checkbox"][readonly] {
background-color: white;
-webkit-transform: translate3d(22px, 0, 0); }
.radio-buttton-list .list-item-buttons {
visibility: hidden; }
.radio-buttton-list [class^="icon-"],
.radio-buttton-list [class*=" icon-"] {
position: absolute;
top: 25%;
left: 25%;
visibility: hidden;
font-size: 24px; }
.radio-buttton-list input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */
display: none; }
.radio-buttton-list input[type="radio"]:checked + [class^="icon-"], .radio-buttton-list input[type="radio"]:checked + [class*=" icon-"] {
.radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
/* style the list item when its checked */
background: #f7f7f7; }
.radio-buttton-list input[type="radio"]:checked ~ .list-item-buttons {
/* show the icon when its checked */
visibility: visible; }
.radio-buttton-list .list-item-content {
padding-right: 60px; }

14
scss/ionic/_radio.scss
View File

@ -4,12 +4,15 @@
.radio-buttton-list {
.list-item-buttons {
visibility: hidden;
}
[class^="icon-"],
[class*=" icon-"] {
position: absolute;
top: 25%;
left: 25%;
visibility: hidden;
font-size: 24px;
}
@ -17,8 +20,13 @@
/* hide any radio button inputs elements (the ugly circles) */
display: none;
&:checked + [class^="icon-"],
&:checked + [class*=" icon-"] {
&:checked ~ .list-item-content {
/* style the list item when its checked */
background: #f7f7f7;
}
&:checked ~ .list-item-buttons {
/* show the icon when its checked */
visibility: visible;
}
}

4
test/input-radio.html
View File

@ -24,21 +24,21 @@
<div class="radio-buttton-list">
<label class="list-item">
<input type="radio" name="serverside" value="go" checked>
<div class="list-item-content">
Go
</div>
<div class="list-item-buttons">
<input type="radio" name="serverside" value="go" checked="checked">
<i class="icon-checkmark"></i>
</div>
</label>
<label class="list-item">
<input type="radio" name="serverside" value="python">
<div class="list-item-content">
Python
</div>
<div class="list-item-buttons">
<input type="radio" name="serverside" value="python">
<i class="icon-checkmark"></i>
</div>
</label>