radio

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";
 
 

src/components/checkbox/checkbox.html

@@ -1 +0,0 @@
-

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%;

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

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

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

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)

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 {