+
diff --git a/src/components/loading/loading-component.ts b/src/components/loading/loading-component.ts
index 5b088a9069..714839dde4 100644
--- a/src/components/loading/loading-component.ts
+++ b/src/components/loading/loading-component.ts
@@ -87,7 +87,7 @@ export class LoadingCmp {
}
- dismiss(role: any): Promise
{
+ dismiss(role: string): Promise {
if (this.durationTimeout) {
clearTimeout(this.durationTimeout);
}
diff --git a/src/components/loading/loading-controller.ts b/src/components/loading/loading-controller.ts
index 7be7d90548..367756975b 100644
--- a/src/components/loading/loading-controller.ts
+++ b/src/components/loading/loading-controller.ts
@@ -120,7 +120,7 @@ export class LoadingController {
/**
* Create a loading indicator. See below for options.
- * @param {LoadingOptions} opts Loading options
+ * @param {LoadingOptions} [opts] Loading options
* @returns {Loading} Returns a Loading Instance
*/
create(opts: LoadingOptions = {}) {
diff --git a/src/components/loading/loading.ios.scss b/src/components/loading/loading.ios.scss
index cdb3693811..97025c59e5 100644
--- a/src/components/loading/loading.ios.scss
+++ b/src/components/loading/loading.ios.scss
@@ -3,8 +3,20 @@
// iOS Loading Indicator
// --------------------------------------------------
-/// @prop - Padding of the loading wrapper
-$loading-ios-padding: 24px 34px !default;
+// deprecated
+$loading-ios-padding: null !default;
+
+/// @prop - Padding top of the loading wrapper
+$loading-ios-padding-top: 24px !default;
+
+/// @prop - Padding end of the loading wrapper
+$loading-ios-padding-end: 34px !default;
+
+/// @prop - Padding bottom of the loading wrapper
+$loading-ios-padding-bottom: $loading-ios-padding-top !default;
+
+/// @prop - Padding start of the loading wrapper
+$loading-ios-padding-start: $loading-ios-padding-end !default;
/// @prop - Max width of the loading wrapper
$loading-ios-max-width: 270px !default;
@@ -44,14 +56,17 @@ $loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
.loading-ios .loading-wrapper {
- padding: $loading-ios-padding;
+ @include border-radius($loading-ios-border-radius);
max-width: $loading-ios-max-width;
max-height: $loading-ios-max-height;
- border-radius: $loading-ios-border-radius;
color: $loading-ios-text-color;
background: $loading-ios-background;
+
+ @include deprecated-variable(padding, $loading-ios-padding) {
+ @include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
+ }
}
@@ -63,7 +78,7 @@ $loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
}
.loading-ios .loading-spinner + .loading-content {
- margin-left: 16px;
+ @include margin-horizontal(16px, null);
}
diff --git a/src/components/loading/loading.md.scss b/src/components/loading/loading.md.scss
index d1c4d5c9a5..383403264b 100644
--- a/src/components/loading/loading.md.scss
+++ b/src/components/loading/loading.md.scss
@@ -3,8 +3,20 @@
// Material Design Loading Indicator
// --------------------------------------------------
-/// @prop - Padding of the loading wrapper
-$loading-md-padding: 24px !default;
+// deprecated
+$loading-md-padding: null !default;
+
+/// @prop - Padding top of the loading wrapper
+$loading-md-padding-top: 24px !default;
+
+/// @prop - Padding end of the loading wrapper
+$loading-md-padding-end: $loading-md-padding-top !default;
+
+/// @prop - Padding bottom of the loading wrapper
+$loading-md-padding-bottom: $loading-md-padding-top !default;
+
+/// @prop - Padding start of the loading wrapper
+$loading-md-padding-start: $loading-md-padding-end !default;
/// @prop - Max width of the loading wrapper
$loading-md-max-width: 280px !default;
@@ -47,16 +59,19 @@ $loading-md-spinner-dots-color: $loading-md-spinner-color !default;
.loading-md .loading-wrapper {
- padding: $loading-md-padding;
+ @include border-radius($loading-md-border-radius);
max-width: $loading-md-max-width;
max-height: $loading-md-max-height;
- border-radius: $loading-md-border-radius;
color: $loading-md-text-color;
background: $loading-md-background;
box-shadow: $loading-md-box-shadow;
+
+ @include deprecated-variable(padding, $loading-md-padding) {
+ @include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start);
+ }
}
@@ -64,7 +79,7 @@ $loading-md-spinner-dots-color: $loading-md-spinner-color !default;
// -----------------------------------------
.loading-md .loading-spinner + .loading-content {
- margin-left: 16px;
+ @include margin-horizontal(16px, null);
}
diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss
index 1a517e9f6d..bc2091c54e 100644
--- a/src/components/loading/loading.scss
+++ b/src/components/loading/loading.scss
@@ -4,11 +4,9 @@
// --------------------------------------------------
ion-loading {
+ @include position(0, 0, 0, 0);
+
position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
z-index: $z-index-overlay;
display: flex;
diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts
index 80eafa4fdd..df84f434e8 100644
--- a/src/components/loading/loading.ts
+++ b/src/components/loading/loading.ts
@@ -39,7 +39,7 @@ export class Loading extends ViewController {
}
/**
- * @param {string} sets the html content for the loading indicator.
+ * @param {string} content sets the html content for the loading indicator.
*/
setContent(content: string): Loading {
this.data.content = content;
@@ -47,7 +47,7 @@ export class Loading extends ViewController {
}
/**
- * @param {string} sets the name of the SVG spinner for the loading indicator.
+ * @param {string} spinner sets the name of the SVG spinner for the loading indicator.
*/
setSpinner(spinner: string): Loading {
this.data.spinner = spinner;
@@ -55,7 +55,7 @@ export class Loading extends ViewController {
}
/**
- * @param {string} sets additional classes for custom styles, separated by spaces.
+ * @param {string} cssClass sets additional classes for custom styles, separated by spaces.
*/
setCssClass(cssClass: string): Loading {
this.data.cssClass = cssClass;
@@ -63,7 +63,7 @@ export class Loading extends ViewController {
}
/**
- * @param {string} sets whether to show the backdrop.
+ * @param {boolean} showBackdrop sets whether to show the backdrop.
*/
setShowBackdrop(showBackdrop: boolean): Loading {
this.data.showBackdrop = showBackdrop;
@@ -71,7 +71,7 @@ export class Loading extends ViewController {
}
/**
- * @param {string} how many milliseconds to wait before hiding the indicator.
+ * @param {number} dur how many milliseconds to wait before hiding the indicator.
*/
setDuration(dur: number): Loading {
this.data.duration = dur;
@@ -81,7 +81,7 @@ export class Loading extends ViewController {
/**
* Present the loading instance.
*
- * @param {NavOptions} [opts={}] Nav options to go with this transition.
+ * @param {NavOptions} [navOptions={}] Nav options to go with this transition.
* @returns {Promise} Returns a promise which is resolved when the transition has completed.
*/
present(navOptions: NavOptions = {}): Promise {
diff --git a/src/components/loading/loading.wp.scss b/src/components/loading/loading.wp.scss
index fefb389eb1..8596c68bc4 100644
--- a/src/components/loading/loading.wp.scss
+++ b/src/components/loading/loading.wp.scss
@@ -3,8 +3,20 @@
// Windows Loading Indicator
// --------------------------------------------------
-/// @prop - Padding of the loading wrapper
-$loading-wp-padding: 20px !default;
+// deprecated
+$loading-wp-padding: null !default;
+
+/// @prop - Padding top of the loading wrapper
+$loading-wp-padding-top: 20px !default;
+
+/// @prop - Padding end of the loading wrapper
+$loading-wp-padding-end: $loading-wp-padding-top !default;
+
+/// @prop - Padding bottom of the loading wrapper
+$loading-wp-padding-bottom: $loading-wp-padding-top !default;
+
+/// @prop - Padding start of the loading wrapper
+$loading-wp-padding-start: $loading-wp-padding-end !default;
/// @prop - Max width of the loading wrapper
$loading-wp-max-width: 280px !default;
@@ -41,14 +53,17 @@ $loading-wp-spinner-dots-color: $loading-wp-spinner-color !default;
.loading-wp .loading-wrapper {
- padding: $loading-wp-padding;
+ @include border-radius($loading-wp-border-radius);
max-width: $loading-wp-max-width;
max-height: $loading-wp-max-height;
- border-radius: $loading-wp-border-radius;
color: $loading-wp-text-color;
background: $loading-wp-background;
+
+ @include deprecated-variable(padding, $loading-wp-padding) {
+ @include padding($loading-wp-padding-top, $loading-wp-padding-end, $loading-wp-padding-bottom, $loading-wp-padding-start);
+ }
}
@@ -56,7 +71,7 @@ $loading-wp-spinner-dots-color: $loading-wp-spinner-color !default;
// -----------------------------------------
.loading-wp .loading-spinner + .loading-content {
- margin-left: 16px;
+ @include margin-horizontal(16px, null);
}
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
index 4e83323c9a..e6448e2af3 100644
--- a/src/components/menu/menu.scss
+++ b/src/components/menu/menu.scss
@@ -11,11 +11,9 @@ $menu-small-width: $menu-width - 40px !default;
ion-menu {
+ @include position(0, 0, 0, 0);
+
position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
display: none;
@@ -28,11 +26,9 @@ ion-menu.show-menu {
.menu-inner {
+ @include position(0, auto, 0, 0);
+
position: absolute;
- top: 0;
- right: auto;
- bottom: 0;
- left: 0;
display: block;
@@ -51,8 +47,7 @@ ion-menu.show-menu {
}
ion-menu[side=right] > .menu-inner {
- right: 0;
- left: auto;
+ @include position-horizontal(auto, 0);
}
ion-menu ion-backdrop {
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index da838dfbd0..af0f706d6c 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -1,4 +1,4 @@
-import { OnInit, OnDestroy, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, forwardRef, Input, NgZone, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
+import { OnInit, OnDestroy, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, forwardRef, Input, Output, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
import { App } from '../app/app';
import { Backdrop } from '../backdrop/backdrop';
@@ -332,7 +332,6 @@ export class Menu implements RootNode, MenuInterface, OnInit, OnDestroy {
private _plt: Platform,
private _renderer: Renderer,
private _keyboard: Keyboard,
- private _zone: NgZone,
private _gestureCtrl: GestureController,
private _domCtrl: DomController,
private _app: App,
diff --git a/src/components/modal/modal-impl.ts b/src/components/modal/modal-impl.ts
index 6444b72ef6..ec40e15156 100644
--- a/src/components/modal/modal-impl.ts
+++ b/src/components/modal/modal-impl.ts
@@ -58,7 +58,7 @@ export class ModalImpl extends ViewController {
/**
* Present the action sheet instance.
*
- * @param {NavOptions} [opts={}] Nav options to go with this transition.
+ * @param {NavOptions} [navOptions={}] Nav options to go with this transition.
* @returns {Promise} Returns a promise which is resolved when the transition has completed.
*/
present(navOptions: NavOptions = {}) {
diff --git a/src/components/modal/modal.ios.scss b/src/components/modal/modal.ios.scss
index 266db6d495..8dec9d9b1c 100644
--- a/src/components/modal/modal.ios.scss
+++ b/src/components/modal/modal.ios.scss
@@ -14,8 +14,8 @@ $modal-ios-border-radius: 10px !default;
transform: translate3d(0, 100%, 0);
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
- overflow: hidden;
+ @include border-radius($modal-ios-border-radius);
- border-radius: $modal-ios-border-radius;
+ overflow: hidden;
}
}
diff --git a/src/components/modal/modal.md.scss b/src/components/modal/modal.md.scss
index 2215063d17..7d685a18dc 100644
--- a/src/components/modal/modal.md.scss
+++ b/src/components/modal/modal.md.scss
@@ -17,9 +17,9 @@ $modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !def
transform: translate3d(0, 40px, 0);
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
- overflow: hidden;
+ @include border-radius(2px);
- border-radius: 2px;
+ overflow: hidden;
box-shadow: $modal-inset-box-shadow;
}
diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index 70874a8bec..79742cfc88 100644
--- a/src/components/modal/modal.scss
+++ b/src/components/modal/modal.scss
@@ -23,9 +23,9 @@ $modal-inset-height-large: 600px !default;
ion-modal {
+ @include position(0, null, null, 0);
+
position: absolute;
- top: 0;
- left: 0;
display: block;
@@ -49,18 +49,18 @@ ion-modal ion-backdrop {
contain: strict;
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+ @include position(calc(50% - (#{$modal-inset-height-small}/2)), null, null, calc(50% - (#{$modal-inset-width}/2)));
+
position: absolute;
- top: calc(50% - (#{$modal-inset-height-small}/2));
- left: calc(50% - (#{$modal-inset-width}/2));
width: $modal-inset-width;
height: $modal-inset-height-small;
}
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
+ @include position(calc(50% - (#{$modal-inset-height-large}/2)), null, null, calc(50% - (#{$modal-inset-width}/2)));
+
position: absolute;
- top: calc(50% - (#{$modal-inset-height-large}/2));
- left: calc(50% - (#{$modal-inset-width}/2));
width: $modal-inset-width;
height: $modal-inset-height-large;
diff --git a/src/components/modal/test/basic/pages/modal-with-inputs/modal-with-inputs.ts b/src/components/modal/test/basic/pages/modal-with-inputs/modal-with-inputs.ts
index 662e4c4b5d..6050257a89 100644
--- a/src/components/modal/test/basic/pages/modal-with-inputs/modal-with-inputs.ts
+++ b/src/components/modal/test/basic/pages/modal-with-inputs/modal-with-inputs.ts
@@ -16,7 +16,7 @@ export class ModalWithInputs {
};
}
- public save(ev: any) {
+ public save() {
this.viewCtrl.dismiss(this.data);
}
diff --git a/src/components/nav/test/basic/pages/first-page/first-page.ts b/src/components/nav/test/basic/pages/first-page/first-page.ts
index 5a318ce405..f2df09ae66 100644
--- a/src/components/nav/test/basic/pages/first-page/first-page.ts
+++ b/src/components/nav/test/basic/pages/first-page/first-page.ts
@@ -118,13 +118,11 @@ export class FirstPage {
this.navCtrl.push('primary-header-page', null, {
animate: true,
animation: 'ios-transition'
- }).then(() => { }, (rejectReason: string) => {
- });
+ }).then(() => { }, (rejectReason: string) => { });
}
pushRedirect() {
- this.navCtrl.push('redirect-page').then(() => { }, (rejectReason: string) => {
- });
+ this.navCtrl.push('redirect-page').then(() => { }, (rejectReason: string) => { });
}
pushFullPage() {
diff --git a/src/components/nav/test/basic/pages/tab-item-page/tab-item-page.ts b/src/components/nav/test/basic/pages/tab-item-page/tab-item-page.ts
index 2c77784e7c..df06a0635f 100644
--- a/src/components/nav/test/basic/pages/tab-item-page/tab-item-page.ts
+++ b/src/components/nav/test/basic/pages/tab-item-page/tab-item-page.ts
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
-import { App, IonicPage, Tabs} from '../../../../../..';
+import { IonicPage } from '../../../../../..';
@IonicPage({
name: 'tab-item-page'
@@ -20,7 +20,7 @@ import { App, IonicPage, Tabs} from '../../../../../..';
export class TabItemPage {
items: any[] = [];
- constructor(private tabs: Tabs, private app: App) {
+ constructor() {
}
}
diff --git a/src/components/nav/test/basic/pages/tab-three/tab-three.ts b/src/components/nav/test/basic/pages/tab-three/tab-three.ts
index 0a6e05a7f1..12e330c5d9 100644
--- a/src/components/nav/test/basic/pages/tab-three/tab-three.ts
+++ b/src/components/nav/test/basic/pages/tab-three/tab-three.ts
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
-import { AlertController, App, IonicPage, ModalController, Tabs } from '../../../../../..';
+import { AlertController, App, IonicPage, Tabs } from '../../../../../..';
@IonicPage({
name: 'tab-three'
@@ -31,7 +31,7 @@ import { AlertController, App, IonicPage, ModalController, Tabs } from '../../..
`
})
export class Tab3 {
- constructor(private alertCtrl: AlertController, private modalCtrl: ModalController, private tabs: Tabs, private app: App) {}
+ constructor(private alertCtrl: AlertController, private tabs: Tabs, private app: App) {}
presentAlert() {
let alert = this.alertCtrl.create({
diff --git a/src/components/nav/test/worst-case/app.module.ts b/src/components/nav/test/worst-case/app.module.ts
index af9a82c0d4..0f8626ccff 100644
--- a/src/components/nav/test/worst-case/app.module.ts
+++ b/src/components/nav/test/worst-case/app.module.ts
@@ -73,7 +73,7 @@ export class Base {
template: TEMPLATE
})
export class Page1 extends Base {
- constructor(private nav: NavController) {
+ constructor() {
super('Page1');
}
}
@@ -158,7 +158,7 @@ export class Page4 extends Base {
template: TEMPLATE
})
export class Page5 extends Base {
- constructor(private nav: NavController) {
+ constructor() {
super('Page5');
}
@@ -271,7 +271,7 @@ export class Page7 extends Base {
template: TEMPLATE
})
export class Page8 extends Base {
- constructor(private nav: NavController) {
+ constructor() {
super('Page8');
}
}
@@ -291,7 +291,8 @@ export class Page8 extends Base {
})
export class Results {
result: any;
- constructor(private nav: NavController, private sanitizer: DomSanitizer) {}
+ constructor(private sanitizer: DomSanitizer) {
+ }
ionViewDidEnter() {
setTimeout(() => {
if (SIMPLE_LOG !== EXPECTED) {
diff --git a/src/components/note/note.ts b/src/components/note/note.ts
index 52f13575c4..311816e38b 100644
--- a/src/components/note/note.ts
+++ b/src/components/note/note.ts
@@ -14,11 +14,11 @@ import { Ion } from '../ion';
*
*
*
- *
+ *
* Left Note
*
* My Item
- *
+ *
* Right Note
*
*
diff --git a/src/components/picker/picker-component.ts b/src/components/picker/picker-component.ts
index 6207f1b900..3bafcf4b49 100644
--- a/src/components/picker/picker-component.ts
+++ b/src/components/picker/picker-component.ts
@@ -205,7 +205,7 @@ export class PickerCmp {
}
}
- dismiss(role: any): Promise {
+ dismiss(role: string): Promise {
return this._viewCtrl.dismiss(this.getSelected(), role);
}
diff --git a/src/components/picker/picker.ios.scss b/src/components/picker/picker.ios.scss
index 5baeb80cd3..f5f6ebb3ba 100644
--- a/src/components/picker/picker.ios.scss
+++ b/src/components/picker/picker.ios.scss
@@ -27,14 +27,38 @@ $picker-ios-button-text-color: color($colors-ios, primary) !defa
/// @prop - Background of the picker button
$picker-ios-button-background-color: transparent !default;
-/// @prop - Padding of the picker column
-$picker-ios-column-padding: 0 4px !default;
+// deprecated
+$picker-ios-column-padding: null !default;
+
+/// @prop - Padding top of the picker column
+$picker-ios-column-padding-top: 0 !default;
+
+/// @prop - Padding end of the picker column
+$picker-ios-column-padding-end: 4px !default;
+
+/// @prop - Padding bottom of the picker column
+$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default;
+
+/// @prop - Padding start of the picker column
+$picker-ios-column-padding-start: $picker-ios-column-padding-end !default;
/// @prop - Perspective of the picker column
$picker-ios-column-perspective: 1000px !default;
-/// @prop - Padding of the picker option
-$picker-ios-option-padding: 0 !default;
+// deprecated
+$picker-ios-option-padding: null !default;
+
+/// @prop - Padding top of the picker option
+$picker-ios-option-padding-top: 0 !default;
+
+/// @prop - Padding end of the picker option
+$picker-ios-option-padding-end: $picker-ios-option-padding-top !default;
+
+/// @prop - Padding bottom of the picker option
+$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default;
+
+/// @prop - Padding start of the picker option
+$picker-ios-option-padding-start: $picker-ios-option-padding-end !default;
/// @prop - Text color of the picker option
$picker-ios-option-text-color: $list-ios-text-color !default;
@@ -86,7 +110,7 @@ $picker-button-ios-strong-font-weight: 600 !default;
.picker-ios .picker-button,
.picker-ios .picker-button.activated {
- margin: 0;
+ @include margin(0);
height: $picker-ios-button-height;
@@ -101,9 +125,11 @@ $picker-button-ios-strong-font-weight: 600 !default;
}
.picker-ios .picker-col {
- padding: $picker-ios-column-padding;
-
transform-style: preserve-3d;
+
+ @include deprecated-variable(padding, $picker-ios-column-padding) {
+ @include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start);
+ }
}
.picker-ios .picker-prefix,
@@ -121,8 +147,7 @@ $picker-button-ios-strong-font-weight: 600 !default;
}
.picker-ios .picker-opt {
- margin: 0;
- padding: $picker-ios-option-padding;
+ @include margin(0);
height: 4.6rem;
@@ -138,12 +163,16 @@ $picker-button-ios-strong-font-weight: 600 !default;
backface-visibility: hidden;
pointer-events: auto;
+
+ @include deprecated-variable(padding, $picker-ios-option-padding) {
+ @include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start);
+ }
}
.picker-ios .picker-above-highlight {
+ @include position(0, null, null, 0);
+
position: absolute;
- top: 0;
- left: 0;
z-index: 10;
display: block;
@@ -160,9 +189,10 @@ $picker-button-ios-strong-font-weight: 600 !default;
}
.picker-ios .picker-below-highlight {
+ @include position($picker-ios-option-offset-y + $picker-ios-option-height - 4, null, null, 0);
+
position: absolute;
- top: $picker-ios-option-offset-y + $picker-ios-option-height - 4;
- left: 0;
+
z-index: 11;
display: block;
diff --git a/src/components/picker/picker.md.scss b/src/components/picker/picker.md.scss
index 1cb0bb9c21..7c33f6b772 100644
--- a/src/components/picker/picker.md.scss
+++ b/src/components/picker/picker.md.scss
@@ -27,11 +27,35 @@ $picker-md-button-text-color: color($colors-md, primary) !defaul
/// @prop - Background of the picker button
$picker-md-button-background-color: transparent !default;
-/// @prop - Padding of the picker column
-$picker-md-column-padding: 0 8px !default;
+// deprecated
+$picker-md-column-padding: null !default;
-/// @prop - Padding of the picker option
-$picker-md-option-padding: 0 !default;
+/// @prop - Padding top of the picker column
+$picker-md-column-padding-top: 0 !default;
+
+/// @prop - Padding end of the picker column
+$picker-md-column-padding-end: 8px !default;
+
+/// @prop - Padding bottom of the picker column
+$picker-md-column-padding-bottom: $picker-md-column-padding-top !default;
+
+/// @prop - Padding start of the picker column
+$picker-md-column-padding-start: $picker-md-column-padding-end !default;
+
+// deprecated
+$picker-md-option-padding: null !default;
+
+/// @prop - Padding top of the picker option
+$picker-md-option-padding-top: 0 !default;
+
+/// @prop - Padding end of the picker option
+$picker-md-option-padding-end: $picker-md-option-padding-top !default;
+
+/// @prop - Padding bottom of the picker option
+$picker-md-option-padding-bottom: $picker-md-option-padding-top !default;
+
+/// @prop - Padding start of the picker option
+$picker-md-option-padding-start: $picker-md-option-padding-end !default;
/// @prop - Text color of the picker option
$picker-md-option-text-color: $list-md-text-color !default;
@@ -69,7 +93,7 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul
.picker-md .picker-button,
.picker-md .picker-button.activated {
- margin: 0;
+ @include margin(0);
height: $picker-md-button-height;
@@ -86,9 +110,11 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul
}
.picker-md .picker-col {
- padding: $picker-md-column-padding;
-
transform-style: preserve-3d;
+
+ @include deprecated-variable(padding, $picker-md-column-padding) {
+ @include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start);
+ }
}
.picker-md .picker-prefix,
@@ -107,8 +133,7 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul
.picker-md .picker-opt {
- margin: 0;
- padding: $picker-md-option-padding;
+ @include margin(0);
height: 4.3rem;
@@ -123,6 +148,10 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul
backface-visibility: hidden;
pointer-events: auto;
+
+ @include deprecated-variable(padding, $picker-md-option-padding) {
+ @include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
+ }
}
.picker-md .picker-prefix,
@@ -133,9 +162,9 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul
}
.picker-md .picker-above-highlight {
+ @include position(0, null, null, 0);
+
position: absolute;
- top: 0;
- left: 0;
z-index: 10;
width: 100%;
@@ -151,9 +180,9 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul
}
.picker-md .picker-below-highlight {
+ @include position($picker-md-option-offset-y + $picker-md-option-height - 4, null, null, 0);
+
position: absolute;
- top: $picker-md-option-offset-y + $picker-md-option-height - 4;
- left: 0;
z-index: 11;
width: 100%;
diff --git a/src/components/picker/picker.scss b/src/components/picker/picker.scss
index 7a478a5c2c..074f9ddd56 100644
--- a/src/components/picker/picker.scss
+++ b/src/components/picker/picker.scss
@@ -11,9 +11,9 @@ $picker-max-width: 500px !default;
ion-picker-cmp {
+ @include position(0, null, null, 0);
+
position: absolute;
- top: 0;
- left: 0;
z-index: $z-index-overlay;
display: block;
@@ -32,10 +32,11 @@ ion-picker-cmp {
}
.picker-wrapper {
+ @include position(null, 0, 0, 0);
+
+ @include margin(auto);
+
position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
z-index: $z-index-overlay-wrapper;
display: flex;
@@ -43,8 +44,6 @@ ion-picker-cmp {
flex-direction: column;
- margin: auto;
-
width: $picker-width;
max-width: $picker-max-width;
@@ -114,11 +113,11 @@ ion-picker-cmp {
// contain property is supported by Chrome
.picker-opt {
+ @include position(0, null, null, 0);
@include text-align(center);
position: absolute;
- top: 0;
- left: 0;
+
display: block;
overflow: hidden;
diff --git a/src/components/picker/picker.ts b/src/components/picker/picker.ts
index 69a802602c..c132439fb3 100644
--- a/src/components/picker/picker.ts
+++ b/src/components/picker/picker.ts
@@ -24,7 +24,7 @@ export class Picker extends ViewController {
}
opts.columns = opts.columns || [];
opts.buttons = opts.buttons || [];
- opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
+ opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? Boolean(opts.enableBackdropDismiss) : true;
super(PickerCmp, opts, null);
this._app = app;
@@ -52,7 +52,7 @@ export class Picker extends ViewController {
}
/**
- * @param {any} button Picker toolbar button
+ * @param {PickerColumn} column Picker toolbar button
*/
addColumn(column: PickerColumn) {
this.data.columns.push(column);
@@ -83,7 +83,7 @@ export class Picker extends ViewController {
/**
* Present the picker instance.
*
- * @param {NavOptions} [opts={}] Nav options to go with this transition.
+ * @param {NavOptions} [navOptions={}] Nav options to go with this transition.
* @returns {Promise} Returns a promise which is resolved when the transition has completed.
*/
present(navOptions: NavOptions = {}) {
diff --git a/src/components/picker/picker.wp.scss b/src/components/picker/picker.wp.scss
index 86c8714592..5482f3c1d7 100644
--- a/src/components/picker/picker.wp.scss
+++ b/src/components/picker/picker.wp.scss
@@ -27,11 +27,35 @@ $picker-wp-button-text-color: color($colors-wp, primary) !defaul
/// @prop - Background of the picker button
$picker-wp-button-background-color: transparent !default;
-/// @prop - Padding of the picker column
-$picker-wp-column-padding: 0 4px !default;
+// deprecated
+$picker-wp-column-padding: null !default;
-/// @prop - Padding of the picker option
-$picker-wp-option-padding: 0 !default;
+/// @prop - Padding top of the picker column
+$picker-wp-column-padding-top: 0 !default;
+
+/// @prop - Padding end of the picker column
+$picker-wp-column-padding-end: 4px !default;
+
+/// @prop - Padding bottom of the picker column
+$picker-wp-column-padding-bottom: $picker-wp-column-padding-top !default;
+
+/// @prop - Padding start of the picker column
+$picker-wp-column-padding-start: $picker-wp-column-padding-end !default;
+
+// deprecated
+$picker-wp-option-padding: null !default;
+
+/// @prop - Padding top of the picker option
+$picker-wp-option-padding-top: 0 !default;
+
+/// @prop - Padding end of the picker option
+$picker-wp-option-padding-end: $picker-wp-option-padding-top !default;
+
+/// @prop - Padding bottom of the picker option
+$picker-wp-option-padding-bottom: $picker-wp-option-padding-top !default;
+
+/// @prop - Padding start of the picker option
+$picker-wp-option-padding-start: $picker-wp-option-padding-end !default;
/// @prop - Text color of the picker option
$picker-wp-option-text-color: $list-wp-text-color !default;
@@ -83,7 +107,7 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul
.picker-wp .picker-button,
.picker-wp .picker-button.activated {
- margin: 0;
+ @include margin(0);
height: $picker-wp-button-height;
@@ -100,9 +124,11 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul
}
.picker-wp .picker-col {
- padding: $picker-wp-column-padding;
-
transform-style: preserve-3d;
+
+ @include deprecated-variable(padding, $picker-wp-column-padding) {
+ @include padding($picker-wp-column-padding-top, $picker-wp-column-padding-end, $picker-wp-column-padding-bottom, $picker-wp-column-padding-start);
+ }
}
.picker-wp .picker-prefix,
@@ -120,8 +146,7 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul
}
.picker-wp .picker-opt {
- margin: 0;
- padding: $picker-wp-option-padding;
+ @include margin(0);
height: 4.2rem;
@@ -136,6 +161,10 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul
backface-visibility: hidden;
pointer-events: auto;
+
+ @include deprecated-variable(padding, $picker-wp-option-padding) {
+ @include padding($picker-wp-option-padding-top, $picker-wp-option-padding-end, $picker-wp-option-padding-bottom, $picker-wp-option-padding-start);
+ }
}
.picker-wp .picker-prefix,
@@ -145,9 +174,10 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul
}
.picker-wp .picker-above-highlight {
+ @include position(0, null, null, 0);
+
position: absolute;
- top: 0;
- left: 0;
+
z-index: 10;
width: 100%;
@@ -163,9 +193,10 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul
}
.picker-wp .picker-below-highlight {
+ @include position($picker-wp-option-offset-y + $picker-wp-option-height - 4, null, null, 0);
+
position: absolute;
- top: $picker-wp-option-offset-y + $picker-wp-option-height - 4;
- left: 0;
+
z-index: 11;
width: 100%;
diff --git a/src/components/popover/popover-impl.ts b/src/components/popover/popover-impl.ts
index 9a1cedc568..752dd2dec1 100644
--- a/src/components/popover/popover-impl.ts
+++ b/src/components/popover/popover-impl.ts
@@ -41,7 +41,7 @@ export class PopoverImpl extends ViewController {
/**
* Present the popover instance.
*
- * @param {NavOptions} [opts={}] Nav options to go with this transition.
+ * @param {NavOptions} [navOptions={}] Nav options to go with this transition.
* @returns {Promise} Returns a promise which is resolved when the transition has completed.
*/
present(navOptions: NavOptions = {}) {
diff --git a/src/components/popover/popover.ios.scss b/src/components/popover/popover.ios.scss
index 7a983eeab6..317898854d 100644
--- a/src/components/popover/popover.ios.scss
+++ b/src/components/popover/popover.ios.scss
@@ -29,12 +29,13 @@ $popover-ios-arrow-background: $popover-ios-background !default;
.popover-ios .popover-content {
+ @include border-radius($popover-ios-border-radius);
+
width: $popover-ios-width;
min-width: $popover-ios-min-width;
min-height: $popover-ios-min-height;
max-height: $popover-ios-max-height;
- border-radius: $popover-ios-border-radius;
color: $popover-ios-text-color;
background: $popover-ios-background;
}
@@ -54,17 +55,16 @@ $popover-ios-arrow-background: $popover-ios-background !default;
}
.popover-ios .popover-arrow::after {
- position: absolute;
+ @include position(3px, null, null, 3px);
+ @include border-radius(3px);
- top: 3px;
- left: 3px;
+ position: absolute;
z-index: $z-index-overlay-wrapper;
width: 14px;
height: 14px;
- border-radius: 3px;
background-color: $popover-ios-arrow-background;
content: "";
transform: rotate(45deg);
diff --git a/src/components/popover/popover.md.scss b/src/components/popover/popover.md.scss
index ed69dd02d3..25fb2ccf7c 100644
--- a/src/components/popover/popover.md.scss
+++ b/src/components/popover/popover.md.scss
@@ -32,12 +32,13 @@ $popover-md-box-shadow: 0 3px 12px 2px $popover-md-box-shadow-col
.popover-md .popover-content {
+ @include border-radius($popover-md-border-radius);
+
width: $popover-md-width;
min-width: $popover-md-min-width;
min-height: $popover-md-min-height;
max-height: $popover-md-max-height;
- border-radius: $popover-md-border-radius;
color: $popover-md-text-color;
background: $popover-md-background;
box-shadow: $popover-md-box-shadow;
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
index fdfd5e1296..34534dedce 100644
--- a/src/components/popover/popover.scss
+++ b/src/components/popover/popover.scss
@@ -5,11 +5,10 @@
ion-popover {
+ @include position(0, 0, 0, 0);
+
position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
+
z-index: $z-index-overlay;
display: flex;
diff --git a/src/components/popover/popover.wp.scss b/src/components/popover/popover.wp.scss
index 0ab4aa10f7..89e1c2b874 100644
--- a/src/components/popover/popover.wp.scss
+++ b/src/components/popover/popover.wp.scss
@@ -29,13 +29,14 @@ $popover-wp-background: $background-wp-color !default;
.popover-wp .popover-content {
+ @include border-radius($popover-wp-border-radius);
+
width: $popover-wp-width;
min-width: $popover-wp-min-width;
min-height: $popover-wp-min-height;
max-height: $popover-wp-max-height;
border: $popover-wp-border;
- border-radius: $popover-wp-border-radius;
color: $popover-wp-text-color;
background: $popover-wp-background;
diff --git a/src/components/radio/radio.ios.scss b/src/components/radio/radio.ios.scss
index 6f749fd2f0..a20fd09752 100644
--- a/src/components/radio/radio.ios.scss
+++ b/src/components/radio/radio.ios.scss
@@ -4,28 +4,52 @@
// --------------------------------------------------
/// @prop - Color of the checked radio
-$radio-ios-color-on: color($colors-ios, primary) !default;
+$radio-ios-color-on: color($colors-ios, primary) !default;
/// @prop - Width of the radio icon
-$radio-ios-icon-width: 16px !default;
+$radio-ios-icon-width: 16px !default;
/// @prop - Height of the radio icon
-$radio-ios-icon-height: 21px !default;
+$radio-ios-icon-height: 21px !default;
/// @prop - Border width of the radio icon
-$radio-ios-icon-border-width: 2px !default;
+$radio-ios-icon-border-width: 2px !default;
/// @prop - Border style of the radio icon
-$radio-ios-icon-border-style: solid !default;
+$radio-ios-icon-border-style: solid !default;
/// @prop - Opacity of the disabled radio
-$radio-ios-disabled-opacity: .3 !default;
+$radio-ios-disabled-opacity: .3 !default;
-/// @prop - Margin of the item-left in a radio
-$radio-ios-item-left-margin: 8px 21px 8px 3px !default;
+// deprecated
+$radio-ios-item-left-margin: null !default;
-/// @prop - Margin of the item-right in a radio
-$radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default;
+/// @prop - Margin top of the item-start in a radio
+$radio-ios-item-start-margin-top: 8px !default;
+
+/// @prop - Margin end of the item-start in a radio
+$radio-ios-item-start-margin-end: 21px !default;
+
+/// @prop - Margin bottom of the item-start in a radio
+$radio-ios-item-start-margin-bottom: 8px !default;
+
+/// @prop - Margin start of the item-start in a radio
+$radio-ios-item-start-margin-start: 3px !default;
+
+// deprecated
+$radio-ios-item-right-margin: null !default;
+
+/// @prop - Margin top of the item-end in a radio
+$radio-ios-item-end-margin-top: $item-ios-padding-media-top !default;
+
+/// @prop - Margin end of the item-end in a radio
+$radio-ios-item-end-margin-end: 11px !default;
+
+/// @prop - Margin bottom of the item-end in a radio
+$radio-ios-item-end-margin-bottom: $item-ios-padding-media-bottom !default;
+
+/// @prop - Margin start of the item-end in a radio
+$radio-ios-item-end-margin-start: ($item-ios-padding-start / 2) !default;
.radio-ios {
@@ -50,9 +74,9 @@ $radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-pa
// -----------------------------------------
.radio-ios .radio-checked .radio-inner {
+ @include position(4px, null, null, 7px);
+
position: absolute;
- top: 4px;
- left: 7px;
width: 5px;
height: 12px;
@@ -84,15 +108,20 @@ $radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-pa
position: static;
display: block;
- margin: $radio-ios-item-right-margin;
+ @include deprecated-variable(margin, $radio-ios-item-right-margin) {
+ @include margin($radio-ios-item-end-margin-top, $radio-ios-item-end-margin-end, $radio-ios-item-end-margin-bottom, $radio-ios-item-end-margin-start);
+ }
- &[item-left] {
- margin: $radio-ios-item-left-margin;
+ &[item-left], // deprecated
+ &[item-start] {
+ @include deprecated-variable(margin, $radio-ios-item-left-margin) {
+ @include margin($radio-ios-item-start-margin-top, $radio-ios-item-start-margin-end, $radio-ios-item-start-margin-bottom, $radio-ios-item-start-margin-start);
+ }
}
}
.item-radio.item-ios ion-label {
- margin-left: 0;
+ @include margin-horizontal(0, null);
}
diff --git a/src/components/radio/radio.md.scss b/src/components/radio/radio.md.scss
index 91f231fd84..3c8a535168 100644
--- a/src/components/radio/radio.md.scss
+++ b/src/components/radio/radio.md.scss
@@ -4,40 +4,64 @@
// --------------------------------------------------
/// @prop - Color of the checked radio
-$radio-md-color-on: color($colors-md, primary) !default;
+$radio-md-color-on: color($colors-md, primary) !default;
/// @prop - Color of the unchecked radio
-$radio-md-color-off: darken($list-md-border-color, 40%) !default;
+$radio-md-color-off: darken($list-md-border-color, 40%) !default;
/// @prop - Width of the radio icon
-$radio-md-icon-width: 16px !default;
+$radio-md-icon-width: 16px !default;
/// @prop - Height of the radio icon
-$radio-md-icon-height: 16px !default;
+$radio-md-icon-height: 16px !default;
/// @prop - Border width of the radio icon
-$radio-md-icon-border-width: 2px !default;
+$radio-md-icon-border-width: 2px !default;
/// @prop - Border style of the radio icon
-$radio-md-icon-border-style: solid !default;
+$radio-md-icon-border-style: solid !default;
/// @prop - Border radius of the radio icon
-$radio-md-icon-border-radius: 50% !default;
+$radio-md-icon-border-radius: 50% !default;
/// @prop - Transition duration of the radio
-$radio-md-transition-duration: 280ms !default;
+$radio-md-transition-duration: 280ms !default;
/// @prop - Transition easing of the radio
-$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
+$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
/// @prop - Opacity of the disabled radio
-$radio-md-disabled-opacity: .3 !default;
+$radio-md-disabled-opacity: .3 !default;
-/// @prop - Margin of the item-left in a radio
-$radio-md-item-left-margin: 11px 36px 10px 4px !default;
+// deprecated
+$radio-md-item-left-margin: null !default;
-/// @prop - Margin of the item-right in a radio
-$radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default;
+/// @prop - Margin top of the item-start in a radio
+$radio-md-item-start-margin-top: 11px !default;
+
+/// @prop - Margin end of the item-start in a radio
+$radio-md-item-start-margin-end: 36px !default;
+
+/// @prop - Margin bottom of the item-start in a radio
+$radio-md-item-start-margin-bottom: 10px !default;
+
+/// @prop - Margin start of the item-start in a radio
+$radio-md-item-start-margin-start: 4px !default;
+
+// deprecated
+$radio-md-item-right-margin: null !default;
+
+/// @prop - Margin top of the item-end in a radio
+$radio-md-item-end-margin-top: $item-md-padding-media-top !default;
+
+/// @prop - Margin end of the item-end in a radio
+$radio-md-item-end-margin-end: 10px !default;
+
+/// @prop - Margin bottom of the item-end in a radio
+$radio-md-item-end-margin-bottom: $item-md-padding-media-bottom !default;
+
+/// @prop - Margin start of the item-end in a radio
+$radio-md-item-end-margin-start: 0 !default;
.radio-md {
@@ -50,19 +74,18 @@ $radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-paddi
// -----------------------------------------
.radio-md .radio-icon {
- position: relative;
- top: 0;
- left: 0;
- display: block;
+ @include position(0, null, null, 0);
+ @include margin(0);
+ @include border-radius($radio-md-icon-border-radius);
- margin: 0;
+ position: relative;
+ display: block;
width: $radio-md-icon-width;
height: $radio-md-icon-height;
border-width: $radio-md-icon-border-width;
border-style: $radio-md-icon-border-style;
- border-radius: $radio-md-icon-border-radius;
border-color: $radio-md-color-off;
}
@@ -71,14 +94,14 @@ $radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-paddi
// -----------------------------------------
.radio-md .radio-inner {
+ @include position($radio-md-icon-border-width, null, null, $radio-md-icon-border-width);
+ @include border-radius(50%);
+
position: absolute;
- top: $radio-md-icon-border-width;
- left: $radio-md-icon-border-width;
width: $radio-md-icon-width - $radio-md-icon-border-width * 4;
height: $radio-md-icon-height - $radio-md-icon-border-width * 4;
- border-radius: 50%;
background-color: $radio-md-color-on;
transform: scale3d(0, 0, 0);
transition: transform $radio-md-transition-duration $radio-md-transition-easing;
@@ -119,15 +142,20 @@ $radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-paddi
position: static;
display: block;
- margin: $radio-md-item-right-margin;
+ @include deprecated-variable(margin, $radio-md-item-right-margin) {
+ @include margin($radio-md-item-end-margin-top, $radio-md-item-end-margin-end, $radio-md-item-end-margin-bottom, $radio-md-item-end-margin-start);
+ }
- &[item-left] {
- margin: $radio-md-item-left-margin;
+ &[item-left], // deprecated
+ &[item-start] {
+ @include deprecated-variable(margin, $radio-md-item-left-margin) {
+ @include margin($radio-md-item-start-margin-top, $radio-md-item-start-margin-end, $radio-md-item-start-margin-bottom, $radio-md-item-start-margin-start);
+ }
}
}
.item-radio.item-md ion-label {
- margin-left: 0;
+ @include margin-horizontal(0, null);
}
diff --git a/src/components/radio/radio.wp.scss b/src/components/radio/radio.wp.scss
index d6d929119d..c08c77355a 100644
--- a/src/components/radio/radio.wp.scss
+++ b/src/components/radio/radio.wp.scss
@@ -4,37 +4,61 @@
// --------------------------------------------------
/// @prop - Color of the checked radio
-$radio-wp-color-on: color($colors-wp, primary) !default;
+$radio-wp-color-on: color($colors-wp, primary) !default;
/// @prop - Color of the unchecked radio
-$radio-wp-color-off: #333 !default;
+$radio-wp-color-off: #333 !default;
/// @prop - Order of the radio (places to the left of the item)
-$radio-wp-order: -1 !default;
+$radio-wp-order: -1 !default;
/// @prop - Width of the radio icon
-$radio-wp-icon-width: 16px !default;
+$radio-wp-icon-width: 16px !default;
/// @prop - Height of the radio icon
-$radio-wp-icon-height: 16px !default;
+$radio-wp-icon-height: 16px !default;
/// @prop - Border width of the radio icon
-$radio-wp-icon-border-width: 2px !default;
+$radio-wp-icon-border-width: 2px !default;
/// @prop - Border style of the radio icon
-$radio-wp-icon-border-style: solid !default;
+$radio-wp-icon-border-style: solid !default;
/// @prop - Border radius of the radio icon
-$radio-wp-icon-border-radius: 50% !default;
+$radio-wp-icon-border-radius: 50% !default;
/// @prop - Opacity of the disabled radio
-$radio-wp-disabled-opacity: .3 !default;
+$radio-wp-disabled-opacity: .3 !default;
-/// @prop - Margin of the item-left in a radio
-$radio-wp-item-left-margin: 9px 20px 9px 4px !default;
+// deprecated
+$radio-wp-item-left-margin: null !default;
-/// @prop - Margin of the item-right in a radio
-$radio-wp-item-right-margin: 11px 10px 10px 0 !default;
+/// @prop - Margin top of the item-start in a radio
+$radio-wp-item-start-margin-top: 9px !default;
+
+/// @prop - Margin end of the item-start in a radio
+$radio-wp-item-start-margin-end: 20px !default;
+
+/// @prop - Margin bottom of the item-start in a radio
+$radio-wp-item-start-margin-bottom: 9px !default;
+
+/// @prop - Margin start of the item-start in a radio
+$radio-wp-item-start-margin-start: 4px !default;
+
+// deprecated
+$radio-wp-item-right-margin: null !default;
+
+/// @prop - Margin top of the item-end in a radio
+$radio-wp-item-end-margin-top: 11px !default;
+
+/// @prop - Margin end of the item-end in a radio
+$radio-wp-item-end-margin-end: 10px !default;
+
+/// @prop - Margin bottom of the item-end in a radio
+$radio-wp-item-end-margin-bottom: 10px !default;
+
+/// @prop - Margin start of the item-end in a radio
+$radio-wp-item-end-margin-start: 0 !default;
.radio-wp {
@@ -47,19 +71,19 @@ $radio-wp-item-right-margin: 11px 10px 10px 0 !default;
// -----------------------------------------
.radio-wp .radio-icon {
- position: relative;
- top: 0;
- left: 0;
- display: block;
+ @include position(0, null, null, 0);
+ @include margin(0);
+ @include border-radius($radio-wp-icon-border-radius);
- margin: 0;
+ position: relative;
+
+ display: block;
width: $radio-wp-icon-width;
height: $radio-wp-icon-height;
border-width: $radio-wp-icon-border-width;
border-style: $radio-wp-icon-border-style;
- border-radius: $radio-wp-icon-border-radius;
border-color: $radio-wp-color-off;
}
@@ -68,15 +92,16 @@ $radio-wp-item-right-margin: 11px 10px 10px 0 !default;
// -----------------------------------------
.radio-wp .radio-inner {
+ @include position($radio-wp-icon-border-width, null, null, $radio-wp-icon-border-width);
+ @include border-radius(50%);
+
position: absolute;
- top: $radio-wp-icon-border-width;
- left: $radio-wp-icon-border-width;
+
display: none;
width: $radio-wp-icon-width / 2;
height: $radio-wp-icon-height / 2;
- border-radius: 50%;
background-color: $radio-wp-color-off;
}
@@ -118,17 +143,22 @@ $radio-wp-item-right-margin: 11px 10px 10px 0 !default;
order: $radio-wp-order;
- margin: $radio-wp-item-left-margin;
+ @include deprecated-variable(margin, $radio-wp-item-left-margin) {
+ @include margin($radio-wp-item-start-margin-top, $radio-wp-item-start-margin-end, $radio-wp-item-start-margin-bottom, $radio-wp-item-start-margin-start);
+ }
- &[item-right] {
+ &[item-right], // deprecated
+ &[item-end] {
order: 0;
- margin: $radio-wp-item-right-margin;
+ @include deprecated-variable(margin, $radio-wp-item-right-margin) {
+ @include margin($radio-wp-item-end-margin-top, $radio-wp-item-end-margin-end, $radio-wp-item-end-margin-bottom, $radio-wp-item-end-margin-start);
+ }
}
}
.item-radio.item-wp ion-label {
- margin-left: 0;
+ @include margin-horizontal(0, null);
}
diff --git a/src/components/radio/test/basic/pages/page-one/page-one.html b/src/components/radio/test/basic/pages/page-one/page-one.html
index 9fd1245521..727d814dd2 100644
--- a/src/components/radio/test/basic/pages/page-one/page-one.html
+++ b/src/components/radio/test/basic/pages/page-one/page-one.html
@@ -20,12 +20,12 @@
Button w/ left side default icon, really long text that should ellipsis
-
+
Apple
-
+
@@ -45,12 +45,12 @@
Radio right side
-
+
Button w/ right side default icon, really long text that should ellipsis
-
+
diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss
index 8bd56e6e25..b1bda739e6 100644
--- a/src/components/range/range.ios.scss
+++ b/src/components/range/range.ios.scss
@@ -6,7 +6,7 @@
/// @prop - Padding top/bottom of the range
$range-ios-padding-vertical: 8px !default;
-/// @prop - Padding left/right of the range
+/// @prop - Padding start/end of the range
$range-ios-padding-horizontal: 16px !default;
/// @prop - Height of the range slider
@@ -66,20 +66,32 @@ $range-ios-pin-color: $text-ios-color !default;
/// @prop - Font size of the range pin
$range-ios-pin-font-size: 12px !default;
-/// @prop - Padding of the range pin
-$range-ios-pin-padding: 8px !default;
+// deprecated
+$range-ios-pin-padding: null !default;
+
+/// @prop - Padding top of the range pin
+$range-ios-pin-padding-top: 8px !default;
+
+/// @prop - Padding end of the range pin
+$range-ios-pin-padding-end: $range-ios-pin-padding-top !default;
+
+/// @prop - Padding bottom of the range pin
+$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default;
+
+/// @prop - Padding start of the range pin
+$range-ios-pin-padding-start: $range-ios-pin-padding-end !default;
.range-ios {
- padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
+ @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
}
.range-ios [range-left] {
- margin: 0 20px 0 0;
+ @include margin(0, 20px, 0, 0);
}
.range-ios [range-right] {
- margin: 0 0 0 20px;
+ @include margin(0, 0, 0, 20px);
}
.range-ios.range-has-pin {
@@ -91,15 +103,14 @@ $range-ios-pin-padding: 8px !default;
}
.range-ios .range-bar {
+ @include position(($range-ios-slider-height / 2), null, null, 0);
+ @include border-radius(1px);
+
position: absolute;
- top: ($range-ios-slider-height / 2);
- left: 0;
width: 100%;
height: $range-ios-bar-height;
- border-radius: 1px;
-
background: $range-ios-bar-background-color;
pointer-events: none;
@@ -122,29 +133,26 @@ $range-ios-pin-padding: 8px !default;
}
.range-ios .range-knob-handle {
+ @include position(($range-ios-slider-height / 2), null, null, 0);
+ @include margin(-($range-ios-hit-height / 2), null, null, -($range-ios-hit-width / 2));
@include text-align(center);
position: absolute;
- top: ($range-ios-slider-height / 2);
- left: 0%;
-
- margin-top: -($range-ios-hit-height / 2);
- margin-left: -($range-ios-hit-width / 2);
width: $range-ios-hit-width;
height: $range-ios-hit-height;
}
.range-ios .range-knob {
+ @include position(($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px,
+ null, null, ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2));
+ @include border-radius($range-ios-knob-border-radius);
+
position: absolute;
- top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px;
- left: ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2);
width: $range-ios-knob-width;
height: $range-ios-knob-height;
- border-radius: $range-ios-knob-border-radius;
-
background: $range-ios-knob-background-color;
box-shadow: $range-ios-knob-box-shadow;
@@ -153,16 +161,15 @@ $range-ios-pin-padding: 8px !default;
}
.range-ios .range-tick {
+ @include margin-horizontal(-($range-ios-tick-width / 2), null);
+ @include border-radius($range-ios-tick-border-radius);
+
position: absolute;
top: ($range-ios-hit-height / 2) - ($range-ios-tick-height / 2) + ($range-ios-bar-height / 2);
- margin-left: ($range-ios-tick-width / 2) * -1;
-
width: $range-ios-tick-width;
height: $range-ios-tick-height;
- border-radius: $range-ios-tick-border-radius;
-
background: $range-ios-tick-background-color;
pointer-events: none;
@@ -174,17 +181,14 @@ $range-ios-pin-padding: 8px !default;
.range-ios .range-pin {
@include text-align(center);
+ @include border-radius(50px);
position: relative;
top: -20px;
display: inline-block;
- padding: $range-ios-pin-padding;
-
min-width: 28px;
- border-radius: 50px;
-
font-size: $range-ios-pin-font-size;
color: $range-ios-pin-color;
@@ -193,6 +197,10 @@ $range-ios-pin-padding: 8px !default;
transform: translate3d(0, 28px, 0) scale(.01);
transition: transform 120ms ease;
+
+ @include deprecated-variable(padding, $range-ios-pin-padding) {
+ @include padding($range-ios-pin-padding-top, $range-ios-pin-padding-end, $range-ios-pin-padding-bottom, $range-ios-pin-padding-start);
+ }
}
.range-ios .range-knob-pressed .range-pin {
diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss
index 8a1d74cad9..b477305671 100644
--- a/src/components/range/range.md.scss
+++ b/src/components/range/range.md.scss
@@ -6,7 +6,7 @@
/// @prop - Padding top/bottom of the range
$range-md-padding-vertical: 8px !default;
-/// @prop - Padding left/right of the range
+/// @prop - Padding start/end of the range
$range-md-padding-horizontal: 8px !default;
/// @prop - Height of the range slider
@@ -69,7 +69,7 @@ $range-md-pin-font-size: 12px !default;
/// @prop - Padding top/bottom of the range pin
$range-md-pin-padding-vertical: 8px !default;
-/// @prop - Padding left/right of the range pin
+/// @prop - Padding start/end of the range pin
$range-md-pin-padding-horizontal: 0 !default;
/// @prop - Background of the range pin when the value is the minimum
@@ -77,15 +77,15 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
.range-md {
- padding: $range-md-padding-vertical $range-md-padding-horizontal;
+ @include padding($range-md-padding-vertical, $range-md-padding-horizontal);
}
.range-md [range-left] {
- margin: 0 12px 0 0;
+ @include margin(0, 12px, 0, 0);
}
.range-md [range-right] {
- margin: 0 0 0 12px;
+ @include margin(0, 0, 0, 12px);
}
.range-md.range-has-pin {
@@ -97,9 +97,9 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
}
.range-md .range-bar {
+ @include position(($range-md-slider-height / 2), null, null, 0);
+
position: absolute;
- top: ($range-md-slider-height / 2);
- left: 0;
width: 100%;
height: $range-md-bar-height;
@@ -126,32 +126,28 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
}
.range-md .range-knob-handle {
+ @include position(($range-md-slider-height / 2), null, null, 0);
+ @include margin(-($range-md-hit-height / 2), null, null, -($range-md-hit-width / 2));
@include text-align(center);
position: absolute;
- top: ($range-md-slider-height / 2);
- left: 0%;
-
- margin-top: -($range-md-hit-height / 2);
- margin-left: -($range-md-hit-width / 2);
width: $range-md-hit-width;
height: $range-md-hit-height;
}
.range-md .range-knob {
- position: absolute;
+ @include position(($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2),
+ null, null, ($range-md-hit-width / 2) - ($range-md-knob-width / 2));
+ @include border-radius(50%);
- top: ($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2);
- left: ($range-md-hit-width / 2) - ($range-md-knob-width / 2);
+ position: absolute;
z-index: 2;
width: $range-md-knob-width;
height: $range-md-knob-height;
- border-radius: 50%;
-
background: $range-md-knob-background-color;
transform: scale(.67);
@@ -163,19 +159,18 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
}
.range-md .range-tick {
+ @include margin-horizontal(-($range-md-tick-width / 2), null);
+ @include border-radius($range-md-tick-border-radius);
+
position: absolute;
top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2);
z-index: 1;
- margin-left: ($range-md-tick-width / 2) * -1;
-
width: $range-md-tick-width;
height: $range-md-tick-height;
- border-radius: $range-md-tick-border-radius;
-
background: $range-md-tick-background-color;
pointer-events: none;
@@ -186,19 +181,17 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
}
.range-md .range-pin {
+ @include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal);
@include text-align(center);
+ @include border-radius(50%);
position: relative;
top: -20px;
display: inline-block;
- padding: $range-md-pin-padding-vertical $range-md-pin-padding-horizontal;
-
min-width: 28px;
height: 28px;
- border-radius: 50%;
-
font-size: $range-md-pin-font-size;
color: $range-md-pin-color;
@@ -209,17 +202,17 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
transition: transform 120ms ease, background-color 120ms ease;
&::before {
- position: absolute;
- top: 3px;
- left: 50%;
- z-index: -1;
+ @include position(3px, null, null, 50%);
+ @include border-radius(50%, 50%, 50%, 0);
+ @include margin-horizontal(-13px, null);
- margin-left: -13px;
+ position: absolute;
+
+ z-index: -1;
width: 26px;
height: 26px;
- border-radius: 50% 50% 50% 0;
background: $range-md-pin-background-color;
content: "";
diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss
index 0fbcd0dc2b..0ab71a1b0d 100644
--- a/src/components/range/range.wp.scss
+++ b/src/components/range/range.wp.scss
@@ -6,7 +6,7 @@
/// @prop - Padding top/bottom of the range
$range-wp-padding-vertical: 8px !default;
-/// @prop - Padding left/right of the range
+/// @prop - Padding start/end of the range
$range-wp-padding-horizontal: 8px !default;
/// @prop - Height of the range slider
@@ -63,24 +63,36 @@ $range-wp-pin-color: color-contrast($colors-wp, $range-w
/// @prop - Font size of the range pin
$range-wp-pin-font-size: 12px !default;
-/// @prop - Padding of the range pin
-$range-wp-pin-padding: 8px !default;
+// deprecated
+$range-wp-pin-padding: null !default;
+
+/// @prop - Padding top of the range pin
+$range-wp-pin-padding-top: 8px !default;
+
+/// @prop - Padding end of the range pin
+$range-wp-pin-padding-end: $range-wp-pin-padding-top !default;
+
+/// @prop - Padding bottom of the range pin
+$range-wp-pin-padding-bottom: $range-wp-pin-padding-top !default;
+
+/// @prop - Padding start of the range pin
+$range-wp-pin-padding-start: $range-wp-pin-padding-end !default;
.range-wp {
- padding: $range-wp-padding-vertical $range-wp-padding-horizontal;
+ @include padding($range-wp-padding-vertical, $range-wp-padding-horizontal);
}
.range-wp [range-left] {
- margin: 0 12px 0 0;
+ @include margin(0, 12px, 0, 0);
}
.range-wp [range-right] {
- margin: 0 0 0 12px;
+ @include margin(0, 0, 0, 12px);
}
.range-wp.range-has-pin {
- padding-top: $range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding;
+ padding-top: $range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding-top;
}
.range-wp .range-slider {
@@ -88,9 +100,9 @@ $range-wp-pin-padding: 8px !default;
}
.range-wp .range-bar {
+ @include position(($range-wp-slider-height / 2), null, null, 0);
+
position: absolute;
- top: ($range-wp-slider-height / 2);
- left: 0;
width: 100%;
height: $range-wp-bar-height;
@@ -117,45 +129,41 @@ $range-wp-pin-padding: 8px !default;
}
.range-wp .range-knob-handle {
+ @include position(($range-wp-slider-height / 2), null, null, 0);
+ @include margin(-($range-wp-hit-height / 2), null, null, -($range-wp-hit-width / 2));
@include text-align(center);
position: absolute;
- top: ($range-wp-slider-height / 2);
- left: 0%;
-
- margin-top: -($range-wp-hit-height / 2);
- margin-left: -($range-wp-hit-width / 2);
width: $range-wp-hit-width;
height: $range-wp-hit-height;
}
.range-wp .range-knob {
+ @include position(($range-wp-hit-height / 2) - ($range-wp-knob-height / 2) + ($range-wp-bar-height / 2),
+ null, null, ($range-wp-hit-width / 2) - ($range-wp-knob-width / 2));
+ @include border-radius($range-wp-knob-border-radius);
+
position: absolute;
- top: ($range-wp-hit-height / 2) - ($range-wp-knob-height / 2) + ($range-wp-bar-height / 2);
- left: ($range-wp-hit-width / 2) - ($range-wp-knob-width / 2);
width: $range-wp-knob-width;
height: $range-wp-knob-height;
- border-radius: $range-wp-knob-border-radius;
-
background: $range-wp-knob-background-color;
pointer-events: none;
}
.range-wp .range-tick {
+ @include margin-horizontal(-($range-wp-tick-width / 2), null);
+ @include border-radius($range-wp-tick-border-radius);
+
position: absolute;
top: ($range-wp-hit-height / 2) - ($range-wp-tick-height / 2) + ($range-wp-bar-height / 2);
- margin-left: ($range-wp-tick-width / 2) * -1;
-
width: $range-wp-tick-width;
height: $range-wp-tick-height;
- border-radius: $range-wp-tick-border-radius;
-
background: $range-wp-tick-background-color;
pointer-events: none;
@@ -167,17 +175,14 @@ $range-wp-pin-padding: 8px !default;
.range-wp .range-pin {
@include text-align(center);
+ @include border-radius(50px);
position: relative;
top: -24px;
display: inline-block;
- padding: $range-wp-pin-padding;
-
min-width: 28px;
- border-radius: 50px;
-
font-size: $range-wp-pin-font-size;
color: $range-wp-pin-color;
@@ -186,6 +191,10 @@ $range-wp-pin-padding: 8px !default;
transform: translate3d(0, 28px, 0) scale(.01);
transition: transform 120ms ease;
+
+ @include deprecated-variable(padding, $range-wp-pin-padding) {
+ @include padding($range-wp-pin-padding-top, $range-wp-pin-padding-end, $range-wp-pin-padding-bottom, $range-wp-pin-padding-start);
+ }
}
.range-wp .range-knob-pressed .range-pin {
diff --git a/src/components/refresher/refresher.scss b/src/components/refresher/refresher.scss
index f727f414f0..154f4f1559 100644
--- a/src/components/refresher/refresher.scss
+++ b/src/components/refresher/refresher.scss
@@ -23,10 +23,12 @@ $refresher-border-color: #ddd !default;
ion-refresher {
+ @include position(0, null, null, 0);
+
position: absolute;
- top: 0;
- left: 0;
+
z-index: $z-index-refresher;
+
display: none;
width: 100%;
diff --git a/src/components/scroll/scroll.scss b/src/components/scroll/scroll.scss
new file mode 100644
index 0000000000..69bca6d999
--- /dev/null
+++ b/src/components/scroll/scroll.scss
@@ -0,0 +1,32 @@
+@import "../../themes/ionic.globals";
+
+ion-scroll {
+ position: relative;
+ display: block;
+}
+
+ion-scroll.scroll-x .scroll-content {
+ overflow-x: auto;
+}
+
+ion-scroll.scroll-y .scroll-content {
+ overflow-y: auto;
+}
+
+ion-scroll[center] .scroll-content {
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+}
+
+ion-scroll .scroll-content {
+ @include position(0, 0, 0, 0);
+
+ position: absolute;
+
+ overflow-y: hidden;
+ overflow-x: hidden;
+ -webkit-overflow-scrolling: touch;
+ will-change: scroll-position;
+}
diff --git a/src/components/scroll/scroll.ts b/src/components/scroll/scroll.ts
index ff9d78d795..70625b4afe 100644
--- a/src/components/scroll/scroll.ts
+++ b/src/components/scroll/scroll.ts
@@ -235,6 +235,9 @@ export class Scroll implements IScroll {
}
}
+ constructor() { }
+
+
/**
* DOM WRITE
*/
diff --git a/src/components/scroll/test/basic/main.html b/src/components/scroll/test/basic/main.html
new file mode 100644
index 0000000000..a0c5a4f85e
--- /dev/null
+++ b/src/components/scroll/test/basic/main.html
@@ -0,0 +1,66 @@
+
+
+
+ Scroll
+
+
+
+
+
+
+
+ Horizontal
+
+
+
+
+ Vertical
+
+
+
+
+ Both
+
+
+
+
+
+
+
+
diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss
index a84695474f..a0babeacaa 100644
--- a/src/components/searchbar/searchbar.ios.scss
+++ b/src/components/searchbar/searchbar.ios.scss
@@ -6,7 +6,7 @@
/// @prop - Padding top/bottom of the searchbar
$searchbar-ios-padding-vertical: 0 !default;
-/// @prop - Padding left/right of the searchbar
+/// @prop - Padding start/end of the searchbar
$searchbar-ios-padding-horizontal: 8px !default;
/// @prop - Background of the searchbar
@@ -62,7 +62,7 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
// -----------------------------------------
.searchbar-ios {
- padding: $searchbar-ios-padding-vertical $searchbar-ios-padding-horizontal;
+ @include padding($searchbar-ios-padding-vertical, $searchbar-ios-padding-horizontal);
min-height: $searchbar-ios-min-height;
@@ -85,13 +85,11 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
// -----------------------------------------
.searchbar-ios .searchbar-search-icon {
+ @include position(9px, null, null, 9px);
@include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color);
+ @include margin-horizontal(calc(50% - 60px), null);
position: absolute;
- top: 9px;
- left: 9px;
-
- margin-left: calc(50% - 60px);
width: $searchbar-ios-input-search-icon-size + 1;
height: $searchbar-ios-input-search-icon-size + 1;
@@ -106,12 +104,11 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
.searchbar-ios .searchbar-input {
@include placeholder($searchbar-ios-input-placeholder-color);
-
- padding: 0 28px;
+ @include padding(0, 28px);
+ @include border-radius(5px);
height: $searchbar-ios-input-height;
- border-radius: 5px;
font-size: 1.4rem;
font-weight: 400;
@@ -124,11 +121,10 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
// -----------------------------------------
.searchbar-ios .searchbar-clear-icon {
+ @include position(0, 0, null, null);
@include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color);
position: absolute;
- top: 0;
- right: 0;
width: 30px;
height: 100%;
@@ -143,14 +139,13 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
// -----------------------------------------
.searchbar-ios .searchbar-ios-cancel {
+ @include padding(0, 8px, 0, 0);
+ @include margin-horizontal(0, null);
+
display: none;
flex-shrink: 0;
- margin-left: 0;
- padding: 0;
- padding-left: 8px;
-
height: 30px;
cursor: pointer;
@@ -160,11 +155,11 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
// -----------------------------------------
.searchbar-ios.searchbar-left-aligned .searchbar-search-icon {
- margin-left: 0;
+ @include margin-horizontal(0, null);
}
.searchbar-ios.searchbar-left-aligned .searchbar-input {
- padding-left: 30px;
+ @include padding-horizontal(30px, null);
}
@@ -189,11 +184,11 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
}
.toolbar .searchbar-ios .searchbar-ios-cancel {
- padding: 0;
+ @include padding(0);
}
.toolbar .searchbar-ios.searchbar-has-focus .searchbar-ios-cancel {
- padding-left: 8px;
+ @include padding-horizontal(8px, null);
}
@@ -258,7 +253,7 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
}
.searchbar-animated .searchbar-ios-cancel {
- margin-right: -100%;
+ @include margin-horizontal(null, -100%);
opacity: 0;
transform: translate3d(0, 0, 0);
diff --git a/src/components/searchbar/searchbar.md.scss b/src/components/searchbar/searchbar.md.scss
index b697874830..cf596908a1 100644
--- a/src/components/searchbar/searchbar.md.scss
+++ b/src/components/searchbar/searchbar.md.scss
@@ -3,8 +3,20 @@
// Material Design Searchbar
// --------------------------------------------------
-/// @prop - Padding of the searchbar
-$searchbar-md-padding: 8px !default;
+// deprecated
+$searchbar-md-padding: null !default;
+
+/// @prop - Padding top of the searchbar
+$searchbar-md-padding-top: 8px !default;
+
+/// @prop - Padding end of the searchbar
+$searchbar-md-padding-end: $searchbar-md-padding-top !default;
+
+/// @prop - Padding bottom of the searchbar
+$searchbar-md-padding-bottom: $searchbar-md-padding-top !default;
+
+/// @prop - Padding start of the searchbar
+$searchbar-md-padding-start: $searchbar-md-padding-end !default;
/// @prop - Background of the searchbar
$searchbar-md-background-color: inherit !default;
@@ -53,9 +65,11 @@ $searchbar-md-input-clear-icon-size: 22px !default;
// -----------------------------------------
.searchbar-md {
- padding: $searchbar-md-padding;
-
background: $searchbar-md-background-color;
+
+ @include deprecated-variable(padding, $searchbar-md-padding) {
+ @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start);
+ }
}
@@ -63,11 +77,9 @@ $searchbar-md-input-clear-icon-size: 22px !default;
// -----------------------------------------
.searchbar-md .searchbar-search-icon {
+ @include position(11px, null, null, 16px);
@include svg-background-image($searchbar-md-input-search-icon-svg);
- top: 11px;
- left: 16px;
-
width: $searchbar-md-input-search-icon-size + 1;
height: $searchbar-md-input-search-icon-size + 1;
}
@@ -77,11 +89,10 @@ $searchbar-md-input-clear-icon-size: 22px !default;
// -----------------------------------------
.searchbar-md .searchbar-md-cancel {
- top: 0;
- left: 10px;
- display: none;
+ @include position(0, null, null, 10px);
+ @include margin(0);
- margin: 0;
+ display: none;
width: $searchbar-md-input-search-icon-size + 1;
height: 100%;
@@ -109,13 +120,11 @@ $searchbar-md-input-clear-icon-size: 22px !default;
.searchbar-md .searchbar-input {
@include placeholder($searchbar-md-input-placeholder-color);
-
- padding: 6px 55px;
+ @include padding(6px, 55px);
+ @include border-radius($searchbar-md-input-border-radius);
height: $searchbar-md-input-height;
- border-radius: $searchbar-md-input-border-radius;
-
font-size: 1.6rem;
font-weight: 400;
@@ -132,13 +141,11 @@ $searchbar-md-input-clear-icon-size: 22px !default;
// -----------------------------------------
.searchbar-md .searchbar-clear-icon {
+ @include position(0, 13px, null, null);
@include svg-background-image($searchbar-md-input-clear-icon-svg);
+ @include padding(0);
position: absolute;
- top: 0;
- right: 13px;
-
- padding: 0;
width: $searchbar-md-input-clear-icon-size;
height: 100%;
@@ -169,11 +176,11 @@ $searchbar-md-input-clear-icon-size: 22px !default;
// -----------------------------------------
.toolbar .searchbar-md {
- padding: 3px;
+ @include padding(3px);
}
.toolbar .searchbar-md .searchbar-md-cancel {
- left: 14px;
+ @include position-horizontal(14px, null);
}
diff --git a/src/components/searchbar/searchbar.scss b/src/components/searchbar/searchbar.scss
index 0a67f402dd..9e37d8eb21 100644
--- a/src/components/searchbar/searchbar.scss
+++ b/src/components/searchbar/searchbar.scss
@@ -37,10 +37,10 @@ ion-searchbar {
}
.searchbar-clear-icon {
- display: none;
+ @include margin(0);
+ @include padding(0);
- margin: 0;
- padding: 0;
+ display: none;
min-height: 0;
}
diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts
index 91b76d24e9..5d38d72f21 100644
--- a/src/components/searchbar/searchbar.ts
+++ b/src/components/searchbar/searchbar.ts
@@ -34,7 +34,7 @@ import { Platform } from '../../platform/platform';
'' +
'' +
'' +
- ' {
var textWidth = tempSpan.offsetWidth;
doc.body.removeChild(tempSpan);
- // Set the input padding left
+ // Set the input padding start
var inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
inputEle.style.paddingLeft = inputLeft;
- // Set the icon margin left
+ // Set the icon margin start
var iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
iconEle.style.marginLeft = iconLeft;
}
@@ -283,7 +283,7 @@ export class Searchbar extends BaseInput {
* @hidden
* Sets the Searchbar to focused and active on input focus.
*/
- inputFocused(ev: UIEvent) {
+ inputFocused() {
this._isActive = true;
this._fireFocus();
this.positionElements();
@@ -294,7 +294,7 @@ export class Searchbar extends BaseInput {
* Sets the Searchbar to not focused and checks if it should align left
* based on whether there is a value in the searchbar or not.
*/
- inputBlurred(ev: UIEvent) {
+ inputBlurred() {
// _shouldBlur determines if it should blur
// if we are clearing the input we still want to stay focused in the input
if (this._shouldBlur === false) {
diff --git a/src/components/searchbar/searchbar.wp.scss b/src/components/searchbar/searchbar.wp.scss
index 9b52bdad42..516b71d08d 100644
--- a/src/components/searchbar/searchbar.wp.scss
+++ b/src/components/searchbar/searchbar.wp.scss
@@ -3,8 +3,20 @@
// Windows Searchbar
// --------------------------------------------------
-/// @prop - Padding of the searchbar
-$searchbar-wp-padding: 8px !default;
+// deprecated
+$searchbar-wp-padding: null !default;
+
+/// @prop - Padding top of the searchbar
+$searchbar-wp-padding-top: 8px !default;
+
+/// @prop - Padding end of the searchbar
+$searchbar-wp-padding-end: $searchbar-wp-padding-top !default;
+
+/// @prop - Padding bottom of the searchbar
+$searchbar-wp-padding-bottom: $searchbar-wp-padding-top !default;
+
+/// @prop - Padding start of the searchbar
+$searchbar-wp-padding-start: $searchbar-wp-padding-end !default;
/// @prop - Background of the searchbar
$searchbar-wp-background-color: transparent !default;
@@ -30,7 +42,7 @@ $searchbar-wp-input-search-icon-size: 20px !default;
/// @prop - Padding top/bottom of the searchbar input
$searchbar-wp-input-padding-vertical: 0 !default;
-/// @prop - Padding left/right of the searchbar input
+/// @prop - Padding start/end of the searchbar input
$searchbar-wp-input-padding-horizontal: 8px !default;
/// @prop - Height of the searchbar input
@@ -71,9 +83,11 @@ $searchbar-wp-input-clear-icon-size: 22px !default;
// -----------------------------------------
.searchbar-wp {
- padding: $searchbar-wp-padding;
-
background: $searchbar-wp-background-color;
+
+ @include deprecated-variable(padding, $searchbar-wp-padding) {
+ @include padding($searchbar-wp-padding-top, $searchbar-wp-padding-end, $searchbar-wp-padding-bottom, $searchbar-wp-padding-start);
+ }
}
.searchbar-wp .searchbar-input-container {
@@ -84,11 +98,10 @@ $searchbar-wp-input-clear-icon-size: 22px !default;
// -----------------------------------------
.searchbar-wp .searchbar-search-icon {
+ @include position(5px, $searchbar-wp-input-padding-horizontal, null, null);
@include svg-background-image($searchbar-wp-input-search-icon-svg);
position: absolute;
- top: 5px;
- right: $searchbar-wp-input-padding-horizontal;
width: $searchbar-wp-input-search-icon-size + 1;
height: $searchbar-wp-input-search-icon-size + 1;
@@ -107,12 +120,11 @@ $searchbar-wp-input-clear-icon-size: 22px !default;
.searchbar-wp .searchbar-input {
@include placeholder($searchbar-wp-input-placeholder-color);
-
- padding: $searchbar-wp-input-padding-vertical $searchbar-wp-input-padding-horizontal;
+ @include padding($searchbar-wp-input-padding-vertical, $searchbar-wp-input-padding-horizontal);
+ @include border-radius($searchbar-wp-input-border-radius);
height: $searchbar-wp-input-height;
- border-radius: $searchbar-wp-input-border-radius;
font-size: $searchbar-wp-input-font-size;
font-weight: $searchbar-wp-input-font-weight;
@@ -128,13 +140,11 @@ $searchbar-wp-input-clear-icon-size: 22px !default;
// -----------------------------------------
.searchbar-wp .searchbar-clear-icon {
+ @include position(0, $searchbar-wp-input-padding-horizontal, null, null);
@include svg-background-image($searchbar-wp-input-clear-icon-svg);
+ @include padding(0);
position: absolute;
- top: 0;
- right: $searchbar-wp-input-padding-horizontal;
-
- padding: 0;
width: $searchbar-wp-input-clear-icon-size;
height: 100%;
@@ -184,7 +194,7 @@ $searchbar-wp-input-clear-icon-size: 22px !default;
// -----------------------------------------
.toolbar .searchbar-wp {
- padding: 2px;
+ @include padding(2px);
}
diff --git a/src/components/searchbar/test/nav/pages/search-page/search-page.ts b/src/components/searchbar/test/nav/pages/search-page/search-page.ts
index 67e7aef408..54049475ea 100644
--- a/src/components/searchbar/test/nav/pages/search-page/search-page.ts
+++ b/src/components/searchbar/test/nav/pages/search-page/search-page.ts
@@ -68,12 +68,7 @@ export class SearchPage {
return;
}
- this.items = this.items.filter((v) => {
- if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
- return true;
- }
- return false;
- });
+ this.items = this.items.filter((v) => v.toLowerCase().indexOf(q.toLowerCase()) > -1);
}
openModal() {
diff --git a/src/components/segment/segment-button.ts b/src/components/segment/segment-button.ts
index 137992b69d..0cb1f11654 100644
--- a/src/components/segment/segment-button.ts
+++ b/src/components/segment/segment-button.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, HostListener, Input, Output, Renderer, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';
import { isPresent, isTrueProperty } from '../../util/util';
@@ -80,7 +80,7 @@ export class SegmentButton {
this._disabled = isTrueProperty(val);
}
- constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+ constructor() {}
/**
* @hidden
diff --git a/src/components/segment/segment.ios.scss b/src/components/segment/segment.ios.scss
index 7ac64d91c9..687bfb7c5b 100644
--- a/src/components/segment/segment.ios.scss
+++ b/src/components/segment/segment.ios.scss
@@ -113,9 +113,8 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
}
&:first-of-type {
- margin-right: 0;
-
- border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
+ @include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
+ @include margin-horizontal(null, 0);
}
&:not(:first-of-type) {
@@ -123,26 +122,24 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
}
&:last-of-type {
- margin-left: 0;
+ @include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
+ @include margin-horizontal(0, null);
border-left-width: 0;
- border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
}
}
[dir="rtl"] .segment-ios .segment-button {
&:first-of-type {
- margin-left: 0;
+ @include margin-horizontal(0, null);
border-left-width: 0;
- border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
}
&:last-of-type {
- margin-right: 0;
+ @include margin-horizontal(null, 0);
border-left-width: $segment-button-ios-border-width;
- border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
}
}
@@ -164,11 +161,9 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
// --------------------------------------------------
.toolbar-ios .segment-ios {
+ @include position(0, 0, 0, 0);
+
position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
}
.toolbar-ios .segment-button {
diff --git a/src/components/segment/segment.md.scss b/src/components/segment/segment.md.scss
index 94ca648d18..4db2e65d6c 100644
--- a/src/components/segment/segment.md.scss
+++ b/src/components/segment/segment.md.scss
@@ -24,8 +24,20 @@ $segment-button-md-opacity-activated: 1 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-md-opacity-disabled: .3 !default;
-/// @prop - Padding of the segment button
-$segment-button-md-padding: 0 6px !default;
+// deprecated
+$segment-button-md-padding: null !default;
+
+/// @prop - Padding top of the segment button
+$segment-button-md-padding-top: 0 !default;
+
+/// @prop - Padding end of the segment button
+$segment-button-md-padding-end: 6px !default;
+
+/// @prop - Padding bottom of the segment button
+$segment-button-md-padding-bottom: $segment-button-md-padding-top !default;
+
+/// @prop - Padding start of the segment button
+$segment-button-md-padding-start: $segment-button-md-padding-end !default;
/// @prop - Height of the segment button
$segment-button-md-height: 4.2rem !default;
@@ -46,8 +58,6 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
.segment-md .segment-button {
flex: 1;
- padding: $segment-button-md-padding;
-
width: 0;
height: $segment-button-md-height;
@@ -65,6 +75,10 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
opacity: $segment-button-md-opacity;
transition: 100ms all linear;
+ @include deprecated-variable(padding, $segment-button-md-padding) {
+ @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
+ }
+
ion-icon {
font-size: $segment-button-md-icon-size;
line-height: $segment-button-md-icon-line-height;
@@ -87,7 +101,7 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
.toolbar {
.segment-md {
- margin: 0 auto;
+ @include margin(0, auto);
}
.segment-md .segment-button.activated,
diff --git a/src/components/segment/segment.scss b/src/components/segment/segment.scss
index 67b6e69e5a..2eb7452ad6 100644
--- a/src/components/segment/segment.scss
+++ b/src/components/segment/segment.scss
@@ -15,15 +15,13 @@ ion-segment {
}
.segment-button {
+ @include margin-horizontal(0);
@include text-align(center);
position: relative;
display: block;
overflow: hidden;
- margin-right: 0;
- margin-left: 0;
-
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
diff --git a/src/components/segment/segment.wp.scss b/src/components/segment/segment.wp.scss
index 9d4a8c4c44..c25859c9da 100644
--- a/src/components/segment/segment.wp.scss
+++ b/src/components/segment/segment.wp.scss
@@ -9,8 +9,20 @@ $segment-button-wp-background-color: transparent !default;
/// @prop - Text color of the activated segment button
$segment-button-wp-text-color-activated: $toolbar-wp-text-color !default;
-/// @prop - Padding of the segment button
-$segment-button-wp-padding: 0 6px !default;
+// deprecated
+$segment-button-wp-padding: null !default;
+
+/// @prop - Padding top of the segment button
+$segment-button-wp-padding-top: 0 !default;
+
+/// @prop - Padding end of the segment button
+$segment-button-wp-padding-end: 6px !default;
+
+/// @prop - Padding bottom of the segment button
+$segment-button-wp-padding-bottom: $segment-button-wp-padding-top !default;
+
+/// @prop - Padding start of the segment button
+$segment-button-wp-padding-start: $segment-button-wp-padding-end !default;
/// @prop - Height of the segment button
$segment-button-wp-height: 4rem !default;
@@ -51,8 +63,6 @@ $segment-button-wp-buttons-justify-content: flex-start !default;
}
.segment-wp .segment-button {
- padding: $segment-button-wp-padding;
-
height: $segment-button-wp-height;
font-size: $segment-button-wp-font-size;
@@ -65,6 +75,10 @@ $segment-button-wp-buttons-justify-content: flex-start !default;
background-color: $segment-button-wp-background-color;
opacity: $segment-button-wp-opacity;
+ @include deprecated-variable(padding, $segment-button-wp-padding) {
+ @include padding($segment-button-wp-padding-top, $segment-button-wp-padding-end, $segment-button-wp-padding-bottom, $segment-button-wp-padding-start);
+ }
+
&.segment-activated {
opacity: $segment-button-wp-opacity-activated;
}
@@ -85,8 +99,9 @@ $segment-button-wp-buttons-justify-content: flex-start !default;
.toolbar {
.segment-wp {
- margin: 0 auto;
+ @include margin(0, auto);
}
+
}
diff --git a/src/components/select/select-popover-component.ts b/src/components/select/select-popover-component.ts
index be8a1803f7..3bbe87f38a 100644
--- a/src/components/select/select-popover-component.ts
+++ b/src/components/select/select-popover-component.ts
@@ -15,7 +15,7 @@ export interface SelectPopoverOption {
@Component({
template: `
-
+
{{option.text}}
diff --git a/src/components/select/select.ios.scss b/src/components/select/select.ios.scss
index a28b960f00..893b71b36e 100644
--- a/src/components/select/select.ios.scss
+++ b/src/components/select/select.ios.scss
@@ -6,14 +6,18 @@
/// @prop - Padding top of the select
$select-ios-padding-top: $item-ios-padding-top !default;
-/// @prop - Padding right of the select
-$select-ios-padding-right: ($item-ios-padding-right / 2) !default;
+// deprecated
+$select-ios-padding-right: ($item-ios-padding-end / 2) !default;
+/// @prop - Padding end of the select
+$select-ios-padding-end: $select-ios-padding-right;
/// @prop - Padding bottom of the select
$select-ios-padding-bottom: $item-ios-padding-bottom !default;
-/// @prop - Padding left of the select
-$select-ios-padding-left: $item-ios-padding-left !default;
+// deprecated
+$select-ios-padding-left: $item-ios-padding-start !default;
+/// @prop - Padding start of the select
+$select-ios-padding-start: $select-ios-padding-left;
/// @prop - Color of the select icon
$select-ios-icon-color: #999 !default;
@@ -23,7 +27,7 @@ $select-ios-placeholder-color: $select-ios-icon-color !default;
.select-ios {
- padding: $select-ios-padding-top $select-ios-padding-right $select-ios-padding-bottom $select-ios-padding-left;
+ @include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start);
}
.select-ios .select-placeholder {
@@ -38,9 +42,9 @@ $select-ios-placeholder-color: $select-ios-icon-color !default;
}
.select-ios .select-icon .select-icon-inner {
+ @include position(50%, null, null, 5px);
+
position: absolute;
- top: 50%;
- left: 5px;
margin-top: -2px;
diff --git a/src/components/select/select.md.scss b/src/components/select/select.md.scss
index 1a69693f3f..39e176a123 100644
--- a/src/components/select/select.md.scss
+++ b/src/components/select/select.md.scss
@@ -6,14 +6,18 @@
/// @prop - Padding top of the select
$select-md-padding-top: $item-md-padding-top !default;
-/// @prop - Padding right of the select
-$select-md-padding-right: ($item-md-padding-right / 2) !default;
+// deprecated
+$select-md-padding-right: ($item-md-padding-end / 2) !default;
+/// @prop - Padding end of the select
+$select-md-padding-end: $select-md-padding-right;
/// @prop - Padding bottom of the select
$select-md-padding-bottom: $item-md-padding-bottom !default;
-/// @prop - Padding left of the select
-$select-md-padding-left: $item-md-padding-left !default;
+// deprecated
+$select-md-padding-left: $item-md-padding-start !default;
+/// @prop - Padding start of the select
+$select-md-padding-start: $select-md-padding-left;
/// @prop - Color of the select icon
$select-md-icon-color: #999 !default;
@@ -23,7 +27,7 @@ $select-md-placeholder-color: $select-md-icon-color !default;
.select-md {
- padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left;
+ @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
}
.select-md .select-placeholder {
@@ -31,7 +35,7 @@ $select-md-placeholder-color: $select-md-icon-color !default;
}
.select-md .item-select ion-label {
- margin-left: 0;
+ @include margin-horizontal(0, null);
}
.select-md .select-icon {
@@ -42,9 +46,9 @@ $select-md-placeholder-color: $select-md-icon-color !default;
}
.select-md .select-icon .select-icon-inner {
+ @include position(50%, null, null, 5px);
+
position: absolute;
- top: 50%;
- left: 5px;
margin-top: -3px;
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 74f13c087f..29eca2c226 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -6,14 +6,18 @@
/// @prop - Margin top of the select popover list
$select-popover-list-margin-top: -1px !default;
-/// @prop - Margin right of the select popover list
+// deprecated
$select-popover-list-margin-right: 0 !default;
+/// @prop - Margin end of the select popover list
+$select-popover-list-margin-end: $select-popover-list-margin-right !default;
/// @prop - Margin bottom of the select popover list
$select-popover-list-margin-bottom: -1px !default;
-/// @prop - Margin left of the select popover list
+// deprecated
$select-popover-list-margin-left: 0 !default;
+/// @prop - Margin start of the select popover list
+$select-popover-list-margin-start: $select-popover-list-margin-left !default;
ion-select {
@@ -47,5 +51,5 @@ ion-select {
}
.select-popover ion-list {
- margin: $select-popover-list-margin-top $select-popover-list-margin-right $select-popover-list-margin-bottom $select-popover-list-margin-left;
+ @include margin($select-popover-list-margin-top, $select-popover-list-margin-end, $select-popover-list-margin-bottom, $select-popover-list-margin-start);
}
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index a7648c0f7a..2ec51d9165 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -11,7 +11,6 @@ import { Form } from '../../util/form';
import { BaseInput } from '../../util/base-input';
import { isCheckedProperty, isTrueProperty, deepCopy, deepEqual, assert } from '../../util/util';
import { Item } from '../item/item';
-import { NavController } from '../../navigation/nav-controller';
import { Option } from '../option/option';
import { SelectPopover, SelectPopoverOption } from './select-popover-component';
@@ -200,7 +199,6 @@ export class Select extends BaseInput implements OnDestroy {
elementRef: ElementRef,
renderer: Renderer,
@Optional() item: Item,
- @Optional() private _nav: NavController,
public deepLinker: DeepLinker
) {
super(config, elementRef, renderer, 'select', [], form, item, null);
@@ -370,7 +368,7 @@ export class Select extends BaseInput implements OnDestroy {
this._fireFocus();
- overlay.onDidDismiss((value: any) => {
+ overlay.onDidDismiss(() => {
this._fireBlur();
this._overlay = undefined;
});
@@ -381,7 +379,7 @@ export class Select extends BaseInput implements OnDestroy {
/**
* Close the select interface.
*/
- close() {
+ close(): Promise {
if (!this._overlay || !this.isFocus()) {
return;
}
diff --git a/src/components/select/select.wp.scss b/src/components/select/select.wp.scss
index 521e10ed05..7224561ceb 100644
--- a/src/components/select/select.wp.scss
+++ b/src/components/select/select.wp.scss
@@ -6,20 +6,24 @@
/// @prop - Padding top and bottom of the select
$select-wp-padding-vertical: 0 !default;
-/// @prop - Padding left and right of the select
-$select-wp-padding-horizontal: ($item-wp-padding-right / 2) !default;
+/// @prop - Padding start/end of the select
+$select-wp-padding-horizontal: ($item-wp-padding-end / 2) !default;
/// @prop - Margin top of the select
$select-wp-margin-top: $item-wp-padding-top !default;
-/// @prop - Margin right of the select
-$select-wp-margin-right: ($item-wp-padding-right / 2) !default;
+// deprecated
+$select-wp-margin-right: ($item-wp-padding-end / 2) !default;
+/// @prop - Margin end of the select
+$select-wp-margin-end: $select-wp-margin-right !default;
/// @prop - Margin bottom of the select
$select-wp-margin-bottom: $item-wp-padding-bottom !default;
-/// @prop - Margin left of the select
-$select-wp-margin-left: ($item-wp-padding-left / 2) !default;
+// deprecated
+$select-wp-margin-left: ($item-wp-padding-start / 2) !default;
+/// @prop - Margin start of the select
+$select-wp-margin-start: $select-wp-margin-left !default;
/// @prop - Border width of the select
$select-wp-border-width: 2px !default;
@@ -41,10 +45,10 @@ $select-wp-placeholder-color: $select-wp-icon-color !default;
.select-wp {
- flex: 1;
+ @include margin($select-wp-margin-top, $select-wp-margin-end, $select-wp-margin-bottom, $select-wp-margin-start);
+ @include padding($select-wp-padding-vertical, $select-wp-padding-horizontal);
- margin: $select-wp-margin-top $select-wp-margin-right $select-wp-margin-bottom $select-wp-margin-left;
- padding: $select-wp-padding-vertical $select-wp-padding-horizontal;
+ flex: 1;
max-width: 100%;
@@ -57,7 +61,7 @@ $select-wp-placeholder-color: $select-wp-icon-color !default;
}
.item-wp.item-select ion-label {
- margin-left: 0;
+ @include margin-horizontal(0, null);
}
.select-wp .select-icon {
@@ -70,9 +74,10 @@ $select-wp-placeholder-color: $select-wp-icon-color !default;
}
.select-wp .select-icon .select-icon-inner {
+ @include position(3px, null, null, 5px);
+
position: absolute;
- top: 3px;
- left: 5px;
+
display: block;
width: ($select-wp-icon-width / 2);
diff --git a/src/components/slides/test/intro/main.html b/src/components/slides/test/intro/main.html
index 707971027b..3b1e659056 100644
--- a/src/components/slides/test/intro/main.html
+++ b/src/components/slides/test/intro/main.html
@@ -62,7 +62,7 @@
}
#logo {
- margin: 30px 0px;
+ margin: 30px 0;
}
#list {
@@ -77,7 +77,7 @@
text-align: left;
text-align: start;
list-style: decimal;
- margin: 10px 0px;
+ margin: 10px 0;
}
.button.ng-hide{
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index 964683ad24..9601e289c9 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -12,9 +12,9 @@ ion-spinner {
}
ion-spinner svg {
+ @include position(0, null, null, 0);
+
position: absolute;
- top: 0;
- left: 0;
width: 100%;
height: 100%;
diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts
index a86339c7c7..d43b42a9a8 100644
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@@ -283,7 +283,7 @@ const SPINNERS: any = {
crescent: {
dur: 750,
circles: 1,
- fn: function (dur: number) {
+ fn: function () {
return {
r: 26,
style: {}
@@ -294,7 +294,7 @@ const SPINNERS: any = {
dots: {
dur: 750,
circles: 3,
- fn: function (dur: number, index: number, total: number) {
+ fn: function (dur: number, index: number) {
const animationDelay = -(110 * index) + 'ms';
return {
r: 6,
diff --git a/src/components/split-pane/split-pane.scss b/src/components/split-pane/split-pane.scss
index 0f8f17b9ae..7054687d31 100644
--- a/src/components/split-pane/split-pane.scss
+++ b/src/components/split-pane/split-pane.scss
@@ -8,11 +8,9 @@ $split-pane-side-min-width: 270px !default;
$split-pane-side-max-width: 28% !default;
.split-pane {
+ @include position(0, 0, 0, 0);
+
position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
display: flex;
@@ -32,12 +30,11 @@ $split-pane-side-max-width: 28% !default;
.split-pane-visible >.split-pane-side,
.split-pane-visible >.split-pane-main {
+ @include position(0, 0, 0, 0);
+
// scss-lint:disable ImportantRule
position: relative;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
+
z-index: 0;
flex: 1;
@@ -65,10 +62,9 @@ $split-pane-side-max-width: 28% !default;
.split-pane-visible >ion-menu.menu-enabled {
>.menu-inner {
- // scss-lint:disable ImportantRule
- right: 0;
- left: 0;
+ @include position-horizontal(0, 0);
+ // scss-lint:disable ImportantRule
width: auto;
box-shadow: none !important;
diff --git a/src/components/tabs/tabs.ios.scss b/src/components/tabs/tabs.ios.scss
index b44d90e033..9408b72ec7 100644
--- a/src/components/tabs/tabs.ios.scss
+++ b/src/components/tabs/tabs.ios.scss
@@ -6,8 +6,20 @@
/// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
$tabs-ios-border: $hairlines-width solid $tabs-ios-border-color !default;
-/// @prop - Padding on the tab button
-$tabs-ios-tab-padding: 0 2px !default;
+// deprecated
+$tabs-ios-tab-padding: null !default;
+
+/// @prop - Padding top on the tab button
+$tabs-ios-tab-padding-top: 0 !default;
+
+/// @prop - Padding end on the tab button
+$tabs-ios-tab-padding-end: 2px !default;
+
+/// @prop - Padding bottom on the tab button
+$tabs-ios-tab-padding-bottom: $tabs-ios-tab-padding-top !default;
+
+/// @prop - Padding start on the tab button
+$tabs-ios-tab-padding-start: $tabs-ios-tab-padding-end !default;
/// @prop - Max width of the tab button
$tabs-ios-tab-max-width: 240px !default;
@@ -47,13 +59,15 @@ $tabs-ios-tab-icon-size: 30px !default;
}
.tabs-ios .tab-button {
- padding: $tabs-ios-tab-padding;
-
max-width: $tabs-ios-tab-max-width;
min-height: $tabs-ios-tab-min-height;
font-size: $tabs-ios-tab-font-size;
color: $tabs-ios-tab-text-color;
+
+ @include deprecated-variable(padding, $tabs-ios-tab-padding) {
+ @include padding($tabs-ios-tab-padding-top, $tabs-ios-tab-padding-end, $tabs-ios-tab-padding-bottom, $tabs-ios-tab-padding-start);
+ }
}
.tabs-ios .tab-button:hover:not(.disable-hover),
@@ -113,7 +127,7 @@ $tabs-ios-tab-icon-size: 30px !default;
.tabs-ios[tabsLayout=icon-hide] .tab-button .tab-button-text,
.tabs-ios .tab-button.has-title-only .tab-button-text {
- margin: 2px 0;
+ @include margin(2px, 0);
font-size: 1.4rem;
line-height: 1.1;
diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss
index dc3ffe0776..e77b5b9397 100644
--- a/src/components/tabs/tabs.md.scss
+++ b/src/components/tabs/tabs.md.scss
@@ -3,8 +3,20 @@
// Material Design Tabs
// --------------------------------------------------
-/// @prop - Padding on the tab button
-$tabs-md-tab-padding: 0 !default;
+// deprecated
+$tabs-md-tab-padding: null !default;
+
+/// @prop - Padding top on the tab button
+$tabs-md-tab-padding-top: 0 !default;
+
+/// @prop - Padding end on the tab button
+$tabs-md-tab-padding-end: $tabs-md-tab-padding-top !default;
+
+/// @prop - Padding bottom on the tab button
+$tabs-md-tab-padding-bottom: $tabs-md-tab-padding-top !default;
+
+/// @prop - Padding start on the tab button
+$tabs-md-tab-padding-start: $tabs-md-tab-padding-end !default;
/// @prop - Minimum height of the tab button
$tabs-md-tab-min-height: 5.6rem !default;
@@ -30,14 +42,38 @@ $tabs-md-tab-icon-color: rgba($tabs-md-tab-color-inactive,
/// @prop - Icon color of the active tab button
$tabs-md-tab-icon-color-active: $tabs-md-tab-color-active !default;
-/// @prop - Padding of the active tab button
-$tabs-md-tab-padding-active: 0 !default;
+// deprecated
+$tabs-md-tab-padding-active: null !default;
+
+/// @prop - Padding top of the active tab button
+$tabs-md-tab-padding-active-top: 0 !default;
+
+/// @prop - Padding end of the active tab button
+$tabs-md-tab-padding-active-end: $tabs-md-tab-padding-active-top !default;
+
+/// @prop - Padding bottom of the active tab button
+$tabs-md-tab-padding-active-bottom: $tabs-md-tab-padding-active-top !default;
+
+/// @prop - Padding start of the active tab button
+$tabs-md-tab-padding-active-start: $tabs-md-tab-padding-active-end !default;
/// @prop - Font size of the active tab button text
$tabs-md-tab-font-size-active: 1.4rem !default;
-/// @prop - Margin on the tab button text
-$tabs-md-tab-text-margin: 0 !default;
+// deprecated
+$tabs-md-tab-text-margin: null !default;
+
+/// @prop - Margin top on the tab button text
+$tabs-md-tab-text-margin-top: 0 !default;
+
+/// @prop - Margin end on the tab button text
+$tabs-md-tab-text-margin-end: $tabs-md-tab-text-margin-top !default;
+
+/// @prop - Margin bottom on the tab button text
+$tabs-md-tab-text-margin-bottom: $tabs-md-tab-text-margin-top !default;
+
+/// @prop - Margin start on the tab button text
+$tabs-md-tab-text-margin-start: $tabs-md-tab-text-margin-end !default;
/// @prop - Capitalization of the tab button text
$tabs-md-tab-text-capitalization: none !default;
@@ -82,18 +118,22 @@ $tabs-md-tab-icon-size: 2.4rem !default;
// --------------------------------------------------
.tabs-md .tab-button {
- padding: $tabs-md-tab-padding;
-
min-height: $tabs-md-tab-min-height;
font-weight: $tabs-md-tab-font-weight;
color: $tabs-md-tab-text-color;
+
+ @include deprecated-variable(padding, $tabs-md-tab-padding) {
+ @include padding($tabs-md-tab-padding-top, $tabs-md-tab-padding-end, $tabs-md-tab-padding-bottom, $tabs-md-tab-padding-start);
+ }
}
.tabs-md .tab-button[aria-selected=true] {
- padding: $tabs-md-tab-padding-active;
-
color: $tabs-md-tab-text-color-active;
+
+ @include deprecated-variable(padding, $tabs-md-tab-padding-active) {
+ @include padding($tabs-md-tab-padding-active-top, $tabs-md-tab-padding-active-end, $tabs-md-tab-padding-active-bottom, $tabs-md-tab-padding-active-start);
+ }
}
@@ -101,13 +141,15 @@ $tabs-md-tab-icon-size: 2.4rem !default;
// --------------------------------------------------
.tabs-md .tab-button-text {
- margin: $tabs-md-tab-text-margin;
-
font-size: $tabs-md-tab-font-size;
text-transform: $tabs-md-tab-text-capitalization;
transform-origin: $tabs-md-tab-text-transform-origin;
transition: $tabs-md-tab-text-transition;
+
+ @include deprecated-variable(margin, $tabs-md-tab-text-margin) {
+ @include margin($tabs-md-tab-text-margin-top, $tabs-md-tab-text-margin-end, $tabs-md-tab-text-margin-bottom, $tabs-md-tab-text-margin-start);
+ }
}
.tabs-md .tab-button[aria-selected=true] .tab-button-text {
@@ -171,7 +213,7 @@ $tabs-md-tab-icon-size: 2.4rem !default;
.tabs-md[tabsLayout=title-hide] .tab-button,
.tabs-md .tab-button.icon-only,
.tabs-md .tab-button.has-title-only {
- padding: 0 10px;
+ @include padding(0, 10px);
}
@@ -179,9 +221,10 @@ $tabs-md-tab-icon-size: 2.4rem !default;
// --------------------------------------------------
.tabs-md[tabsHighlight=true] .tab-highlight {
+ @include position(null, null, 0, 0);
+
position: absolute;
- bottom: 0;
- left: 0;
+
display: block;
width: 1px;
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 48a9127ebd..4e4c91be37 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -4,9 +4,10 @@
// --------------------------------------------------
.tabbar {
+ @include position(null, null, 0, 0);
+
position: absolute;
- bottom: 0;
- left: 0;
+
z-index: $z-index-toolbar;
display: flex;
@@ -26,7 +27,9 @@
}
.tab-button {
+ @include margin(0);
@include text-align(center);
+ @include border-radius(0);
position: relative;
z-index: 0;
@@ -39,10 +42,7 @@
align-self: center;
justify-content: center;
- margin: 0;
-
border: 0;
- border-radius: 0;
text-decoration: none;
background: none;
@@ -99,17 +99,15 @@
}
[tabsLayout=icon-left] .tab-button .tab-button-icon {
+ @include padding-horizontal(null, 8px);
@include text-align(end);
-
- padding-right: 8px;
}
[tabsLayout=icon-right] .tab-button .tab-button-icon {
+ @include padding-horizontal(8px, null);
@include text-align(start);
order: 10;
-
- padding-left: 8px;
}
.tab-hidden,
@@ -123,12 +121,11 @@
// --------------------------------------------------
.tab-badge {
- position: absolute;
- top: 6%;
- right: 4%;
- right: calc(50% - 50px);
+ @include position(6%, 4%, null, null); // 4% fallback
+ @include position(null, calc(50% - 50px), null, null);
+ @include padding(1px, 6px);
- padding: 1px 6px;
+ position: absolute;
height: auto;
@@ -137,11 +134,11 @@
}
.has-icon .tab-badge {
- right: calc(50% - 30px);
+ @include position(null, calc(50% - 30px), null, null);
}
[tabsLayout=icon-bottom] .tab-badge,
[tabsLayout=icon-left] .tab-badge,
[tabsLayout=icon-right] .tab-badge {
- right: calc(50% - 50px);
+ @include position(null, calc(50% - 50px), null, null);
}
diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss
index 18e8a4f48f..7a6a4e9d1e 100644
--- a/src/components/tabs/tabs.wp.scss
+++ b/src/components/tabs/tabs.wp.scss
@@ -3,8 +3,20 @@
// Windows Tabs
// --------------------------------------------------
-/// @prop - Padding on the tab button
-$tabs-wp-tab-padding: 12px 10px 5px 10px !default;
+// deprecated
+$tabs-wp-tab-padding: null !default;
+
+/// @prop - Padding top on the tab button
+$tabs-wp-tab-padding-top: 12px !default;
+
+/// @prop - Padding end on the tab button
+$tabs-wp-tab-padding-end: 10px !default;
+
+/// @prop - Padding bottom on the tab button
+$tabs-wp-tab-padding-bottom: 5px !default;
+
+/// @prop - Padding start on the tab button
+$tabs-wp-tab-padding-start: 10px !default;
/// @prop - Minimum height of the tab button
$tabs-wp-tab-min-height: 4.8rem !default;
@@ -48,16 +60,19 @@ $tabs-wp-tab-icon-size: 2.4rem !default;
}
.tabs-wp .tab-button {
- padding: $tabs-wp-tab-padding;
+ @include border-radius(0);
min-height: $tabs-wp-tab-min-height;
border-bottom: $tabs-wp-tab-border;
- border-radius: 0;
font-size: $tabs-wp-tab-font-size;
font-weight: $tabs-wp-tab-font-weight;
color: $tabs-wp-tab-color;
box-shadow: none;
+
+ @include deprecated-variable(padding, $tabs-wp-tab-padding) {
+ @include padding($tabs-wp-tab-padding-top, $tabs-wp-tab-padding-end, $tabs-wp-tab-padding-bottom, $tabs-wp-tab-padding-start);
+ }
}
.tabs-wp .tab-button[aria-selected=true] {
@@ -122,7 +137,7 @@ $tabs-wp-tab-icon-size: 2.4rem !default;
.tabs-wp[tabsLayout=title-hide] .tab-button,
.tabs-wp .tab-button.icon-only,
.tabs-wp .tab-button.has-title-only {
- padding: 6px 10px;
+ @include padding(6px, 10px);
}
diff --git a/src/components/thumbnail/thumbnail.ts b/src/components/thumbnail/thumbnail.ts
index 01fa502e7a..9635e38b7e 100644
--- a/src/components/thumbnail/thumbnail.ts
+++ b/src/components/thumbnail/thumbnail.ts
@@ -5,7 +5,7 @@ import { Directive } from '@angular/core';
* @module ionic
* @description
* A Thumbnail is a component that creates a squared image for an item.
- * Thumbnails can be place on the left or right side of an item with the `item-left` or `item-right` directive.
+ * Thumbnails can be place on the left or right side of an item with the `item-start` or `item-end` directive.
* @see {@link /docs/components/#thumbnail-list Thumbnail Component Docs}
*/
@Directive({
diff --git a/src/components/toast/test/toast.spec.ts b/src/components/toast/test/toast.spec.ts
index 672dfcc842..55a5443153 100644
--- a/src/components/toast/test/toast.spec.ts
+++ b/src/components/toast/test/toast.spec.ts
@@ -1,5 +1,5 @@
import { mockApp, mockConfig } from '../../../util/mock-providers';
-import { ToastController } from '../../toast/toast-controller';
+import { ToastController } from '../toast-controller';
describe('Toast', () => {
diff --git a/src/components/toast/toast-component.ts b/src/components/toast/toast-component.ts
index f03e688609..ad867a2955 100644
--- a/src/components/toast/toast-component.ts
+++ b/src/components/toast/toast-component.ts
@@ -96,7 +96,7 @@ export class ToastCmp implements AfterViewInit {
}
}
- dismiss(role: any): Promise {
+ dismiss(role: string): Promise {
clearTimeout(this.dismissTimeout);
this.dismissTimeout = undefined;
return this._viewCtrl.dismiss(null, role, {disableApp: false});
diff --git a/src/components/toast/toast.ios.scss b/src/components/toast/toast.ios.scss
index 180add91b1..73ebad6873 100644
--- a/src/components/toast/toast.ios.scss
+++ b/src/components/toast/toast.ios.scss
@@ -15,24 +15,34 @@ $toast-ios-title-color: #fff !default;
/// @prop - Font size of the toast title
$toast-ios-title-font-size: 1.4rem !default;
-/// @prop - Padding of the toast title
-$toast-ios-title-padding: 1.5rem !default;
+// deprecated
+$toast-ios-title-padding: null !default;
+
+/// @prop - Padding top of the toast title
+$toast-ios-title-padding-top: 1.5rem !default;
+
+/// @prop - Padding end of the toast title
+$toast-ios-title-padding-end: $toast-ios-title-padding-top !default;
+
+/// @prop - Padding bottom of the toast title
+$toast-ios-title-padding-bottom: $toast-ios-title-padding-top !default;
+
+/// @prop - Padding start of the toast title
+$toast-ios-title-padding-start: $toast-ios-title-padding-end !default;
.toast-ios .toast-wrapper {
- position: absolute;
- right: 10px;
+ @include position-horizontal(10px, 10px);
+ @include margin(auto);
+ @include border-radius($toast-ios-border-radius);
+
+ position: absolute;
- left: 10px;
z-index: $z-index-overlay-wrapper;
display: block;
- margin: auto;
-
max-width: $toast-max-width;
- border-radius: $toast-ios-border-radius;
-
background: $toast-ios-background;
}
@@ -53,9 +63,11 @@ $toast-ios-title-padding: 1.5rem !default;
}
.toast-ios .toast-message {
- padding: $toast-ios-title-padding;
-
font-size: $toast-ios-title-font-size;
color: $toast-ios-title-color;
+
+ @include deprecated-variable(padding, $toast-ios-title-padding) {
+ @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
+ }
}
diff --git a/src/components/toast/toast.md.scss b/src/components/toast/toast.md.scss
index 208e5d0e1a..34ebe45ea0 100644
--- a/src/components/toast/toast.md.scss
+++ b/src/components/toast/toast.md.scss
@@ -12,19 +12,31 @@ $toast-md-title-color: #fff !default;
/// @prop - Font size of the toast title
$toast-md-title-font-size: 1.5rem !default;
-/// @prop - Padding of the toast title
-$toast-md-title-padding: 19px 16px 17px !default;
+// deprecated
+$toast-md-title-padding: null !default;
+
+/// @prop - Padding top of the toast title
+$toast-md-title-padding-top: 19px !default;
+
+/// @prop - Padding end of the toast title
+$toast-md-title-padding-end: 16px !default;
+
+/// @prop - Padding bottom of the toast title
+$toast-md-title-padding-bottom: 17px !default;
+
+/// @prop - Padding start of the toast title
+$toast-md-title-padding-start: $toast-md-title-padding-end !default;
.toast-md .toast-wrapper {
+ @include position-horizontal(0, 0);
+ @include margin(auto);
+
position: absolute;
- right: 0;
- left: 0;
+
z-index: $z-index-overlay-wrapper;
display: block;
- margin: auto;
-
width: $toast-width;
max-width: $toast-max-width;
@@ -48,9 +60,11 @@ $toast-md-title-padding: 19px 16px 17px !default;
}
.toast-md .toast-message {
- padding: $toast-md-title-padding;
-
font-size: $toast-md-title-font-size;
color: $toast-md-title-color;
+
+ @include deprecated-variable(padding, $toast-md-title-padding) {
+ @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start);
+ }
}
diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss
index fda3e25118..d67519128b 100644
--- a/src/components/toast/toast.scss
+++ b/src/components/toast/toast.scss
@@ -12,9 +12,10 @@ $toast-max-width: 700px !default;
ion-toast {
+ @include position(0, null, null, 0);
+
position: absolute;
- top: 0;
- left: 0;
+
z-index: $z-index-overlay;
display: block;
@@ -38,7 +39,7 @@ ion-toast {
}
.toast-button {
- padding: 19px 16px 17px;
+ @include padding(19px, 16px, 17px);
font-size: 1.5rem;
}
diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts
index fec56a49ae..f51b840972 100644
--- a/src/components/toast/toast.ts
+++ b/src/components/toast/toast.ts
@@ -59,7 +59,7 @@ export class Toast extends ViewController {
}
/**
- * @param {string} message Toast message content
+ * @param {number} dur Toast message duration
*/
setDuration(dur: number): Toast {
this.data.duration = dur;
@@ -67,7 +67,7 @@ export class Toast extends ViewController {
}
/**
- * @param {string} message Toast message content
+ * @param {'top'|'middle'|'bottom'} pos Toast message position
*/
setPosition(pos: 'top' | 'middle' | 'bottom'): Toast {
this.data.position = pos;
@@ -75,7 +75,7 @@ export class Toast extends ViewController {
}
/**
- * @param {string} message Toast message content
+ * @param {string} cssClass Toast message CSS class
*/
setCssClass(cssClass: string): Toast {
this.data.cssClass = cssClass;
@@ -83,7 +83,7 @@ export class Toast extends ViewController {
}
/**
- * @param {string} message Toast message content
+ * @param {boolean} closeButton Toast message close button
*/
setShowCloseButton(closeButton: boolean): Toast {
this.data.showCloseButton = closeButton;
@@ -93,7 +93,7 @@ export class Toast extends ViewController {
/**
* Present the toast instance.
*
- * @param {NavOptions} [opts={}] Nav options to go with this transition.
+ * @param {NavOptions} [navOptions={}] Nav options to go with this transition.
* @returns {Promise} Returns a promise which is resolved when the transition has completed.
*/
present(navOptions: NavOptions = {}): Promise {
diff --git a/src/components/toast/toast.wp.scss b/src/components/toast/toast.wp.scss
index e0eeb970a0..d0853469ee 100644
--- a/src/components/toast/toast.wp.scss
+++ b/src/components/toast/toast.wp.scss
@@ -18,22 +18,34 @@ $toast-wp-title-color: #fff !default;
/// @prop - Font size of the toast title
$toast-wp-title-font-size: 1.4rem !default;
-/// @prop - Padding of the toast title
-$toast-wp-title-padding: 1.5rem !default;
+// deprecated
+$toast-wp-title-padding: null !default;
+
+/// @prop - Padding top of the toast title
+$toast-wp-title-padding-top: 1.5rem !default;
+
+/// @prop - Padding end of the toast title
+$toast-wp-title-padding-end: $toast-wp-title-padding-top !default;
+
+/// @prop - Padding bottom of the toast title
+$toast-wp-title-padding-bottom: $toast-wp-title-padding-top !default;
+
+/// @prop - Padding start of the toast title
+$toast-wp-title-padding-start: $toast-wp-title-padding-end !default;
.toast-wp .toast-wrapper {
+ @include position-horizontal(0, 0);
+ @include margin(auto);
+ @include border-radius($toast-wp-border-radius);
+
position: absolute;
- right: 0;
- left: 0;
+
z-index: $z-index-overlay-wrapper;
display: block;
- margin: auto;
-
max-width: $toast-max-width;
- border-radius: $toast-wp-border-radius;
background: $toast-wp-background;
}
@@ -54,11 +66,13 @@ $toast-wp-title-padding: 1.5rem !default;
}
.toast-message {
- padding: $toast-wp-title-padding;
-
font-size: $toast-wp-title-font-size;
color: $toast-wp-title-color;
+
+ @include deprecated-variable(padding, $toast-wp-title-padding) {
+ @include padding($toast-wp-title-padding-top, $toast-wp-title-padding-end, $toast-wp-title-padding-bottom, $toast-wp-title-padding-start);
+ }
}
.toast-button {
diff --git a/src/components/toggle/test/basic/pages/root-page/root-page.html b/src/components/toggle/test/basic/pages/root-page/root-page.html
index a64f031d63..693319f7a0 100644
--- a/src/components/toggle/test/basic/pages/root-page/root-page.html
+++ b/src/components/toggle/test/basic/pages/root-page/root-page.html
@@ -15,12 +15,12 @@
Left side default icon, really long text that should ellipsis ellipsis ellipsis
-
+
Apple
-
+
diff --git a/src/components/toolbar/toolbar-button.scss b/src/components/toolbar/toolbar-button.scss
index 1a26357c03..d88cc79044 100644
--- a/src/components/toolbar/toolbar-button.scss
+++ b/src/components/toolbar/toolbar-button.scss
@@ -4,15 +4,14 @@
// --------------------------------------------------
.bar-button {
+ @include margin(0);
+ @include padding(0);
@include text-align(center);
@include appearance(none);
position: relative;
display: inline-block;
- margin: 0;
- padding: 0;
-
line-height: 1;
text-overflow: ellipsis;
text-transform: none;
@@ -27,12 +26,10 @@
}
.bar-button::after {
+ @include position(-7px, -2px, -6px, -2px);
+
// used to make the button's hit area larger
position: absolute;
- top: -7px;
- right: -2px;
- bottom: -6px;
- left: -2px;
content: "";
}
diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
index 766592f93e..60aab685e6 100644
--- a/src/components/toolbar/toolbar.ios.scss
+++ b/src/components/toolbar/toolbar.ios.scss
@@ -46,7 +46,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
.toolbar-ios {
- padding: $toolbar-ios-padding;
+ @include padding($toolbar-ios-padding);
min-height: $toolbar-ios-height;
}
@@ -107,11 +107,10 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
}
.toolbar-ios ion-title {
- position: absolute;
- top: 0;
- left: 0;
+ @include position(0, null, null, 0);
+ @include padding(0, 90px, 1px);
- padding: 0 90px 1px;
+ position: absolute;
width: 100%;
height: 100%;
@@ -173,12 +172,12 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
// --------------------------------------------------
.bar-button-ios {
- padding: 0 4px;
+ @include padding(0, 4px);
+ @include border-radius($toolbar-ios-button-border-radius);
height: 32px;
border: 0;
- border-radius: $toolbar-ios-button-border-radius;
font-size: $toolbar-ios-button-font-size;
}
@@ -277,7 +276,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
// --------------------------------------------------
.bar-button-ios.bar-button-icon-left ion-icon {
- padding-right: .3em;
+ @include padding-horizontal(null, .3em);
font-size: 1.4em;
line-height: .67;
@@ -286,7 +285,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
}
.bar-button-ios.bar-button-icon-right ion-icon {
- padding-left: .4em;
+ @include padding-horizontal(.4em, null);
font-size: 1.4em;
line-height: .67;
@@ -295,13 +294,13 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
}
.bar-button-ios[icon-only] {
- padding: 0;
+ @include padding(0);
min-width: .9em;
}
.bar-button-ios[icon-only] ion-icon {
- padding: 0 .1em;
+ @include padding(0, .1em);
font-size: 1.8em;
line-height: .67;
@@ -314,12 +313,12 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
// --------------------------------------------------
.back-button-ios {
+ @include margin(0);
+
overflow: visible;
order: map-get($toolbar-order-ios, back-button);
- margin: 0;
-
min-height: 3.2rem;
line-height: 1;
@@ -327,9 +326,10 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
}
.back-button-icon-ios {
+ @include margin(0);
+
display: inherit;
- margin: 0;
margin-top: -1px;
min-width: 18px;
@@ -346,15 +346,15 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
// --------------------------------------------------
.bar-button-menutoggle-ios {
- order: map-get($toolbar-order-ios, menu-toggle-start);
+ @include margin(0, 6px);
+ @include padding(0);
- margin: 0 6px;
- padding: 0;
+ order: map-get($toolbar-order-ios, menu-toggle-start);
min-width: 36px;
ion-icon {
- padding: 0 6px;
+ @include padding(0, 6px);
font-size: 2.8rem;
}
diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
index 98b9b1c3d0..71cad96362 100644
--- a/src/components/toolbar/toolbar.md.scss
+++ b/src/components/toolbar/toolbar.md.scss
@@ -40,7 +40,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
.toolbar-md {
- padding: $toolbar-md-padding;
+ @include padding($toolbar-md-padding);
min-height: $toolbar-md-height;
}
@@ -65,9 +65,9 @@ $toolbar-button-md-strong-font-weight: bold !default;
// using datauri png background image for improved scroll performance
// rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
// noticable performance difference on older Android devices
+ @include position(null, null, -5px, 0);
+
position: absolute;
- bottom: -5px;
- left: 0;
width: 100%;
height: 5px;
@@ -81,8 +81,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
.footer-md::before,
.tabs-md[tabsPlacement="bottom"] > .tabbar::before {
- top: -2px;
- bottom: auto;
+ @include position(-2px, null, auto, null);
height: 2px;
@@ -108,7 +107,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
}
.toolbar-title-md {
- padding: 0 12px;
+ @include padding(0, 12px);
font-size: $toolbar-md-title-font-size;
font-weight: 500;
@@ -165,7 +164,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
}
.bar-button-md:first-child {
- margin-left: 0;
+ @include margin-horizontal(0, null);
}
.bar-buttons-md[end] {
@@ -185,16 +184,13 @@ $toolbar-button-md-strong-font-weight: bold !default;
// --------------------------------------------------
.bar-button-md {
- margin-top: 0;
- margin-right: .2rem;
- margin-bottom: 0;
- margin-left: .2rem;
- padding: 0 5px;
+ @include margin(0, .2rem, 0, .2rem);
+ @include padding(0, 5px);
+ @include border-radius($toolbar-md-button-border-radius);
height: 32px;
border: 0;
- border-radius: $toolbar-md-button-border-radius;
font-size: $toolbar-md-button-font-size;
font-weight: 500;
text-transform: uppercase;
@@ -301,7 +297,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
// --------------------------------------------------
.bar-button-md.bar-button-icon-left ion-icon {
- padding-right: .3em;
+ @include padding-horizontal(null, .3em);
font-size: 1.4em;
line-height: .67;
@@ -310,7 +306,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
}
.bar-button-md.bar-button-icon-right ion-icon {
- padding-left: .4em;
+ @include padding-horizontal(.4em, null);
font-size: 1.4em;
line-height: .67;
@@ -319,11 +315,11 @@ $toolbar-button-md-strong-font-weight: bold !default;
}
.bar-button-md[icon-only] {
- padding: 0;
+ @include padding(0);
}
.bar-button-md[icon-only] ion-icon {
- padding: 0 .1em;
+ @include padding(0, .1em);
min-width: 28px;
@@ -338,7 +334,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
// --------------------------------------------------
.back-button-md {
- margin: 0 6px;
+ @include margin(0, 6px);
min-width: 44px;
@@ -346,11 +342,10 @@ $toolbar-button-md-strong-font-weight: bold !default;
}
.back-button-icon-md {
+ @include margin(0);
+ @include padding(0, 6px);
@include text-align(start);
- margin: 0;
- padding: 0 6px;
-
font-size: 2.4rem;
font-weight: normal;
}
@@ -360,25 +355,25 @@ $toolbar-button-md-strong-font-weight: bold !default;
// --------------------------------------------------
.bar-button-menutoggle-md {
- order: map-get($toolbar-order-md, menu-toggle-start);
+ @include margin(0, 6px);
+ @include padding(0, 2px);
- margin: 0 6px;
- padding: 0 2px;
+ order: map-get($toolbar-order-md, menu-toggle-start);
min-width: 44px;
}
.bar-button-menutoggle-md ion-icon {
- padding: 0 6px;
+ @include padding(0, 6px);
font-size: 2.4rem;
}
.bar-button-menutoggle-md[end],
.bar-button-menutoggle-md[right] {
- order: map-get($toolbar-order-md, menu-toggle-end);
+ @include margin(0, 2px);
- margin: 0 2px;
+ order: map-get($toolbar-order-md, menu-toggle-end);
min-width: 28px;
}
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index 7127f294e4..896e0fb51c 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/src/components/toolbar/toolbar.scss
@@ -22,9 +22,9 @@ ion-toolbar {
}
.toolbar-background {
+ @include position(0, null, null, 0);
+
position: absolute;
- top: 0;
- left: 0;
z-index: $z-index-toolbar-background;
width: 100%;
@@ -58,9 +58,9 @@ ion-title {
}
ion-buttons {
- display: block;
+ @include margin(0, .2rem);
- margin: 0 .2rem;
+ display: block;
transform: translateZ(0);
diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts
index a6584002d1..80b7f03040 100644
--- a/src/components/toolbar/toolbar.ts
+++ b/src/components/toolbar/toolbar.ts
@@ -1,7 +1,6 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Optional, Renderer } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Renderer } from '@angular/core';
import { Config } from '../../config/config';
-import { ViewController } from '../../navigation/view-controller';
import { ToolbarBase } from './toolbar-base';
@@ -114,7 +113,6 @@ export class Toolbar extends ToolbarBase {
_sbPadding: boolean;
constructor(
- @Optional() viewCtrl: ViewController,
config: Config,
elementRef: ElementRef,
renderer: Renderer
diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss
index bdeca672a0..b3ffcf3428 100644
--- a/src/components/toolbar/toolbar.wp.scss
+++ b/src/components/toolbar/toolbar.wp.scss
@@ -15,8 +15,20 @@ $toolbar-order-wp: (
menu-toggle-end: 7,
);
-/// @prop - Padding of the toolbar title
-$toolbar-wp-title-padding: 0 6px !default;
+// deprecated
+$toolbar-wp-title-padding: null !default;
+
+/// @prop - Padding top of the toolbar title
+$toolbar-wp-title-padding-top: 0 !default;
+
+/// @prop - Padding end of the toolbar title
+$toolbar-wp-title-padding-end: 6px !default;
+
+/// @prop - Padding bottom of the toolbar title
+$toolbar-wp-title-padding-bottom: $toolbar-wp-title-padding-top !default;
+
+/// @prop - Padding start of the toolbar title
+$toolbar-wp-title-padding-start: $toolbar-wp-title-padding-end !default;
/// @prop - Font size of the toolbar title
$toolbar-wp-title-font-size: 1.5rem !default;
@@ -49,7 +61,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
.toolbar-wp {
- padding: $toolbar-wp-padding;
+ @include padding($toolbar-wp-padding);
min-height: $toolbar-wp-height;
}
@@ -76,12 +88,14 @@ $toolbar-button-wp-strong-font-weight: bold !default;
}
.toolbar-title-wp {
- padding: $toolbar-wp-title-padding;
-
font-size: $toolbar-wp-title-font-size;
font-weight: $toolbar-wp-title-font-weight;
text-transform: $toolbar-wp-title-text-transform;
color: $toolbar-wp-title-text-color;
+
+ @include deprecated-variable(padding, $toolbar-wp-title-padding) {
+ @include padding($toolbar-wp-title-padding-top, $toolbar-wp-title-padding-end, $toolbar-wp-title-padding-bottom, $toolbar-wp-title-padding-start);
+ }
}
@mixin wp-toolbar-theme($color-name, $color-base, $color-contrast) {
@@ -125,7 +139,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
}
.bar-buttons-wp[left] .bar-button:first-child {
- margin-left: 0;
+ @include margin-horizontal(0, null);
}
.bar-buttons-wp[end] {
@@ -145,16 +159,13 @@ $toolbar-button-wp-strong-font-weight: bold !default;
// --------------------------------------------------
.bar-button-wp {
- margin-top: 0;
- margin-right: .2rem;
- margin-bottom: 0;
- margin-left: .2rem;
- padding: 0 5px;
+ @include margin(0, .2rem);
+ @include padding(0, 5px);
+ @include border-radius($toolbar-wp-button-border-radius);
height: 32px;
border: 0;
- border-radius: $toolbar-wp-button-border-radius;
font-size: $toolbar-wp-button-font-size;
font-weight: 500;
text-transform: uppercase;
@@ -255,7 +266,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
// --------------------------------------------------
.bar-button-wp.bar-button-icon-left ion-icon {
- padding-right: .3em;
+ @include padding-horizontal(null, .3em);
font-size: 1.4em;
line-height: .67;
@@ -264,7 +275,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
}
.bar-button-wp.bar-button-icon-right ion-icon {
- padding-left: .4em;
+ @include padding-horizontal(.4em, null);
font-size: 1.4em;
line-height: .67;
@@ -273,10 +284,10 @@ $toolbar-button-wp-strong-font-weight: bold !default;
}
.bar-button-wp[icon-only] {
- padding: 0;
+ @include padding(0);
ion-icon {
- padding: 0 .1em;
+ @include padding(0, .1em);
min-width: 28px;
@@ -292,7 +303,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
// --------------------------------------------------
.back-button-wp {
- margin: 0 6px;
+ @include margin(0, 6px);
min-width: 44px;
@@ -301,9 +312,8 @@ $toolbar-button-wp-strong-font-weight: bold !default;
.back-button-icon-wp {
@include text-align(start);
-
- margin: 0;
- padding: 0 6px;
+ @include margin(0);
+ @include padding(0, 6px);
font-size: 2.4rem;
font-weight: normal;
@@ -314,15 +324,15 @@ $toolbar-button-wp-strong-font-weight: bold !default;
// --------------------------------------------------
.bar-button-menutoggle-wp {
- order: map-get($toolbar-order-wp, menu-toggle-start);
+ @include margin(0, 6px);
+ @include padding(0, 2px);
- margin: 0 6px;
- padding: 0 2px;
+ order: map-get($toolbar-order-wp, menu-toggle-start);
min-width: 44px;
ion-icon {
- padding: 0 6px;
+ @include padding(0, 6px);
font-size: 2.4rem;
}
@@ -330,9 +340,9 @@ $toolbar-button-wp-strong-font-weight: bold !default;
.bar-button-menutoggle-wp[end],
.bar-button-menutoggle-wp[right] {
- order: map-get($toolbar-order-wp, menu-toggle-end);
+ @include margin(0, 2px);
- margin: 0 2px;
+ order: map-get($toolbar-order-wp, menu-toggle-end);
min-width: 28px;
}
diff --git a/src/components/virtual-scroll/test/basic/app.module.ts b/src/components/virtual-scroll/test/basic/app.module.ts
index 951fa08e9e..9faa4cbee5 100644
--- a/src/components/virtual-scroll/test/basic/app.module.ts
+++ b/src/components/virtual-scroll/test/basic/app.module.ts
@@ -11,19 +11,7 @@ export class E2EPage {
webview: string = '';
counter: number = 0;
- constructor(plt: Platform, public navCtrl: NavController) {
- if (plt.is('ios')) {
- if (plt.testUserAgent('Safari')) {
- this.webview = ': iOS Safari';
-
- } else if (!!(window as any)['webkit']) {
- this.webview = ': iOS WKWebView';
-
- } else {
- this.webview = ': iOS UIWebView';
- }
- }
- }
+ constructor(plt: Platform, public navCtrl: NavController) {}
addItems() {
if (this.items.length === 0) {
@@ -54,8 +42,25 @@ export class E2EPage {
this.counter++;
}
- reload() {
- window.location.reload(true);
+ addRandomItem() {
+ const index = Math.floor(Math.random() * this.items.length);
+ console.log('Adding to index: ', index);
+ this.items.splice( index, 0, {
+ value: Math.floor(Math.random() * 10000),
+ someMethod: function() {
+ return '!!';
+ }
+ });
+ }
+
+ changeItem() {
+ const index = Math.floor(Math.random() * this.items.length);
+ console.log('Change to index: ', index);
+ this.items[index] = { value: Math.floor(Math.random() * 10000), someMethod: () => '!!' };
+ }
+
+ trackByFn(index: number, item: any) {
+ return item.value;
}
}
diff --git a/src/components/virtual-scroll/test/basic/main.html b/src/components/virtual-scroll/test/basic/main.html
index 9fb5e0c6df..fd3b89a4e8 100644
--- a/src/components/virtual-scroll/test/basic/main.html
+++ b/src/components/virtual-scroll/test/basic/main.html
@@ -1,12 +1,14 @@
- Virtual Scroll{{webview}}
-
@@ -19,15 +21,16 @@
+ 
