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

feat(item): deprecate item-left / item-right attributes for item-start / item-end (#11125)

Browse Source 
item-start and item-end make more sense for RTL

* refactor(item): replaced item-left with item-start
replaced item-right with item-end

* style(item): fix spacing

* fix(item): add backwards support for left/right in ng-content

* fix(item): deprecated old variables, not breaking change

* fix(scss): fix variable name

* fix(item): old attributes deprecated support
This commit is contained in:
Amit Moryossef
2017-05-05 18:53:32 +03:00
committed by Brandy Carney
parent 6d11499417
commit 26c653e43e
73 changed files with 663 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/toggle/test/basic/pages/root-page/root-page.html
View File

@@ -15,12 +15,12 @@
<ion-item>
Left side default icon, really long text that should ellipsis ellipsis ellipsis
<ion-icon name="information-circle" item-left></ion-icon>
<ion-icon name="information-circle" item-start></ion-icon>
</ion-item>
<ion-item>
<ion-label>Apple</ion-label>
<ion-toggle item-left></ion-toggle>
<ion-toggle item-start></ion-toggle>
</ion-item>
<ion-item>

15
src/components/toggle/toggle.ios.scss
View File

@@ -48,11 +48,15 @@ $toggle-ios-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-ios-disabled-opacity: .3 !default;
/// @prop - Padding of the toggle positioned on the left in an item
// deprecated
$toggle-ios-item-left-padding: 6px 16px 5px 0 !default;
/// @prop - Padding of the toggle positioned on the left in an item
$toggle-ios-item-start-padding: $toggle-ios-item-left-padding;
/// @prop - Padding of the toggle positioned on the right in an item
// deprecated
$toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
/// @prop - Padding of the toggle positioned on the right in an item
$toggle-ios-item-end-padding: $toggle-ios-item-right-padding;
// iOS Toggle
@@ -197,11 +201,12 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
.item-ios .toggle-ios {
margin: $toggle-ios-media-margin;
padding: $toggle-ios-item-right-padding;
padding: $toggle-ios-item-end-padding;
}
.item-ios .toggle-ios[item-left] {
padding: $toggle-ios-item-left-padding;
.item-ios .toggle-ios[item-left], // deprecated
.item-ios .toggle-ios[item-start] {
padding: $toggle-ios-item-start-padding;
}

15
src/components/toggle/toggle.md.scss
View File

@@ -48,11 +48,15 @@ $toggle-md-disabled-opacity: .3 !default;
/// @prop - Padding of standalone toggle
$toggle-md-padding: 12px !default;
/// @prop - Padding of the toggle positioned on the left in an item
// deprecated
$toggle-md-item-left-padding: 12px 18px 12px 2px !default;
/// @prop - Padding of the toggle positioned on the start in an item
$toggle-md-item-start-padding: $toggle-md-item-left-padding;
/// @prop - Padding of the toggle positioned on the right in an item
// deprecated
$toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
/// @prop - Padding of the toggle positioned on the end in an item
$toggle-md-item-end-padding: $toggle-md-item-right-padding;
// Material Design Toggle
@@ -153,13 +157,14 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
.item-md .toggle-md {
margin: $toggle-md-media-margin;
padding: $toggle-md-item-right-padding;
padding: $toggle-md-item-end-padding;
cursor: pointer;
}
.item-md .toggle-md[item-left] {
padding: $toggle-md-item-left-padding;
.item-md .toggle-md[item-left], // deprecated
.item-md .toggle-md[item-start] {
padding: $toggle-md-item-start-padding;
}
.item-md.item-toggle ion-label {

15
src/components/toggle/toggle.wp.scss
View File

@@ -60,11 +60,15 @@ $toggle-wp-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-wp-disabled-opacity: .3 !default;
/// @prop - Padding of the toggle positioned on the left in an item
// deprecated
$toggle-wp-item-left-padding: 12px 18px 12px 2px !default;
/// @prop - Padding of the toggle positioned on the start in an item
$toggle-wp-item-start-padding: $toggle-wp-item-left-padding;
/// @prop - Padding of the toggle positioned on the right in an item
// deprecated
$toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
/// @prop - Padding of the toggle positioned on the end in an item
$toggle-wp-item-end-padding: $toggle-wp-item-right-padding;
// Windows Toggle
@@ -161,13 +165,14 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
.item-wp .toggle-wp {
margin: $toggle-wp-media-margin;
padding: $toggle-wp-item-right-padding;
padding: $toggle-wp-item-end-padding;
cursor: pointer;
}
.item-wp .toggle-wp[item-left] {
padding: $toggle-wp-item-left-padding;
.item-wp .toggle-wp[item-left], // deprecated
.item-wp .toggle-wp[item-start] {
padding: $toggle-wp-item-start-padding;
}
.item-wp.item-toggle ion-label {