javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toggle): add styling for toggle when placed left

Browse Source 
BREAKING CHANGES: renamed Sass variables in toggle, checkbox, and
radio. Changed `media` in `component-mode-media-padding` (for example)
to `item-left`.

references #5925
This commit is contained in:
Brandy Carney
2016-05-03 15:27:13 -04:00
parent e075ccde08
commit ab82d532dc
5 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components/radio/radio.wp.scss
View File

@@ -106,6 +106,7 @@ ion-radio {
&[item-right] {
order: 0;
margin: $radio-wp-item-right-margin;
}
}

10
ionic/components/toggle/test/basic/main.html
View File

@@ -7,6 +7,16 @@
<ion-list>
<ion-item>
Left side default icon, really long text that should ellipsis ellipsis ellipsis
<ion-icon name="information-circle" item-left></ion-icon>
</ion-item>
<ion-item>
<ion-label>Apple</ion-label>
<ion-toggle item-left value="apple"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Apple, ngControl</ion-label>
<ion-toggle ngControl="appleCtrl"></ion-toggle>

10
ionic/components/toggle/toggle.ios.scss
View File

@@ -21,12 +21,14 @@ $toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
$toggle-ios-media-margin: 0 !default;
$toggle-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
$toggle-ios-transition-duration: 300ms !default;
$toggle-ios-disabled-opacity: .3 !default;
$toggle-ios-item-left-padding: 6px 16px 5px 0 !default;
$toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
// iOS Toggle
// -----------------------------------------
@@ -164,7 +166,11 @@ ion-toggle {
.item ion-toggle {
margin: $toggle-ios-media-margin;
padding: $toggle-ios-media-padding;
padding: $toggle-ios-item-right-padding;
&[item-left] {
padding: $toggle-ios-item-left-padding;
}
}

10
ionic/components/toggle/toggle.md.scss
View File

@@ -18,12 +18,14 @@ $toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1
$toggle-md-handle-border-radius: 50% !default;
$toggle-md-media-margin: 0 !default;
$toggle-md-media-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
$toggle-md-transition-duration: 300ms !default;
$toggle-md-disabled-opacity: .3 !default;
$toggle-md-item-left-padding: 12px 18px 12px 2px !default;
$toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
// Material Design Toggle
// -----------------------------------------
@@ -110,9 +112,13 @@ ion-toggle {
.item ion-toggle {
margin: $toggle-md-media-margin;
padding: $toggle-md-media-padding;
padding: $toggle-md-item-right-padding;
cursor: pointer;
&[item-left] {
padding: $toggle-md-item-left-padding;
}
}
.item-toggle ion-label {

10
ionic/components/toggle/toggle.wp.scss
View File

@@ -24,12 +24,14 @@ $toggle-wp-handle-background-color-on: color-contrast($colors-wp, $toggle-wp-a
$toggle-wp-handle-border-radius: 50% !default;
$toggle-wp-media-margin: 0 !default;
$toggle-wp-media-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
$toggle-wp-transition-duration: 300ms !default;
$toggle-wp-disabled-opacity: .3 !default;
$toggle-wp-item-left-padding: 12px 18px 12px 2px !default;
$toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
// Windows Toggle
// -----------------------------------------
@@ -115,9 +117,13 @@ ion-toggle {
.item ion-toggle {
margin: $toggle-wp-media-margin;
padding: $toggle-wp-media-padding;
padding: $toggle-wp-item-right-padding;
cursor: pointer;
&[item-left] {
padding: $toggle-wp-item-left-padding;
}
}
.item-toggle ion-label {