checkbox updates

ionic/components/button/modes/ios.scss

@@ -1,8 +1,5 @@
 @import "../../../globals.ios";
 @import "../button";
-@import "../button-fab";
-@import "../button-icon";
-@import "../button-size";
 
 // iOS Button
 // --------------------------------------------------
@@ -156,3 +153,11 @@ $button-ios-border-radius:            4px !default;
   @include ios-button-outline($color-name, $color-value);
   @include ios-button-clear($color-name, $color-value);
 }
+
+
+// Core Button Overrides
+// --------------------------------------------------
+
+@import "../button-fab";
+@import "../button-icon";
+@import "../button-size";

ionic/components/button/modes/md.scss

@@ -1,8 +1,5 @@
 @import "../../../globals.md";
 @import "../button";
-@import "../button-fab";
-@import "../button-icon";
-@import "../button-size";
 
 // Material Design Button
 // --------------------------------------------------
@@ -250,3 +247,11 @@ $button-md-hover-opacity:                  0.8 !default;
   @include md-button-outline($color-name, $color-value);
   @include md-button-clear($color-name, $color-value);
 }
+
+
+// Core Button Overrides
+// --------------------------------------------------
+
+@import "../button-fab";
+@import "../button-icon";
+@import "../button-size";

ionic/components/checkbox/checkbox.scss

@@ -1,16 +0,0 @@
-@import "../../globals.core";
-
-// Checkbox
-// --------------------------------------------------
-
-
-ion-checkbox {
-  cursor: pointer;
-  @include user-select-none();
-}
-
-ion-checkbox[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-color;
-  pointer-events: none;
-}

ionic/components/checkbox/checkbox.ts

@@ -39,9 +39,9 @@ import {Form} from '../../util/form';
   },
   template:
     '<div class="item-inner">' +
-      '<media-checkbox disable-activated>' +
+      '<div class="media-checkbox" disable-activated>' +
-        '<checkbox-icon></checkbox-icon>' +
+        '<div class="checkbox-icon"></div>' +
-      '</media-checkbox>' +
+      '</div>' +
       '<ion-item-content id="{{labelId}}">' +
         '<ng-content></ng-content>' +
       '</ion-item-content>' +

ionic/components/checkbox/modes/ios.scss

@@ -1,5 +1,5 @@
 @import "../../../globals.ios";
-@import "../checkbox";
+
 
 // iOS Checkbox Structure
 // --------------------------------------------------
@@ -13,13 +13,15 @@ $checkbox-ios-checkmark-color-on:    $background-ios-color !default;
 
 
 ion-checkbox {
+  cursor: pointer;
+  @include user-select-none();
 
-  &[aria-checked=true] checkbox-icon {
+  &[aria-checked=true] .checkbox-icon {
     background-color: $checkbox-ios-background-color-on;
     border-color: $checkbox-ios-border-color-on;
   }
 
-  &[aria-checked=true] checkbox-icon:after {
+  &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
     border: 1px solid $checkbox-ios-checkmark-color-on;
     top: 3px;
@@ -38,12 +40,17 @@ ion-checkbox {
 
 }
 
-media-checkbox {
+ion-checkbox[aria-disabled=true] {
-  display: block;
+  opacity: 0.5;
+  color: $subdued-text-ios-color;
+  pointer-events: none;
+}
+
+.media-checkbox {
   margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px;
 }
 
-checkbox-icon {
+.checkbox-icon {
   position: relative;
   display: block;
   width: $checkbox-ios-icon-size;
@@ -59,7 +66,7 @@ checkbox-icon {
 
 @mixin checkbox-theme-ios($color-name, $bg-on) {
 
-  ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon {
+  ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
   }
@@ -67,11 +74,9 @@ checkbox-icon {
 }
 
 
-// Generate iOS Checkbox Auxiliary Colors
+// Generate iOS Checkbox Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors-ios {
+@each $color-name, $color-value in $colors-ios {
-
+  @include checkbox-theme-ios($color-name, $color-value);
-  @include checkbox-theme-ios($color-name, $value);
-
 }

ionic/components/checkbox/modes/md.scss

@@ -1,5 +1,4 @@
 @import "../../../globals.md";
-@import "../checkbox";
 
 // Material Design Checkbox
 // --------------------------------------------------
@@ -15,6 +14,9 @@ $checkbox-md-checkmark-color-on:    $background-md-color !default;
 
 
 ion-checkbox {
+  cursor: pointer;
+  @include user-select-none();
+
   &.item .item-inner {
     border: none;
     padding-right: 0;
@@ -26,12 +28,12 @@ ion-checkbox {
     padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
   }
 
-  &[aria-checked=true] checkbox-icon {
+  &[aria-checked=true] .checkbox-icon {
     background-color: $checkbox-md-background-color-on;
     border-color: $checkbox-md-border-color-on;
   }
 
-  &[aria-checked=true] checkbox-icon:after {
+  &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
     border: 2px solid $checkbox-md-checkmark-color-on;
     top: 0;
@@ -46,15 +48,19 @@ ion-checkbox {
 
 }
 
-media-checkbox {
+ion-checkbox[aria-disabled=true] {
-  display: block;
+  opacity: 0.5;
+  color: $subdued-text-md-color;
+  pointer-events: none;
+}
+
+.media-checkbox {
   // TODO convert these to sass variables
   margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px;
 }
 
-checkbox-icon {
+.checkbox-icon {
   position: relative;
-  display: block;
   width: $checkbox-md-icon-size;
   height: $checkbox-md-icon-size;
   border-radius: $checkbox-md-border-radius;
@@ -68,7 +74,7 @@ checkbox-icon {
 
 @mixin checkbox-theme-md($color-name, $bg-on) {
 
-  ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon {
+  ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
   }
@@ -80,7 +86,5 @@ checkbox-icon {
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-md {
-
   @include checkbox-theme-md($color-name, $color-value);
-
 }