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 @@ + + Checkbox right, checked, really long text that should ellipsis + + + + + + + diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index ce0447132dc..f5d0568c98c 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -41,7 +41,7 @@ import {Label} from '../label/label'; @Component({ selector: 'ion-item,[ion-item]', template: - '' + + '' + '
' + '
' + '' +