diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index ad6876d241..d961c43bda 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/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";
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 5ad83d1837..a3611e5c27 100644
--- a/ionic/components/button/modes/md.scss
+++ b/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";
diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss
deleted file mode 100644
index 52d55bf78a..0000000000
--- a/ionic/components/checkbox/checkbox.scss
+++ /dev/null
@@ -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;
-}
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 17704a8b86..50f4ee7c96 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -39,9 +39,9 @@ import {Form} from '../../util/form';
},
template:
'
' +
- '
' +
- '' +
- '' +
+ '
' +
'
' +
'' +
'' +
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index 721c1a6fa4..1999356935 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/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 {
- display: block;
+ion-checkbox[aria-disabled=true] {
+ 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 {
-
- @include checkbox-theme-ios($color-name, $value);
-
+@each $color-name, $color-value in $colors-ios {
+ @include checkbox-theme-ios($color-name, $color-value);
}
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index ca7067bc9c..528a216b1b 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/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 {
- display: block;
+ion-checkbox[aria-disabled=true] {
+ 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);
-
}