From d61f083896f36d0ad26ad5025a3f84ab8d9ac096 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sun, 29 Mar 2015 22:35:37 -0500
Subject: [PATCH] radio

---
 src/components/app/ionic.scss             |  2 +
 src/components/checkbox/checkbox.html     |  1 -
 src/components/item/item.scss             |  1 +
 src/components/radio/extensions/ios.scss  | 14 ++++
 src/components/radio/radio.scss           | 45 +++++++++++++
 src/components/radio/test/basic/main.html | 81 +++++++++++++++--------
 src/components/radio/test/basic/main.js   | 17 +++++
 src/components/switch/switch.scss         |  4 +-
 8 files changed, 135 insertions(+), 30 deletions(-)
 delete mode 100644 src/components/checkbox/checkbox.html
 create mode 100644 src/components/radio/extensions/ios.scss

diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss
index acd4fd39f9..4dcbbb1498 100644
--- a/src/components/app/ionic.scss
+++ b/src/components/app/ionic.scss
@@ -31,6 +31,7 @@
   "../item/item",
   "../list/list",
   "../modal/modal",
+  "../radio/radio",
   "../switch/switch",
   "../tabs/tabs",
   "../toolbar/toolbar",
@@ -48,6 +49,7 @@
   "../checkbox/extensions/ios",
   "../list/extensions/ios",
   "../item/extensions/ios",
+  "../radio/extensions/ios",
   "../switch/extensions/ios";
 
 
diff --git a/src/components/checkbox/checkbox.html b/src/components/checkbox/checkbox.html
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/components/checkbox/checkbox.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/item/item.scss b/src/components/item/item.scss
index 3a1eea88d8..4012010388 100644
--- a/src/components/item/item.scss
+++ b/src/components/item/item.scss
@@ -57,6 +57,7 @@ $item-min-height:         44px !default;
 .item-title {
   position: relative;
 
+  @include flex(1);
   @include flex-shrink(1);
 
   max-width: 100%;
diff --git a/src/components/radio/extensions/ios.scss b/src/components/radio/extensions/ios.scss
new file mode 100644
index 0000000000..f2dba066be
--- /dev/null
+++ b/src/components/radio/extensions/ios.scss
@@ -0,0 +1,14 @@
+
+// iOS Radio
+// --------------------------------------------------
+
+$radio-ios-color:          #007aff;
+
+
+.radio-group-ios {
+
+  .media-radio {
+    color: $radio-ios-color;
+  }
+
+}
diff --git a/src/components/radio/radio.scss b/src/components/radio/radio.scss
index e69de29bb2..1353487290 100644
--- a/src/components/radio/radio.scss
+++ b/src/components/radio/radio.scss
@@ -0,0 +1,45 @@
+
+// Radio
+// --------------------------------------------------
+
+$radio-padding:                   0 15px !default;
+
+
+.radio .item-media {
+  padding: $radio-padding;
+}
+
+.radio-on {
+  display: none;
+}
+
+.radio-off {
+  display: block;
+}
+
+.radio[aria-checked=true] {
+
+  .radio-on {
+    display: block;
+  }
+
+  .radio-off {
+    display: none;
+  }
+
+}
+
+.radio[aria-disabled=true] {
+  pointer-events: none;
+  opacity: 0.5;
+  color: gray;
+
+  .media-radio {
+    color: inherit;
+  }
+}
+
+.radio .item-media,
+.radio .item-content {
+  pointer-events: none;
+}
diff --git a/src/components/radio/test/basic/main.html b/src/components/radio/test/basic/main.html
index 4a85f186a6..34542ddfb4 100644
--- a/src/components/radio/test/basic/main.html
+++ b/src/components/radio/test/basic/main.html
@@ -1,41 +1,67 @@
 
-<div class="radio-group"
-     role="radiogroup"
-     aria-activedescendant="radio_1"
-     aria-invalid="false">
+<div class="pane">
 
-  <div class="item radio"
-       role="radio"
-       id="radio_1"
-       value="Apple"
-       aria-checked="true"
-       aria-label="Apple">
+  <div class="pane-container">
 
-    <div class="item-container">
+    <div class="content" style="background: #efeff4">
 
-      <div class="item-media"></div>
+      <div class="list list-ios">
 
-      <div class="item-content">
-        Apple
-      </div>
+        <div class="list-header">
+          Radio Group
+        </div>
 
-    </div>
+        <div class="list-content radio-group radio-group-ios"
+             role="radiogroup"
+             aria-activedescendant="radio_1"
+             aria-invalid="false">
 
-  </div>
+          <div class="item radio"
+               role="radio"
+               id="radio_1"
+               value="Apple"
+               aria-checked="true"
+               aria-label="Star Wars">
 
-  <div class="item radio"
-       role="radio"
-       id="radio_2"
-       value="Banana"
-       aria-checked="false"
-       aria-label="Banana">
+            <div class="item-content">
 
-    <div class="item-container">
+              <div class="item-title">
+                Star Wars
+              </div>
 
-      <div class="item-media"></div>
+              <div class="item-media media-radio">
+                <icon class="radio-off"></icon>
+                <icon class="ion-ios-checkmark-empty radio-on"></icon>
+              </div>
+
+            </div>
+
+          </div>
+
+          <div class="item radio"
+               role="radio"
+               id="radio_2"
+               value="Banana"
+               aria-checked="false"
+               aria-label="Star Trek">
+
+            <div class="item-content">
+
+              <div class="item-title">
+                Star Trek
+              </div>
+
+              <div class="item-media media-radio">
+                <icon class="radio-off"></icon>
+                <icon class="ion-ios-checkmark-empty radio-on"></icon>
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
 
-      <div class="item-content">
-        Banana
       </div>
 
     </div>
@@ -43,3 +69,4 @@
   </div>
 
 </div>
+
diff --git a/src/components/radio/test/basic/main.js b/src/components/radio/test/basic/main.js
index e69de29bb2..d0bbf22754 100644
--- a/src/components/radio/test/basic/main.js
+++ b/src/components/radio/test/basic/main.js
@@ -0,0 +1,17 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+import {View} from 'ionic2/components/view/view';
+import {Content} from 'ionic2/components/content/content';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html',
+  directives: [View, Content]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index 3471ead6b9..cc8652c2ac 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -2,7 +2,7 @@
 // Switch
 // --------------------------------------------------
 
-$switch-padding-right:             15px !default;
+$switch-padding:                   0 15px !default;
 $switch-width:                     52px !default;
 $switch-height:                    32px !default;
 $switch-border-width:              2px !default;
@@ -12,7 +12,7 @@ $switch-toggle-on-background:      #fff !default;
 
 
 .switch .item-media {
-  padding-right: $switch-padding-right;
+  padding: $switch-padding;
 }
 
 .switch-toggle {