refactor(list): fixing inset borders and adding wrapper for checkbox and radio

references #437

ionic/components/checkbox/checkbox.ts

@@ -33,12 +33,14 @@ import {Form} from '../../util/form';
     '(click)': 'click($event)'
   },
   template:
-    '<media-checkbox disable-activated>' +
-      '<checkbox-icon></checkbox-icon>' +
-    '</media-checkbox>' +
-    '<ion-item-content id="{{labelId}}">' +
-      '<ng-content></ng-content>' +
-    '</ion-item-content>'
+    '<div class="item-inner">' +
+      '<media-checkbox disable-activated>' +
+        '<checkbox-icon></checkbox-icon>' +
+      '</media-checkbox>' +
+      '<ion-item-content id="{{labelId}}">' +
+        '<ng-content></ng-content>' +
+      '</ion-item-content>' +
+    '</div>'
 })
 export class Checkbox {
 

ionic/components/list/modes/ios.scss

@@ -56,11 +56,16 @@ $list-ios-header-color:               #333 !default;
   margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
   border-radius: $list-inset-ios-border-radius;
 
-  ion-header {
-    border-radius: inherit;
+  .item {
+    margin-top: 0;
+    border-top: 1px solid $item-ios-border-color;
+
+    .item-inner {
+      border-top: none;
+    }
   }
 
-  .item:first-child {
+  .item:first-child, ion-header {
     margin-top: 0;
     border-top-right-radius: $list-inset-ios-border-radius;
     border-top-left-radius: $list-inset-ios-border-radius;
@@ -86,3 +91,9 @@ $list-ios-header-color:               #333 !default;
     border-width: 0;
   }
 }
+
+&.hairlines .list[inset] {
+  .item {
+    border-width: 0.55px;
+  }
+}

ionic/components/switch/switch.ts

@@ -87,12 +87,14 @@ class MediaSwitch {
   },
   template:
     '<ng-content select="[item-left]"></ng-content>' +
-    '<ion-item-content id="{{labelId}}">' +
-      '<ng-content></ng-content>' +
-    '</ion-item-content>' +
-    '<media-switch disable-activated>' +
-      '<switch-icon></switch-icon>' +
-    '</media-switch>',
+    '<div class="item-inner">' +
+      '<ion-item-content id="{{labelId}}">' +
+        '<ng-content></ng-content>' +
+      '</ion-item-content>' +
+      '<media-switch disable-activated>' +
+        '<switch-icon></switch-icon>' +
+      '</media-switch>' +
+    `</div>`,
   directives: [MediaSwitch]
 })
 export class Switch {