radio button updates

dist/css/ionic-ios7.css

@@ -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; }

dist/css/ionic-scoped.css

@@ -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; }

dist/css/ionic.css

@@ -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; }

scss/ionic/_radio.scss

@@ -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 ~ .list-item-content {
-    &:checked + [class*=" icon-"] {
+      /* style the list item when its checked */
+      background: #f7f7f7;
+    }
+
+    &:checked ~ .list-item-buttons {
+      /* show the icon when its checked */
       visibility: visible;
     }
   }

test/input-radio.html

@@ -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>