diff --git a/ionic/components/checkbox/checkbox.ios.scss b/ionic/components/checkbox/checkbox.ios.scss
index cb9e84a03d0..6f0c6943bcd 100644
--- a/ionic/components/checkbox/checkbox.ios.scss
+++ b/ionic/components/checkbox/checkbox.ios.scss
@@ -17,10 +17,10 @@ $checkbox-ios-icon-checkmark-width: 1px !default;
$checkbox-ios-icon-checkmark-style: solid !default;
$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default;
-$checkbox-ios-media-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
-
$checkbox-ios-disabled-opacity: .3 !default;
+$checkbox-ios-item-left-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
+$checkbox-ios-item-right-margin: 10px 8px 9px 0 !default;
ion-checkbox {
position: relative;
@@ -92,7 +92,11 @@ ion-checkbox {
position: static;
display: block;
- margin: $checkbox-ios-media-margin;
+ margin: $checkbox-ios-item-left-margin;
+
+ &[item-right] {
+ margin: $checkbox-ios-item-right-margin;
+ }
}
diff --git a/ionic/components/checkbox/checkbox.md.scss b/ionic/components/checkbox/checkbox.md.scss
index abf5afb9b6e..0d91d9c12c0 100644
--- a/ionic/components/checkbox/checkbox.md.scss
+++ b/ionic/components/checkbox/checkbox.md.scss
@@ -8,7 +8,6 @@ $checkbox-md-border-bottom-style: solid !default;
$checkbox-md-border-bottom-color: $list-md-border-color !default;
$checkbox-md-padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
$checkbox-md-margin: 0 !default;
-$checkbox-md-media-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
$checkbox-md-disabled-opacity: .3 !default;
$checkbox-md-icon-background-color-off: $list-md-background-color !default;
@@ -28,6 +27,9 @@ $checkbox-md-icon-border-color-on: color($colors-md, primary) !default;
$checkbox-md-transition-duration: 280ms !default;
$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
+$checkbox-md-item-left-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
+$checkbox-md-item-right-margin: 11px 10px 10px 0 !default;
+
ion-checkbox {
position: relative;
@@ -103,7 +105,11 @@ ion-checkbox {
position: static;
display: block;
- margin: $checkbox-md-media-margin;
+ margin: $checkbox-md-item-left-margin;
+
+ &[item-right] {
+ margin: $checkbox-md-item-right-margin;
+ }
}
ion-checkbox + .item-inner ion-label {
diff --git a/ionic/components/checkbox/checkbox.wp.scss b/ionic/components/checkbox/checkbox.wp.scss
index 0bcba2fd8f7..d155dc5c939 100644
--- a/ionic/components/checkbox/checkbox.wp.scss
+++ b/ionic/components/checkbox/checkbox.wp.scss
@@ -8,7 +8,6 @@ $checkbox-wp-border-bottom-style: solid !default;
$checkbox-wp-border-bottom-color: $list-wp-border-color !default;
$checkbox-wp-padding: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0 !default;
$checkbox-wp-margin: 0 !default;
-$checkbox-wp-media-margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default;
$checkbox-wp-disabled-opacity: .3 !default;
$checkbox-wp-icon-background-color-off: $list-wp-background-color !default;
@@ -25,6 +24,9 @@ $checkbox-wp-icon-border-radius: 0 !default;
$checkbox-wp-icon-border-color-off: #333 !default;
$checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default;
+$checkbox-wp-item-left-margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default;
+$checkbox-wp-item-right-margin: 11px 10px 10px 0 !default;
+
ion-checkbox {
position: relative;
@@ -96,7 +98,11 @@ ion-checkbox {
position: static;
display: block;
- margin: $checkbox-wp-media-margin;
+ margin: $checkbox-wp-item-left-margin;
+
+ &[item-right] {
+ margin: $checkbox-wp-item-right-margin;
+ }
}
ion-checkbox + .item-inner ion-label {
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index 417cec82b82..ca55c839eaa 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -38,6 +38,21 @@