From 73d25eb39af1eb3b9bab190cae43a501f72ec0b3 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Wed, 16 Oct 2013 20:35:30 -0500
Subject: [PATCH] radio button updates

---
 dist/css/ionic-ios7.css   |  9 +++++++--
 dist/css/ionic-scoped.css |  9 +++++++--
 dist/css/ionic.css        |  9 +++++++--
 scss/ionic/_radio.scss    | 14 +++++++++++---
 test/input-radio.html     |  4 ++--
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 2f06a5fcfd..2d6f31de35 100644
--- a/dist/css/ionic-ios7.css
+++ b/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; }
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index e465c9c78b..af6071d517 100644
--- a/dist/css/ionic-scoped.css
+++ b/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; }
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 388f0ad01c..572491ff0b 100644
--- a/dist/css/ionic.css
+++ b/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; }
diff --git a/scss/ionic/_radio.scss b/scss/ionic/_radio.scss
index 00c6317138..7c74960e19 100644
--- a/scss/ionic/_radio.scss
+++ b/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 + [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;
     }
   }
diff --git a/test/input-radio.html b/test/input-radio.html
index 0df5dca801..27cc9f4be0 100644
--- a/test/input-radio.html
+++ b/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>