From abf6bd1f6846b6b8228f03ba59e1c9e953ec586b Mon Sep 17 00:00:00 2001 From: Jan Hafner Date: Thu, 4 May 2017 21:23:19 +0200 Subject: [PATCH 01/34] - typified onDidDismiss and onWillDismiss signature to clearify supplied parameters --- src/components/select/select.ts | 2 +- src/navigation/overlay-proxy.ts | 2 +- src/navigation/view-controller.ts | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/select/select.ts b/src/components/select/select.ts index a7648c0f7a..469a6e056a 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -370,7 +370,7 @@ export class Select extends BaseInput implements OnDestroy { this._fireFocus(); - overlay.onDidDismiss((value: any) => { + overlay.onDidDismiss((value: any, role: string) => { this._fireBlur(); this._overlay = undefined; }); diff --git a/src/navigation/overlay-proxy.ts b/src/navigation/overlay-proxy.ts index 57ca1cc6df..61f7198996 100644 --- a/src/navigation/overlay-proxy.ts +++ b/src/navigation/overlay-proxy.ts @@ -51,7 +51,7 @@ export class OverlayProxy { /** * Called when the current viewController has be successfully dismissed */ - onDidDismiss(callback: Function) { + onDidDismiss(callback: (data: any, role: string) => void) { this._onDidDismiss = callback; if (this.overlay) { this.overlay.onDidDismiss(this._onDidDismiss); diff --git a/src/navigation/view-controller.ts b/src/navigation/view-controller.ts index 219ff933dd..7e1775b4e5 100644 --- a/src/navigation/view-controller.ts +++ b/src/navigation/view-controller.ts @@ -35,8 +35,8 @@ export class ViewController { private _isHidden: boolean = false; private _leavingOpts: NavOptions; private _nb: Navbar; - private _onDidDismiss: Function; - private _onWillDismiss: Function; + private _onDidDismiss: (data: any, role: string) => void; + private _onWillDismiss: (data: any, role: string) => void; private _dismissData: any; private _dismissRole: any; private _detached: boolean; @@ -149,14 +149,14 @@ export class ViewController { /** * Called when the current viewController has be successfully dismissed */ - onDidDismiss(callback: Function) { + onDidDismiss(callback: (data: any, role: string) => void) { this._onDidDismiss = callback; } /** * Called when the current viewController will be dismissed */ - onWillDismiss(callback: Function) { + onWillDismiss(callback: (data: any, role: string) => void) { this._onWillDismiss = callback; } From 877829b933a622b4564796cfe4fc9e82815e0bbc Mon Sep 17 00:00:00 2001 From: Manuel Mtz-Almeida Date: Wed, 3 May 2017 16:25:51 +0200 Subject: [PATCH 02/34] chore(e2e): adds bonjour support --- package.json | 2 +- scripts/gulp/util.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index cfa8218819..f0c834e5be 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "zone.js": "^0.8.9" }, "devDependencies": { - "@ionic/app-scripts": "1.3.6", + "@ionic/app-scripts": "nightly", "@ionic/commit-hooks": "1.0.3", "@types/connect": "3.4.30", "@types/del": "2.2.31", diff --git a/scripts/gulp/util.ts b/scripts/gulp/util.ts index 30549e1028..8045708e8d 100644 --- a/scripts/gulp/util.ts +++ b/scripts/gulp/util.ts @@ -204,6 +204,7 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string '--sass', sassConfigPath, '--copy', copyConfigPath, '--enableLint', 'false', + '--bonjour' ]; if (watchConfigPath) { From 7aa07b05eee3f4965f042f4995f477c239dfbdd7 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Thu, 4 May 2017 22:05:38 +0200 Subject: [PATCH 03/34] chore(app-scripts): update to 1.3.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f0c834e5be..cb9f93d48f 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "zone.js": "^0.8.9" }, "devDependencies": { - "@ionic/app-scripts": "nightly", + "@ionic/app-scripts": "1.3.7", "@ionic/commit-hooks": "1.0.3", "@types/connect": "3.4.30", "@types/del": "2.2.31", From 646d736d0767ca87d7c87dc54d6ea3ec164c3787 Mon Sep 17 00:00:00 2001 From: AndreasGassmann Date: Wed, 3 May 2017 19:15:23 +0200 Subject: [PATCH 04/34] fix(navcontrollerbase): popToRoot should not remove root view --- src/navigation/nav-controller-base.ts | 2 +- src/navigation/test/nav-controller.spec.ts | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/navigation/nav-controller-base.ts b/src/navigation/nav-controller-base.ts index 03c1f94a27..48d07affb9 100644 --- a/src/navigation/nav-controller-base.ts +++ b/src/navigation/nav-controller-base.ts @@ -331,7 +331,7 @@ export class NavControllerBase extends Ion implements NavController { if (ti.removeCount < 0) { ti.removeCount = (viewsLength - ti.removeStart); } - ti.leavingRequiresTransition = ((ti.removeStart + ti.removeCount) === viewsLength); + ti.leavingRequiresTransition = (ti.removeCount > 0) && ((ti.removeStart + ti.removeCount) === viewsLength); } if (ti.insertViews) { diff --git a/src/navigation/test/nav-controller.spec.ts b/src/navigation/test/nav-controller.spec.ts index 4feaacdbbc..59f897c5f1 100644 --- a/src/navigation/test/nav-controller.spec.ts +++ b/src/navigation/test/nav-controller.spec.ts @@ -622,6 +622,25 @@ describe('NavController', () => { }); }, 10000); + it('should not pop first view if it\'s the only view', (done: Function) => { + let view1 = mockView(MockView1); + mockViews(nav, [view1]); + + nav.popToRoot(null, trnsDone).then(() => { + let hasCompleted = true; + let requiresTransition = false; + expect(trnsDone).toHaveBeenCalledWith( + hasCompleted, requiresTransition, undefined, undefined, undefined + ); + expect(nav.length()).toEqual(1); + expect(nav.getByIndex(0).component).toEqual(MockView1); + done(); + }).catch((err: Error) => { + fail(err); + done(err); + }); + }, 10000); + }); describe('remove', () => { From 299a68bcdcb415a9bbf653b4111e4b1dabb64f36 Mon Sep 17 00:00:00 2001 From: Michael Asimakopoulos Date: Fri, 5 May 2017 01:20:58 +0300 Subject: [PATCH 05/34] fix(VirtualScroll): initialise differ with trackByFn (#11492) * fix(VirtualScroll): initialise differ with trackByFn * fix(VirtualScroll): DRY up differ initialization --- .../virtual-scroll/test/basic/app.module.ts | 4 ++++ .../virtual-scroll/test/basic/main.html | 9 +++++---- .../virtual-scroll/virtual-scroll.ts | 20 ++++++++++++++----- 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/components/virtual-scroll/test/basic/app.module.ts b/src/components/virtual-scroll/test/basic/app.module.ts index 951fa08e9e..70ddf47dae 100644 --- a/src/components/virtual-scroll/test/basic/app.module.ts +++ b/src/components/virtual-scroll/test/basic/app.module.ts @@ -58,6 +58,10 @@ export class E2EPage { window.location.reload(true); } + 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..352d64427a 100644 --- a/src/components/virtual-scroll/test/basic/main.html +++ b/src/components/virtual-scroll/test/basic/main.html @@ -19,15 +19,16 @@ - + + - Header: {{header}} + Header: {{ header }} - Item: {{item.value}} {{item.someMethod()}} + Item: {{ item.value }} {{ item.someMethod() }} diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index d64e1365bb..ed09f654c8 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -234,6 +234,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { }; _queue: number = SCROLL_QUEUE_NO_CHANGES; _recordSize: number = 0; + _virtualTrackBy: TrackByFn; @ContentChild(VirtualItem) _itmTmp: VirtualItem; @ContentChild(VirtualHeader) _hdrTmp: VirtualHeader; @@ -249,9 +250,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { @Input() set virtualScroll(val: any) { this._records = val; - if (isBlank(this._differ) && isPresent(val)) { - this._differ = this._iterableDiffers.find(val).create(this.virtualTrackBy); - } + this._updateDiffer(); } /** @@ -368,7 +367,12 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { /** * @input {function} Same as `ngForTrackBy` which can be used on `ngFor`. */ - @Input() virtualTrackBy: TrackByFn; + @Input() + set virtualTrackBy(val: TrackByFn) { + if (!isPresent(val)) return; + this._virtualTrackBy = val; + this._updateDiffer(); + }; constructor( @@ -481,6 +485,12 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { return null; } + private _updateDiffer(): void { + if (isBlank(this._differ) && isPresent(this._records)) { + this._differ = this._iterableDiffers.find(this._records).create(this.virtualTrackBy); + } + } + /** * @hidden * DOM WRITE @@ -632,7 +642,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { var stopAtHeight = (data.scrollTop + data.renderHeight); processRecords(stopAtHeight, records, cells, - this._hdrFn, this._ftrFn, data); + this._hdrFn, this._ftrFn, data); } // ******** DOM READ **************** From de19dbe81bdcefc7b1b96af42930b6de4f60a9bf Mon Sep 17 00:00:00 2001 From: Manuel Mtz-Almeida Date: Fri, 5 May 2017 00:24:33 +0200 Subject: [PATCH 06/34] fix(virtual-list): virtualTrackBy reference --- .../virtual-scroll/virtual-scroll.ts | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index ed09f654c8..62a968c4c8 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -240,7 +240,6 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { @ContentChild(VirtualHeader) _hdrTmp: VirtualHeader; @ContentChild(VirtualFooter) _ftrTmp: VirtualFooter; - /** * @input {array} The data that builds the templates within the virtual scroll. * This is the same data that you'd pass to `*ngFor`. It's important to note @@ -345,7 +344,8 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { * and what data to give to the header template. The function must return * `null` if a header cell shouldn't be created. */ - @Input() set headerFn(val: Function) { + @Input() + set headerFn(val: Function) { if (isFunction(val)) { this._hdrFn = val.bind((this._ctrl._cmp) || this); } @@ -358,7 +358,8 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { * should be used, and what data to give to the footer template. The function * must return `null` if a footer cell shouldn't be created. */ - @Input() set footerFn(val: Function) { + @Input() + set footerFn(val: Function) { if (isFunction(val)) { this._ftrFn = val.bind((this._ctrl._cmp) || this); } @@ -369,10 +370,14 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { */ @Input() set virtualTrackBy(val: TrackByFn) { - if (!isPresent(val)) return; - this._virtualTrackBy = val; - this._updateDiffer(); - }; + if (isPresent(val)) { + this._virtualTrackBy = val; + this._updateDiffer(); + } + } + get virtualTrackBy(): TrackByFn { + return this._virtualTrackBy; + } constructor( @@ -485,9 +490,9 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { return null; } - private _updateDiffer(): void { + private _updateDiffer() { if (isBlank(this._differ) && isPresent(this._records)) { - this._differ = this._iterableDiffers.find(this._records).create(this.virtualTrackBy); + this._differ = this._iterableDiffers.find(this._records).create(this._virtualTrackBy); } } From 3b4b29e832646bebc0d5e87c03805cef5f99c624 Mon Sep 17 00:00:00 2001 From: Manuel Mtz-Almeida Date: Fri, 5 May 2017 00:57:16 +0200 Subject: [PATCH 07/34] refactor(action-sheet): adds proper TS types --- .../action-sheet/action-sheet-component.ts | 57 ++++++++----------- .../action-sheet/action-sheet-options.ts | 10 +++- src/components/action-sheet/action-sheet.ts | 6 +- src/components/alert/alert-component.ts | 2 +- .../test/basic/pages/page-one/page-one.ts | 2 +- src/components/loading/loading-component.ts | 2 +- src/components/picker/picker-component.ts | 2 +- src/components/select/select.ts | 4 +- src/components/toast/toast-component.ts | 2 +- src/navigation/overlay-proxy.ts | 2 +- src/navigation/overlay.ts | 2 +- src/navigation/view-controller.ts | 2 +- src/util/mock-providers.ts | 2 +- 13 files changed, 48 insertions(+), 47 deletions(-) diff --git a/src/components/action-sheet/action-sheet-component.ts b/src/components/action-sheet/action-sheet-component.ts index d45526cfa0..7de66952c8 100644 --- a/src/components/action-sheet/action-sheet-component.ts +++ b/src/components/action-sheet/action-sheet-component.ts @@ -1,5 +1,6 @@ import { Component, ElementRef, HostListener, Renderer, ViewEncapsulation } from '@angular/core'; +import { ActionSheetOptions, ActionSheetButton } from './action-sheet-options'; import { assert } from '../../util/util'; import { BlockerDelegate, GestureController, BLOCK_ALL } from '../../gestures/gesture-controller'; import { Config } from '../../config/config'; @@ -26,10 +27,10 @@ import { ViewController } from '../../navigation/view-controller'; '{{b.text}}' + '' + '' + - '
' + - '' + '
' + '' + @@ -41,15 +42,11 @@ import { ViewController } from '../../navigation/view-controller'; }, encapsulation: ViewEncapsulation.None, }) + export class ActionSheetCmp { - d: { - title?: string; - subTitle?: string; - cssClass?: string; - buttons?: Array; - enableBackdropDismiss?: boolean; - cancelButton: any; - }; + + d: ActionSheetOptions; + cancelButton: ActionSheetButton; descId: string; enabled: boolean; hdrId: string; @@ -89,30 +86,26 @@ export class ActionSheetCmp { ionViewDidLoad() { // normalize the data - let buttons: any[] = []; - - this.d.buttons.forEach((button: any) => { + this.d.buttons = this.d.buttons.map(button => { if (typeof button === 'string') { button = { text: button }; } if (!button.cssClass) { button.cssClass = ''; } - - if (button.role === 'cancel') { - this.d.cancelButton = button; - - } else { - if (button.role === 'destructive') { + switch (button.role) { + case 'cancel': + this.cancelButton = button; + return null; + case 'destructive': button.cssClass = (button.cssClass + ' ' || '') + 'action-sheet-destructive'; - } else if (button.role === 'selected') { + break; + case 'selected': button.cssClass = (button.cssClass + ' ' || '') + 'action-sheet-selected'; - } - buttons.push(button); + break; } - }); - - this.d.buttons = buttons; + return button; + }).filter(button => button !== null); } ionViewWillEnter() { @@ -141,7 +134,7 @@ export class ActionSheetCmp { } } - click(button: any) { + click(button: ActionSheetButton) { if (!this.enabled) { return; } @@ -163,8 +156,8 @@ export class ActionSheetCmp { bdClick() { if (this.enabled && this.d.enableBackdropDismiss) { - if (this.d.cancelButton) { - this.click(this.d.cancelButton); + if (this.cancelButton) { + this.click(this.cancelButton); } else { this.dismiss('backdrop'); @@ -172,7 +165,7 @@ export class ActionSheetCmp { } } - dismiss(role: any): Promise { + dismiss(role: string): Promise { const opts: NavOptions = { minClickBlockDuration: 400 }; @@ -181,7 +174,7 @@ export class ActionSheetCmp { ngOnDestroy() { assert(this.gestureBlocker.blocked === false, 'gesture blocker must be already unblocked'); - this.d = null; + this.d = this.cancelButton = null; this.gestureBlocker.destroy(); } } diff --git a/src/components/action-sheet/action-sheet-options.ts b/src/components/action-sheet/action-sheet-options.ts index 669367262e..6ff277df9a 100644 --- a/src/components/action-sheet/action-sheet-options.ts +++ b/src/components/action-sheet/action-sheet-options.ts @@ -3,6 +3,14 @@ export interface ActionSheetOptions { title?: string; subTitle?: string; cssClass?: string; - buttons?: Array; + buttons?: (ActionSheetButton|string)[]; enableBackdropDismiss?: boolean; } + +export interface ActionSheetButton { + text?: string; + role?: string; + icon?: string; + cssClass?: string; + handler?: () => boolean|void; +}; diff --git a/src/components/action-sheet/action-sheet.ts b/src/components/action-sheet/action-sheet.ts index 39a0ccf2a5..cb54c5cec0 100644 --- a/src/components/action-sheet/action-sheet.ts +++ b/src/components/action-sheet/action-sheet.ts @@ -1,5 +1,5 @@ import { ActionSheetCmp } from './action-sheet-component'; -import { ActionSheetOptions } from './action-sheet-options'; +import { ActionSheetOptions, ActionSheetButton } from './action-sheet-options'; import { ActionSheetSlideIn, ActionSheetMdSlideIn, ActionSheetSlideOut, ActionSheetMdSlideOut, ActionSheetWpSlideIn, ActionSheetWpSlideOut } from './action-sheet-transitions'; import { App } from '../app/app'; import { Config } from '../../config/config'; @@ -34,7 +34,7 @@ export class ActionSheet extends ViewController { * @hidden */ getTransitionName(direction: string): string { - let key = 'actionSheet' + (direction === 'back' ? 'Leave' : 'Enter'); + const key = 'actionSheet' + (direction === 'back' ? 'Leave' : 'Enter'); return this._nav && this._nav.config.get(key); } @@ -57,7 +57,7 @@ export class ActionSheet extends ViewController { /** * @param {object} button Action sheet button */ - addButton(button: any): ActionSheet { + addButton(button: ActionSheetButton|string): ActionSheet { this.data.buttons.push(button); return this; } diff --git a/src/components/alert/alert-component.ts b/src/components/alert/alert-component.ts index 756e2c6b5b..7fde84ad97 100644 --- a/src/components/alert/alert-component.ts +++ b/src/components/alert/alert-component.ts @@ -295,7 +295,7 @@ export class AlertCmp { } } - dismiss(role: any): Promise { + dismiss(role: string): Promise { const opts: NavOptions = { minClickBlockDuration: 400 }; diff --git a/src/components/alert/test/basic/pages/page-one/page-one.ts b/src/components/alert/test/basic/pages/page-one/page-one.ts index 815b8328de..f111cecef4 100644 --- a/src/components/alert/test/basic/pages/page-one/page-one.ts +++ b/src/components/alert/test/basic/pages/page-one/page-one.ts @@ -158,7 +158,7 @@ export class PageOne { this.testPromptOpen = true; }); - alert.onDidDismiss((data: any, role: any) => { + alert.onDidDismiss((data, role) => { console.log('onDidDismiss, data:', data, 'role:', role); }); } 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/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/select/select.ts b/src/components/select/select.ts index 469a6e056a..3a306d985f 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -370,7 +370,7 @@ export class Select extends BaseInput implements OnDestroy { this._fireFocus(); - overlay.onDidDismiss((value: any, role: string) => { + overlay.onDidDismiss(() => { this._fireBlur(); this._overlay = undefined; }); @@ -381,7 +381,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/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/navigation/overlay-proxy.ts b/src/navigation/overlay-proxy.ts index 61f7198996..1122305f97 100644 --- a/src/navigation/overlay-proxy.ts +++ b/src/navigation/overlay-proxy.ts @@ -42,7 +42,7 @@ export class OverlayProxy { } } - dismiss(data?: any, role?: any, navOptions?: NavOptions): Promise { + dismiss(data?: any, role?: string, navOptions?: NavOptions): Promise { if (this.overlay) { return this.overlay.dismiss(); } diff --git a/src/navigation/overlay.ts b/src/navigation/overlay.ts index 4c782516bf..8194389ae6 100644 --- a/src/navigation/overlay.ts +++ b/src/navigation/overlay.ts @@ -2,7 +2,7 @@ import { NavOptions } from './nav-util'; export interface Overlay { present(opts?: NavOptions): Promise; - dismiss(data?: any, role?: any, navOptions?: NavOptions): Promise; + dismiss(data?: any, role?: string, navOptions?: NavOptions): Promise; onDidDismiss(callback: Function): void; onWillDismiss(callback: Function): void; } diff --git a/src/navigation/view-controller.ts b/src/navigation/view-controller.ts index 7e1775b4e5..caa1909fca 100644 --- a/src/navigation/view-controller.ts +++ b/src/navigation/view-controller.ts @@ -167,7 +167,7 @@ export class ViewController { * @param {NavOptions} NavOptions Options for the dismiss navigation. * @returns {any} data Returns the data passed in, if any. */ - dismiss(data?: any, role?: any, navOptions: NavOptions = {}): Promise { + dismiss(data?: any, role?: string, navOptions: NavOptions = {}): Promise { if (!this._nav) { assert(this._state === STATE_DESTROYED, 'ViewController does not have a valid _nav'); return Promise.resolve(false); diff --git a/src/util/mock-providers.ts b/src/util/mock-providers.ts index 62320cde56..75357c5f75 100644 --- a/src/util/mock-providers.ts +++ b/src/util/mock-providers.ts @@ -591,7 +591,7 @@ export function mockNgModuleLoader(): NgModuleLoader { export function mockOverlay() { return { present: (opts?: NavOptions) => { return Promise.resolve(); }, - dismiss: (data?: any, role?: any, navOptions?: NavOptions) => { return Promise.resolve(); }, + dismiss: (data?: any, role?: string, navOptions?: NavOptions) => { return Promise.resolve(); }, onDidDismiss: (callback: Function) => { }, onWillDismiss: (callback: Function) => { } }; From 5d562166fcc648dd42b6e7415b2f267e8f7ac141 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Fri, 5 May 2017 02:11:00 +0300 Subject: [PATCH 08/34] refactor(): global refactoring to avoid IDE warnings and cleaner code (#11296) * refactor(style): redundant measure units * refactor(): change pointless boolean operation to cast * refactor(): change redundant 'if' statement * refactor(style): remove overwritten property value * fix(spellcheck): wrong attribute value * refactor(datetime-test): There should be a space between attribute and previous attribute * refactor(import): import can be shortened * refactor(semicolon): add missing semicolon * docs(): fix incorrect parameter name * refactor(): remove trailing unused parameters * fix(menu): create mock change signature * refactor(): remove redundant imports all tests are passing * refactor(style): 'var' used instead of 'let' or 'const' * Revert "refactor(style): 'var' used instead of 'let' or 'const'" This reverts commit 0369dbcaa877b69534e6e78cb17f6b8aa7603597. * refacrot(): remove unused code * Revert "refactor(style): remove overwritten property value" * revert(hammer): don't modify 3rd party files * revert(activator): follow interface * revert(activator): follow interface (cont) * revert(activator): follow interface (cont) * merge(master): fix conflicts * revert(): change pointless boolean operation to cast * revert(): text align is covered by a different PR * revert(): add back unused parameters * revert(): add back unused parameters --- src/animations/animation.ts | 2 +- src/components/action-sheet/action-sheet.ts | 2 +- src/components/alert/alert.ts | 2 +- .../test/basic/pages/page-one/page-one.ts | 4 ++-- src/components/app/app-root.ts | 2 +- .../app/test/animations/app.module.ts | 4 ++-- src/components/checkbox/checkbox.ts | 5 ++--- src/components/checkbox/test/checkbox.spec.ts | 5 ++--- .../test/labels/pages/root-page/root-page.html | 2 +- src/components/fab/fab-container.ts | 4 ++-- src/components/img/img.ts | 14 ++++---------- src/components/img/test/img.spec.ts | 2 +- .../form-inputs/pages/root-page/root-page.html | 2 +- src/components/item/item-divider.ts | 3 +-- src/components/item/item-options.ts | 3 +-- src/components/item/item-reorder.ts | 2 +- src/components/item/item-sliding.ts | 2 -- .../test/reorder/pages/root-page/root-page.ts | 4 ++-- .../test/sliding/pages/root-page/root-page.ts | 4 ++-- src/components/loading/loading.ts | 12 ++++++------ src/components/menu/menu.ts | 3 +-- src/components/modal/modal-impl.ts | 2 +- .../modal-with-inputs/modal-with-inputs.ts | 2 +- .../test/basic/pages/first-page/first-page.ts | 6 ++---- .../basic/pages/tab-item-page/tab-item-page.ts | 4 ++-- .../test/basic/pages/tab-three/tab-three.ts | 4 ++-- .../nav/test/worst-case/app.module.ts | 9 +++++---- src/components/picker/picker.ts | 6 +++--- src/components/popover/popover-impl.ts | 2 +- src/components/range/range.ios.scss | 2 +- src/components/range/range.md.scss | 2 +- src/components/range/range.wp.scss | 2 +- src/components/scroll/scroll.ts | 2 +- src/components/scroll/test/basic/main.html | 2 +- src/components/searchbar/searchbar.ts | 4 ++-- .../test/nav/pages/search-page/search-page.ts | 7 +------ src/components/segment/segment-button.ts | 4 ++-- .../select/select-popover-component.ts | 2 +- src/components/select/select.ts | 2 -- src/components/slides/slides.scss | 2 +- src/components/slides/swiper/swiper-effects.ts | 2 +- src/components/slides/swiper/swiper-events.ts | 2 +- .../slides/swiper/swiper-parallax.ts | 2 +- src/components/slides/swiper/swiper.ts | 2 +- src/components/slides/test/intro/main.html | 4 ++-- src/components/spinner/spinner.ts | 4 ++-- src/components/toast/test/toast.spec.ts | 2 +- src/components/toast/toast.ts | 10 +++++----- src/components/toggle/test/toggle.spec.ts | 6 ++---- src/components/toggle/toggle-gesture.ts | 2 +- src/components/toggle/toggle.ts | 7 +++---- src/components/toolbar/toolbar.ts | 4 +--- .../virtual-scroll/virtual-scroll.ts | 2 +- src/config/mode-registry.ts | 2 +- src/gestures/gesture-controller.ts | 5 +---- src/gestures/pan-gesture.ts | 2 +- src/gestures/test/gesture-controller.spec.ts | 18 +++++++++--------- src/navigation/nav-controller.ts | 3 ++- src/navigation/nav-params.ts | 2 +- src/navigation/overlay-proxy.ts | 2 +- src/navigation/test/overlay-proxy.spec.ts | 2 +- src/navigation/view-controller.ts | 4 ++-- src/platform/platform.ts | 2 +- src/tap-click/tap-click.ts | 7 +++---- src/tap-click/test/activator.spec.ts | 2 +- src/util/events.ts | 4 ++-- src/util/input-tester.ts | 2 +- src/util/mock-providers.ts | 2 +- src/util/util.ts | 2 +- 69 files changed, 115 insertions(+), 144 deletions(-) diff --git a/src/animations/animation.ts b/src/animations/animation.ts index b04397cd21..8f1494719c 100644 --- a/src/animations/animation.ts +++ b/src/animations/animation.ts @@ -501,7 +501,7 @@ export class Animation { const self = this; - function onTransitionEnd(ev: any) { + function onTransitionEnd() { // congrats! a successful transition completed! // ensure transition end events and timeouts have been cleared self._clearAsync(); diff --git a/src/components/action-sheet/action-sheet.ts b/src/components/action-sheet/action-sheet.ts index cb54c5cec0..da6c57458b 100644 --- a/src/components/action-sheet/action-sheet.ts +++ b/src/components/action-sheet/action-sheet.ts @@ -65,7 +65,7 @@ export class ActionSheet 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 = {}): Promise { diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index 9d42003426..8ab31945a8 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -97,7 +97,7 @@ export class Alert extends ViewController { /** * Present the alert 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/alert/test/basic/pages/page-one/page-one.ts b/src/components/alert/test/basic/pages/page-one/page-one.ts index f111cecef4..44fce894e3 100644 --- a/src/components/alert/test/basic/pages/page-one/page-one.ts +++ b/src/components/alert/test/basic/pages/page-one/page-one.ts @@ -292,8 +292,8 @@ export class PageOne { let alert = this.alertCtrl.create({ enableBackdropDismiss: false }); - alert.setTitle('Disabled Backdrop Click'), - alert.setMessage('Cannot dismiss alert from clickings the backdrop'), + alert.setTitle('Disabled Backdrop Click'); + alert.setMessage('Cannot dismiss alert from clickings the backdrop'); alert.addButton({ text: 'Cancel', role: 'cancel', diff --git a/src/components/app/app-root.ts b/src/components/app/app-root.ts index c181ce1c3f..b0fb9be806 100644 --- a/src/components/app/app-root.ts +++ b/src/components/app/app-root.ts @@ -157,7 +157,7 @@ export class IonicApp extends Ion implements OnInit { stopScroll(): Promise { if (this._stopScrollPlugin) { - return new Promise((resolve, reject) => { + return new Promise((resolve) => { this._stopScrollPlugin.stop(() => resolve(true)); }); } else { diff --git a/src/components/app/test/animations/app.module.ts b/src/components/app/test/animations/app.module.ts index be57850263..3b4dd9db3f 100644 --- a/src/components/app/test/animations/app.module.ts +++ b/src/components/app/test/animations/app.module.ts @@ -1,6 +1,6 @@ import { Component, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { Animation, Config, IonicApp, IonicModule, Platform } from '../../../..'; +import { Animation, IonicApp, IonicModule, Platform } from '../../../..'; @Component({ @@ -10,7 +10,7 @@ export class E2EPage { duration: string; easing: string; - constructor(config: Config, public plt: Platform) { + constructor(public plt: Platform) { this.duration = '1000'; this.easing = 'ease-in-out'; } diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 102a023d78..86377f4c0c 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core'; +import { Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { Config } from '../../config/config'; @@ -85,8 +85,7 @@ export class Checkbox extends BaseInput implements IonicTapInput, OnDes form: Form, @Optional() item: Item, elementRef: ElementRef, - renderer: Renderer, - private _cd: ChangeDetectorRef + renderer: Renderer ) { super(config, elementRef, renderer, 'checkbox', false, form, item, null); } diff --git a/src/components/checkbox/test/checkbox.spec.ts b/src/components/checkbox/test/checkbox.spec.ts index 0694d0dfe8..4c957b230a 100644 --- a/src/components/checkbox/test/checkbox.spec.ts +++ b/src/components/checkbox/test/checkbox.spec.ts @@ -1,6 +1,6 @@ import { Checkbox } from '../checkbox'; -import { mockConfig, mockElementRef, mockRenderer, mockItem, mockChangeDetectorRef } from '../../../util/mock-providers'; +import { mockConfig, mockElementRef, mockRenderer, mockItem } from '../../../util/mock-providers'; import { commonInputTest, BOOLEAN_CORPUS } from '../../../util/input-tester'; describe('Checkbox', () => { @@ -11,8 +11,7 @@ describe('Checkbox', () => { const elementRef = mockElementRef(); const renderer = mockRenderer(); const item: any = mockItem(); - const cd = mockChangeDetectorRef(); - const checkbox = new Checkbox(config, null, item, elementRef, renderer, cd); + const checkbox = new Checkbox(config, null, item, elementRef, renderer); commonInputTest(checkbox, { defaultValue: false, diff --git a/src/components/datetime/test/labels/pages/root-page/root-page.html b/src/components/datetime/test/labels/pages/root-page/root-page.html index a19346dc72..3bebd4cc46 100644 --- a/src/components/datetime/test/labels/pages/root-page/root-page.html +++ b/src/components/datetime/test/labels/pages/root-page/root-page.html @@ -26,7 +26,7 @@ Floating - + diff --git a/src/components/fab/fab-container.ts b/src/components/fab/fab-container.ts index 6d0f11bd87..fd12da7f57 100644 --- a/src/components/fab/fab-container.ts +++ b/src/components/fab/fab-container.ts @@ -1,4 +1,4 @@ -import { Component, ContentChild, ContentChildren, QueryList, ElementRef } from '@angular/core'; +import { Component, ContentChild, ContentChildren, QueryList } from '@angular/core'; import { Platform } from '../../platform/platform'; import { UIEventManager } from '../../gestures/ui-event-manager'; @@ -112,7 +112,7 @@ export class FabContainer { */ @ContentChildren(FabList) _fabLists: QueryList; - constructor(private _elementRef: ElementRef, plt: Platform) { + constructor(plt: Platform) { this._events = new UIEventManager(plt); } diff --git a/src/components/img/img.ts b/src/components/img/img.ts index ff3d120148..6dd864f38e 100644 --- a/src/components/img/img.ts +++ b/src/components/img/img.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core'; import { Img as IImg } from './img-interface'; import { Content } from '../content/content'; @@ -134,7 +134,6 @@ export class Img implements OnDestroy, IImg { private _elementRef: ElementRef, private _renderer: Renderer, private _plt: Platform, - private _zone: NgZone, @Optional() private _content: Content, private _dom: DomController ) { @@ -164,14 +163,9 @@ export class Img implements OnDestroy, IImg { // update to the new src this._src = newSrc; - if (newSrc.indexOf('data:') === 0) { - // they're using an actual datauri already - this._hasLoaded = true; - - } else { - // reset any existing datauri we might be holding onto - this._hasLoaded = false; - } + // Are they using an actual datauri already, + // or reset any existing datauri we might be holding onto + this._hasLoaded = newSrc.indexOf('data:') === 0; // run update to kick off requests or render if everything is good this.update(); diff --git a/src/components/img/test/img.spec.ts b/src/components/img/test/img.spec.ts index 227cace262..a1e447c89f 100644 --- a/src/components/img/test/img.spec.ts +++ b/src/components/img/test/img.spec.ts @@ -68,7 +68,7 @@ describe('Img', () => { renderer = mockRenderer(); plt = mockPlatform(); dom = mockDomController(); - img = new Img(elementRef, renderer, plt, mockZone(), content, dom); + img = new Img(elementRef, renderer, plt, content, dom); }); }); diff --git a/src/components/input/test/form-inputs/pages/root-page/root-page.html b/src/components/input/test/form-inputs/pages/root-page/root-page.html index c160bbd4fe..6f78dcc179 100644 --- a/src/components/input/test/form-inputs/pages/root-page/root-page.html +++ b/src/components/input/test/form-inputs/pages/root-page/root-page.html @@ -120,7 +120,7 @@ Custom Attrs { 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/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/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/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/range/range.ios.scss b/src/components/range/range.ios.scss index 8bd56e6e25..07cc074abf 100644 --- a/src/components/range/range.ios.scss +++ b/src/components/range/range.ios.scss @@ -126,7 +126,7 @@ $range-ios-pin-padding: 8px !default; position: absolute; top: ($range-ios-slider-height / 2); - left: 0%; + left: 0; margin-top: -($range-ios-hit-height / 2); margin-left: -($range-ios-hit-width / 2); diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss index 8a1d74cad9..1169050398 100644 --- a/src/components/range/range.md.scss +++ b/src/components/range/range.md.scss @@ -130,7 +130,7 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def position: absolute; top: ($range-md-slider-height / 2); - left: 0%; + left: 0; margin-top: -($range-md-hit-height / 2); margin-left: -($range-md-hit-width / 2); diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss index 0fbcd0dc2b..c967f9c326 100644 --- a/src/components/range/range.wp.scss +++ b/src/components/range/range.wp.scss @@ -121,7 +121,7 @@ $range-wp-pin-padding: 8px !default; position: absolute; top: ($range-wp-slider-height / 2); - left: 0%; + left: 0; margin-top: -($range-wp-hit-height / 2); margin-left: -($range-wp-hit-width / 2); diff --git a/src/components/scroll/scroll.ts b/src/components/scroll/scroll.ts index d5efbff06a..8dda0faef3 100644 --- a/src/components/scroll/scroll.ts +++ b/src/components/scroll/scroll.ts @@ -97,7 +97,7 @@ export class Scroll { /** @internal */ @ViewChild('scrollContent', { read: ElementRef }) _scrollContent: ElementRef; - constructor(private _elementRef: ElementRef) { } + constructor() { } /** * @hidden diff --git a/src/components/scroll/test/basic/main.html b/src/components/scroll/test/basic/main.html index 38c0db5b49..a0c5a4f85e 100644 --- a/src/components/scroll/test/basic/main.html +++ b/src/components/scroll/test/basic/main.html @@ -41,7 +41,7 @@ .pattern1 { background: - radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, + radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), #8a3; background-size: 20px 20px; diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts index fa0a70468b..2ea03da98d 100644 --- a/src/components/searchbar/searchbar.ts +++ b/src/components/searchbar/searchbar.ts @@ -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/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/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.ts b/src/components/select/select.ts index 3a306d985f..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); diff --git a/src/components/slides/slides.scss b/src/components/slides/slides.scss index 54401fe17b..0c86d1922f 100644 --- a/src/components/slides/slides.scss +++ b/src/components/slides/slides.scss @@ -386,7 +386,7 @@ button.swiper-pagination-bullet { .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; - bottom: 0px; + bottom: 0; width: 100%; height: 100%; background: #000; diff --git a/src/components/slides/swiper/swiper-effects.ts b/src/components/slides/swiper/swiper-effects.ts index d7a74cd343..daa5360073 100755 --- a/src/components/slides/swiper/swiper-effects.ts +++ b/src/components/slides/swiper/swiper-effects.ts @@ -8,7 +8,7 @@ import { isSafari, isIosUIWebView } from '../../../platform/platform-utils'; ===========================*/ export const SWIPER_EFFECTS: SlideEffects = { 'fade': { - setTranslate: function (s, plt) { + setTranslate: function (s) { for (var i = 0; i < s._slides.length; i++) { var slide = s._slides[i]; var offset = slide.swiperSlideOffset; diff --git a/src/components/slides/swiper/swiper-events.ts b/src/components/slides/swiper/swiper-events.ts index 11ce84f95d..8a9623d620 100644 --- a/src/components/slides/swiper/swiper-events.ts +++ b/src/components/slides/swiper/swiper-events.ts @@ -731,7 +731,7 @@ function onTouchEnd(s: Slides, plt: Platform, ev: SlideUIEvent) { if (!s._animating) { s._animating = true; - plt.transitionEnd(s._wrapper, (ev) => { + plt.transitionEnd(s._wrapper, () => { if (!s) return; onTransitionEnd(s, plt); }); diff --git a/src/components/slides/swiper/swiper-parallax.ts b/src/components/slides/swiper/swiper-parallax.ts index cb1deca363..b66d1cf05d 100755 --- a/src/components/slides/swiper/swiper-parallax.ts +++ b/src/components/slides/swiper/swiper-parallax.ts @@ -52,7 +52,7 @@ export function parallaxSetTranslate(s: Slides) { for (var i = 0; i < s._slides.length; i++) { var slide = s._slides[i]; - eachChild(slide, '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]', (el) => { + eachChild(slide, '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]', () => { var progress = Math.min(Math.max(slide.progress, -1), 1); setParallaxTransform(s, slide, progress); }); diff --git a/src/components/slides/swiper/swiper.ts b/src/components/slides/swiper/swiper.ts index 3bbb07b748..a1cbdaa1f8 100644 --- a/src/components/slides/swiper/swiper.ts +++ b/src/components/slides/swiper/swiper.ts @@ -867,7 +867,7 @@ export function slidePrev(s: Slides, plt: Platform, runCallbacks?: boolean, spee return false; } -export function slideReset(s: Slides, plt: Platform, runCallbacks?: boolean, speed?: number, internal?: boolean) { +export function slideReset(s: Slides, plt: Platform, runCallbacks?: boolean, speed?: number) { return slideTo(s, plt, s._activeIndex, speed, runCallbacks, true); } 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.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/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.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/toggle/test/toggle.spec.ts b/src/components/toggle/test/toggle.spec.ts index ee27d02c75..7e59bbcd24 100644 --- a/src/components/toggle/test/toggle.spec.ts +++ b/src/components/toggle/test/toggle.spec.ts @@ -1,6 +1,5 @@ - import { Toggle } from '../toggle'; -import { mockConfig, mockPlatform, mockHaptic, mockElementRef, mockGestureController, mockRenderer, mockItem, mockForm, mockChangeDetectorRef, mockZone } from '../../../util/mock-providers'; +import { mockConfig, mockPlatform, mockHaptic, mockElementRef, mockGestureController, mockRenderer, mockItem, mockForm, mockZone } from '../../../util/mock-providers'; import { commonInputTest, BOOLEAN_CORPUS } from '../../../util/input-tester'; describe('Toggle', () => { @@ -14,10 +13,9 @@ describe('Toggle', () => { const item: any = mockItem(); const form = mockForm(); const haptic = mockHaptic(); - const cd = mockChangeDetectorRef(); const gesture = mockGestureController(); const zone = mockZone(); - const toggle = new Toggle(form, config, platform, elementRef, renderer, haptic, item, gesture, null, cd, zone); + const toggle = new Toggle(form, config, platform, elementRef, renderer, haptic, item, gesture, null, zone); commonInputTest(toggle, { defaultValue: false, diff --git a/src/components/toggle/toggle-gesture.ts b/src/components/toggle/toggle-gesture.ts index 45d4e0084a..3d28d2b4b1 100644 --- a/src/components/toggle/toggle-gesture.ts +++ b/src/components/toggle/toggle-gesture.ts @@ -29,7 +29,7 @@ export class ToggleGesture extends PanGesture { }); } - canStart(ev: any): boolean { + canStart(): boolean { return true; } diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts index 81dbe9ed83..bac5daf53c 100644 --- a/src/components/toggle/toggle.ts +++ b/src/components/toggle/toggle.ts @@ -1,4 +1,4 @@ -import { AfterContentInit, NgZone, ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core'; +import { AfterContentInit, NgZone, Component, ElementRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { Config } from '../../config/config'; @@ -77,7 +77,6 @@ export class Toggle extends BaseInput implements IonicTapInput, AfterCo _activated: boolean = false; _startX: number; - _msPrv: number = 0; _gesture: ToggleGesture; /** @@ -102,7 +101,6 @@ export class Toggle extends BaseInput implements IonicTapInput, AfterCo @Optional() item: Item, private _gestureCtrl: GestureController, private _domCtrl: DomController, - private _cd: ChangeDetectorRef, private _zone: NgZone, ) { super(config, elementRef, renderer, 'toggle', false, form, item, null); @@ -211,7 +209,8 @@ export class Toggle extends BaseInput implements IonicTapInput, AfterCo /** * @hidden */ - @HostListener('keyup', ['$event']) _keyup(ev: KeyboardEvent) { + @HostListener('keyup', ['$event']) + _keyup(ev: KeyboardEvent) { if (ev.keyCode === KEY_SPACE || ev.keyCode === KEY_ENTER) { console.debug(`toggle, keyup: ${ev.keyCode}`); ev.preventDefault(); 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/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index 62a968c4c8..af1dabf85d 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -700,7 +700,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { * @hidden * DOM WRITE */ - scrollEnd(ev: ScrollEvent) { + scrollEnd() { // ******** DOM READ **************** updateDimensions(this._plt, this._nodes, this._cells, this._data, false); adjustRendered(this._cells, this._data); diff --git a/src/config/mode-registry.ts b/src/config/mode-registry.ts index 38937f8171..5704e42ece 100644 --- a/src/config/mode-registry.ts +++ b/src/config/mode-registry.ts @@ -1,4 +1,4 @@ -import { Config } from '../config/config'; +import { Config } from './config'; export const MODE_IOS: any = { diff --git a/src/gestures/gesture-controller.ts b/src/gestures/gesture-controller.ts index b1716a77b0..a569bf66d2 100644 --- a/src/gestures/gesture-controller.ts +++ b/src/gestures/gesture-controller.ts @@ -191,10 +191,7 @@ export class GestureController { isDisabled(gestureName: string): boolean { let disabled = this.disabledGestures[gestureName]; - if (disabled && disabled.size > 0) { - return true; - } - return false; + return !!(disabled && disabled.size > 0); } } diff --git a/src/gestures/pan-gesture.ts b/src/gestures/pan-gesture.ts index 842b681df2..272ea283dc 100644 --- a/src/gestures/pan-gesture.ts +++ b/src/gestures/pan-gesture.ts @@ -1,6 +1,6 @@ import { assert, defaults } from '../util/util'; import { DomDebouncer, DomController } from '../platform/dom-controller'; -import { GestureDelegate } from '../gestures/gesture-controller'; +import { GestureDelegate } from './gesture-controller'; import { PanRecognizer } from './recognizers'; import { Platform } from '../platform/platform'; import { pointerCoord } from '../util/dom'; diff --git a/src/gestures/test/gesture-controller.spec.ts b/src/gestures/test/gesture-controller.spec.ts index 792e2a1a79..8c43a34bea 100644 --- a/src/gestures/test/gesture-controller.spec.ts +++ b/src/gestures/test/gesture-controller.spec.ts @@ -21,13 +21,13 @@ describe('gesture controller', () => { c.enableScroll(1); expect(c.isScrollDisabled()).toEqual(false); - for (var i = 0; i < 100; i++) { - for (var j = 0; j < 100; j++) { + for (let i = 0; i < 100; i++) { + for (let j = 0; j < 100; j++) { c.disableScroll(j); } } - for (var i = 0; i < 100; i++) { + for (let i = 0; i < 100; i++) { expect(c.isScrollDisabled()).toEqual(true); c.enableScroll(50 - i); c.enableScroll(i); @@ -50,16 +50,16 @@ describe('gesture controller', () => { expect(c.isDisabled('swipe')).toEqual(false); // Disabling gestures multiple times - for (var gestureName = 0; gestureName < 10; gestureName++) { - for (var i = 0; i < 50; i++) { - for (var j = 0; j < 50; j++) { + for (let gestureName = 0; gestureName < 10; gestureName++) { + for (let i = 0; i < 50; i++) { + for (let j = 0; j < 50; j++) { c.disableGesture(gestureName.toString(), j); } } } - for (var gestureName = 0; gestureName < 10; gestureName++) { - for (var i = 0; i < 49; i++) { + for (let gestureName = 0; gestureName < 10; gestureName++) { + for (let i = 0; i < 49; i++) { c.enableGesture(gestureName.toString(), i); } expect(c.isDisabled(gestureName.toString())).toEqual(true); @@ -126,7 +126,7 @@ describe('gesture controller', () => { let g2 = c.createGesture({name: 'swipe1', priority: 3}); let g3 = c.createGesture({name: 'swipe2', priority: 4}); - for (var i = 0; i < 10; i++) { + for (let i = 0; i < 10; i++) { expect(g1.start()).toEqual(true); expect(g2.start()).toEqual(true); expect(g3.start()).toEqual(true); diff --git a/src/navigation/nav-controller.ts b/src/navigation/nav-controller.ts index 7fd557c3b8..80211f2187 100644 --- a/src/navigation/nav-controller.ts +++ b/src/navigation/nav-controller.ts @@ -505,9 +505,10 @@ export abstract class NavController { /** * Set the root for the current navigation stack. - * @param {Page|string|ViewController} page The name of the component you want to push on the navigation stack. + * @param {Page|string|ViewController} pageOrViewCtrl The name of the component you want to push on the navigation stack. * @param {object} [params={}] Any NavParams you want to pass along to the next view. * @param {object} [opts={}] Any options you want to use pass to transtion. + * @param {Function} done Callback function on done. * @returns {Promise} Returns a promise which is resolved when the transition has completed. */ abstract setRoot(pageOrViewCtrl: Page | string | ViewController, params?: any, opts?: NavOptions, done?: Function): Promise; diff --git a/src/navigation/nav-params.ts b/src/navigation/nav-params.ts index 588e5bea8c..ba6474854f 100644 --- a/src/navigation/nav-params.ts +++ b/src/navigation/nav-params.ts @@ -41,7 +41,7 @@ export class NavParams { * ``` * * - * @param {string} parameter Which param you want to look up + * @param {string} param Which param you want to look up */ get(param: string): any { return this.data[param]; diff --git a/src/navigation/overlay-proxy.ts b/src/navigation/overlay-proxy.ts index 1122305f97..ac992a5ee9 100644 --- a/src/navigation/overlay-proxy.ts +++ b/src/navigation/overlay-proxy.ts @@ -25,7 +25,7 @@ export class OverlayProxy { /** * Present the modal 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/navigation/test/overlay-proxy.spec.ts b/src/navigation/test/overlay-proxy.spec.ts index 79b899ffa4..3caa7a9852 100644 --- a/src/navigation/test/overlay-proxy.spec.ts +++ b/src/navigation/test/overlay-proxy.spec.ts @@ -10,7 +10,7 @@ describe('Overlay Proxy', () => { instance.overlay = mockOverlay(); spyOn(instance.overlay, instance.overlay.dismiss.name).and.returnValue(Promise.resolve()); - const promise = instance.dismiss(null, null, null); + const promise = instance.dismiss(); promise.then(() => { expect(instance.overlay.dismiss).toHaveBeenCalled(); diff --git a/src/navigation/view-controller.ts b/src/navigation/view-controller.ts index caa1909fca..8b8dcb5a21 100644 --- a/src/navigation/view-controller.ts +++ b/src/navigation/view-controller.ts @@ -164,7 +164,7 @@ export class ViewController { * Dismiss the current viewController * @param {any} [data] Data that you want to return when the viewController is dismissed. * @param {any} [role ] - * @param {NavOptions} NavOptions Options for the dismiss navigation. + * @param {NavOptions} navOptions Options for the dismiss navigation. * @returns {any} data Returns the data passed in, if any. */ dismiss(data?: any, role?: string, navOptions: NavOptions = {}): Promise { @@ -396,7 +396,7 @@ export class ViewController { /** * Change the title of the back-button. Be sure to call this * after `ionViewWillEnter` to make sure the DOM has been rendered. - * @param {string} backButtonText Set the back button text. + * @param {string} val Set the back button text. */ setBackButtonText(val: string) { this._nb && this._nb.setBackButtonText(val); diff --git a/src/platform/platform.ts b/src/platform/platform.ts index c8c8977cd8..09986fcf98 100644 --- a/src/platform/platform.ts +++ b/src/platform/platform.ts @@ -426,7 +426,7 @@ export class Platform { * button is pressed. This method decides which of the registered back button * actions has the highest priority and should be called. * - * @param {Function} callback Called when the back button is pressed, + * @param {Function} fn Called when the back button is pressed, * if this registered action has the highest priority. * @param {number} priority Set the priority for this action. Only the highest priority will execute. Defaults to `0`. * @returns {Function} A function that, when called, will unregister diff --git a/src/tap-click/tap-click.ts b/src/tap-click/tap-click.ts index aedb56793a..cd9875a9f3 100644 --- a/src/tap-click/tap-click.ts +++ b/src/tap-click/tap-click.ts @@ -1,4 +1,4 @@ -import { Injectable, NgZone } from '@angular/core'; +import { Injectable } from '@angular/core'; import { assert, runInDev } from '../util/util'; import { Activator } from './activator'; @@ -33,7 +33,6 @@ export class TapClick { private plt: Platform, dom: DomController, private app: App, - zone: NgZone, private gestureCtrl: GestureController ) { this.events = new UIEventManager(plt); @@ -259,8 +258,8 @@ const DISABLE_NATIVE_CLICK_AMOUNT = 2500; /** * @hidden */ -export function setupTapClick(config: Config, plt: Platform, dom: DomController, app: App, zone: NgZone, gestureCtrl: GestureController) { +export function setupTapClick(config: Config, plt: Platform, dom: DomController, app: App, gestureCtrl: GestureController) { return function() { - return new TapClick(config, plt, dom, app, zone, gestureCtrl); + return new TapClick(config, plt, dom, app, gestureCtrl); }; } diff --git a/src/tap-click/test/activator.spec.ts b/src/tap-click/test/activator.spec.ts index 67b17e54f8..43709e7f60 100644 --- a/src/tap-click/test/activator.spec.ts +++ b/src/tap-click/test/activator.spec.ts @@ -131,7 +131,7 @@ function testValues(): any { }; } -var dom: MockDomController; +let dom: MockDomController; function mockActivator(appEnabled: boolean, css: string) { dom = mockDomController(); diff --git a/src/util/events.ts b/src/util/events.ts index 2c6cd100fa..0d88a67a1f 100644 --- a/src/util/events.ts +++ b/src/util/events.ts @@ -1,6 +1,6 @@ import { DomController } from '../platform/dom-controller'; import { Platform } from '../platform/platform'; -import { ScrollView } from '../util/scroll-view'; +import { ScrollView } from './scroll-view'; /** * @name Events @@ -131,7 +131,7 @@ export function setupEvents(plt: Platform, dom: DomController): Events { }); // When that status taps, we respond - win.addEventListener('statusTap', (ev) => { + win.addEventListener('statusTap', () => { // TODO: Make this more better let el = doc.elementFromPoint(plt.width() / 2, plt.height() / 2); if (!el) { return; } diff --git a/src/util/input-tester.ts b/src/util/input-tester.ts index 09cd7a5ee9..ef5f3bdf9e 100644 --- a/src/util/input-tester.ts +++ b/src/util/input-tester.ts @@ -198,7 +198,7 @@ function testNgModelChange(input: BaseInput, config: TestConfig, isInit: b }); // Test registerOnChange - input.registerOnChange((ev: any) => { + input.registerOnChange(() => { OnChangeCalled++; }); diff --git a/src/util/mock-providers.ts b/src/util/mock-providers.ts index 75357c5f75..404d136876 100644 --- a/src/util/mock-providers.ts +++ b/src/util/mock-providers.ts @@ -550,7 +550,7 @@ export function mockMenu(platform: MockPlatform = null): Menu { let elementRef = mockElementRef(); let renderer = mockRenderer(); let plt = platform === null ? mockPlatform() : platform; - return new Menu(null, elementRef, null, plt, renderer, null, null, gestureCtrl, dom, app); + return new Menu(null, elementRef, null, plt, renderer, null, gestureCtrl, dom, app); } export function mockDeepLinkConfig(links?: any[]): DeepLinkConfig { diff --git a/src/util/util.ts b/src/util/util.ts index 1c577b97f0..6858060f86 100644 --- a/src/util/util.ts +++ b/src/util/util.ts @@ -53,7 +53,7 @@ export function debounce(fn: Function, wait: number, immediate: boolean = false) * @hidden * Apply default arguments if they don't exist in * the first object. - * @param the destination to apply defaults to. + * @param {any} dest the destination to apply defaults to. */ export function defaults(dest: any, ...args: any[]) { for (var i = arguments.length - 1; i >= 1; i--) { From 1d435bfd95ecc5d1b101ed7ebf1a02261b51e480 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Fri, 5 May 2017 02:29:08 +0300 Subject: [PATCH 09/34] docs(snapshot): missing vital info (#11502) * docs(snapshot): depends on java jdk as well * docs(snapshot): only works on a retina mac * docs(snapshot): move explanation out of setup * docs(snapshot): only for mac --- scripts/README.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/scripts/README.md b/scripts/README.md index 45466c2e8d..8376c6a176 100644 --- a/scripts/README.md +++ b/scripts/README.md @@ -86,11 +86,15 @@ To remove the linked version of `ionic-angular` do `npm rm ionic-angular`, and t ### Running Snapshot -#### Setup +Snapshot compares to a base snapshot made on Mac OS with retina screen (2560x1600). +It does not work for windows, linux, or non retina macs. -1. Install [Protractor](https://angular.github.io/protractor/#/): `npm install -g protractor@2.5.1` -2. Run `webdriver-manager update` -3. Export `IONIC_SNAPSHOT_KEY` (get from someone) +#### Setup (Mac OS X Only) + +1. Install Java JDK: `brew cask install java` +2. Install [Protractor](https://angular.github.io/protractor/#/): `npm install -g protractor@2.5.1` +3. Run `webdriver-manager update` +4. Export `IONIC_SNAPSHOT_KEY` (get from someone) #### Commands From 325cc5eea7e3c108365d332926c0e2a3bd587fd3 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Fri, 5 May 2017 01:31:42 +0200 Subject: [PATCH 10/34] feat(wk): built-in support for WK (#11048) --- src/index.ts | 2 +- src/util/util.ts | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index c9ad2a50a1..ee391a2424 100644 --- a/src/index.ts +++ b/src/index.ts @@ -159,7 +159,7 @@ export { Events, setupEvents, setupProvideEvents } from './util/events'; export { IonicErrorHandler } from './util/ionic-error-handler'; export { Keyboard } from './platform/keyboard'; export { Form, IonicFormInput, IonicTapInput } from './util/form'; -export { reorderArray } from './util/util'; +export { reorderArray, normalizeURL } from './util/util'; export { Animation, AnimationOptions, EffectProperty, EffectState, PlayOptions } from './animations/animation'; export { PageTransition } from './transitions/page-transition'; export { Transition } from './transitions/transition'; diff --git a/src/util/util.ts b/src/util/util.ts index 6858060f86..ef2fa614cc 100644 --- a/src/util/util.ts +++ b/src/util/util.ts @@ -49,6 +49,17 @@ export function debounce(fn: Function, wait: number, immediate: boolean = false) }; } +/** + * Rewrites an absolute URL so it works across file and http based engines. + */ +export function normalizeURL(url: string): string { + const ionic = (window)['Ionic']; + if (ionic && ionic.normalizeURL) { + return ionic.normalizeURL(url); + } + return url; +} + /** * @hidden * Apply default arguments if they don't exist in From 88e5642f60502b35565fcc833cfc931fc0ae1f3e Mon Sep 17 00:00:00 2001 From: Manuel Mtz-Almeida Date: Thu, 20 Apr 2017 19:31:04 +0200 Subject: [PATCH 11/34] perf(virtual-list): relaxed restrictions for fast path --- .../virtual-scroll/test/basic/app.module.ts | 30 +++++------ .../virtual-scroll/test/basic/main.html | 10 ++-- .../virtual-scroll/virtual-scroll.ts | 52 ++++++++++++++++--- 3 files changed, 65 insertions(+), 27 deletions(-) diff --git a/src/components/virtual-scroll/test/basic/app.module.ts b/src/components/virtual-scroll/test/basic/app.module.ts index 70ddf47dae..1607a51826 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,20 @@ export class E2EPage { this.counter++; } - reload() { - window.location.reload(true); + addRandomItem() { + const index = Math.floor(Math.random() * this.items.length); + this.items.splice( index, 0, { + value: Math.floor(Math.random() * 10000), + someMethod: function() { + return '!!'; + } + } + ); + } + + changeItem() { + const index = Math.floor(Math.random() * this.items.length); + this.items[index].value = Math.floor(Math.random() * 10000); } trackByFn(index: number, item: any) { diff --git a/src/components/virtual-scroll/test/basic/main.html b/src/components/virtual-scroll/test/basic/main.html index 352d64427a..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}} - + diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index af1dabf85d..de7c1a622b 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -379,7 +379,6 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { return this._virtualTrackBy; } - constructor( private _iterableDiffers: IterableDiffers, private _elementRef: ElementRef, @@ -412,6 +411,28 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { }); } + /** + * @hidden + */ + firstRecord(): number { + const cells = this._cells; + if (cells.length > 0) { + return cells[0].record; + } + return 0; + } + + /** + * @hidden + */ + lastRecord(): number { + const cells = this._cells; + if (cells.length > 0) { + return cells[cells.length - 1].record; + } + return 0; + } + /** * @hidden */ @@ -429,8 +450,9 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { let needClean = false; if (changes) { + var lastRecord = this.lastRecord() + 1; changes.forEachOperation((item, _, cindex) => { - if (item.previousIndex != null || (cindex < this._recordSize)) { + if (item.previousIndex != null || (cindex < lastRecord)) { needClean = true; } }); @@ -443,10 +465,13 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { this.writeUpdate(needClean); } + /** + * @hidden + */ readUpdate(needClean: boolean) { if (needClean) { // reset everything - console.debug(`virtual-scroll, readUpdate: slow path`); + console.debug('virtual-scroll, readUpdate: slow path'); this._cells.length = 0; this._nodes.length = 0; this._itmTmp.viewContainer.clear(); @@ -458,8 +483,11 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } } + /** + * @hidden + */ writeUpdate(needClean: boolean) { - console.debug(`virtual-scroll, writeUpdate`); + console.debug('virtual-scroll, writeUpdate need clean:', needClean); const data = this._data; const stopAtHeight = (data.scrollTop + data.renderHeight); data.scrollDiff = SCROLL_DIFFERENCE_MINIMUM + 1; @@ -475,6 +503,9 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { this.renderVirtual(needClean); } + /** + * @hidden + */ private calcDimensions() { calcDimensions(this._data, this._elementRef.nativeElement, this.approxItemWidth, this.approxItemHeight, @@ -571,7 +602,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } /** - * @private + * @hidden */ resize() { // only continue if we've already initialized @@ -605,7 +636,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } /** - * @private + * @hidden */ private _stepChangeDetection() { // we need to do some change detection in this frame @@ -624,7 +655,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } /** - * @private + * @hidden */ private _stepNoChanges() { const data = this._data; @@ -675,7 +706,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } /** - * @private + * @hidden */ scrollUpdate(ev: ScrollEvent) { // set the scroll top from the scroll event @@ -718,6 +749,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } /** + * @hidden * NO DOM */ private _listeners() { @@ -738,6 +770,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } /** + * @hidden * DOM WRITE */ private _setHeight(newVirtualHeight: number) { @@ -762,6 +795,9 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } } + /** + * @hidden + */ setElementClass(className: string, add: boolean) { this._renderer.setElementClass(this._elementRef.nativeElement, className, add); } From 8baa6474a4b78af335d1fc7ae6309da5c461ea1d Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Sun, 23 Apr 2017 16:00:04 +0200 Subject: [PATCH 12/34] perf(virtual-scroll): fast path for removing --- .../virtual-scroll/test/basic/app.module.ts | 7 +++-- .../virtual-scroll/virtual-scroll.ts | 31 +++++++++++-------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/components/virtual-scroll/test/basic/app.module.ts b/src/components/virtual-scroll/test/basic/app.module.ts index 1607a51826..9faa4cbee5 100644 --- a/src/components/virtual-scroll/test/basic/app.module.ts +++ b/src/components/virtual-scroll/test/basic/app.module.ts @@ -44,18 +44,19 @@ export class E2EPage { 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); - this.items[index].value = Math.floor(Math.random() * 10000); + console.log('Change to index: ', index); + this.items[index] = { value: Math.floor(Math.random() * 10000), someMethod: () => '!!' }; } trackByFn(index: number, item: any) { diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index de7c1a622b..18829b5e54 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -233,7 +233,8 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { scrollTop: 0, }; _queue: number = SCROLL_QUEUE_NO_CHANGES; - _recordSize: number = 0; + + _virtualTrackBy: TrackByFn; @ContentChild(VirtualItem) _itmTmp: VirtualItem; @@ -416,10 +417,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { */ firstRecord(): number { const cells = this._cells; - if (cells.length > 0) { - return cells[0].record; - } - return 0; + return (cells.length > 0) ? cells[0].record : 0; } /** @@ -427,10 +425,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { */ lastRecord(): number { const cells = this._cells; - if (cells.length > 0) { - return cells[cells.length - 1].record; - } - return 0; + return (cells.length > 0) ? cells[cells.length - 1].record : 0; } /** @@ -451,15 +446,25 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { let needClean = false; if (changes) { var lastRecord = this.lastRecord() + 1; - changes.forEachOperation((item, _, cindex) => { - if (item.previousIndex != null || (cindex < lastRecord)) { + + changes.forEachOperation((_, pindex, cindex) => { + + // add new record after current position + if (pindex === null && (cindex < lastRecord)) { + console.debug('adding record before current position, slow path'); needClean = true; + return; + } + // remove record after current position + if (pindex < lastRecord && cindex === null) { + console.debug('removing record before current position, slow path'); + needClean = true; + return; } }); } else { needClean = true; } - this._recordSize = this._records.length; this.readUpdate(needClean); this.writeUpdate(needClean); @@ -555,7 +560,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { this._itmTmp.viewContainer, this._itmTmp.templateRef, this._hdrTmp && this._hdrTmp.templateRef, - this._ftrTmp && this._ftrTmp.templateRef, needClean, + this._ftrTmp && this._ftrTmp.templateRef, needClean ); }); From df8d1cc3894127085f560866e1b3543c312618ed Mon Sep 17 00:00:00 2001 From: Manuel Mtz-Almeida Date: Fri, 5 May 2017 01:50:17 +0200 Subject: [PATCH 13/34] fix(tap-click): updates setupTapClick signature --- src/module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/module.ts b/src/module.ts index b210ade49c..f29fd90523 100644 --- a/src/module.ts +++ b/src/module.ts @@ -419,7 +419,7 @@ export class IonicModule { // useFactory: ionic app initializers { provide: APP_INITIALIZER, useFactory: registerModeConfigs, deps: [ Config ], multi: true }, { provide: APP_INITIALIZER, useFactory: setupProvideEvents, deps: [ Platform, DomController ], multi: true }, - { provide: APP_INITIALIZER, useFactory: setupTapClick, deps: [ Config, Platform, DomController, App, NgZone, GestureController ], multi: true }, + { provide: APP_INITIALIZER, useFactory: setupTapClick, deps: [ Config, Platform, DomController, App, GestureController ], multi: true }, { provide: APP_INITIALIZER, useFactory: setupPreloading, deps: [ Config, DeepLinkConfigToken, ModuleLoader, NgZone ], multi: true }, // useClass From 6d11499417a071a9bd9de5b064730e5e1ae9f2d9 Mon Sep 17 00:00:00 2001 From: Manuel Mtz-Almeida Date: Fri, 5 May 2017 01:55:50 +0200 Subject: [PATCH 14/34] fix(view-controller): _dismissRole is a string --- src/navigation/view-controller.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/navigation/view-controller.ts b/src/navigation/view-controller.ts index 8b8dcb5a21..a89538abf5 100644 --- a/src/navigation/view-controller.ts +++ b/src/navigation/view-controller.ts @@ -38,7 +38,7 @@ export class ViewController { private _onDidDismiss: (data: any, role: string) => void; private _onWillDismiss: (data: any, role: string) => void; private _dismissData: any; - private _dismissRole: any; + private _dismissRole: string; private _detached: boolean; _cmp: ComponentRef; From 26c653e43eda98d5aa126ebde954a1feb7d6506a Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Fri, 5 May 2017 18:53:32 +0300 Subject: [PATCH 15/34] feat(item): deprecate item-left / item-right attributes for item-start / item-end (#11125) item-start and item-end make more sense for RTL * refactor(item): replaced item-left with item-start replaced item-right with item-end * style(item): fix spacing * fix(item): add backwards support for left/right in ng-content * fix(item): deprecated old variables, not breaking change * fix(scss): fix variable name * fix(item): old attributes deprecated support --- .../item-sliding/pages/page-one/page-one.html | 6 +- demos/src/item/pages/page-one/page-one.html | 38 ++-- demos/src/label/pages/page-one/page-one.html | 6 +- demos/src/list/pages/page-one/page-one.html | 32 +-- .../src/loading/pages/page-one/page-one.html | 12 +- demos/src/range/pages/page-one/page-one.html | 10 +- .../src/segment/pages/page-one/page-one.html | 4 +- .../pages/page-one/page-one.html | 4 +- .../pages/page-two/page-two.html | 2 +- src/components/avatar/avatar.ts | 2 +- .../test/basic/pages/page-one/page-one.html | 34 ++-- .../advanced/pages/root-page/root-page.html | 2 +- .../test/basic/pages/root-page/root-page.html | 12 +- .../images/pages/root-page/root-page.html | 2 +- .../test/list/pages/root-page/root-page.html | 28 +-- src/components/card/test/map/main.html | 30 +-- src/components/card/test/social/main.html | 24 +-- src/components/checkbox/checkbox.ios.scss | 15 +- src/components/checkbox/checkbox.md.scss | 15 +- src/components/checkbox/checkbox.wp.scss | 15 +- .../test/basic/pages/root-page/root-page.html | 6 +- .../test/basic/pages/root-page/root-page.html | 2 +- src/components/icon/test/basic/main.html | 28 +-- .../test/basic/pages/root-page/root-page.html | 28 +-- .../test/basic/pages/root-page/root-page.html | 20 +- src/components/img/test/cards/main.html | 8 +- src/components/img/test/lazy-load/main.html | 192 +++++++++--------- src/components/img/test/list/main.html | 4 +- src/components/input/input.wp.scss | 6 +- .../pages/root-page/root-page.html | 4 +- .../pages/root-page/root-page.html | 14 +- .../pages/root-page/root-page.html | 10 +- .../highlight/pages/root-page/root-page.html | 20 +- .../pages/root-page/root-page.html | 12 +- .../pages/root-page/root-page.html | 14 +- .../pages/root-page/root-page.html | 18 +- .../pages/root-page/root-page.html | 8 +- .../pages/root-page/root-page.html | 4 +- src/components/item/item.ios.scss | 24 ++- src/components/item/item.md.scss | 30 ++- src/components/item/item.ts | 36 ++-- src/components/item/item.wp.scss | 30 ++- .../buttons/pages/root-page/root-page.html | 32 +-- .../colors/pages/root-page/root-page.html | 12 +- .../dividers/pages/root-page/root-page.html | 12 +- .../test/icons/pages/root-page/root-page.html | 26 +-- .../images/pages/root-page/root-page.html | 14 +- .../inputs/pages/root-page/root-page.html | 2 +- .../test/media/pages/root-page/root-page.html | 20 +- .../sliding/pages/root-page/root-page.html | 12 +- src/components/label/label.ios.scss | 6 +- src/components/label/label.md.scss | 6 +- src/components/label/label.wp.scss | 6 +- src/components/list/test/chat-list/main.html | 28 +-- .../header-scenarios/pages/main/main.html | 28 +-- .../test/headers/pages/page-one/page-one.html | 36 ++-- .../test/inset/pages/page-one/page-one.html | 12 +- .../no-lines/pages/page-one/page-one.html | 58 +++--- .../list/test/repeat-headers/main.html | 2 +- src/components/note/note.ts | 4 +- src/components/radio/radio.ios.scss | 15 +- src/components/radio/radio.md.scss | 15 +- src/components/radio/radio.wp.scss | 15 +- .../test/basic/pages/page-one/page-one.html | 8 +- src/components/thumbnail/thumbnail.ts | 2 +- .../test/basic/pages/root-page/root-page.html | 4 +- src/components/toggle/toggle.ios.scss | 15 +- src/components/toggle/toggle.md.scss | 15 +- src/components/toggle/toggle.wp.scss | 15 +- .../virtual-scroll/test/cards/main.html | 2 +- .../virtual-scroll/test/list/main.html | 4 +- .../test/media/pages/root-page/root-page.html | 6 +- .../virtual-scroll/virtual-scroll.ts | 2 +- 73 files changed, 663 insertions(+), 582 deletions(-) diff --git a/demos/src/item-sliding/pages/page-one/page-one.html b/demos/src/item-sliding/pages/page-one/page-one.html index 28afdd708d..5e2b8513e6 100644 --- a/demos/src/item-sliding/pages/page-one/page-one.html +++ b/demos/src/item-sliding/pages/page-one/page-one.html @@ -16,12 +16,12 @@ - +

{{chat.name}}

{{chat.message}}

- + {{chat.time}} @@ -58,7 +58,7 @@ - +

{{login.name}}

{{login.username}}

 diff --git a/demos/src/item/pages/page-one/page-one.html b/demos/src/item/pages/page-one/page-one.html index 2a6f2ba07d..7b44c8ce0f 100644 --- a/demos/src/item/pages/page-one/page-one.html +++ b/demos/src/item/pages/page-one/page-one.html @@ -12,51 +12,51 @@ Settings - - + Airplane Mode Other Settings - + - + Silence Phone @@ -76,24 +76,24 @@ - + Ionic View - + - + Ionic Creator - + - + Hubstruck - + - + Barkpark - + diff --git a/demos/src/label/pages/page-one/page-one.html b/demos/src/label/pages/page-one/page-one.html index b141a7eaf2..a1cb7a755d 100644 --- a/demos/src/label/pages/page-one/page-one.html +++ b/demos/src/label/pages/page-one/page-one.html @@ -11,7 +11,7 @@ - + Ionic @@ -21,8 +21,8 @@ Mobile - - + + diff --git a/demos/src/list/pages/page-one/page-one.html b/demos/src/list/pages/page-one/page-one.html index 74ae7c7b66..0153c4e9b0 100644 --- a/demos/src/list/pages/page-one/page-one.html +++ b/demos/src/list/pages/page-one/page-one.html @@ -15,32 +15,32 @@ - + Airplane Mode @@ -65,24 +65,24 @@ - + Ionic View - + - + Ionic Creator - + - + Hubstruck - + - + Barkpark - + diff --git a/demos/src/loading/pages/page-one/page-one.html b/demos/src/loading/pages/page-one/page-one.html index 4f940f97dd..3dd6ec62ee 100644 --- a/demos/src/loading/pages/page-one/page-one.html +++ b/demos/src/loading/pages/page-one/page-one.html @@ -14,27 +14,27 @@ Spinner Loading Indicators diff --git a/demos/src/range/pages/page-one/page-one.html b/demos/src/range/pages/page-one/page-one.html index 1165a4995a..945c92c1db 100644 --- a/demos/src/range/pages/page-one/page-one.html +++ b/demos/src/range/pages/page-one/page-one.html @@ -12,7 +12,7 @@ Brightness - {{brightness}} + {{brightness}} @@ -25,7 +25,7 @@ Saturation - {{saturation}} + {{saturation}} @@ -38,7 +38,7 @@ Warmth - {{warmth}} + {{warmth}} @@ -51,8 +51,8 @@ Structure - {{structure.lower}} - {{structure.upper}} + {{structure.lower}} + {{structure.upper}} diff --git a/demos/src/segment/pages/page-one/page-one.html b/demos/src/segment/pages/page-one/page-one.html index b59ab2acd1..5719afb701 100644 --- a/demos/src/segment/pages/page-one/page-one.html +++ b/demos/src/segment/pages/page-one/page-one.html @@ -25,7 +25,7 @@ {{ appType }} {{ item.name }} - + @@ -47,7 +47,7 @@ diff --git a/src/components/app/test/gesture-collision/pages/page-one/page-one.html b/src/components/app/test/gesture-collision/pages/page-one/page-one.html index 30d995cbf2..73fce4d3f6 100644 --- a/src/components/app/test/gesture-collision/pages/page-one/page-one.html +++ b/src/components/app/test/gesture-collision/pages/page-one/page-one.html @@ -24,7 +24,7 @@ Apple - + @@ -106,7 +106,7 @@ Apple - + diff --git a/src/components/app/test/gesture-collision/pages/page-two/page-two.html b/src/components/app/test/gesture-collision/pages/page-two/page-two.html index 2a40b26870..f8c569efe1 100644 --- a/src/components/app/test/gesture-collision/pages/page-two/page-two.html +++ b/src/components/app/test/gesture-collision/pages/page-two/page-two.html @@ -76,7 +76,7 @@ Apple - + diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index e05fe3d04e..356f8043f4 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -5,7 +5,7 @@ import { Directive } from '@angular/core'; * @module ionic * @description * An Avatar is a component that creates a circular image for an item. - * Avatars can be placed on the left or right side of an item with the `item-left` or `item-right` directive. + * Avatars can be placed on the left or right side of an item with the `item-start` or `item-end` directive. * @see {@link /docs/components/#avatar-list Avatar Component Docs} */ @Directive({ diff --git a/src/components/badge/test/basic/pages/page-one/page-one.html b/src/components/badge/test/basic/pages/page-one/page-one.html index 0fd56bbfb2..ca7b1983d9 100644 --- a/src/components/badge/test/basic/pages/page-one/page-one.html +++ b/src/components/badge/test/basic/pages/page-one/page-one.html @@ -15,39 +15,39 @@ Default Badge - 99 + 99 Primary Badge - 99 + 99 Secondary Badge - 99 + 99 Danger Badge - 99 + 99 Light Badge - 99 + 99 Dark Badge - 99 + 99 @@ -57,35 +57,35 @@ Default Badge - 99 + 99 Primary Badge - 99 + 99 Secondary Badge - 99 + 99 Danger Badge - 99 + 99 Light Badge - 99 + 99 Dark Badge - 99 + 99 diff --git a/src/components/card/test/advanced/pages/root-page/root-page.html b/src/components/card/test/advanced/pages/root-page/root-page.html index 06674c32d0..8a6236931c 100644 --- a/src/components/card/test/advanced/pages/root-page/root-page.html +++ b/src/components/card/test/advanced/pages/root-page/root-page.html @@ -48,7 +48,7 @@ - +

Card With An Inset Picture

diff --git a/src/components/card/test/basic/pages/root-page/root-page.html b/src/components/card/test/basic/pages/root-page/root-page.html index 688be7bca0..05ff449a11 100644 --- a/src/components/card/test/basic/pages/root-page/root-page.html +++ b/src/components/card/test/basic/pages/root-page/root-page.html @@ -26,9 +26,9 @@ - + ion-item in a card, icon left, button right - + @@ -42,22 +42,22 @@ - + Card Link Item 1 .activated - + Card Link Item 2 diff --git a/src/components/card/test/images/pages/root-page/root-page.html b/src/components/card/test/images/pages/root-page/root-page.html index 8bb0f5d1b6..661780a0c3 100644 --- a/src/components/card/test/images/pages/root-page/root-page.html +++ b/src/components/card/test/images/pages/root-page/root-page.html @@ -23,7 +23,7 @@ - +

Card with large avatar

diff --git a/src/components/card/test/list/pages/root-page/root-page.html b/src/components/card/test/list/pages/root-page/root-page.html index 0933dd9773..b0874ce07f 100644 --- a/src/components/card/test/list/pages/root-page/root-page.html +++ b/src/components/card/test/list/pages/root-page/root-page.html @@ -18,24 +18,24 @@ @@ -50,23 +50,23 @@ - + Wifi - + Affection - + Very Little - + Home - + Where the heart is @@ -82,23 +82,23 @@ - + Wifi - + Affection - + Very Little - + Home - + Where the heart is diff --git a/src/components/card/test/map/main.html b/src/components/card/test/map/main.html index 60674b26ae..132c0c93e3 100644 --- a/src/components/card/test/map/main.html +++ b/src/components/card/test/map/main.html @@ -17,21 +17,21 @@ - +

Museum of Football

11 N. Way St, Madison, WI 53703

 - +

Institute of Fine Cocktails

14 S. Hop Avenue, Madison, WI 53703

 - 18 min - (2.6 mi) - @@ -47,21 +47,21 @@ - +

Yoshi's Island

Iggy Koopa

 - +

Forest of Illusion

Roy Koopa

 - 3 hr - (4.8 mi) - @@ -77,21 +77,21 @@ - +

Museum of Information

44 Rue de Info, 75010 Paris, France

 - +

General Pharmacy

1 Avenue Faux, 75010 Paris, France

 - 26 min - (8.1 mi) - diff --git a/src/components/card/test/social/main.html b/src/components/card/test/social/main.html index 8550de4fe1..49016ca683 100644 --- a/src/components/card/test/social/main.html +++ b/src/components/card/test/social/main.html @@ -12,7 +12,7 @@ - +

Marty McFly

@@ -26,15 +26,15 @@ - - - + 11h ago @@ -45,7 +45,7 @@ - +

Sarah Connor

@@ -59,15 +59,15 @@ - - - + 30yr ago @@ -77,7 +77,7 @@ - +

Dr. Ian Malcolm

@@ -91,15 +91,15 @@ - - - + 2d ago diff --git a/src/components/checkbox/checkbox.ios.scss b/src/components/checkbox/checkbox.ios.scss index 076b64112c..9f48578339 100644 --- a/src/components/checkbox/checkbox.ios.scss +++ b/src/components/checkbox/checkbox.ios.scss @@ -39,11 +39,15 @@ $checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox- /// @prop - Opacity of the disabled checkbox $checkbox-ios-disabled-opacity: .3 !default; -/// @prop - Margin of the left checkbox item +// deprecated $checkbox-ios-item-left-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default; +/// @prop - Margin of the start checkbox item +$checkbox-ios-item-start-margin: $checkbox-ios-item-left-margin; -/// @prop - Margin of the right checkbox item +// deprecated $checkbox-ios-item-right-margin: 10px 8px 9px 0 !default; +/// @prop - Margin of the end checkbox item +$checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; .checkbox-ios { @@ -116,11 +120,12 @@ $checkbox-ios-item-right-margin: 10px 8px 9px 0 !default; position: static; display: block; - margin: $checkbox-ios-item-left-margin; + margin: $checkbox-ios-item-start-margin; } -.item.item-ios .checkbox-ios[item-right] { - margin: $checkbox-ios-item-right-margin; +.item.item-ios .checkbox-ios[item-right], // deprecated +.item.item-ios .checkbox-ios[item-end] { + margin: $checkbox-ios-item-end-margin; } diff --git a/src/components/checkbox/checkbox.md.scss b/src/components/checkbox/checkbox.md.scss index 0eb91dbb34..ec953315d1 100644 --- a/src/components/checkbox/checkbox.md.scss +++ b/src/components/checkbox/checkbox.md.scss @@ -60,11 +60,15 @@ $checkbox-md-transition-duration: 280ms !default; /// @prop - Transition easing of the checkbox $checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; -/// @prop - Margin of the left checkbox item +// deprecated $checkbox-md-item-left-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default; +/// @prop - Margin of the start checkbox item +$checkbox-md-item-start-margin: $checkbox-md-item-left-margin; -/// @prop - Margin of the right checkbox item +// deprecated $checkbox-md-item-right-margin: 11px 10px 10px 0 !default; +/// @prop - Margin of the end checkbox item +$checkbox-md-item-end-margin: $checkbox-md-item-right-margin; .checkbox-md { @@ -141,11 +145,12 @@ $checkbox-md-item-right-margin: 11px 10px 10px 0 !default; position: static; display: block; - margin: $checkbox-md-item-left-margin; + margin: $checkbox-md-item-start-margin; } -.item.item-md .checkbox-md[item-right] { - margin: $checkbox-md-item-right-margin; +.item.item-md .checkbox-md[item-right], // deprecated +.item.item-md .checkbox-md[item-end] { + margin: $checkbox-md-item-end-margin; } .checkbox-md + .item-inner ion-label { diff --git a/src/components/checkbox/checkbox.wp.scss b/src/components/checkbox/checkbox.wp.scss index 7d1dea228e..1f000f1c71 100644 --- a/src/components/checkbox/checkbox.wp.scss +++ b/src/components/checkbox/checkbox.wp.scss @@ -54,11 +54,15 @@ $checkbox-wp-icon-border-color-off: #333 !default; /// @prop - Border color of the checkbox icon when on $checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default; -/// @prop - Margin of the left checkbox item +// deprecated $checkbox-wp-item-left-margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default; +/// @prop - Margin of the start checkbox item +$checkbox-wp-item-start-margin: $checkbox-wp-item-left-margin; -/// @prop - Margin of the right checkbox item +// deprecated $checkbox-wp-item-right-margin: 11px 10px 10px 0 !default; +/// @prop - Margin of the end checkbox item +$checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; .checkbox-wp { @@ -131,11 +135,12 @@ $checkbox-wp-item-right-margin: 11px 10px 10px 0 !default; position: static; display: block; - margin: $checkbox-wp-item-left-margin; + margin: $checkbox-wp-item-start-margin; } -.item.item-wp .checkbox-wp[item-right] { - margin: $checkbox-wp-item-right-margin; +.item.item-wp .checkbox-wp[item-right], // deprecated +.item.item-wp .checkbox-wp[item-end] { + margin: $checkbox-wp-item-end-margin; } .checkbox-wp + .item-inner ion-label { diff --git a/src/components/checkbox/test/basic/pages/root-page/root-page.html b/src/components/checkbox/test/basic/pages/root-page/root-page.html index 332c05c012..dd8d2f1bdd 100644 --- a/src/components/checkbox/test/basic/pages/root-page/root-page.html +++ b/src/components/checkbox/test/basic/pages/root-page/root-page.html @@ -45,17 +45,17 @@ Checkbox right, checked, really long text that should ellipsis - + diff --git a/src/components/chip/test/basic/pages/root-page/root-page.html b/src/components/chip/test/basic/pages/root-page/root-page.html index 7a9bf9ee60..a78359a555 100644 --- a/src/components/chip/test/basic/pages/root-page/root-page.html +++ b/src/components/chip/test/basic/pages/root-page/root-page.html @@ -95,7 +95,7 @@ Chip Item - + Default + - + diff --git a/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html b/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html index cc091d04c4..022a9fc81a 100644 --- a/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html +++ b/src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html @@ -30,7 +30,7 @@ From - @@ -45,32 +45,32 @@ - + Website - + Email - + Phone - + Score - + @@ -84,7 +84,7 @@ - + Message diff --git a/src/components/input/test/floating-labels/pages/root-page/root-page.html b/src/components/input/test/floating-labels/pages/root-page/root-page.html index d671dc0106..17285bdfaf 100644 --- a/src/components/input/test/floating-labels/pages/root-page/root-page.html +++ b/src/components/input/test/floating-labels/pages/root-page/root-page.html @@ -14,7 +14,7 @@ Params: {{ myParam }} - @@ -32,13 +32,13 @@ value: {{ numberInput.value }} min: {{ minValue }} max: {{ maxValue }} step: {{ stepValue }} - + ngModel 2: {{ myValues.value2 }} - @@ -51,7 +51,7 @@ Email Input: {{ emailInput.value }} - + @@ -59,7 +59,7 @@ Textarea Input: {{ textareaInput.value }} - + diff --git a/src/components/input/test/highlight/pages/root-page/root-page.html b/src/components/input/test/highlight/pages/root-page/root-page.html index 79810dc7c8..47c7c95fe7 100644 --- a/src/components/input/test/highlight/pages/root-page/root-page.html +++ b/src/components/input/test/highlight/pages/root-page/root-page.html @@ -38,31 +38,31 @@ - + Stacked - + Floating - + Fixed - + Inline Comment value - + Inset @@ -71,31 +71,31 @@ - + Stacked - + Floating - + Fixed - + Inline Comment value - + Inset diff --git a/src/components/input/test/inline-labels/pages/root-page/root-page.html b/src/components/input/test/inline-labels/pages/root-page/root-page.html index 0eda034436..df4f030d2f 100644 --- a/src/components/input/test/inline-labels/pages/root-page/root-page.html +++ b/src/components/input/test/inline-labels/pages/root-page/root-page.html @@ -26,7 +26,7 @@ From: - @@ -37,19 +37,19 @@ - + Website: - + Email: - + Feedback: @@ -57,13 +57,13 @@ More Info: - + Score: - + diff --git a/src/components/input/test/input-focus/pages/root-page/root-page.html b/src/components/input/test/input-focus/pages/root-page/root-page.html index ded444ec43..896f300c61 100644 --- a/src/components/input/test/input-focus/pages/root-page/root-page.html +++ b/src/components/input/test/input-focus/pages/root-page/root-page.html @@ -25,7 +25,7 @@ Item with button right - + @@ -40,7 +40,7 @@ Text 3: - @@ -51,19 +51,19 @@ - + Website: - + Email: - + Feedback: @@ -76,7 +76,7 @@ More Info: - + @@ -87,7 +87,7 @@ Score: - + diff --git a/src/components/input/test/inset-inputs/pages/root-page/root-page.html b/src/components/input/test/inset-inputs/pages/root-page/root-page.html index dd80a590b9..0704c63ccd 100644 --- a/src/components/input/test/inset-inputs/pages/root-page/root-page.html +++ b/src/components/input/test/inset-inputs/pages/root-page/root-page.html @@ -12,17 +12,17 @@ - + - + - + @@ -32,13 +32,13 @@ - + - + @@ -47,9 +47,9 @@ - + - + @@ -58,13 +58,13 @@ - + - + diff --git a/src/components/input/test/placeholder-labels/pages/root-page/root-page.html b/src/components/input/test/placeholder-labels/pages/root-page/root-page.html index b4f12e578b..afdada04fe 100644 --- a/src/components/input/test/placeholder-labels/pages/root-page/root-page.html +++ b/src/components/input/test/placeholder-labels/pages/root-page/root-page.html @@ -27,12 +27,12 @@ - + - + @@ -61,12 +61,12 @@ - + - + diff --git a/src/components/input/test/stacked-labels/pages/root-page/root-page.html b/src/components/input/test/stacked-labels/pages/root-page/root-page.html index eb718bb58c..2fc7dc31db 100644 --- a/src/components/input/test/stacked-labels/pages/root-page/root-page.html +++ b/src/components/input/test/stacked-labels/pages/root-page/root-page.html @@ -20,8 +20,8 @@ Label 2 - - + + diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss index b4c6816c49..c9f56c05f9 100644 --- a/src/components/item/item.ios.scss +++ b/src/components/item/item.ios.scss @@ -121,16 +121,20 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; // iOS Item Media // -------------------------------------------------- -.item-ios [item-left] { +.item-ios [item-left], // deprecated +.item-ios [item-start] { margin: $item-ios-padding-media-top $item-ios-padding-left $item-ios-padding-media-bottom 0; } -.item-ios [item-right] { +.item-ios [item-right], // deprecated +.item-ios [item-end] { margin: $item-ios-padding-media-top ($item-ios-padding-left / 2) $item-ios-padding-media-bottom ($item-ios-padding-right / 2); } -.item-ios ion-icon[item-left], -.item-ios ion-icon[item-right] { +.item-ios ion-icon[item-left], // deprecated +.item-ios ion-icon[item-right], // deprecated +.item-ios ion-icon[item-start], +.item-ios ion-icon[item-end] { margin-top: $item-ios-padding-icon-top; margin-bottom: $item-ios-padding-icon-bottom; margin-left: 0; @@ -149,13 +153,17 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; padding: 0 1px; } -.item-ios ion-avatar[item-left], -.item-ios ion-thumbnail[item-left] { +.item-ios ion-avatar[item-left], // deprecated +.item-ios ion-thumbnail[item-left], // deprecated +.item-ios ion-avatar[item-start], +.item-ios ion-thumbnail[item-start] { margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0; } -.item-ios ion-avatar[item-right], -.item-ios ion-thumbnail[item-right] { +.item-ios ion-avatar[item-right], // deprecated +.item-ios ion-thumbnail[item-right], // deprecated +.item-ios ion-avatar[item-end], +.item-ios ion-thumbnail[item-end] { margin: ($item-ios-padding-right / 2); } diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss index 3687fa4ef3..2bad0cd583 100644 --- a/src/components/item/item.md.scss +++ b/src/components/item/item.md.scss @@ -141,13 +141,17 @@ $item-md-sliding-content-background: $list-md-background-color !default; // Material Design Item Media // -------------------------------------------------- -.item-md [item-left], -.item-md [item-right] { +.item-md [item-left], // deprecated +.item-md [item-right], // deprecated +.item-md [item-start], +.item-md [item-end] { margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0; } -.item-md ion-icon[item-left], -.item-md ion-icon[item-right] { +.item-md ion-icon[item-left], // deprecated +.item-md ion-icon[item-right], // deprecated +.item-md ion-icon[item-start], +.item-md ion-icon[item-end] { margin-top: $item-md-padding-icon-top; margin-bottom: $item-md-padding-icon-bottom; margin-left: 0; @@ -166,18 +170,24 @@ $item-md-sliding-content-background: $list-md-background-color !default; padding: 0 1px; } -.item-md ion-icon[item-left] + .item-inner, -.item-md ion-icon[item-left] + .item-input { +.item-md ion-icon[item-left] + .item-inner, // deprecated +.item-md ion-icon[item-left] + .item-input, // deprecated +.item-md ion-icon[item-start] + .item-inner, +.item-md ion-icon[item-start] + .item-input { margin-left: $item-md-padding-left + ($item-md-padding-left / 2); } -.item-md ion-avatar[item-left], -.item-md ion-thumbnail[item-left] { +.item-md ion-avatar[item-left], // deprecated +.item-md ion-thumbnail[item-left], // deprecated +.item-md ion-avatar[item-start], +.item-md ion-thumbnail[item-start] { margin: ($item-md-padding-right / 2) $item-md-padding-right ($item-md-padding-right / 2) 0; } -.item-md ion-avatar[item-right], -.item-md ion-thumbnail[item-right] { +.item-md ion-avatar[item-right], // deprecated +.item-md ion-thumbnail[item-right], // deprecated +.item-md ion-avatar[item-end], +.item-md ion-thumbnail[item-end] { margin: ($item-md-padding-right / 2); } diff --git a/src/components/item/item.ts b/src/components/item/item.ts index 021c99610f..8f5bb71063 100644 --- a/src/components/item/item.ts +++ b/src/components/item/item.ts @@ -105,15 +105,15 @@ import { ItemReorder } from './item-reorder'; * * | Attribute | Description | * |----------------|----------------------------------------------------------------------------------------------------- | - * | `item-left` | Placed to the left of all other elements, outside of the inner item. | - * | `item-right` | Placed to the right of all other elements, inside of the inner item, outside of the input wrapper. | + * | `item-start` | Placed to the left of all other elements, outside of the inner item. | + * | `item-end` | Placed to the right of all other elements, inside of the inner item, outside of the input wrapper. | * | `item-content` | Placed to the right of any `ion-label`, inside of the input wrapper. | * * ### Checkboxes, Radios and Toggles - * [Checkboxes](../../checkbox/Checkbox) are positioned in the same place as the `item-left` attribute. + * [Checkboxes](../../checkbox/Checkbox) are positioned in the same place as the `item-start` attribute. * [Radios](../../radio/RadioButton) and [Toggles](../../toggle/Toggle) are positioned in the same place - * as the `item-right` attribute. All of these components can be positioned differently by adding the - * `item-left` or `item-right` attribute. + * as the `item-end` attribute. All of these components can be positioned differently by adding the + * `item-start` or `item-end` attribute. * * ### Content and Inputs * A [Label](../../label/Label) is placed inside of the item to the left of all content and inputs. The @@ -182,9 +182,9 @@ import { ItemReorder } from './item-reorder'; * * * - * + * * List Header - * + * * * * @@ -194,7 +194,7 @@ import { ItemReorder } from './item-reorder'; * * * * @@ -210,25 +210,25 @@ import { ItemReorder } from './item-reorder'; * * * - * + * * Item - * + * * * * * * Item Divider - * + * * * * * * Disabled Button Item - * @@ -236,18 +236,18 @@ import { ItemReorder } from './item-reorder'; * * * - * + * * * * Avatar Item - * + * * * * * *

Item

*

Item Paragraph

- * + * * * * @@ -274,7 +274,7 @@ import { ItemReorder } from './item-reorder'; @Component({ selector: 'ion-list-header,ion-item,[ion-item],ion-item-divider', template: - '' + + '' + '
' + '
' + '' + @@ -283,7 +283,7 @@ import { ItemReorder } from './item-reorder'; '' + '' + '
' + - '' + + '' + '' + '
' + '
', diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss index ee56838081..a63f9c5912 100644 --- a/src/components/item/item.wp.scss +++ b/src/components/item/item.wp.scss @@ -146,13 +146,17 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; // Windows Item Media // -------------------------------------------------- -.item-wp [item-left], -.item-wp [item-right] { +.item-wp [item-left], // deprecated +.item-wp [item-right], // deprecated +.item-wp [item-start], +.item-wp [item-end] { margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0; } -.item-wp ion-icon[item-left], -.item-wp ion-icon[item-right] { +.item-wp ion-icon[item-left], // deprecated +.item-wp ion-icon[item-right], // deprecated +.item-wp ion-icon[item-start], +.item-wp ion-icon[item-end] { margin-top: $item-wp-padding-icon-top; margin-bottom: $item-wp-padding-icon-bottom; margin-left: 0; @@ -176,18 +180,24 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; line-height: $item-wp-body-text-line-height; } -.item-wp ion-icon[item-left] + .item-inner, -.item-wp ion-icon[item-left] + .item-input { +.item-wp ion-icon[item-left] + .item-inner, // deprecated +.item-wp ion-icon[item-left] + .item-input, // deprecated + .item-wp ion-icon[item-start] + .item-inner, +.item-wp ion-icon[item-start] + .item-input { margin-left: ($item-wp-padding-left / 2); } -.item-wp ion-avatar[item-left], -.item-wp ion-thumbnail[item-left] { +.item-wp ion-avatar[item-left], // deprecated +.item-wp ion-thumbnail[item-left], // deprecated +.item-wp ion-avatar[item-start], +.item-wp ion-thumbnail[item-start] { margin: ($item-wp-padding-right / 2) $item-wp-padding-right ($item-wp-padding-right / 2) 0; } -.item-wp ion-avatar[item-right], -.item-wp ion-thumbnail[item-right] { +.item-wp ion-avatar[item-right], // deprecated +.item-wp ion-thumbnail[item-right], // deprecated +.item-wp ion-avatar[item-end], +.item-wp ion-thumbnail[item-end] { margin: ($item-wp-padding-right / 2); } diff --git a/src/components/item/test/buttons/pages/root-page/root-page.html b/src/components/item/test/buttons/pages/root-page/root-page.html index da04b529aa..f83c26535b 100644 --- a/src/components/item/test/buttons/pages/root-page/root-page.html +++ b/src/components/item/test/buttons/pages/root-page/root-page.html @@ -34,55 +34,55 @@ - + Inner Buttons - + disabled left icon buttons - - right icon buttons - - icon only buttons default - a ion-item disabled right icon/text button large - - @@ -91,7 +91,7 @@ ion-item right clear button - @@ -100,23 +100,23 @@ This is multiline text that has a long description of about how the text is really long and a link. - +
- -
diff --git a/src/components/item/test/colors/pages/root-page/root-page.html b/src/components/item/test/colors/pages/root-page/root-page.html index ee59c3d53b..3d3e23f496 100644 --- a/src/components/item/test/colors/pages/root-page/root-page.html +++ b/src/components/item/test/colors/pages/root-page/root-page.html @@ -37,14 +37,14 @@ - +

Heading

Normal paragraph

- + @@ -53,7 +53,7 @@ @@ -62,12 +62,12 @@ - right icon buttons - diff --git a/src/components/item/test/dividers/pages/root-page/root-page.html b/src/components/item/test/dividers/pages/root-page/root-page.html index afa7b3ae75..a140e6d2ca 100644 --- a/src/components/item/test/dividers/pages/root-page/root-page.html +++ b/src/components/item/test/dividers/pages/root-page/root-page.html @@ -40,7 +40,7 @@ Item Divider Danger Span - + @@ -51,10 +51,10 @@ - - Dark
Primary h5
@@ -67,18 +67,18 @@ - + Light - Primary - + diff --git a/src/components/item/test/icons/pages/root-page/root-page.html b/src/components/item/test/icons/pages/root-page/root-page.html index 8196d29402..415d4b0a40 100644 --- a/src/components/item/test/icons/pages/root-page/root-page.html +++ b/src/components/item/test/icons/pages/root-page/root-page.html @@ -23,55 +23,55 @@ a[ion-item] w/ right side default icon - + a[ion-item] w/ right side large icon - + a[ion-item] w/ right side small icon - + - + ion-item w/ both side icons - + a[ion-item] w/ two right side icons - - + + Problems - 99 + 99 \ No newline at end of file diff --git a/src/components/item/test/images/pages/root-page/root-page.html b/src/components/item/test/images/pages/root-page/root-page.html index 9f6605fb96..f3e86561f6 100644 --- a/src/components/item/test/images/pages/root-page/root-page.html +++ b/src/components/item/test/images/pages/root-page/root-page.html @@ -14,25 +14,25 @@ - + One Line w/ Icon, div only text - +

Two Lines w/ Icon, H2 Header

Paragraph text.

 - + One Line w/ Avatar, div only text - +

Two Lines w/ Avatar, H2 Header

@@ -40,7 +40,7 @@ - +

Three Lines w/ Avatar, H2 Header

@@ -49,7 +49,7 @@ - +

Two Lines w/ Thumbnail, H2 Header

@@ -57,7 +57,7 @@ - +

Three Lines w/ Thumbnail, H2 Header

diff --git a/src/components/item/test/inputs/pages/root-page/root-page.html b/src/components/item/test/inputs/pages/root-page/root-page.html index 98b30f50de..43a42fe15b 100644 --- a/src/components/item/test/inputs/pages/root-page/root-page.html +++ b/src/components/item/test/inputs/pages/root-page/root-page.html @@ -58,7 +58,7 @@ Toggle (left) - + diff --git a/src/components/item/test/media/pages/root-page/root-page.html b/src/components/item/test/media/pages/root-page/root-page.html index bd394953f8..816df67977 100644 --- a/src/components/item/test/media/pages/root-page/root-page.html +++ b/src/components/item/test/media/pages/root-page/root-page.html @@ -10,7 +10,7 @@ + - +

H2 Title Text

@@ -41,29 +41,29 @@ Media/Thumbnail right side, a.item - + - +

H2 Title Text

Button on right

- + diff --git a/src/components/item/test/sliding/pages/root-page/root-page.html b/src/components/item/test/sliding/pages/root-page/root-page.html index 47e4fa3929..419c0a32eb 100644 --- a/src/components/item/test/sliding/pages/root-page/root-page.html +++ b/src/components/item/test/sliding/pages/root-page/root-page.html @@ -69,7 +69,7 @@

HubStruck Notifications

A new message from a repo in your network

Oceanic Next has joined your network

- + 10:45 AM @@ -136,7 +136,7 @@ -

RIGHT/LEFT side - icons (item-left)

+

RIGHT/LEFT side - icons (item-start)

I think I figured out how to get more Mountain Dew

 @@ -158,7 +158,7 @@ - + One Line w/ Icon, div only text @@ -171,7 +171,7 @@ - + One Line w/ Avatar, div only text @@ -208,7 +208,7 @@ - +

DOWNLOAD

@@ -228,7 +228,7 @@ - +

ion-item-sliding without options (no sliding)

diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 1b48c6d3d8..1946fce834 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -69,8 +69,10 @@ $label-ios-margin: $item-ios-padding-top ($item-ios-padding- transform: translate3d(0, 0, 0) scale(.8); } -.item-ios.item-label-stacked [item-right], -.item-ios.item-label-floating [item-right] { +.item-ios.item-label-stacked [item-right], // deprecated +.item-ios.item-label-floating [item-right], // deprecated +.item-ios.item-label-stacked [item-end], +.item-ios.item-label-floating [item-end] { margin-top: $item-ios-padding-media-top - 2; margin-bottom: $item-ios-padding-media-bottom - 2; } diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index 6276b7d720..81575864ef 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -68,8 +68,10 @@ $label-md-margin: $item-md-padding-top ($item-md-padding-rig transform: translate3d(0, 0, 0) scale(.8); } -.item-md.item-label-stacked [item-right], -.item-md.item-label-floating [item-right] { +.item-md.item-label-stacked [item-right], // deprecated +.item-md.item-label-floating [item-right], // deprecated +.item-md.item-label-stacked [item-end], +.item-md.item-label-floating [item-end] { margin-top: $item-md-padding-media-top - 2; margin-bottom: $item-md-padding-media-bottom - 2; } diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index 94f2f1c294..1194ad9586 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -61,8 +61,10 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default; transform: translate3d(0, 0, 0) scale(.8); } -.item-wp.item-label-stacked [item-right], -.item-wp.item-label-floating [item-right] { +.item-wp.item-label-stacked [item-right], // deprecated +.item-wp.item-label-floating [item-right], // deprecated +.item-wp.item-label-stacked [item-end], +.item-wp.item-label-floating [item-end] { margin-top: $item-wp-padding-media-top + 4; margin-bottom: $item-wp-padding-media-top + 4; } diff --git a/src/components/list/test/chat-list/main.html b/src/components/list/test/chat-list/main.html index e66e6804d9..3fa45644e9 100644 --- a/src/components/list/test/chat-list/main.html +++ b/src/components/list/test/chat-list/main.html @@ -15,43 +15,43 @@ - + Abbey Christensen - + - + Alex Nelson - + - + Mary Johnson - + - + Peter Carlsson - + - + Trevor Hansen - + @@ -61,19 +61,19 @@ - + Britta Holt - + - + Sandra Adams - + diff --git a/src/components/list/test/header-scenarios/pages/main/main.html b/src/components/list/test/header-scenarios/pages/main/main.html index 5a28351944..274438a40a 100644 --- a/src/components/list/test/header-scenarios/pages/main/main.html +++ b/src/components/list/test/header-scenarios/pages/main/main.html @@ -20,59 +20,59 @@ This is multiline text that has a long description of about how the text is really long and a link. - + - + Secondary Inner Buttons - + - disabled left icon buttons - - Dark right icon buttons - - icon only buttons default - ion-list-header right icon/text button large - - @@ -81,17 +81,17 @@ ion-list-header right clear button - - +

ng-for {{i}}

- {{i + 1}} + {{i + 1}} diff --git a/src/components/list/test/headers/pages/page-one/page-one.html b/src/components/list/test/headers/pages/page-one/page-one.html index 40d19f33de..db9bc52e17 100644 --- a/src/components/list/test/headers/pages/page-one/page-one.html +++ b/src/components/list/test/headers/pages/page-one/page-one.html @@ -22,27 +22,27 @@ List Header - + - + Wifi - + Affection - + Very Little - + Home - + Where the heart is @@ -54,19 +54,19 @@ List Header - + - + Magic - + Star status - + Super @@ -81,25 +81,25 @@ - + Pizza - + Always - + Beer - + Yes Plz - + Wine - + All the time @@ -110,12 +110,12 @@ - + New List, no header, Item 1 - + New List, no header, Item 2 diff --git a/src/components/list/test/inset/pages/page-one/page-one.html b/src/components/list/test/inset/pages/page-one/page-one.html index 89aad396cc..8c5c579376 100644 --- a/src/components/list/test/inset/pages/page-one/page-one.html +++ b/src/components/list/test/inset/pages/page-one/page-one.html @@ -25,7 +25,7 @@ - + List Link Item 1 @@ -40,7 +40,7 @@ - + List Button Item 1 @@ -51,7 +51,7 @@ List header 2 - + item 1 @@ -61,7 +61,7 @@ List header 3 - + item 1 @@ -71,7 +71,7 @@ List header 4 - + item 1 @@ -80,7 +80,7 @@ Inset List, No Header - + diff --git a/src/components/list/test/no-lines/pages/page-one/page-one.html b/src/components/list/test/no-lines/pages/page-one/page-one.html index 3950ef4f4c..029e869953 100644 --- a/src/components/list/test/no-lines/pages/page-one/page-one.html +++ b/src/components/list/test/no-lines/pages/page-one/page-one.html @@ -15,23 +15,23 @@ - + Wifi - + Affection - + Very Little - + Home - + Where the heart is @@ -43,24 +43,24 @@ - - + + Wifi - - + + Affection - - + + Home @@ -73,25 +73,25 @@ - + Pizza - + Always - + Beer - + Yes Plz - + Wine - + All the time @@ -103,25 +103,25 @@ - + Pizza - + Always - + Beer - + Yes Plz - + Wine - + All the time @@ -133,25 +133,25 @@ - + Pizza - + Always - + Beer - + Yes Plz - + Wine - + All the time diff --git a/src/components/list/test/repeat-headers/main.html b/src/components/list/test/repeat-headers/main.html index cf7b135d4c..5f80c79c74 100644 --- a/src/components/list/test/repeat-headers/main.html +++ b/src/components/list/test/repeat-headers/main.html @@ -15,7 +15,7 @@ {{component}} -
+
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/radio/radio.ios.scss b/src/components/radio/radio.ios.scss index 6f749fd2f0..9424be005a 100644 --- a/src/components/radio/radio.ios.scss +++ b/src/components/radio/radio.ios.scss @@ -21,11 +21,15 @@ $radio-ios-icon-border-style: solid !default; /// @prop - Opacity of the disabled radio $radio-ios-disabled-opacity: .3 !default; -/// @prop - Margin of the item-left in a radio +// deprecated $radio-ios-item-left-margin: 8px 21px 8px 3px !default; +/// @prop - Margin of the item-start in a radio +$radio-ios-item-start-margin: $radio-ios-item-left-margin; -/// @prop - Margin of the item-right in a radio +// deprecated $radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default; +/// @prop - Margin of the item-end in a radio +$radio-ios-item-end-margin: $radio-ios-item-right-margin; .radio-ios { @@ -84,10 +88,11 @@ $radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-pa position: static; display: block; - margin: $radio-ios-item-right-margin; + margin: $radio-ios-item-end-margin; - &[item-left] { - margin: $radio-ios-item-left-margin; + &[item-left], // deprecated + &[item-start] { + margin: $radio-ios-item-start-margin; } } diff --git a/src/components/radio/radio.md.scss b/src/components/radio/radio.md.scss index 91f231fd84..ef685c211a 100644 --- a/src/components/radio/radio.md.scss +++ b/src/components/radio/radio.md.scss @@ -33,11 +33,15 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; /// @prop - Opacity of the disabled radio $radio-md-disabled-opacity: .3 !default; -/// @prop - Margin of the item-left in a radio +// deprecated $radio-md-item-left-margin: 11px 36px 10px 4px !default; +/// @prop - Margin of the item-start in a radio +$radio-md-item-start-margin: $radio-md-item-left-margin; -/// @prop - Margin of the item-right in a radio +// deprecated $radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default; +/// @prop - Margin of the item-end in a radio +$radio-md-item-end-margin: $radio-md-item-right-margin; .radio-md { @@ -119,10 +123,11 @@ $radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-paddi position: static; display: block; - margin: $radio-md-item-right-margin; + margin: $radio-md-item-end-margin; - &[item-left] { - margin: $radio-md-item-left-margin; + &[item-left], // deprecated + &[item-start] { + margin: $radio-md-item-start-margin; } } diff --git a/src/components/radio/radio.wp.scss b/src/components/radio/radio.wp.scss index d6d929119d..9226866e9a 100644 --- a/src/components/radio/radio.wp.scss +++ b/src/components/radio/radio.wp.scss @@ -30,11 +30,15 @@ $radio-wp-icon-border-radius: 50% !default; /// @prop - Opacity of the disabled radio $radio-wp-disabled-opacity: .3 !default; -/// @prop - Margin of the item-left in a radio +// deprecated $radio-wp-item-left-margin: 9px 20px 9px 4px !default; +/// @prop - Margin of the item-start in a radio +$radio-wp-item-start-margin: $radio-wp-item-left-margin; -/// @prop - Margin of the item-right in a radio +// deprecated $radio-wp-item-right-margin: 11px 10px 10px 0 !default; +/// @prop - Margin of the item-end in a radio +$radio-wp-item-end-margin: $radio-wp-item-right-margin; .radio-wp { @@ -118,12 +122,13 @@ $radio-wp-item-right-margin: 11px 10px 10px 0 !default; order: $radio-wp-order; - margin: $radio-wp-item-left-margin; + margin: $radio-wp-item-start-margin; - &[item-right] { + &[item-right], // deprecated + &[item-end] { order: 0; - margin: $radio-wp-item-right-margin; + margin: $radio-wp-item-end-margin; } } 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/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/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/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss index 2277d17350..f613b5ca06 100644 --- a/src/components/toggle/toggle.ios.scss +++ b/src/components/toggle/toggle.ios.scss @@ -48,11 +48,15 @@ $toggle-ios-transition-duration: 300ms !default; /// @prop - Opacity of the disabled toggle $toggle-ios-disabled-opacity: .3 !default; -/// @prop - Padding of the toggle positioned on the left in an item +// deprecated $toggle-ios-item-left-padding: 6px 16px 5px 0 !default; +/// @prop - Padding of the toggle positioned on the left in an item +$toggle-ios-item-start-padding: $toggle-ios-item-left-padding; -/// @prop - Padding of the toggle positioned on the right in an item +// deprecated $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default; +/// @prop - Padding of the toggle positioned on the right in an item +$toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // iOS Toggle @@ -197,11 +201,12 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i .item-ios .toggle-ios { margin: $toggle-ios-media-margin; - padding: $toggle-ios-item-right-padding; + padding: $toggle-ios-item-end-padding; } -.item-ios .toggle-ios[item-left] { - padding: $toggle-ios-item-left-padding; +.item-ios .toggle-ios[item-left], // deprecated +.item-ios .toggle-ios[item-start] { + padding: $toggle-ios-item-start-padding; } diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss index 7d0b6bc528..0c5a6ade95 100644 --- a/src/components/toggle/toggle.md.scss +++ b/src/components/toggle/toggle.md.scss @@ -48,11 +48,15 @@ $toggle-md-disabled-opacity: .3 !default; /// @prop - Padding of standalone toggle $toggle-md-padding: 12px !default; -/// @prop - Padding of the toggle positioned on the left in an item +// deprecated $toggle-md-item-left-padding: 12px 18px 12px 2px !default; +/// @prop - Padding of the toggle positioned on the start in an item +$toggle-md-item-start-padding: $toggle-md-item-left-padding; -/// @prop - Padding of the toggle positioned on the right in an item +// deprecated $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default; +/// @prop - Padding of the toggle positioned on the end in an item +$toggle-md-item-end-padding: $toggle-md-item-right-padding; // Material Design Toggle @@ -153,13 +157,14 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px .item-md .toggle-md { margin: $toggle-md-media-margin; - padding: $toggle-md-item-right-padding; + padding: $toggle-md-item-end-padding; cursor: pointer; } -.item-md .toggle-md[item-left] { - padding: $toggle-md-item-left-padding; +.item-md .toggle-md[item-left], // deprecated +.item-md .toggle-md[item-start] { + padding: $toggle-md-item-start-padding; } .item-md.item-toggle ion-label { diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss index 8c39b66ec0..d239f21770 100644 --- a/src/components/toggle/toggle.wp.scss +++ b/src/components/toggle/toggle.wp.scss @@ -60,11 +60,15 @@ $toggle-wp-transition-duration: 300ms !default; /// @prop - Opacity of the disabled toggle $toggle-wp-disabled-opacity: .3 !default; -/// @prop - Padding of the toggle positioned on the left in an item +// deprecated $toggle-wp-item-left-padding: 12px 18px 12px 2px !default; +/// @prop - Padding of the toggle positioned on the start in an item +$toggle-wp-item-start-padding: $toggle-wp-item-left-padding; -/// @prop - Padding of the toggle positioned on the right in an item +// deprecated $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default; +/// @prop - Padding of the toggle positioned on the end in an item +$toggle-wp-item-end-padding: $toggle-wp-item-right-padding; // Windows Toggle @@ -161,13 +165,14 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px .item-wp .toggle-wp { margin: $toggle-wp-media-margin; - padding: $toggle-wp-item-right-padding; + padding: $toggle-wp-item-end-padding; cursor: pointer; } -.item-wp .toggle-wp[item-left] { - padding: $toggle-wp-item-left-padding; +.item-wp .toggle-wp[item-left], // deprecated +.item-wp .toggle-wp[item-start] { + padding: $toggle-wp-item-start-padding; } .item-wp.item-toggle ion-label { diff --git a/src/components/virtual-scroll/test/cards/main.html b/src/components/virtual-scroll/test/cards/main.html index 27e43d56dc..d708cd164b 100644 --- a/src/components/virtual-scroll/test/cards/main.html +++ b/src/components/virtual-scroll/test/cards/main.html @@ -15,7 +15,7 @@
- +

{{ item.name }}

diff --git a/src/components/virtual-scroll/test/list/main.html b/src/components/virtual-scroll/test/list/main.html index 390077810c..4fb594693e 100644 --- a/src/components/virtual-scroll/test/list/main.html +++ b/src/components/virtual-scroll/test/list/main.html @@ -25,13 +25,13 @@ - +

{{item.id}}, top: {{itemBounds.top}}, bottom: {{itemBounds.bottom}}, height: {{itemBounds.height}}

- diff --git a/src/components/virtual-scroll/test/media/pages/root-page/root-page.html b/src/components/virtual-scroll/test/media/pages/root-page/root-page.html index 4a20da2fae..292b34f3f4 100644 --- a/src/components/virtual-scroll/test/media/pages/root-page/root-page.html +++ b/src/components/virtual-scroll/test/media/pages/root-page/root-page.html @@ -14,9 +14,9 @@ {{item.type}}-{{item.value}} - - - + + + diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index 18829b5e54..bf83ebd981 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -128,7 +128,7 @@ import { VirtualHeader } from './virtual-header'; * * * - * + * * * * {% raw %} {{ item.firstName }} {{ item.lastName }}{% endraw %} From 51ced8bec22c708dc31ecd96a3a1ca12096bd1a1 Mon Sep 17 00:00:00 2001 From: JamesM Date: Fri, 5 May 2017 18:16:07 +0200 Subject: [PATCH 16/34] docs(virtual-scroll) fix typo in virtual scroll (#11533) --- src/components/virtual-scroll/virtual-scroll.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index bf83ebd981..9bd7e40395 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -190,7 +190,7 @@ import { VirtualHeader } from './virtual-header'; * virtual scroll isn't aware of the dimensions until after they have been * rendered. For the initial render, virtual scroll still needs to set * how many items should be built. With "approx" property inputs, such as - * `approxItemHeight`, we're able to give virtual sroll an approximate size, + * `approxItemHeight`, we're able to give virtual scroll an approximate size, * therefore allowing virtual scroll to decide how many items should be * created. * From 5fbca0ef7c5baa019d278f832c955efa72c75615 Mon Sep 17 00:00:00 2001 From: Ibby Hadeed Date: Fri, 5 May 2017 12:52:38 -0400 Subject: [PATCH 17/34] docs(loading): mark params as optional Closes #11452 --- src/components/loading/loading-controller.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 = {}) { From 5a895bb099bb559059bd9950f010d07d796dd5a1 Mon Sep 17 00:00:00 2001 From: imgx64 Date: Mon, 8 May 2017 15:59:10 +0300 Subject: [PATCH 18/34] fix(datetime): Fix floating label with empty ion-datetime (#11552) Fixes #11547 --- src/components/datetime/datetime.ts | 12 +++++++++++- src/components/datetime/test/datetime.spec.ts | 14 ++++++++++++++ .../test/labels/pages/root-page/root-page.html | 5 +++++ .../test/labels/pages/root-page/root-page.ts | 1 + 4 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts index d9e385c1cf..27cf3a3b2c 100644 --- a/src/components/datetime/datetime.ts +++ b/src/components/datetime/datetime.ts @@ -8,7 +8,7 @@ import { PickerColumn } from '../picker/picker-options'; import { Form } from '../../util/form'; import { BaseInput } from '../../util/base-input'; import { Item } from '../item/item'; -import { deepCopy, isBlank, isPresent, isArray, isString, assert, clamp } from '../../util/util'; +import { deepCopy, isBlank, isPresent, isArray, isObject, isString, assert, clamp } from '../../util/util'; import { dateValueRange, renderDateTime, renderTextFormat, convertDataToISO, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, daysInMonth, dateSortValue, dateDataSortValue, LocaleData } from '../../util/datetime-util'; /** @@ -760,6 +760,16 @@ export class DateTime extends BaseInput implements AfterContentIni return this._value; } + /** + * @hidden + */ + hasValue(): boolean { + const val = this._value; + return isPresent(val) + && isObject(val) + && Object.keys(val).length > 0; + } + /** * @hidden */ diff --git a/src/components/datetime/test/datetime.spec.ts b/src/components/datetime/test/datetime.spec.ts index 802e74d0bd..235ed4b7eb 100644 --- a/src/components/datetime/test/datetime.spec.ts +++ b/src/components/datetime/test/datetime.spec.ts @@ -658,6 +658,20 @@ describe('DateTime', () => { }); + describe('hasValue', () => { + + it('should return false if value is not set, and return true if value is set', zoned(() => { + expect(datetime.hasValue()).toEqual(false); + + datetime.setValue('1994-12-15T13:47:20.789Z'); + expect(datetime.hasValue()).toEqual(true); + + datetime.setValue(''); + expect(datetime.hasValue()).toEqual(false); + })); + + }); + var datetime: DateTime; var picker: Picker; diff --git a/src/components/datetime/test/labels/pages/root-page/root-page.html b/src/components/datetime/test/labels/pages/root-page/root-page.html index 3bebd4cc46..0248e2c6b4 100644 --- a/src/components/datetime/test/labels/pages/root-page/root-page.html +++ b/src/components/datetime/test/labels/pages/root-page/root-page.html @@ -29,6 +29,11 @@ + + Floating + + + Fixed diff --git a/src/components/datetime/test/labels/pages/root-page/root-page.ts b/src/components/datetime/test/labels/pages/root-page/root-page.ts index 0d1cc6c7a2..089491b6cd 100644 --- a/src/components/datetime/test/labels/pages/root-page/root-page.ts +++ b/src/components/datetime/test/labels/pages/root-page/root-page.ts @@ -9,6 +9,7 @@ export class RootPage { stacked2 = '1994-12-15T13:47:20.789'; floating1 = '1995-04-15'; floating2 = '1995-04-15'; + floating3 = ''; fixed1 = '2002-09-23T15:03:46.789'; fixed2 = '2002-09-23T15:03:46.789'; inline1 = '2005-06-17T11:06Z'; From f893aa677480c8f7f1482324155d92f1d37645d9 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 9 May 2017 18:33:50 +0200 Subject: [PATCH 19/34] fix(virtual-scroll): remove duplicate items --- src/components/virtual-scroll/virtual-scroll.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index 9bd7e40395..805ff0c6c4 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -229,12 +229,12 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { _nodes: VirtualNode[] = []; _vHeight: number = 0; _lastCheck: number = 0; + _recordSize: number = 0; _data: VirtualData = { scrollTop: 0, }; _queue: number = SCROLL_QUEUE_NO_CHANGES; - _virtualTrackBy: TrackByFn; @ContentChild(VirtualItem) _itmTmp: VirtualItem; @@ -445,7 +445,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { let needClean = false; if (changes) { - var lastRecord = this.lastRecord() + 1; + var lastRecord = this._recordSize; changes.forEachOperation((_, pindex, cindex) => { @@ -465,6 +465,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } else { needClean = true; } + this._recordSize = this._records.length; this.readUpdate(needClean); this.writeUpdate(needClean); From 4b60e89849a897f81de67c636b22bb4b8680d8a6 Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Tue, 9 May 2017 12:18:13 -0500 Subject: [PATCH 20/34] chore(dependencies): update to latest zone.js for faster start-up (#11579) update to latest zone.js for faster start-up --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cb9f93d48f..13464317a7 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@angular/platform-browser-dynamic": "4.1.0", "ionicons": "~3.0.0", "rxjs": "5.1.1", - "zone.js": "^0.8.9" + "zone.js": "^0.8.10" }, "devDependencies": { "@ionic/app-scripts": "1.3.7", From cbe0b42e7461fc76f6c5b30ed09789827b19e0ac Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 9 May 2017 15:50:30 -0400 Subject: [PATCH 21/34] fix(button): display box shadow correctly for Chrome See the following bug: https://bugs.chromium.org/p/chromium/issues/detail?id=713674 References #11585 --- src/components/button/button.md.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss index e7a6f46801..b967f5bee0 100644 --- a/src/components/button/button.md.scss +++ b/src/components/button/button.md.scss @@ -49,7 +49,7 @@ $button-md-background-color-activated: color-shade($button-md-background-col $button-md-opacity-activated: 1 !default; /// @prop - Box shadow of the activated button -$button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21) !default; +$button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent !default; /// @prop - Background color of the ripple on the button $button-md-ripple-background-color: #555 !default; From 120c85d74ef0bad49968fcf13928fb398e59e52b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kendall=20Gonz=C3=A1lez=20Le=C3=B3n?= Date: Tue, 9 May 2017 16:49:01 -0600 Subject: [PATCH 22/34] docs(alert): imported AlertController in usage example (#11567) Added an importation for use the alert controller on line 52. --- src/components/alert/alert-controller.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/alert/alert-controller.ts b/src/components/alert/alert-controller.ts index fa985a6839..6d8c83de6f 100644 --- a/src/components/alert/alert-controller.ts +++ b/src/components/alert/alert-controller.ts @@ -49,6 +49,8 @@ import { Config } from '../../config/config'; * * @usage * ```ts + * import { AlertController } from 'ionic-angular'; + * * constructor(private alertCtrl: AlertController) { * * } From 4623ae5879af9aeb7b6466377d74b4edf0d7a452 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 10 May 2017 11:25:06 -0400 Subject: [PATCH 23/34] chore(ionic): release 3.2.0 --- CHANGELOG.md | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 4 ++-- 2 files changed, 70 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 771d2fcf13..35fb307de1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,71 @@ + +# [3.2.0](https://github.com/driftyco/ionic/compare/v3.1.1...v3.2.0) (2017-05-10) + + +### Steps to Upgrade + +Update your package.json to match the following dependencies, remove the existing `node_modules` directory, and then run `npm install`: + +``` +"dependencies": { + "@angular/common": "4.1.0", + "@angular/compiler": "4.1.0", + "@angular/compiler-cli": "4.1.0", + "@angular/core": "4.1.0", + "@angular/forms": "4.1.0", + "@angular/http": "4.1.0", + "@angular/platform-browser": "4.1.0", + "@angular/platform-browser-dynamic": "4.1.0", + "@ionic-native/core": "3.6.1", + "@ionic-native/splash-screen": "3.6.1", + "@ionic-native/status-bar": "3.6.1", + "@ionic/storage": "2.0.1", + "ionic-angular": "3.2.0", + "ionicons": "3.0.0", + "rxjs": "5.1.1", + "sw-toolbox": "3.6.0", + "zone.js": "0.8.10" +}, +"devDependencies": { + "@ionic/app-scripts": "1.3.7", + "typescript": "2.2.1" +} +``` + +Using v3 of the Ionic CLI? Make sure to add `@ionic/cli-plugin-ionic-angular` and `@ionic/cli-plugin-cordova` to your `devDependencies`. Read more about this on our [blog](http://blog.ionic.io/announcing-ionic-cli-v3/). + + +### Bug Fixes + +* **button:** display box shadow correctly for Chrome ([cbe0b42](https://github.com/driftyco/ionic/commit/cbe0b42)) +* **datetime:** fix floating label with empty ion-datetime ([#11552](https://github.com/driftyco/ionic/issues/11552)) ([5a895bb](https://github.com/driftyco/ionic/commit/5a895bb)), closes [#11547](https://github.com/driftyco/ionic/issues/11547) +* **label:** add the $label-ios-text-color sass variables back ([588fad8](https://github.com/driftyco/ionic/commit/588fad8)), closes [#11373](https://github.com/driftyco/ionic/issues/11373) +* **module-loader:** remove null references ([2afc5cf](https://github.com/driftyco/ionic/commit/2afc5cf)) +* **nav-controller:** popToRoot should not remove root view ([646d736](https://github.com/driftyco/ionic/commit/646d736)) +* **rtl:** add correct text-align ([#11353](https://github.com/driftyco/ionic/issues/11353)) ([424b15a](https://github.com/driftyco/ionic/commit/424b15a)) +* **rtl:** change item reorder offset for RTL ([#11395](https://github.com/driftyco/ionic/issues/11395)) ([665e44f](https://github.com/driftyco/ionic/commit/665e44f)) +* **select:** fire the events properly in popover interface ([59dd853](https://github.com/driftyco/ionic/commit/59dd853)) +* **tap-click:** update setupTapClick signature ([df8d1cc](https://github.com/driftyco/ionic/commit/df8d1cc)) +* **view-controller:** set _dismissRole to a string ([6d11499](https://github.com/driftyco/ionic/commit/6d11499)) +* **virtual-scroll:** update virtualTrackBy reference ([de19dbe](https://github.com/driftyco/ionic/commit/de19dbe)) +* **virtual-scroll:** remove duplicate items ([f893aa6](https://github.com/driftyco/ionic/commit/f893aa6)) +* **virtual-scroll:** initialize differ with trackByFn ([#11492](https://github.com/driftyco/ionic/issues/11492)) ([299a68b](https://github.com/driftyco/ionic/commit/299a68b)) + + +### Features + +* **item:** deprecate item-left / item-right attributes for item-start / item-end ([#11125](https://github.com/driftyco/ionic/issues/11125)) ([26c653e](https://github.com/driftyco/ionic/commit/26c653e)) +* **select:** close select programatically ([a04b577](https://github.com/driftyco/ionic/commit/a04b577)) +* **wk:** built-in support for WK ([#11048](https://github.com/driftyco/ionic/issues/11048)) ([325cc5e](https://github.com/driftyco/ionic/commit/325cc5e)) + + +### Performance Improvements + +* **virtual-scroll:** relax the restrictions for fast path ([88e5642](https://github.com/driftyco/ionic/commit/88e5642)) +* **virtual-scroll:** fast path for removing ([8baa647](https://github.com/driftyco/ionic/commit/8baa647)) + + + ## [3.1.1](https://github.com/driftyco/ionic/compare/v3.1.0...v3.1.1) (2017-04-28) diff --git a/package.json b/package.json index 13464317a7..4f99e39750 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "ionic2", - "version": "3.1.1", + "version": "3.2.0", "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular 2", "keywords": [ "ionic", @@ -144,4 +144,4 @@ "pre-push#master": [ "test" ] -} +} \ No newline at end of file From 3139c97571e87e1482c425cdbb9f33e5ee52ece8 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 10 May 2017 13:35:21 -0400 Subject: [PATCH 24/34] test(content): update content no-bounce e2e test --- .../content/test/no-bounce/app.module.ts | 34 ------------------- .../test/no-bounce/app/app.component.ts | 10 ++++++ .../content/test/no-bounce/app/app.module.ts | 19 +++++++++++ .../content/test/no-bounce/{ => app}/main.ts | 0 .../root-page/root-page.html} | 0 .../pages/root-page/root-page.module.ts | 14 ++++++++ .../no-bounce/pages/root-page/root-page.ts | 8 +++++ 7 files changed, 51 insertions(+), 34 deletions(-) delete mode 100644 src/components/content/test/no-bounce/app.module.ts create mode 100644 src/components/content/test/no-bounce/app/app.component.ts create mode 100644 src/components/content/test/no-bounce/app/app.module.ts rename src/components/content/test/no-bounce/{ => app}/main.ts (100%) rename src/components/content/test/no-bounce/{main.html => pages/root-page/root-page.html} (100%) create mode 100644 src/components/content/test/no-bounce/pages/root-page/root-page.module.ts create mode 100644 src/components/content/test/no-bounce/pages/root-page/root-page.ts diff --git a/src/components/content/test/no-bounce/app.module.ts b/src/components/content/test/no-bounce/app.module.ts deleted file mode 100644 index 201654b7e6..0000000000 --- a/src/components/content/test/no-bounce/app.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { Component, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { IonicApp, IonicModule } from '../../../..'; - - -@Component({ - templateUrl: 'main.html' -}) -export class E2EPage {} - - -@Component({ - template: '' -}) -export class AppComponent { - root = E2EPage; -} - -@NgModule({ - declarations: [ - AppComponent, - E2EPage, - ], - imports: [ - BrowserModule, - IonicModule.forRoot(AppComponent) - ], - bootstrap: [IonicApp], - entryComponents: [ - AppComponent, - E2EPage, - ] -}) -export class AppModule {} diff --git a/src/components/content/test/no-bounce/app/app.component.ts b/src/components/content/test/no-bounce/app/app.component.ts new file mode 100644 index 0000000000..dcf2f9e7e7 --- /dev/null +++ b/src/components/content/test/no-bounce/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +import { RootPage } from '../pages/root-page/root-page'; + +@Component({ + template: '' +}) +export class AppComponent { + root = RootPage; +} diff --git a/src/components/content/test/no-bounce/app/app.module.ts b/src/components/content/test/no-bounce/app/app.module.ts new file mode 100644 index 0000000000..7f76975a26 --- /dev/null +++ b/src/components/content/test/no-bounce/app/app.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { IonicApp, IonicModule } from '../../../../..'; + +import { AppComponent } from './app.component'; +import { RootPageModule } from '../pages/root-page/root-page.module'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + IonicModule.forRoot(AppComponent), + RootPageModule + ], + bootstrap: [IonicApp] +}) +export class AppModule {} diff --git a/src/components/content/test/no-bounce/main.ts b/src/components/content/test/no-bounce/app/main.ts similarity index 100% rename from src/components/content/test/no-bounce/main.ts rename to src/components/content/test/no-bounce/app/main.ts diff --git a/src/components/content/test/no-bounce/main.html b/src/components/content/test/no-bounce/pages/root-page/root-page.html similarity index 100% rename from src/components/content/test/no-bounce/main.html rename to src/components/content/test/no-bounce/pages/root-page/root-page.html diff --git a/src/components/content/test/no-bounce/pages/root-page/root-page.module.ts b/src/components/content/test/no-bounce/pages/root-page/root-page.module.ts new file mode 100644 index 0000000000..85fba79181 --- /dev/null +++ b/src/components/content/test/no-bounce/pages/root-page/root-page.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { IonicPageModule } from '../../../../../..'; + +import { RootPage } from './root-page'; + +@NgModule({ + declarations: [ + RootPage, + ], + imports: [ + IonicPageModule.forChild(RootPage) + ] +}) +export class RootPageModule {} diff --git a/src/components/content/test/no-bounce/pages/root-page/root-page.ts b/src/components/content/test/no-bounce/pages/root-page/root-page.ts new file mode 100644 index 0000000000..2fbbd0156a --- /dev/null +++ b/src/components/content/test/no-bounce/pages/root-page/root-page.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; +import { IonicPage } from '../../../../../../'; + +@IonicPage() +@Component({ + templateUrl: 'root-page.html' +}) +export class RootPage {} From 700e4c24792b40fbe719c913827e7f14d7eb03eb Mon Sep 17 00:00:00 2001 From: perry Date: Wed, 10 May 2017 14:28:46 -0500 Subject: [PATCH 25/34] chore(ci): sync paralell demo builds via s3 --- .gitignore | 1 + package.json | 2 + scripts/docs/deploy.sh | 3 +- scripts/gulp/tasks/demos.prod.ts | 88 +++++++++++++++++++++++++++++++- 4 files changed, 92 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index f1d5c446ec..7ce7a3c814 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,7 @@ $RECYCLE.BIN/ .DS_Store Thumbs.db UserInterfaceState.xcuserstate +.env .package.tmp.json diff --git a/package.json b/package.json index 4f99e39750..8e11fd658a 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "del": "2.2.2", "dgeni": "^0.4.7", "dgeni-packages": "^0.16.10", + "dotenv": "4.0.0", "event-stream": "3.3.4", "file-loader": "0.9.0", "fs-extra": "^2.0.0", @@ -120,6 +121,7 @@ "rollup-plugin-node-resolve": "3.0.0", "rollup-plugin-uglify": "1.0.1", "run-sequence": "1.2.2", + "s3": "4.4.0", "sassdoc": "2.2.1", "semver": "5.3.0", "serve-static": "1.11.1", diff --git a/scripts/docs/deploy.sh b/scripts/docs/deploy.sh index 1e93393f15..ee9fa98abb 100755 --- a/scripts/docs/deploy.sh +++ b/scripts/docs/deploy.sh @@ -19,7 +19,8 @@ function run { cd .. VERSION=$(readJsonProp "package.json" "version") - #compile API Demos + # download and copy over API Demos + ./node_modules/.bin/gulp demos.download ./node_modules/.bin/gulp docs.demos --production=true # if release, copy old version to seperate folder and blow out docs root api diff --git a/scripts/gulp/tasks/demos.prod.ts b/scripts/gulp/tasks/demos.prod.ts index c2e7141dac..308c5d0fea 100644 --- a/scripts/gulp/tasks/demos.prod.ts +++ b/scripts/gulp/tasks/demos.prod.ts @@ -4,6 +4,7 @@ import * as glob from 'glob'; import { task } from 'gulp'; import * as del from 'del'; import * as runSequence from 'run-sequence'; +import * as s3 from 's3'; import { argv } from 'yargs'; @@ -12,6 +13,9 @@ import { createTempTsConfig, getFolderInfo, runAppScriptsBuild, writePolyfills } import * as pAll from 'p-all'; +import * as dotenv from 'dotenv'; +dotenv.config(); + task('demos.prepare', (done: Function) => { runSequence('demos.clean', 'demos.polyfill', 'demos.sass', (err: any) => done(err)); }); @@ -95,9 +99,19 @@ function buildDemo(filePath: string) { const appNgModulePath = join(dirname(filePath), 'app.module.ts'); const distDir = join(distTestRoot, 'www'); - return runAppScriptsBuild(appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath).then(() => { + return runAppScriptsBuild( + appEntryPoint, + appNgModulePath, + ionicAngularDir, + distDir, + pathToWriteFile, + ionicAngularDir, + sassConfigPath, + copyConfigPath + ).then(() => { const end = Date.now(); console.log(`${filePath} took a total of ${(end - start) / 1000} seconds to build`); + uploadToS3(pathToWriteFile); }); } @@ -112,6 +126,78 @@ function chunkArrayInGroups(arr, size) { return result; } +function uploadToS3(path) { + // fail silently if envars not present + if (!process.env.AWS_KEY || !process.env.AWS_SECRET) { + return new Promise((resolve) => {resolve();}); + } + + let client = s3.createClient({ + s3Options: { + accessKeyId: process.env.AWS_KEY, + secretAccessKey: process.env.AWS_SECRET + }, + }); + + // get demo name from path + let demo = path.split('/')[path.split('/').length - 2]; + + let params = { + localDir: path.replace('tsconfig.json',''), + deleteRemoved: true, + s3Params: { + Bucket: "ionic-demos", + Prefix: demo, + }, + }; + + var uploader = client.uploadDir(params); + + return new Promise((resolve, reject) => { + uploader.on('error', function(err) { + console.error("s3 Upload Error:", err.stack); + reject(); + }); + uploader.on('end', function() { + console.log(demo, " demo uploaded to s3"); + resolve(); + }); + }); +} + +task('demos.download', (done: Function) => { + if (!process.env.AWS_KEY || !process.env.AWS_SECRET) { + return new Promise((resolve) => {resolve();}); + } + + let client = s3.createClient({ + s3Options: { + accessKeyId: process.env.AWS_KEY, + secretAccessKey: process.env.AWS_SECRET + }, + }); + + let params = { + localDir: join(process.cwd(), 'dist', 'demos', 'src'), + s3Params: { + Bucket: "ionic-demos", + }, + }; + + let uploader = client.downloadDir(params); + + return new Promise((resolve, reject) => { + uploader.on('error', function(err) { + console.error("s3 Download Error:", err.stack); + reject(); + }); + uploader.on('end', function() { + console.log("Demos downloaded from s3"); + resolve(); + }); + }); +}) + task('demos.clean', (done: Function) => { // this is a super hack, but it works for now if (argv.skipClean) { From 4347627f26c8e6a51412f27d3e4fc2f7ba1bbc4b Mon Sep 17 00:00:00 2001 From: Kulshekhar Kabra Date: Thu, 11 May 2017 21:49:37 +0530 Subject: [PATCH 26/34] fix(searchbar): update signature mismatch in template & class (#11599) fixes #11598 --- src/components/searchbar/searchbar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts index 2ea03da98d..807a02c5fb 100644 --- a/src/components/searchbar/searchbar.ts +++ b/src/components/searchbar/searchbar.ts @@ -34,7 +34,7 @@ import { Platform } from '../../platform/platform'; '' + '' + '
' + - ' Date: Fri, 12 May 2017 12:21:50 -0400 Subject: [PATCH 27/34] fix(label): set the ios variables to null to avoid styling fixes #11631 --- src/components/label/label.ios.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 1946fce834..8c9d58fa62 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Text color of the label by an input, select, or datetime -$label-ios-text-color: unset !default; +$label-ios-text-color: null !default; /// @prop - Text color of the stacked/floating label when it is focused -$label-ios-text-color-focused: unset !default; +$label-ios-text-color-focused: null !default; /// @prop - Margin of the label $label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0 !default; From f9027690d01e4e3c90c70bea4a298989fe1a11b3 Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Fri, 12 May 2017 11:59:53 -0500 Subject: [PATCH 28/34] chore(ionic): release 3.2.1 --- CHANGELOG.md | 11 +++++++++++ package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35fb307de1..790c254559 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ + +## [3.2.1](https://github.com/driftyco/ionic/compare/v3.2.0...v3.2.1) (2017-05-12) + + +### Bug Fixes + +* **label:** set the ios variables to null to avoid styling ([2c66c56](https://github.com/driftyco/ionic/commit/2c66c56)), closes [#11631](https://github.com/driftyco/ionic/issues/11631) +* **searchbar:** update signature mismatch in template & class ([#11599](https://github.com/driftyco/ionic/issues/11599)) ([4347627](https://github.com/driftyco/ionic/commit/4347627)), closes [#11598](https://github.com/driftyco/ionic/issues/11598) + + + # [3.2.0](https://github.com/driftyco/ionic/compare/v3.1.1...v3.2.0) (2017-05-10) diff --git a/package.json b/package.json index 8e11fd658a..da6265a11b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "ionic2", - "version": "3.2.0", + "version": "3.2.1", "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular 2", "keywords": [ "ionic", From 0eb4310b5bd8128c0e25c32486d1210317c048df Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 12 May 2017 13:03:54 -0400 Subject: [PATCH 29/34] docs(changelog): update upgrade steps to use 3.2.1 --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 790c254559..1dc30ddaf3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,7 +31,7 @@ Update your package.json to match the following dependencies, remove the existin "@ionic-native/splash-screen": "3.6.1", "@ionic-native/status-bar": "3.6.1", "@ionic/storage": "2.0.1", - "ionic-angular": "3.2.0", + "ionic-angular": "3.2.1", "ionicons": "3.0.0", "rxjs": "5.1.1", "sw-toolbox": "3.6.0", From a30379bef6bf323b512b12eeb6904abab4690115 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Fri, 12 May 2017 20:05:45 +0300 Subject: [PATCH 30/34] feat(rtl): add rtl margin, padding, position and border-radius (#11342) * refactor(item): replaced item-left with item-start replaced item-right with item-end * style(item): fix spacing * fix(item): add backwards support for left/right in ng-content * fix(item): deprecated old variables, not breaking change * feat(rtl): padding mixin * feat(rtl): change all padding variables to start/end add support for old variable names * feat(rtl): replace all padding-side with start/end * revert(functions): remove mixins * feat(scss): add padding-horizontal and rtl functions (thanks brandy) * feat(padding): use padding horizontal mixin everywhere * feat(padding): use padding horizontal mixin everywhere * fix(lint): change properties order. tests passing * fix(sass-functions): reorder functions to avoid warning * fix(scss): fix variable name * perf(rtl): add check if need rtl selector * feat(scss): add full padding function * feat(scss): add border-radius mixin * fix(rtl): change border-radius to use mixin * perf(scss): only override if has something to override * feat(scss): add margin scss variables for sides * feat(scss): add margin mixin * fix(scss): fix wrong support for 2/3 args * feat(rtl): spread margins/paddings * feat(rtl): spread margins/paddings * feat(position): add rtl support for absolute * fix(rtl): add missing calls * fix(item): old attributes deprecated support * revert(changelog): not intended to be changed * fix(sass-functions): and not && * fix(padding): merge + missing padding * style(): remove newline * refactor(mixins): move mixins to mixins file * style(): fix alignment * fix(item): right padding should not be set * fix(): incorrect defaults * feat(scss-lint): disable some side variables * fix(scss): lint passes * feat(lint): disabled text-align * fix(): correct variable name * fix(fab): missed a comma * fix(rtl): rtl method incorrect for multiple selectors * fix(rtl): toolbar bad merge * fix(rtl): icon-only is in px not em * fix(rtl): toggle padding * feat(rtl): correct notation for rtl custom * Merge branch 'breaking-item' into start-end # Conflicts: # src/components/checkbox/checkbox.ios.scss # src/components/checkbox/checkbox.md.scss # src/components/checkbox/checkbox.wp.scss # src/components/item/item.ios.scss # src/components/item/item.md.scss # src/components/item/item.wp.scss # src/components/radio/radio.ios.scss # src/components/radio/radio.md.scss # src/components/radio/radio.wp.scss # src/components/toggle/toggle.ios.scss # src/components/toggle/toggle.md.scss # src/components/toggle/toggle.wp.scss * fix(scss): fix for deprecated usages --- .scss-lint.yml | 37 +-- scripts/gulp/tasks/lint.ts | 3 +- .../action-sheet/action-sheet.ios.scss | 32 ++- .../action-sheet/action-sheet.md.scss | 71 ++++-- src/components/action-sheet/action-sheet.scss | 12 +- .../action-sheet/action-sheet.wp.scss | 70 ++++-- src/components/alert/alert.ios.scss | 179 ++++++++++--- src/components/alert/alert.md.scss | 207 +++++++++++---- src/components/alert/alert.scss | 27 +- src/components/alert/alert.wp.scss | 232 +++++++++++++---- src/components/app/app.scss | 46 ++-- src/components/backdrop/backdrop.scss | 4 +- src/components/badge/badge.ios.scss | 3 +- src/components/badge/badge.md.scss | 3 +- src/components/badge/badge.scss | 3 +- src/components/badge/badge.wp.scss | 3 +- src/components/button/button-icon.scss | 8 +- src/components/button/button.ios.scss | 121 +++++++-- src/components/button/button.md.scss | 130 +++++++--- src/components/button/button.scss | 19 +- src/components/button/button.wp.scss | 120 +++++++-- src/components/card/card.ios.scss | 97 +++++-- src/components/card/card.md.scss | 97 +++++-- src/components/card/card.wp.scss | 97 +++++-- src/components/checkbox/checkbox.ios.scss | 47 +++- src/components/checkbox/checkbox.md.scss | 55 ++-- src/components/checkbox/checkbox.wp.scss | 54 ++-- src/components/chip/chip.ios.scss | 43 +++- src/components/chip/chip.md.scss | 43 +++- src/components/chip/chip.scss | 33 ++- src/components/chip/chip.wp.scss | 43 +++- src/components/content/content.ios.scss | 4 +- src/components/content/content.scss | 46 ++-- src/components/datetime/datetime.ios.scss | 14 +- src/components/datetime/datetime.md.scss | 14 +- src/components/datetime/datetime.scss | 2 +- src/components/datetime/datetime.wp.scss | 16 +- src/components/fab/fab.scss | 41 +-- src/components/grid/grid.mixins.scss | 26 +- src/components/grid/grid.ts | 2 +- .../infinite-scroll/infinite-scroll.scss | 43 +++- src/components/input/input.ios.scss | 37 ++- src/components/input/input.md.scss | 37 ++- src/components/input/input.scss | 17 +- src/components/input/input.wp.scss | 33 +-- src/components/item/item-media.scss | 4 +- src/components/item/item-sliding.scss | 26 +- src/components/item/item.ios.scss | 59 +++-- src/components/item/item.md.scss | 40 ++- src/components/item/item.scss | 17 +- src/components/item/item.wp.scss | 46 ++-- src/components/label/label.ios.scss | 23 +- src/components/label/label.md.scss | 22 +- src/components/label/label.scss | 4 +- src/components/label/label.wp.scss | 5 +- src/components/list/list.ios.scss | 41 +-- src/components/list/list.md.scss | 60 ++--- src/components/list/list.scss | 12 +- src/components/list/list.wp.scss | 57 +++-- src/components/loading/loading.ios.scss | 25 +- src/components/loading/loading.md.scss | 25 +- src/components/loading/loading.scss | 6 +- src/components/loading/loading.wp.scss | 25 +- src/components/menu/menu.scss | 15 +- src/components/modal/modal.ios.scss | 4 +- src/components/modal/modal.md.scss | 4 +- src/components/modal/modal.scss | 12 +- src/components/picker/picker.ios.scss | 56 ++++- src/components/picker/picker.md.scss | 55 +++- src/components/picker/picker.scss | 17 +- src/components/picker/picker.wp.scss | 57 ++++- src/components/popover/popover.ios.scss | 10 +- src/components/popover/popover.md.scss | 3 +- src/components/popover/popover.scss | 7 +- src/components/popover/popover.wp.scss | 3 +- src/components/radio/radio.ios.scss | 58 +++-- src/components/radio/radio.md.scss | 79 +++--- src/components/radio/radio.wp.scss | 79 ++++-- src/components/range/range.ios.scss | 62 +++-- src/components/range/range.md.scss | 55 ++-- src/components/range/range.wp.scss | 61 +++-- src/components/refresher/refresher.scss | 6 +- src/components/scroll/scroll.scss | 6 +- src/components/searchbar/searchbar.ios.scss | 35 ++- src/components/searchbar/searchbar.md.scss | 49 ++-- src/components/searchbar/searchbar.scss | 6 +- src/components/searchbar/searchbar.ts | 4 +- src/components/searchbar/searchbar.wp.scss | 40 +-- src/components/segment/segment.ios.scss | 21 +- src/components/segment/segment.md.scss | 24 +- src/components/segment/segment.scss | 4 +- src/components/segment/segment.wp.scss | 25 +- src/components/select/select.ios.scss | 18 +- src/components/select/select.md.scss | 20 +- src/components/select/select.scss | 10 +- src/components/select/select.wp.scss | 29 ++- src/components/slides/slides.scss | 85 ++++--- src/components/spinner/spinner.scss | 4 +- src/components/split-pane/split-pane.scss | 18 +- src/components/tabs/tabs.ios.scss | 24 +- src/components/tabs/tabs.md.scss | 73 ++++-- src/components/tabs/tabs.scss | 29 +-- src/components/tabs/tabs.wp.scss | 25 +- src/components/toast/toast.ios.scss | 34 ++- src/components/toast/toast.md.scss | 30 ++- src/components/toast/toast.scss | 7 +- src/components/toast/toast.wp.scss | 32 ++- src/components/toggle/toggle.ios.scss | 65 +++-- src/components/toggle/toggle.md.scss | 95 +++++-- src/components/toggle/toggle.wp.scss | 53 ++-- src/components/toolbar/toolbar-button.scss | 11 +- src/components/toolbar/toolbar.ios.scss | 36 +-- src/components/toolbar/toolbar.md.scss | 49 ++-- src/components/toolbar/toolbar.scss | 8 +- src/components/toolbar/toolbar.wp.scss | 62 +++-- .../virtual-scroll/virtual-scroll.scss | 5 +- src/themes/ionic.functions.scss | 86 +++---- src/themes/ionic.mixins.scss | 236 ++++++++++++++++++ src/themes/ionic.theme.dark.ios.scss | 4 + src/themes/ionic.theme.dark.md.scss | 4 + src/themes/ionic.theme.dark.wp.scss | 4 + src/themes/ionic.theme.default.ios.scss | 4 + src/themes/ionic.theme.default.md.scss | 4 + src/themes/ionic.theme.default.wp.scss | 4 + src/themes/util.scss | 7 +- 125 files changed, 3295 insertions(+), 1505 deletions(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index 8f47412b54..8d2150cfc7 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -37,13 +37,10 @@ linters: - position - top - - right - bottom - - left - z-index - display - overflow - - float - clear - - flex @@ -59,16 +56,10 @@ linters: - justify-content - order - - - margin - margin-top - - margin-right - margin-bottom - - margin-left - - padding - padding-top - - padding-right - padding-bottom - - padding-left - - width - min-width @@ -104,12 +95,6 @@ linters: - border-bottom-style - border-left-style - - border-radius - - border-top-left-radius - - border-top-right-radius - - border-bottom-left-radius - - border-bottom-right-radius - - border-color - border-top-color - border-right-color @@ -135,7 +120,6 @@ linters: - letter-spacing - line-height - list-style - - text-align - text-decoration - text-indent - text-overflow @@ -207,3 +191,24 @@ linters: PropertySpelling: extra_properties: - contain + disabled_properties: + - right + - left + + - float + + - padding + - padding-left + - padding-right + + - margin + - margin-left + - margin-right + + - border-radius + - border-top-left-radius + - border-top-right-radius + - border-bottom-right-radius + - border-bottom-left-radius + + - text-align diff --git a/scripts/gulp/tasks/lint.ts b/scripts/gulp/tasks/lint.ts index c4e87ad802..6a6df57742 100644 --- a/scripts/gulp/tasks/lint.ts +++ b/scripts/gulp/tasks/lint.ts @@ -17,7 +17,8 @@ task('lint.sass', function() { return src([ 'src/**/*.scss', '!src/components/*/test/**/*', - '!src/util/test/*' + '!src/util/test/*', + '!src/themes/normalize.scss', ]) .pipe(scsslint()) .pipe(scsslint.failReporter()); diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss index 13de9dfcf8..c95aa3393b 100644 --- a/src/components/action-sheet/action-sheet.ios.scss +++ b/src/components/action-sheet/action-sheet.ios.scss @@ -6,8 +6,20 @@ /// @prop - Text align of the action sheet $action-sheet-ios-text-align: center !default; -/// @prop - Padding of the action sheet -$action-sheet-ios-padding: 0 10px !default; +// deprecated +$action-sheet-ios-padding: null !default; + +/// @prop - Padding top of the action sheet +$action-sheet-ios-padding-top: 0 !default; + +/// @prop - Padding end of the action sheet +$action-sheet-ios-padding-end: 10px !default; + +/// @prop - Padding bottom of the action sheet +$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default; + +/// @prop - Padding start of the action sheet +$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; /// @prop - Bottom margin of the action sheet button group $action-sheet-ios-group-margin-bottom: 10px !default; @@ -78,15 +90,18 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default; } .action-sheet-ios .action-sheet-container { - padding: $action-sheet-ios-padding; + @include deprecated-variable(padding, $action-sheet-ios-padding) { + @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start); + } } .action-sheet-ios .action-sheet-group { + @include border-radius($action-sheet-ios-border-radius); + overflow: hidden; margin-bottom: $action-sheet-ios-group-margin-bottom - 2; - border-radius: $action-sheet-ios-border-radius; background: $action-sheet-ios-background; } @@ -95,20 +110,19 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default; } .action-sheet-ios .action-sheet-title { + @include padding($action-sheet-ios-title-padding); @include text-align($action-sheet-ios-text-align); - - padding: $action-sheet-ios-title-padding; + @include border-radius($action-sheet-ios-title-border-radius); border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color; - border-radius: $action-sheet-ios-title-border-radius; font-size: $action-sheet-ios-title-font-size; font-weight: $action-sheet-ios-title-font-weight; color: $action-sheet-ios-title-color; } .action-sheet-ios .action-sheet-button { - margin: 0; - padding: $action-sheet-ios-button-padding; + @include margin(0); + @include padding($action-sheet-ios-button-padding); min-height: $action-sheet-ios-button-min-height; diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss index 2c85ba50b2..e9a820c92f 100644 --- a/src/components/action-sheet/action-sheet.md.scss +++ b/src/components/action-sheet/action-sheet.md.scss @@ -18,8 +18,20 @@ $action-sheet-md-title-color: #757575 !default; /// @prop - Font size of the action sheet title $action-sheet-md-title-font-size: 1.6rem !default; -/// @prop - Padding of the action sheet title -$action-sheet-md-title-padding: 11px 16px 17px !default; +// deprecated +$action-sheet-md-title-padding: null !default; + +/// @prop - Padding top of the action sheet title +$action-sheet-md-title-padding-top: 11px !default; + +/// @prop - Padding end of the action sheet title +$action-sheet-md-title-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet title +$action-sheet-md-title-padding-bottom: 17px !default; + +/// @prop - Padding start of the action sheet title +$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default; /// @prop - Minimum height of the action sheet button $action-sheet-md-button-min-height: 4.8rem !default; @@ -30,8 +42,20 @@ $action-sheet-md-button-text-color: #222 !default; /// @prop - Font size of the action sheet button $action-sheet-md-button-font-size: 1.6rem !default; -/// @prop - Padding of the action sheet button -$action-sheet-md-button-padding: 0 16px !default; +// deprecated +$action-sheet-md-button-padding: null !default; + +/// @prop - Padding top of the action sheet button +$action-sheet-md-button-padding-top: 0 !default; + +/// @prop - Padding end of the action sheet button +$action-sheet-md-button-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet button +$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default; + +/// @prop - Padding start of the action sheet button +$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default; /// @prop - Background color of the action sheet button $action-sheet-md-button-background: transparent !default; @@ -51,11 +75,23 @@ $action-sheet-md-icon-text-align: center !default; /// @prop - Vertical align of the icon in the action sheet button $action-sheet-md-icon-vertical-align: middle !default; -/// @prop - Margin of the icon in the action sheet button -$action-sheet-md-icon-margin: 0 32px 0 0 !default; +// deprecated +$action-sheet-md-icon-margin: null !default; + +/// @prop - Margin top of the icon in the action sheet button +$action-sheet-md-icon-margin-top: 0 !default; + +/// @prop - Margin end of the icon in the action sheet button +$action-sheet-md-icon-margin-end: 32px !default; + +/// @prop - Margin bottom of the icon in the action sheet button +$action-sheet-md-icon-margin-bottom: 0 !default; + +/// @prop - Margin start of the icon in the action sheet button +$action-sheet-md-icon-margin-start: 0 !default; .action-sheet-md .action-sheet-container { - padding: .8rem 0; + @include padding(.8rem, 0); background: $action-sheet-md-background; } @@ -63,10 +99,12 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default; .action-sheet-md .action-sheet-title { @include text-align($action-sheet-md-text-align); - padding: $action-sheet-md-title-padding; - font-size: $action-sheet-md-title-font-size; color: $action-sheet-md-title-color; + + @include deprecated-variable(padding, $action-sheet-md-title-padding) { + @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start); + } } .action-sheet-md .action-sheet-button { @@ -75,13 +113,16 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default; position: relative; overflow: hidden; - padding: $action-sheet-md-button-padding; - min-height: $action-sheet-md-button-min-height; font-size: $action-sheet-md-button-font-size; color: $action-sheet-md-button-text-color; background: $action-sheet-md-button-background; + + + @include deprecated-variable(padding, $action-sheet-md-button-padding) { + @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start); + } } .action-sheet-md .action-sheet-button.activated { @@ -89,15 +130,17 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default; } .action-sheet-md .action-sheet-icon { + @include padding(0); @include text-align($action-sheet-md-icon-text-align); - margin: $action-sheet-md-icon-margin; - padding: 0; - width: $action-sheet-md-icon-width; font-size: $action-sheet-md-icon-font-size; vertical-align: $action-sheet-md-icon-vertical-align; + + @include deprecated-variable(margin, $action-sheet-md-icon-margin) { + @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start); + } } .action-sheet-md .action-sheet-group { diff --git a/src/components/action-sheet/action-sheet.scss b/src/components/action-sheet/action-sheet.scss index 18e17dd9ec..7b772fc8ec 100644 --- a/src/components/action-sheet/action-sheet.scss +++ b/src/components/action-sheet/action-sheet.scss @@ -11,9 +11,9 @@ $action-sheet-max-width: 500px !default; ion-action-sheet { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-overlay; display: block; @@ -22,15 +22,13 @@ ion-action-sheet { } .action-sheet-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: block; - margin: auto; - width: $action-sheet-width; max-width: $action-sheet-max-width; diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss index cc2ea65437..2a18a4dc17 100644 --- a/src/components/action-sheet/action-sheet.wp.scss +++ b/src/components/action-sheet/action-sheet.wp.scss @@ -15,8 +15,20 @@ $action-sheet-wp-box-shadow-color: rgba(0, 0, 0, .2) !default; /// @prop - Box shadow of the action sheet $action-sheet-wp-box-shadow: 0 -1px 0 $action-sheet-wp-box-shadow-color !default; -/// @prop - Padding of the action sheet title -$action-sheet-wp-title-padding: 11px 16px 17px !default; +// deprecated +$action-sheet-wp-title-padding: null !default; + +/// @prop - Padding top of the action sheet title +$action-sheet-wp-title-padding-top: 11px !default; + +/// @prop - Padding end of the action sheet title +$action-sheet-wp-title-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet title +$action-sheet-wp-title-padding-bottom: 17px !default; + +/// @prop - Padding start of the action sheet title +$action-sheet-wp-title-padding-start: $action-sheet-wp-title-padding-end !default; /// @prop - Font size of the action sheet title $action-sheet-wp-title-font-size: 2rem !default; @@ -36,8 +48,20 @@ $action-sheet-wp-button-text-color: #4d4d4d !default; /// @prop - Font size of the action sheet button $action-sheet-wp-button-font-size: 1.5rem !default; -/// @prop - Padding of the action sheet button -$action-sheet-wp-button-padding: 0 16px !default; +// deprecated +$action-sheet-wp-button-padding: null !default; + +/// @prop - Padding top of the action sheet button +$action-sheet-wp-button-padding-top: 0 !default; + +/// @prop - Padding end of the action sheet button +$action-sheet-wp-button-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet button +$action-sheet-wp-button-padding-bottom: $action-sheet-wp-button-padding-top !default; + +/// @prop - Padding start of the action sheet button +$action-sheet-wp-button-padding-start: $action-sheet-wp-button-padding-end !default; /// @prop - Text align of the action sheet button $action-sheet-wp-button-text-align: $action-sheet-wp-text-align !default; @@ -60,8 +84,20 @@ $action-sheet-wp-icon-text-align: center !default; /// @prop - Vertical align of the icon in the action sheet button $action-sheet-wp-icon-vertical-align: middle !default; -/// @prop - Margin of the icon in the action sheet button -$action-sheet-wp-icon-margin: 0 20px 0 0 !default; +// deprecated +$action-sheet-wp-icon-margin: null !default; + +/// @prop - Margin top of the icon in the action sheet button +$action-sheet-wp-icon-margin-top: 0 !default; + +/// @prop - Margin end of the icon in the action sheet button +$action-sheet-wp-icon-margin-end: 20px !default; + +/// @prop - Margin bottom of the icon in the action sheet button +$action-sheet-wp-icon-margin-bottom: 0 !default; + +/// @prop - Margin start of the icon in the action sheet button +$action-sheet-wp-icon-margin-start: 0 !default; .action-sheet-wp .action-sheet-wrapper { @@ -71,22 +107,26 @@ $action-sheet-wp-icon-margin: 0 20px 0 0 !default; .action-sheet-wp .action-sheet-title { @include text-align($action-sheet-wp-title-text-align); - padding: $action-sheet-wp-title-padding; - font-size: $action-sheet-wp-title-font-size; color: $action-sheet-wp-title-color; + + @include deprecated-variable(padding, $action-sheet-wp-title-padding) { + @include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start); + } } .action-sheet-wp .action-sheet-button { @include text-align($action-sheet-wp-button-text-align); - padding: $action-sheet-wp-button-padding; - min-height: $action-sheet-wp-button-height; font-size: $action-sheet-wp-button-font-size; color: $action-sheet-wp-button-text-color; background: $action-sheet-wp-button-background; + + @include deprecated-variable(padding, $action-sheet-wp-button-padding) { + @include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start); + } } .action-sheet-wp .action-sheet-button.activated { @@ -94,19 +134,21 @@ $action-sheet-wp-icon-margin: 0 20px 0 0 !default; } .action-sheet-wp .action-sheet-icon { + @include padding(0); @include text-align($action-sheet-wp-icon-text-align); - margin: $action-sheet-wp-icon-margin; - padding: 0; - width: $action-sheet-wp-icon-width; font-size: $action-sheet-wp-icon-font-size; vertical-align: $action-sheet-wp-icon-vertical-align; + + @include deprecated-variable(margin, $action-sheet-wp-icon-margin) { + @include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start); + } } .action-sheet-wp .action-sheet-container { - padding: .8rem 0; + @include padding(.8rem, 0); background: $action-sheet-wp-background; } diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss index e80f13861e..2baf340f60 100644 --- a/src/components/alert/alert.ios.scss +++ b/src/components/alert/alert.ios.scss @@ -15,8 +15,20 @@ $alert-ios-background: #f8f8f8 !default; /// @prop - Box shadow of the alert $alert-ios-box-shadow: none !default; -/// @prop - Padding of the alert head -$alert-ios-head-padding: 12px 16px 7px !default; +// deprecated +$alert-ios-head-padding: null !default; + +/// @prop - Padding top of the alert head +$alert-ios-head-padding-top: 12px !default; + +/// @prop - Padding end of the alert head +$alert-ios-head-padding-end: 16px !default; + +/// @prop - Padding bottom of the alert head +$alert-ios-head-padding-bottom: 7px !default; + +/// @prop - Padding start of the alert head +$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; /// @prop - Text align of the alert head $alert-ios-head-text-align: center !default; @@ -36,8 +48,21 @@ $alert-ios-sub-title-font-size: 14px !default; /// @prop - Text color of the alert sub title $alert-ios-sub-title-text-color: #666 !default; -/// @prop - Padding of the alert message -$alert-ios-message-padding: 0 16px 21px !default; +// deprecated +$alert-ios-message-padding: null !default; + +/// @prop - Padding top of the alert message +$alert-ios-message-padding-top: 0 !default; + +/// @prop - Padding end of the alert message +$alert-ios-message-padding-end: 16px !default; + +/// @prop - Padding bottom of the alert message +$alert-ios-message-padding-bottom: 21px !default; + +/// @prop - Padding start of the alert message +$alert-ios-message-padding-start: $alert-ios-message-padding-end !default; + /// @prop - Font size of the alert message $alert-ios-message-font-size: 13px !default; @@ -48,8 +73,20 @@ $alert-ios-message-text-align: center !default; /// @prop - Text color of the alert message $alert-ios-message-text-color: inherit !default; -/// @prop - Padding of the alert empty message -$alert-ios-message-padding-empty: 0 0 12px 0 !default; +// deprecated +$alert-ios-message-padding-empty: null !default; + +/// @prop - Padding top of the alert empty message +$alert-ios-message-empty-padding-top: 0 !default; + +/// @prop - Padding end of the alert empty message +$alert-ios-message-empty-padding-end: 0 !default; + +/// @prop - Padding bottom of the alert empty message +$alert-ios-message-empty-padding-bottom: 12px !default; + +/// @prop - Padding start of the alert empty message +$alert-ios-message-empty-padding-start: 0 !default; /// @prop - Maximum height of the alert content $alert-ios-content-max-height: 240px !default; @@ -57,8 +94,20 @@ $alert-ios-content-max-height: 240px !default; /// @prop - Margin top of the alert input $alert-ios-input-margin-top: 10px !default; -/// @prop - Padding on the alert input -$alert-ios-input-padding: 6px !default; +// deprecated +$alert-ios-input-padding: null !default; + +/// @prop - Padding top on the alert input +$alert-ios-input-padding-top: 6px !default; + +/// @prop - Padding end on the alert input +$alert-ios-input-padding-end: $alert-ios-input-padding-top !default; + +/// @prop - Padding bottom on the alert input +$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default; + +/// @prop - Padding start on the alert input +$alert-ios-input-padding-start: $alert-ios-input-padding-end !default; /// @prop - Border color of the alert input $alert-ios-input-border-color: #ccc !default; @@ -117,8 +166,20 @@ $alert-ios-button-main-font-weight: bold !default; /// @prop - Border top of the alert list $alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default; -/// @prop - Padding on the label for the radio alert -$alert-ios-radio-label-padding: 13px !default; +// deprecated +$alert-ios-radio-label-padding: null !default; + +/// @prop - Padding top on the label for the radio alert +$alert-ios-radio-label-padding-top: 13px !default; + +/// @prop - Padding end on the label for the radio alert +$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default; + +/// @prop - Padding bottom on the label for the radio alert +$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default; + +/// @prop - Padding start on the label for the radio alert +$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; /// @prop - Text color of the label for the radio alert $alert-ios-radio-label-text-color: initial !default; @@ -153,8 +214,20 @@ $alert-ios-radio-icon-border-color: $alert-ios-button-text-color !de /// @prop - Transform of the icon in the radio alert $alert-ios-radio-icon-transform: rotate(45deg) !default; -/// @prop - Padding of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding: 13px !default; +// deprecated +$alert-ios-checkbox-label-padding: null !default; + +/// @prop - Padding top of the label for the checkbox in the alert +$alert-ios-checkbox-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the checkbox in the alert +$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top !default; + +/// @prop - Padding bottom of the label for the checkbox in the alert +$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top !default; + +/// @prop - Padding start of the label for the checkbox in the alert +$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default; /// @prop - Text color of the label for the checkbox in the alert $alert-ios-checkbox-label-text-color: initial !default; @@ -162,8 +235,20 @@ $alert-ios-checkbox-label-text-color: initial !default; /// @prop - Text color of the label for the checked checkbox in the alert $alert-ios-checkbox-label-text-color-checked: initial !default; -/// @prop - Margin of the checkbox in the alert -$alert-ios-checkbox-margin: 10px 6px 10px 16px !default; +// deprecated +$alert-ios-checkbox-margin: null !default; + +/// @prop - Margin top of the checkbox in the alert +$alert-ios-checkbox-margin-top: 10px !default; + +/// @prop - Margin end of the checkbox in the alert +$alert-ios-checkbox-margin-end: 6px !default; + +/// @prop - Margin bottom of the checkbox in the alert +$alert-ios-checkbox-margin-bottom: 10px !default; + +/// @prop - Margin start of the checkbox in the alert +$alert-ios-checkbox-margin-start: 16px !default; /// @prop - Size of the checkbox in the alert $alert-ios-checkbox-size: 21px !default; @@ -215,11 +300,12 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-ios .alert-wrapper { + @include border-radius($alert-ios-border-radius); + overflow: hidden; max-width: $alert-ios-max-width; - border-radius: $alert-ios-border-radius; background-color: $alert-ios-background; box-shadow: $alert-ios-box-shadow; @@ -232,7 +318,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-ios .alert-head { @include text-align($alert-ios-head-text-align); - padding: $alert-ios-head-padding; + @include deprecated-variable(padding, $alert-ios-head-padding) { + @include padding($alert-ios-head-padding-top, $alert-ios-head-padding-end, $alert-ios-head-padding-bottom, $alert-ios-head-padding-start); + } } .alert-ios .alert-title { @@ -255,10 +343,12 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-ios .alert-input-group { @include text-align($alert-ios-message-text-align); - padding: $alert-ios-message-padding; - font-size: $alert-ios-message-font-size; color: $alert-ios-message-text-color; + + @include deprecated-variable(padding, $alert-ios-message-padding) { + @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start); + } } .alert-ios .alert-message { @@ -266,7 +356,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; } .alert-ios .alert-message:empty { - padding: $alert-ios-message-padding-empty; + @include deprecated-variable(padding, $alert-ios-message-padding-empty) { + @include padding($alert-ios-message-empty-padding-top, $alert-ios-message-empty-padding-end, $alert-ios-message-empty-padding-bottom, $alert-ios-message-empty-padding-start); + } } @@ -275,13 +367,15 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-ios .alert-input { @include appearance(none); - - margin-top: $alert-ios-input-margin-top; - padding: $alert-ios-input-padding; + @include margin($alert-ios-input-margin-top, null, null, null); + @include border-radius($alert-ios-input-border-radius); border: $alert-ios-input-border; - border-radius: $alert-ios-input-border-radius; background-color: $alert-ios-input-background-color; + + @include deprecated-variable(padding, $alert-ios-input-padding) { + @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start); + } } @@ -317,12 +411,14 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; order: 0; - padding: $alert-ios-radio-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-ios-radio-label-text-color; + + @include deprecated-variable(padding, $alert-ios-radio-label-padding) { + @include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start); + } } @@ -350,9 +446,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; // ----------------------------------------- .alert-ios [aria-checked=true] .alert-radio-inner { + @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-left); + position: absolute; - top: $alert-ios-radio-icon-top; - left: $alert-ios-radio-icon-left; width: $alert-ios-radio-icon-width; height: $alert-ios-radio-icon-height; @@ -374,12 +470,14 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-ios-checkbox-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-ios-checkbox-label-text-color; + + @include deprecated-variable(padding, $alert-ios-checkbox-label-padding) { + @include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start); + } } .alert-ios [aria-checked=true] .alert-checkbox-label { @@ -390,18 +488,21 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; // ----------------------------------------- .alert-ios .alert-checkbox-icon { - position: relative; + @include border-radius($alert-ios-checkbox-border-radius); - margin: $alert-ios-checkbox-margin; + position: relative; width: $alert-ios-checkbox-size; height: $alert-ios-checkbox-size; border-width: $alert-ios-checkbox-border-width; border-style: $alert-ios-checkbox-border-style; - border-radius: $alert-ios-checkbox-border-radius; border-color: $alert-ios-checkbox-border-color-off; background-color: $alert-ios-checkbox-background-color-off; + + @include deprecated-variable(margin, $alert-ios-checkbox-margin) { + @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start); + } } @@ -418,9 +519,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; // ----------------------------------------- .alert-ios [aria-checked=true] .alert-checkbox-inner { + @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-left); + position: absolute; - top: $alert-ios-checkbox-icon-top; - left: $alert-ios-checkbox-icon-left; width: $alert-ios-checkbox-icon-width; height: $alert-ios-checkbox-icon-height; @@ -438,24 +539,24 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-ios .alert-button-group { - flex-wrap: $alert-ios-button-group-flex-wrap; + @include margin-horizontal(null, -$alert-ios-button-border-width); - margin-right: -$alert-ios-button-border-width; + flex-wrap: $alert-ios-button-group-flex-wrap; } .alert-ios .alert-button { + @include margin($alert-ios-button-margin); + @include border-radius($alert-ios-button-border-radius); + overflow: hidden; flex: $alert-ios-button-flex; - margin: $alert-ios-button-margin; - min-width: $alert-ios-button-min-width; height: $alert-ios-button-min-height; border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; - border-radius: $alert-ios-button-border-radius; font-size: $alert-ios-button-font-size; color: $alert-ios-button-text-color; background-color: $alert-ios-button-background-color; diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss index 74fe4af07f..dde56b5b61 100644 --- a/src/components/alert/alert.md.scss +++ b/src/components/alert/alert.md.scss @@ -18,8 +18,21 @@ $alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default; /// @prop - Box shadow of the alert $alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-color !default; -/// @prop - Padding of the alert head -$alert-md-head-padding: 24px 24px 20px 24px !default; +// deprecated +$alert-md-head-padding: null !default; + +/// @prop - Padding top of the alert head +$alert-md-head-padding-top: 24px !default; + +/// @prop - Padding end of the alert head +$alert-md-head-padding-end: 24px !default; + +/// @prop - Padding bottom of the alert head +$alert-md-head-padding-bottom: 20px !default; + +/// @prop - Padding start of the alert head +$alert-md-head-padding-start: 24px !default; + /// @prop - Text align of the alert head $alert-md-head-text-align: start !default; @@ -30,8 +43,20 @@ $alert-md-title-font-size: 22px !default; /// @prop - Font size of the alert sub title $alert-md-sub-title-font-size: 16px !default; -/// @prop - Padding of the alert message -$alert-md-message-padding: 0 24px 24px 24px !default; +// deprecated +$alert-md-message-padding: null !default; + +/// @prop - Padding top of the alert message +$alert-md-message-padding-top: 0 !default; + +/// @prop - Padding end of the alert message +$alert-md-message-padding-end: 24px !default; + +/// @prop - Padding bottom of the alert message +$alert-md-message-padding-bottom: 24px !default; + +/// @prop - Padding start of the alert message +$alert-md-message-padding-start: 24px !default; /// @prop - Font size of the alert message $alert-md-message-font-size: 15px !default; @@ -39,8 +64,20 @@ $alert-md-message-font-size: 15px !default; /// @prop - Text color of the alert message $alert-md-message-text-color: rgba(0, 0, 0, .5) !default; -/// @prop - Padding of the alert empty message -$alert-md-message-padding-empty: 0 !default; +// deprecated +$alert-md-message-padding-empty: null !default; + +/// @prop - Padding top of the alert empty message +$alert-md-message-empty-padding-top: 0 !default; + +/// @prop - Padding end of the alert empty message +$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default; + +/// @prop - Padding bottom of the alert empty message +$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default; + +/// @prop - Padding start of the alert empty message +$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default; /// @prop - Maximum height of the alert content $alert-md-content-max-height: 240px !default; @@ -69,29 +106,69 @@ $alert-md-input-border-color-focused: color($colors-md, primary) !defaul /// @prop - Margin top of the alert input $alert-md-input-margin-top: 5px !default; -/// @prop - Margin right of the alert input +// deprecated $alert-md-input-margin-right: 0 !default; +/// @prop - Margin end of the alert input +$alert-md-input-margin-end: $alert-md-input-margin-right !default; /// @prop - Margin bottom of the alert input $alert-md-input-margin-bottom: 5px !default; -/// @prop - Margin left of the alert input +// deprecated $alert-md-input-margin-left: 0 !default; +/// @prop - Margin start of the alert input +$alert-md-input-margin-start: $alert-md-input-margin-left; /// @prop - Flex wrap of the alert button group $alert-md-button-group-flex-wrap: wrap-reverse !default; -/// @prop - Padding of the alert button group -$alert-md-button-group-padding: 8px 8px 8px 24px !default; +// deprecated +$alert-md-button-group-padding: null !default; + +/// @prop - Padding top of the alert button group +$alert-md-button-group-padding-top: 8px !default; + +/// @prop - Padding end of the alert button group +$alert-md-button-group-padding-end: 8px !default; + +/// @prop - Padding bottom of the alert button group +$alert-md-button-group-padding-bottom: 8px !default; + +/// @prop - Padding start of the alert button group +$alert-md-button-group-padding-start: 24px !default; /// @prop - Justify content of the alert button group $alert-md-button-group-justify-content: flex-end !default; -/// @prop - Padding of the alert button -$alert-md-button-padding: 10px !default; +// deprecated +$alert-md-button-padding: null !default; -/// @prop - Margin of the alert button -$alert-md-button-margin: 0 8px 0 0 !default; +/// @prop - Padding top of the alert button +$alert-md-button-padding-top: 10px !default; + +/// @prop - Padding end of the alert button +$alert-md-button-padding-end: $alert-md-button-padding-top !default; + +/// @prop - Padding bottom of the alert button +$alert-md-button-padding-bottom: $alert-md-button-padding-top !default; + +/// @prop - Padding start of the alert button +$alert-md-button-padding-start: $alert-md-button-padding-end !default; + +// deprecated +$alert-md-button-margin: null !default; + +/// @prop - Margin top of the alert button +$alert-md-button-margin-top: 0 !default; + +/// @prop - Margin end of the alert button +$alert-md-button-margin-end: 8px !default; + +/// @prop - Margin bottom of the alert button +$alert-md-button-margin-bottom: 0 !default; + +/// @prop - Margin start of the alert button +$alert-md-button-margin-start: 0 !default; /// @prop - Font weight of the alert button $alert-md-button-font-weight: 500 !default; @@ -121,8 +198,20 @@ $alert-md-list-border-top: 1px solid $alert-md-input-border-c /// @prop - Border bottom of the alert list $alert-md-list-border-bottom: $alert-md-list-border-top !default; -/// @prop - Padding on the label for the radio alert -$alert-md-radio-label-padding: 13px 26px !default; +// deprecated +$alert-md-radio-label-padding: null !default; + +/// @prop - Padding top on the label for the radio alert +$alert-md-radio-label-padding-top: 13px !default; + +/// @prop - Padding end on the label for the radio alert +$alert-md-radio-label-padding-end: 26px !default; + +/// @prop - Padding bottom on the label for the radio alert +$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default; + +/// @prop - Padding start on the label for the radio alert +$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end !default; /// @prop - Text color of the label for the radio alert $alert-md-radio-label-text-color: initial !default; @@ -181,8 +270,20 @@ $alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; /// @prop - Transition of the icon in the alert radio $alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default; -/// @prop - Padding of the label for the checkbox in the alert -$alert-md-checkbox-label-padding: 13px 26px !default; +// deprecated +$alert-md-checkbox-label-padding: null !default; + +/// @prop - Padding top of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-end: 26px !default; + +/// @prop - Padding bottom of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default; + +/// @prop - Padding start of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end !default; /// @prop - Text color of the label for the checkbox in the alert $alert-md-checkbox-label-text-color: initial !default; @@ -244,9 +345,10 @@ $alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert- $alert-md-checkbox-icon-transform: rotate(45deg) !default; .alert-md .alert-wrapper { + @include border-radius($alert-md-border-radius); + max-width: $alert-md-max-width; - border-radius: $alert-md-border-radius; background-color: $alert-md-background-color; box-shadow: $alert-md-box-shadow; @@ -258,7 +360,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; .alert-md .alert-head { @include text-align($alert-md-head-text-align); - padding: $alert-md-head-padding; + @include deprecated-variable(padding, $alert-md-head-padding) { + @include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start); + } } .alert-md .alert-title { @@ -275,9 +379,11 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; .alert-md .alert-message, .alert-md .alert-input-group { - padding: $alert-md-message-padding; - color: $alert-md-message-text-color; + + @include deprecated-variable(padding, $alert-md-message-padding) { + @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start); + } } .alert-md .alert-message { @@ -287,7 +393,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; } .alert-md .alert-message:empty { - padding: $alert-md-message-padding-empty; + @include deprecated-variable(padding, $alert-md-message-padding-empty) { + @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start); + } } @@ -295,7 +403,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-md .alert-input { - margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left; + @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start); border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color; color: $alert-md-input-text-color; @@ -341,21 +449,24 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-md-radio-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-md-radio-label-text-color; + + @include deprecated-variable(padding, $alert-md-radio-label-padding) { + @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start); + } } // Material Design Alert Radio Unchecked Circle // --------------------------------------------------- .alert-md .alert-radio-icon { + @include position($alert-md-radio-top, null, null, $alert-md-radio-left); + @include border-radius($alert-md-radio-border-radius); + position: relative; - top: $alert-md-radio-top; - left: $alert-md-radio-left; display: block; width: $alert-md-radio-width; @@ -363,7 +474,6 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; border-width: $alert-md-radio-border-width; border-style: $alert-md-radio-border-style; - border-radius: $alert-md-radio-border-radius; border-color: $alert-md-radio-border-color-off; } @@ -371,14 +481,14 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; // --------------------------------------------------- .alert-md .alert-radio-inner { + @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-left); + @include border-radius($alert-md-radio-icon-border-radius); + position: absolute; - top: $alert-md-radio-icon-top; - left: $alert-md-radio-icon-left; width: $alert-md-radio-icon-width; height: $alert-md-radio-icon-height; - border-radius: $alert-md-radio-icon-border-radius; background-color: $alert-md-radio-border-color-on; transform: $alert-md-radio-icon-transform-off; transition: $alert-md-radio-icon-transition; @@ -409,12 +519,14 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-md-checkbox-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-md-checkbox-label-text-color; + + @include deprecated-variable(padding, $alert-md-checkbox-label-padding) { + @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start); + } } .alert-md [aria-checked=true] .alert-checkbox-label { @@ -425,16 +537,16 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-md .alert-checkbox-icon { + @include position($alert-md-checkbox-top, null, null, $alert-md-checkbox-left); + @include border-radius($alert-md-checkbox-border-radius); + position: relative; - top: $alert-md-checkbox-top; - left: $alert-md-checkbox-left; width: $alert-md-checkbox-width; height: $alert-md-checkbox-height; border-width: $alert-md-checkbox-border-width; border-style: $alert-md-checkbox-border-style; - border-radius: $alert-md-checkbox-border-radius; border-color: $alert-md-checkbox-border-color-off; } @@ -447,9 +559,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; } .alert-md [aria-checked=true] .alert-checkbox-inner { + @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-left); + position: absolute; - top: $alert-md-checkbox-icon-top; - left: $alert-md-checkbox-icon-left; width: $alert-md-checkbox-icon-width; height: $alert-md-checkbox-icon-height; @@ -470,24 +582,31 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; flex-wrap: $alert-md-button-group-flex-wrap; justify-content: $alert-md-button-group-justify-content; - padding: $alert-md-button-group-padding; + @include deprecated-variable(padding, $alert-md-button-group-padding) { + @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start); + } } .alert-md .alert-button { @include text-align($alert-md-button-text-align); + @include border-radius($alert-md-button-border-radius); // necessary for ripple to work properly position: relative; overflow: hidden; - margin: $alert-md-button-margin; - padding: $alert-md-button-padding; - - border-radius: $alert-md-button-border-radius; font-weight: $alert-md-button-font-weight; text-transform: $alert-md-button-text-transform; color: $alert-md-button-text-color; background-color: $alert-md-button-background-color; + + @include deprecated-variable(margin, $alert-md-button-margin) { + @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start); + } + + @include deprecated-variable(padding, $alert-md-button-padding) { + @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start); + } } .alert-md .alert-button.activated { diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index df2a17b404..30165b0083 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -20,11 +20,10 @@ $alert-input-placeholder-color: #999 !default; ion-alert { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + z-index: $z-index-overlay; display: flex; @@ -60,13 +59,13 @@ ion-alert input { } .alert-title { - margin: 0; - padding: 0; + @include margin(0); + @include padding(0); } .alert-sub-title { - margin: 5px 0 0; - padding: 0; + @include margin(5px, 0, 0); + @include padding(0); font-weight: normal; } @@ -79,8 +78,7 @@ ion-alert input { .alert-input { @include placeholder($alert-input-placeholder-color); - - padding: 10px 0; + @include padding(10px, 0); border: 0; background: inherit; @@ -98,11 +96,11 @@ ion-alert input { } .alert-button { + @include margin(0); + z-index: 0; display: block; - margin: 0; - font-size: $alert-button-font-size; line-height: $alert-button-line-height; } @@ -110,9 +108,8 @@ ion-alert input { .alert-tappable { @include text-align(start); @include appearance(none); - - margin: 0; - padding: 0; + @include margin(0); + @include padding(0); width: 100%; diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss index f5a4c2b21e..896aef0a32 100644 --- a/src/components/alert/alert.wp.scss +++ b/src/components/alert/alert.wp.scss @@ -27,8 +27,20 @@ $alert-wp-border-radius: 0 !default; /// @prop - Background color of the alert $alert-wp-background: #e6e6e6 !default; -/// @prop - Padding of the alert head -$alert-wp-head-padding: 20px 22px 5px 22px !default; +// deprecated +$alert-wp-head-padding: null !default; + +/// @prop - Padding top of the alert head +$alert-wp-head-padding-top: 20px !default; + +/// @prop - Padding end of the alert head +$alert-wp-head-padding-end: 22px !default; + +/// @prop - Padding bottom of the alert head +$alert-wp-head-padding-bottom: 5px !default; + +/// @prop - Padding start of the alert head +$alert-wp-head-padding-start: 22px !default; /// @prop - Text align of the alert head $alert-wp-head-text-align: start !default; @@ -42,11 +54,35 @@ $alert-wp-title-font-weight: 400 !default; /// @prop - Font size of the alert sub title $alert-wp-sub-title-font-size: 16px !default; -/// @prop - Padding of the alert message -$alert-wp-message-padding: 0 22px 8px 22px !default; +// deprecated +$alert-wp-message-padding: null !default; -/// @prop - Padding of the alert empty message -$alert-wp-message-padding-empty: 0 !default; +/// @prop - Padding top of the alert message +$alert-wp-message-padding-top: 0 !default; + +/// @prop - Padding end of the alert message +$alert-wp-message-padding-end: 22px !default; + +/// @prop - Padding bottom of the alert message +$alert-wp-message-padding-bottom: 8px !default; + +/// @prop - Padding start of the alert message +$alert-wp-message-padding-start: 22px !default; + +// deprecated +$alert-wp-message-padding-empty: null !default; + +/// @prop - Padding top of the alert empty message +$alert-wp-message-empty-padding-top: 0 !default; + +/// @prop - Padding end of the alert empty message +$alert-wp-message-empty-padding-end: $alert-wp-message-empty-padding-top !default; + +/// @prop - Padding bottom of the alert empty message +$alert-wp-message-empty-padding-bottom: $alert-wp-message-empty-padding-top !default; + +/// @prop - Padding start of the alert empty message +$alert-wp-message-empty-padding-start: $alert-wp-message-empty-padding-end !default; /// @prop - Text color of the alert message $alert-wp-message-text-color: #000 !default; @@ -57,11 +93,35 @@ $alert-wp-message-font-size: 13px !default; /// @prop - Maximum height of the alert content $alert-wp-content-max-height: 240px !default; -/// @prop - Margin of the alert input -$alert-wp-input-margin: 5px 0 5px 0 !default; +// deprecated +$alert-wp-input-margin: null !default; -/// @prop - Padding on the alert input -$alert-wp-input-padding: 0 8px !default; +/// @prop - Margin top of the alert input +$alert-wp-input-margin-top: 5px !default; + +/// @prop - Margin end of the alert input +$alert-wp-input-margin-end: 0 !default; + +/// @prop - Margin bottom of the alert input +$alert-wp-input-margin-bottom: 5px !default; + +/// @prop - Margin start of the alert input +$alert-wp-input-margin-start: 0 !default; + +// deprecated +$alert-wp-input-padding: null !default; + +/// @prop - Padding top on the alert input +$alert-wp-input-padding-top: 0 !default; + +/// @prop - Padding end on the alert input +$alert-wp-input-padding-end: 8px !default; + +/// @prop - Padding bottom on the alert input +$alert-wp-input-padding-bottom: $alert-wp-input-padding-top !default; + +/// @prop - Padding start on the alert input +$alert-wp-input-padding-start: $alert-wp-input-padding-end !default; /// @prop - Border width of the alert input $alert-wp-input-border-width: 2px !default; @@ -81,8 +141,20 @@ $alert-wp-input-line-height: 3rem !default; /// @prop - Color of the text in the alert input $alert-wp-input-text-color: #000 !default; -/// @prop - Padding of the alert button -$alert-wp-button-padding: 5px !default; +// deprecated +$alert-wp-button-padding: null !default; + +/// @prop - Padding top of the alert button +$alert-wp-button-padding-top: 5px !default; + +/// @prop - Padding end of the alert button +$alert-wp-button-padding-end: $alert-wp-button-padding-top !default; + +/// @prop - Padding bottom of the alert button +$alert-wp-button-padding-bottom: $alert-wp-button-padding-top !default; + +/// @prop - Padding start of the alert button +$alert-wp-button-padding-start: $alert-wp-button-padding-end !default; /// @prop - Width of the alert button $alert-wp-button-width: 49.5% !default; @@ -102,11 +174,25 @@ $alert-wp-button-background: #b8b8b8 !default; /// @prop - Background color of the activated alert button $alert-wp-button-background-activated: color-shade($alert-wp-button-background) !default; -/// @prop - Margin right of the alert button +// deprecated $alert-wp-button-margin-right: 1% !default; +/// @prop - Margin end of the alert button +$alert-wp-button-margin-end: $alert-wp-button-margin-right !default; + +$alert-wp-button-group-padding: null !default; + +/// @prop - Padding top of the alert button group +$alert-wp-button-group-padding-top: 20px !default; + +/// @prop - Padding end of the alert button group +$alert-wp-button-group-padding-end: 22px !default; + +/// @prop - Padding bottom of the alert button group +$alert-wp-button-group-padding-bottom: 20px !default; + +/// @prop - Padding start of the alert button group +$alert-wp-button-group-padding-start: 22px !default; -/// @prop - Padding of the alert button group -$alert-wp-button-group-padding: 20px 22px 20px 22px !default; /// @prop - Justify content of the alert button group $alert-wp-button-group-justify-content: flex-end !default; @@ -127,8 +213,21 @@ $alert-wp-radio-background: color($colors-wp, primary) !defau /// @prop - Border color of the radio alert $alert-wp-radio-border-color: $input-wp-border-color !default; -/// @prop - Padding of the label for the radio alert -$alert-wp-radio-label-padding: 13px 26px !default; +// deprecated +$alert-wp-radio-label-padding: null !default; + +/// @prop - Padding top of the label for the radio alert +$alert-wp-radio-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the radio alert +$alert-wp-radio-label-padding-end: 26px !default; + +/// @prop - Padding bottom of the label for the radio alert +$alert-wp-radio-label-padding-bottom: $alert-wp-radio-label-padding-top !default; + +/// @prop - Padding start of the label for the radio alert +$alert-wp-radio-label-padding-start: $alert-wp-radio-label-padding-end !default; + /// @prop - Text color of the label for the radio alert $alert-wp-radio-label-text-color: initial !default; @@ -175,8 +274,20 @@ $alert-wp-radio-icon-height: 8px !default; /// @prop - Border radius of the icon in the radio alert $alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !default; -/// @prop - Padding of the label for the checkbox in the alert -$alert-wp-checkbox-label-padding: 13px 26px !default; +// deprecated +$alert-wp-checkbox-label-padding: null !default; + +/// @prop - Padding top of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-end: 26px !default; + +/// @prop - Padding bottom of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-bottom: $alert-wp-checkbox-label-padding-top !default; + +/// @prop - Padding start of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-start: $alert-wp-checkbox-label-padding-end !default; /// @prop - Text color of the label for the checkbox in the alert $alert-wp-checkbox-label-text-color: initial !default; @@ -244,11 +355,12 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; } .alert-wp .alert-wrapper { + @include border-radius($alert-wp-border-radius); + width: $alert-wp-width; max-width: $alert-wp-max-width; border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color; - border-radius: $alert-wp-border-radius; background: $alert-wp-background; } @@ -258,7 +370,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; .alert-wp .alert-head { @include text-align($alert-wp-head-text-align); - padding: $alert-wp-head-padding; + @include deprecated-variable(padding, $alert-wp-head-padding) { + @include padding($alert-wp-head-padding-top, $alert-wp-head-padding-end, $alert-wp-head-padding-bottom, $alert-wp-head-padding-start); + } } .alert-wp .alert-title { @@ -276,9 +390,11 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; .alert-wp .alert-message, .alert-wp .alert-input-group { - padding: $alert-wp-message-padding; - color: $alert-wp-message-text-color; + + @include deprecated-variable(padding, $alert-wp-message-padding) { + @include padding($alert-wp-message-padding-top, $alert-wp-message-padding-end, $alert-wp-message-padding-bottom, $alert-wp-message-padding-start); + } } .alert-wp .alert-message { @@ -288,7 +404,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; } .alert-wp .alert-message:empty { - padding: $alert-wp-message-padding-empty; + @include deprecated-variable(padding, $alert-wp-message-padding-empty) { + @include padding($alert-wp-message-empty-padding-top, $alert-wp-message-empty-padding-end, $alert-wp-message-empty-padding-bottom, $alert-wp-message-empty-padding-start); + } } @@ -296,12 +414,17 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-wp .alert-input { - margin: $alert-wp-input-margin; - padding: $alert-wp-input-padding; - border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color; line-height: $alert-wp-input-line-height; color: $alert-wp-input-text-color; + + @include deprecated-variable(margin, $alert-wp-input-margin) { + @include margin($alert-wp-input-margin-top, $alert-wp-input-margin-end, $alert-wp-input-margin-bottom, $alert-wp-input-margin-start); + } + + @include deprecated-variable(padding, $alert-wp-input-padding) { + @include padding($alert-wp-input-padding-top, $alert-wp-input-padding-end, $alert-wp-input-padding-bottom, $alert-wp-input-padding-start); + } } .alert-wp .alert-input:focus { @@ -339,31 +462,32 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-wp-radio-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-wp-radio-label-text-color; + + @include deprecated-variable(padding, $alert-wp-radio-label-padding) { + @include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start); + } } // Windows Alert Radio Unchecked Circle // --------------------------------------------------- .alert-wp .alert-radio-icon { - position: relative; - top: $alert-wp-radio-top; - left: $alert-wp-radio-left; - display: block; + @include position($alert-wp-radio-top, null, null, $alert-wp-radio-left); + @include margin(0); + @include border-radius($alert-wp-radio-border-radius); - margin: 0; + position: relative; + display: block; width: $alert-wp-radio-width; height: $alert-wp-radio-height; border-width: $alert-wp-radio-border-width; border-style: $alert-wp-radio-border-style; - border-radius: $alert-wp-radio-border-radius; border-color: $alert-wp-radio-border-color; } @@ -371,15 +495,15 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; // --------------------------------------------------- .alert-wp .alert-radio-inner { + @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-left); + @include border-radius($alert-wp-radio-icon-border-radius); + position: absolute; - top: $alert-wp-radio-icon-top; - left: $alert-wp-radio-icon-left; display: none; width: $alert-wp-radio-icon-width; height: $alert-wp-radio-icon-height; - border-radius: $alert-wp-radio-icon-border-radius; background: $alert-wp-radio-background; } @@ -407,12 +531,14 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-wp-checkbox-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-wp-checkbox-label-text-color; + + @include deprecated-variable(padding, $alert-wp-checkbox-label-padding) { + @include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start); + } } .alert-wp [aria-checked=true] .alert-checkbox-label { @@ -423,16 +549,16 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-wp .alert-checkbox-icon { + @include position($alert-wp-checkbox-top, null, null, $alert-wp-checkbox-left); + @include border-radius($alert-wp-checkbox-border-radius); + position: relative; - top: $alert-wp-checkbox-top; - left: $alert-wp-checkbox-left; width: $alert-wp-checkbox-width; height: $alert-wp-checkbox-height; border-width: $alert-wp-checkbox-border-width; border-style: $alert-wp-checkbox-border-style; - border-radius: $alert-wp-checkbox-border-radius; border-color: $alert-wp-checkbox-border-color; background: $alert-wp-checkbox-background-off; } @@ -449,9 +575,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-wp [aria-checked=true] .alert-checkbox-inner { + @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-left); + position: absolute; - top: $alert-wp-checkbox-icon-top; - left: $alert-wp-checkbox-icon-left; width: $alert-wp-checkbox-icon-width; height: $alert-wp-checkbox-icon-height; @@ -472,7 +598,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; flex-wrap: $alert-wp-button-group-flex-wrap; justify-content: $alert-wp-button-group-justify-content; - padding: $alert-wp-button-group-padding; + @include deprecated-variable(padding, $alert-wp-button-group-padding) { + @include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start); + } } .alert-wp .alert-button-group-vertical .alert-button { @@ -482,23 +610,25 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; } .alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) { - margin-top: 0; - margin-right: 0; + @include margin(0, 0, null, null); } .alert-wp .alert-button { - padding: $alert-wp-button-padding; + @include border-radius($alert-wp-button-border-radius); width: $alert-wp-button-width; - border-radius: $alert-wp-button-border-radius; font-weight: $alert-wp-button-font-weight; color: $alert-wp-button-text-color; background: $alert-wp-button-background; + + @include deprecated-variable(padding, $alert-wp-button-padding) { + @include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start); + } } .alert-wp .alert-button:first-child:not(:only-child) { - margin-right: $alert-wp-button-margin-right; + @include margin-horizontal(null, $alert-wp-button-margin-end); } .alert-wp .alert-button.activated { diff --git a/src/components/app/app.scss b/src/components/app/app.scss index 56262c4874..7beadc430a 100644 --- a/src/components/app/app.scss +++ b/src/components/app/app.scss @@ -100,12 +100,12 @@ html { } body { + @include margin(0); + @include padding(0); + position: fixed; overflow: hidden; - margin: 0; - padding: 0; - width: 100%; max-width: 100%; height: 100%; @@ -229,9 +229,9 @@ ion-nav, ion-tab, ion-tabs, .app-root { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-page-container; display: block; @@ -267,9 +267,9 @@ ion-tabs, // -------------------------------------------------- .ion-page { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; display: block; width: 100%; @@ -289,9 +289,9 @@ ion-tabs, // -------------------------------------------------- ion-header { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-toolbar; display: block; @@ -299,9 +299,9 @@ ion-header { } ion-footer { + @include position(null, null, 0, 0); + position: absolute; - bottom: 0; - left: 0; z-index: $z-index-toolbar; display: block; @@ -412,33 +412,31 @@ ion-footer { // Provide `[float-{bp}]` attributes for floating the element based // on the breakpoint [float#{$infix}-left] { - // scss-lint:disable ImportantRule + // scss-lint:disable ImportantRule, PropertySpelling float: left !important; } [float#{$infix}-right] { - // scss-lint:disable ImportantRule + // scss-lint:disable ImportantRule, PropertySpelling float: right !important; } [float#{$infix}-start] { - // scss-lint:disable ImportantRule + // scss-lint:disable ImportantRule, PropertySpelling float: left !important; + + @include rtl() { + float: right !important; + } } [float#{$infix}-end] { - // scss-lint:disable ImportantRule + // scss-lint:disable ImportantRule, PropertySpelling float: right !important; - } - [dir="rtl"] [float#{$infix}-start] { - // scss-lint:disable ImportantRule - float: right !important; - } - - [dir="rtl"] [float#{$infix}-end] { - // scss-lint:disable ImportantRule - float: left !important; + @include rtl() { + float: left !important; + } } } } diff --git a/src/components/backdrop/backdrop.scss b/src/components/backdrop/backdrop.scss index 15e754d59f..5eab9f1179 100644 --- a/src/components/backdrop/backdrop.scss +++ b/src/components/backdrop/backdrop.scss @@ -7,9 +7,9 @@ $backdrop-color: #000 !default; ion-backdrop { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-backdrop; display: block; diff --git a/src/components/badge/badge.ios.scss b/src/components/badge/badge.ios.scss index 0c1d0fa451..1391ca6945 100644 --- a/src/components/badge/badge.ios.scss +++ b/src/components/badge/badge.ios.scss @@ -14,7 +14,8 @@ $badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background .badge-ios { - border-radius: $badge-ios-border-radius; + @include border-radius($badge-ios-border-radius); + color: $badge-ios-text-color; background-color: $badge-ios-background-color; } diff --git a/src/components/badge/badge.md.scss b/src/components/badge/badge.md.scss index 958c62ed16..b1eca5ac23 100644 --- a/src/components/badge/badge.md.scss +++ b/src/components/badge/badge.md.scss @@ -14,7 +14,8 @@ $badge-md-text-color: color-contrast($colors-md, $badge-md-backgro .badge-md { - border-radius: $badge-md-border-radius; + @include border-radius($badge-md-border-radius); + color: $badge-md-text-color; background-color: $badge-md-background-color; } diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss index 3143035a06..a0f5330178 100644 --- a/src/components/badge/badge.scss +++ b/src/components/badge/badge.scss @@ -11,12 +11,11 @@ $badge-font-weight: bold !default; ion-badge { + @include padding(3px, 8px); @include text-align(center); display: inline-block; - padding: 3px 8px; - min-width: 10px; font-size: $badge-font-size; diff --git a/src/components/badge/badge.wp.scss b/src/components/badge/badge.wp.scss index 9c86c3e126..dd12a1923f 100644 --- a/src/components/badge/badge.wp.scss +++ b/src/components/badge/badge.wp.scss @@ -14,7 +14,8 @@ $badge-wp-text-color: color-contrast($colors-wp, $badge-wp-backgro .badge-wp { - border-radius: $badge-wp-border-radius; + @include border-radius($badge-wp-border-radius); + color: $badge-wp-text-color; background-color: $badge-wp-background-color; } diff --git a/src/components/button/button-icon.scss b/src/components/button/button-icon.scss index 1412e939df..e9f8bc80ef 100644 --- a/src/components/button/button-icon.scss +++ b/src/components/button/button-icon.scss @@ -14,23 +14,23 @@ [icon-left] ion-icon { @include button-icon; - padding-right: .3em; + @include padding-horizontal(null, .3em); } [icon-right] ion-icon { @include button-icon; - padding-left: .4em; + @include padding-horizontal(.4em, null); } .button[icon-only] { - padding: 0; + @include padding(0); min-width: .9em; } [icon-only] ion-icon { - padding: 0 .5em; + @include padding(0, .5em); font-size: 1.8em; line-height: .67; diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss index 5b07c8923b..0b53a53b3a 100644 --- a/src/components/button/button.ios.scss +++ b/src/components/button/button.ios.scss @@ -3,11 +3,35 @@ // iOS Button // -------------------------------------------------- -/// @prop - Margin of the button -$button-ios-margin: .4rem .2rem !default; +// deprecated +$button-ios-margin: null !default; -/// @prop - Padding of the button -$button-ios-padding: 0 1em !default; +/// @prop - Margin top of the button +$button-ios-margin-top: .4rem !default; + +/// @prop - Margin end of the button +$button-ios-margin-end: .2rem !default; + +/// @prop - Margin bottom of the button +$button-ios-margin-bottom: .4rem !default; + +/// @prop - Margin start of the button +$button-ios-margin-start: .2rem !default; + +// deprecated +$button-ios-padding: null !default; + +/// @prop - Padding top of the button +$button-ios-padding-top: 0 !default; + +/// @prop - Padding end of the button +$button-ios-padding-end: 1em !default; + +/// @prop - Padding bottom of the button +$button-ios-padding-bottom: $button-ios-padding-top !default; + +/// @prop - Padding start of the button +$button-ios-padding-start: $button-ios-padding-end !default; /// @prop - Height of the button $button-ios-height: 2.8em !default; @@ -37,8 +61,20 @@ $button-ios-opacity-hover: .8 !default; // iOS Large Button // -------------------------------------------------- -/// @prop - Padding of the large button -$button-ios-large-padding: 0 1em !default; +// deprecated +$button-ios-large-padding: null !default; + +/// @prop - Padding top of the large button +$button-ios-large-padding-top: 0 !default; + +/// @prop - Padding end of the large button +$button-ios-large-padding-end: 1em !default; + +/// @prop - Padding bottom of the large button +$button-ios-large-padding-bottom: $button-ios-large-padding-top !default; + +/// @prop - Padding start of the large button +$button-ios-large-padding-start: $button-ios-large-padding-end !default; /// @prop - Height of the large button $button-ios-large-height: 2.8em !default; @@ -50,8 +86,20 @@ $button-ios-large-font-size: 2rem !default; // iOS Small Button // -------------------------------------------------- -/// @prop - Padding of the small button -$button-ios-small-padding: 0 .9em !default; +// deprecated +$button-ios-small-padding: null !default; + +/// @prop - Padding top of the small button +$button-ios-small-padding-top: 0 !default; + +/// @prop - Padding end of the small button +$button-ios-small-padding-end: .9em !default; + +/// @prop - Padding bottom of the small button +$button-ios-small-padding-bottom: $button-ios-small-padding-top !default; + +/// @prop - Padding start of the small button +$button-ios-small-padding-start: $button-ios-small-padding-end !default; /// @prop - Height of the small button $button-ios-small-height: 2.1em !default; @@ -119,8 +167,20 @@ $button-ios-clear-opacity-hover: .6 !default; // iOS Round Button // -------------------------------------------------- -/// @prop - Padding of the round button -$button-ios-round-padding: $button-round-padding !default; +// deprecated +$button-ios-round-padding: null !default; + +/// @prop - Padding top of the round button +$button-ios-round-padding-top: $button-round-padding-top !default; + +/// @prop - Padding end of the round button +$button-ios-round-padding-end: $button-round-padding-end !default; + +/// @prop - Padding bottom of the round button +$button-ios-round-padding-bottom: $button-round-padding-bottom !default; + +/// @prop - Padding start of the round button +$button-ios-round-padding-start: $button-round-padding-start !default; /// @prop - Border radius of the round button $button-ios-round-border-radius: $button-round-border-radius !default; @@ -137,16 +197,22 @@ $button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .button-ios { - margin: $button-ios-margin; - padding: $button-ios-padding; + @include border-radius($button-ios-border-radius); height: $button-ios-height; - border-radius: $button-ios-border-radius; font-size: $button-ios-font-size; color: $button-ios-text-color; background-color: $button-ios-background-color; + + @include deprecated-variable(margin, $button-ios-margin) { + @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start); + } + + @include deprecated-variable(padding, $button-ios-padding) { + @include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start); + } } .button-ios.activated { @@ -182,19 +248,23 @@ $button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .button-large-ios { - padding: $button-ios-large-padding; - height: $button-ios-large-height; font-size: $button-ios-large-font-size; + + @include deprecated-variable(padding, $button-ios-large-padding) { + @include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start); + } } .button-small-ios { - padding: $button-ios-small-padding; - height: $button-ios-small-height; font-size: $button-ios-small-font-size; + + @include deprecated-variable(padding, $button-ios-small-padding) { + @include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start); + } } .button-small-ios[icon-only] ion-icon { @@ -205,29 +275,28 @@ $button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .button-block-ios { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); } // iOS Full Button // -------------------------------------------------- .button-full-ios { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); + @include border-radius(0); border-right-width: 0; border-left-width: 0; - border-radius: 0; } // iOS Outline Button // -------------------------------------------------- .button-outline-ios { + @include border-radius($button-ios-outline-border-radius); + border-width: $button-ios-outline-border-width; border-style: $button-ios-outline-border-style; - border-radius: $button-ios-outline-border-radius; border-color: $button-ios-outline-border-color; color: $button-ios-outline-text-color; background-color: $button-ios-outline-background-color; @@ -304,9 +373,11 @@ $button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .button-round-ios { - padding: $button-ios-round-padding; + @include border-radius($button-ios-round-border-radius); - border-radius: $button-ios-round-border-radius; + @include deprecated-variable(padding, $button-ios-round-padding) { + @include padding($button-ios-round-padding-top, $button-ios-round-padding-end, $button-ios-round-padding-bottom, $button-ios-round-padding-start); + } } diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss index b967f5bee0..f6b45299d1 100644 --- a/src/components/button/button.md.scss +++ b/src/components/button/button.md.scss @@ -3,11 +3,35 @@ // Material Design Button // -------------------------------------------------- -/// @prop - Margin of the button -$button-md-margin: .4rem .2rem !default; +// deprecated +$button-md-margin: null !default; -/// @prop - Padding of the button -$button-md-padding: 0 1.1em !default; +/// @prop - Margin top of the button +$button-md-margin-top: .4rem !default; + +/// @prop - Margin end of the button +$button-md-margin-end: .2rem !default; + +/// @prop - Margin bottom of the button +$button-md-margin-bottom: .4rem !default; + +/// @prop - Margin start of the button +$button-md-margin-start: .2rem !default; + +// deprecated +$button-md-padding: null !default; + +/// @prop - Padding top of the button +$button-md-padding-top: 0 !default; + +/// @prop - Padding end of the button +$button-md-padding-end: 1.1em !default; + +/// @prop - Padding bottom of the button +$button-md-padding-bottom: $button-md-padding-top !default; + +/// @prop - Padding start of the button +$button-md-padding-start: $button-md-padding-end !default; /// @prop - Height of the button $button-md-height: 3.6rem !default; @@ -58,8 +82,20 @@ $button-md-ripple-background-color: #555 !default; // Material Design Large Button // -------------------------------------------------- -/// @prop - Padding of the large button -$button-md-large-padding: 0 1em !default; +// deprecated +$button-md-large-padding: null !default; + +/// @prop - Padding top of the large button +$button-md-large-padding-top: 0 !default; + +/// @prop - Padding end of the large button +$button-md-large-padding-end: 1em !default; + +/// @prop - Padding bottom of the large button +$button-md-large-padding-bottom: $button-md-large-padding-top !default; + +/// @prop - Padding start of the large button +$button-md-large-padding-start: $button-md-large-padding-end !default; /// @prop - Height of the large button $button-md-large-height: 2.8em !default; @@ -71,8 +107,20 @@ $button-md-large-font-size: 2rem !default; // Material Design Small Button // -------------------------------------------------- -/// @prop - Padding of the small button -$button-md-small-padding: 0 .9em !default; +// deprecated +$button-md-small-padding: null !default; + +/// @prop - Padding top of the small button +$button-md-small-padding-top: 0 !default; + +/// @prop - Padding end of the small button +$button-md-small-padding-end: .9em !default; + +/// @prop - Padding bottom of the small button +$button-md-small-padding-bottom: $button-md-small-padding-top !default; + +/// @prop - Padding start of the small button +$button-md-small-padding-start: $button-md-small-padding-end !default; /// @prop - Height of the small button $button-md-small-height: 2.1em !default; @@ -155,8 +203,20 @@ $button-md-clear-ripple-background-color: #999 !default; // Material Design Round Button // -------------------------------------------------- -/// @prop - Padding of the round button -$button-md-round-padding: $button-round-padding !default; +// deprecated +$button-md-round-padding: null !default; + +/// @prop - Padding top of the round button +$button-md-round-padding-top: $button-round-padding-top !default; + +/// @prop - Padding end of the round button +$button-md-round-padding-end: $button-round-padding-end !default; + +/// @prop - Padding bottom of the round button +$button-md-round-padding-bottom: $button-round-padding-bottom !default; + +/// @prop - Padding start of the round button +$button-md-round-padding-start: $button-round-padding-start !default; /// @prop - Border radius of the round button $button-md-round-border-radius: $button-round-border-radius !default; @@ -173,15 +233,12 @@ $button-md-strong-font-weight: bold !default; // -------------------------------------------------- .button-md { + @include border-radius($button-md-border-radius); + overflow: hidden; - margin: $button-md-margin; - padding: $button-md-padding; - height: $button-md-height; - border-radius: $button-md-border-radius; - font-size: $button-md-font-size; font-weight: $button-md-font-weight; @@ -193,6 +250,14 @@ $button-md-strong-font-weight: bold !default; transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function, background-color $button-md-transition-duration $button-md-transition-timing-function, color $button-md-transition-duration $button-md-transition-timing-function; + + @include deprecated-variable(margin, $button-md-margin) { + @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start); + } + + @include deprecated-variable(padding, $button-md-padding) { + @include padding($button-md-padding-top, $button-md-padding-end, $button-md-padding-bottom, $button-md-padding-start); + } } .button-md:hover:not(.disable-hover) { @@ -241,19 +306,23 @@ $button-md-strong-font-weight: bold !default; // -------------------------------------------------- .button-large-md { - padding: $button-md-large-padding; - height: $button-md-large-height; font-size: $button-md-large-font-size; + + @include deprecated-variable(padding, $button-md-large-padding) { + @include padding($button-md-large-padding-top, $button-md-large-padding-end, $button-md-large-padding-bottom, $button-md-large-padding-start); + } } .button-small-md { - padding: $button-md-small-padding; - height: $button-md-small-height; font-size: $button-md-small-font-size; + + @include deprecated-variable(padding, $button-md-small-padding) { + @include padding($button-md-small-padding-top, $button-md-small-padding-end, $button-md-small-padding-bottom, $button-md-small-padding-start); + } } .button-small-md[icon-only] ion-icon { @@ -264,20 +333,18 @@ $button-md-strong-font-weight: bold !default; // -------------------------------------------------- .button-block-md { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); } // Material Design Full Button // -------------------------------------------------- .button-full-md { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); + @include border-radius(0); border-right-width: 0; border-left-width: 0; - border-radius: 0; } // Material Design Outline Button @@ -385,13 +452,15 @@ $button-md-strong-font-weight: bold !default; // -------------------------------------------------- .button-round-md { - padding: $button-md-round-padding; + @include border-radius($button-md-round-border-radius); - border-radius: $button-md-round-border-radius; + @include deprecated-variable(padding, $button-md-round-padding) { + @include padding($button-md-round-padding-top, $button-md-round-padding-end, $button-md-round-padding-bottom, $button-md-round-padding-start); + } } .button-md [icon-only] { - padding: 0; + @include padding(0); } @@ -401,14 +470,13 @@ $button-md-strong-font-weight: bold !default; // it's display none, and .md sets to display block. .button-effect { + @include position(0, null, null, 0); + @include border-radius(50%); + position: absolute; - top: 0; - left: 0; z-index: 0; display: none; - border-radius: 50%; - background-color: $button-md-ripple-background-color; opacity: .2; diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 075c65f68b..b806a5fc1f 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -3,8 +3,20 @@ // Buttons // -------------------------------------------------- -/// @prop - Padding of the round button -$button-round-padding: 0 2.6rem !default; +// deprecated +$button-round-padding: null !default; + +/// @prop - Padding top of the round button +$button-round-padding-top: 0 !default; + +/// @prop - Padding end of the round button +$button-round-padding-end: 2.6rem !default; + +/// @prop - Padding bottom of the round button +$button-round-padding-bottom: $button-round-padding-top !default; + +/// @prop - Padding start of the round button +$button-round-padding-start: $button-round-padding-end !default; /// @prop - Border radius of the round button $button-round-border-radius: 64px !default; @@ -93,7 +105,8 @@ button[disabled], // -------------------------------------------------- .button-full.button-outline { + @include border-radius(0); + border-right-width: 0; border-left-width: 0; - border-radius: 0; } diff --git a/src/components/button/button.wp.scss b/src/components/button/button.wp.scss index 5d6892bf0b..d5b67f1610 100644 --- a/src/components/button/button.wp.scss +++ b/src/components/button/button.wp.scss @@ -3,11 +3,35 @@ // Windows Button // -------------------------------------------------- -/// @prop - Margin of the button -$button-wp-margin: .4rem .2rem !default; +// deprecated +$button-wp-margin: null !default; -/// @prop - Padding of the button -$button-wp-padding: 0 1.1em !default; +/// @prop - Margin top of the button +$button-wp-margin-top: .4rem !default; + +/// @prop - Margin end of the button +$button-wp-margin-end: .2rem !default; + +/// @prop - Margin bottom of the button +$button-wp-margin-bottom: .4rem !default; + +/// @prop - Margin start of the button +$button-wp-margin-start: .2rem !default; + +// deprecated +$button-wp-padding: null !default; + +/// @prop - Padding top of the button +$button-wp-padding-top: 0 !default; + +/// @prop - Padding end of the button +$button-wp-padding-end: 1.1em !default; + +/// @prop - Padding bottom of the button +$button-wp-padding-bottom: $button-wp-padding-top !default; + +/// @prop - Padding start of the button +$button-wp-padding-start: $button-wp-padding-end !default; /// @prop - Height of the button $button-wp-height: 3.6rem !default; @@ -40,8 +64,20 @@ $button-wp-background-color-activated: color-shade($button-wp // Windows Large Button // -------------------------------------------------- -/// @prop - Padding of the large button -$button-wp-large-padding: 0 1em !default; +// deprecated +$button-wp-large-padding: null !default; + +/// @prop - Padding top of the large button +$button-wp-large-padding-top: 0 !default; + +/// @prop - Padding end of the large button +$button-wp-large-padding-end: 1em !default; + +/// @prop - Padding bottom of the large button +$button-wp-large-padding-bottom: $button-wp-large-padding-top !default; + +/// @prop - Padding start of the large button +$button-wp-large-padding-start: $button-wp-large-padding-end !default; /// @prop - Height of the large button $button-wp-large-height: 2.8em !default; @@ -53,8 +89,20 @@ $button-wp-large-font-size: 2rem !default; // Windows Small Button // -------------------------------------------------- -/// @prop - Padding of the small button -$button-wp-small-padding: 0 .9em !default; +// deprecated +$button-wp-small-padding: null !default; + +/// @prop - Padding top of the small button +$button-wp-small-padding-top: 0 !default; + +/// @prop - Padding end of the small button +$button-wp-small-padding-end: .9em !default; + +/// @prop - Padding bottom of the small button +$button-wp-small-padding-bottom: $button-wp-small-padding-top !default; + +/// @prop - Padding start of the small button +$button-wp-small-padding-start: $button-wp-small-padding-end !default; /// @prop - Height of the small button $button-wp-small-height: 2.1em !default; @@ -110,8 +158,20 @@ $button-wp-clear-background-color-hover: rgba(158, 158, 158, .1 // Windows Round Button // -------------------------------------------------- -/// @prop - Padding of the round button -$button-wp-round-padding: $button-round-padding !default; +// deprecated +$button-wp-round-padding: null !default; + +/// @prop - Padding top of the round button +$button-wp-round-padding-top: $button-round-padding-top !default; + +/// @prop - Padding end of the round button +$button-wp-round-padding-end: $button-round-padding-end !default; + +/// @prop - Padding bottom of the round button +$button-wp-round-padding-bottom: $button-round-padding-bottom !default; + +/// @prop - Padding start of the round button +$button-wp-round-padding-start: $button-round-padding-start !default; /// @prop - Border radius of the round button $button-wp-round-border-radius: $button-round-border-radius !default; @@ -128,18 +188,24 @@ $button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .button-wp { - margin: $button-wp-margin; - padding: $button-wp-padding; + @include border-radius($button-wp-border-radius); height: $button-wp-height; border: $button-wp-border-width $button-wp-border-style $button-wp-border-color; - border-radius: $button-wp-border-radius; font-size: $button-wp-font-size; color: $button-wp-text-color; background-color: $button-wp-background-color; + + @include deprecated-variable(margin, $button-wp-margin) { + @include margin($button-wp-margin-top, $button-wp-margin-end, $button-wp-margin-bottom, $button-wp-margin-start); + } + + @include deprecated-variable(padding, $button-wp-padding) { + @include padding($button-wp-padding-top, $button-wp-padding-end, $button-wp-padding-bottom, $button-wp-padding-start); + } } .button-wp:hover:not(.disable-hover) { @@ -180,19 +246,23 @@ $button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .button-large-wp { - padding: $button-wp-large-padding; - height: $button-wp-large-height; font-size: $button-wp-large-font-size; + + @include deprecated-variable(padding, $button-wp-large-padding) { + @include padding($button-wp-large-padding-top, $button-wp-large-padding-end, $button-wp-large-padding-bottom, $button-wp-large-padding-start); + } } .button-small-wp { - padding: $button-wp-small-padding; - height: $button-wp-small-height; font-size: $button-wp-small-font-size; + + @include deprecated-variable(padding, $button-wp-small-padding) { + @include padding($button-wp-small-padding-top, $button-wp-small-padding-end, $button-wp-small-padding-bottom, $button-wp-small-padding-start); + } } .button-small-wp[icon-only] ion-icon { @@ -203,20 +273,18 @@ $button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .button-block-wp { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); } // Windows Full Button // -------------------------------------------------- .button-full-wp { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); + @include border-radius(0); border-right-width: 0; border-left-width: 0; - border-radius: 0; } // Windows Outline Button @@ -304,13 +372,15 @@ $button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .button-round-wp { - padding: $button-wp-round-padding; + @include border-radius($button-wp-round-border-radius); - border-radius: $button-wp-round-border-radius; + @include deprecated-variable(padding, $button-wp-round-padding) { + @include padding($button-wp-round-padding-top, $button-wp-round-padding-end, $button-wp-round-padding-bottom, $button-wp-round-padding-start); + } } .button-wp [icon-only] { - padding: 0; + @include padding(0); } diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss index 25378efd4b..3202a17f73 100644 --- a/src/components/card/card.ios.scss +++ b/src/components/card/card.ios.scss @@ -6,26 +6,34 @@ /// @prop - Margin top of the card $card-ios-margin-top: 12px !default; -/// @prop - Margin right of the card +// deprecated $card-ios-margin-right: 12px !default; +/// @prop - Margin end of the card +$card-ios-margin-end: $card-ios-margin-right !default; /// @prop - Margin bottom of the card $card-ios-margin-bottom: 12px !default; -/// @prop - Margin left of the card +// deprecated $card-ios-margin-left: 12px !default; +/// @prop - Margin start of the card +$card-ios-margin-start: $card-ios-margin-left; /// @prop - Padding top of the card $card-ios-padding-top: 13px !default; -/// @prop - Padding right of the card +// deprecated $card-ios-padding-right: 16px !default; +/// @prop - Padding end of the card +$card-ios-padding-end: $card-ios-padding-right; /// @prop - Padding bottom of the card $card-ios-padding-bottom: 14px !default; -/// @prop - Padding left of the card +// deprecated $card-ios-padding-left: 16px !default; +/// @prop - Padding start of the card +$card-ios-padding-start: $card-ios-padding-left; /// @prop - Padding top of the media on the card $card-ios-padding-media-top: 10px !default; @@ -54,11 +62,35 @@ $card-ios-text-color: #666 !default; /// @prop - Font size of the card title $card-ios-title-font-size: 1.8rem !default; -/// @prop - Padding of the card title -$card-ios-title-padding: 8px 0 8px 0 !default; +// deprecated +$card-ios-title-padding: null !default; -/// @prop - Margin of the card title -$card-ios-title-margin: 2px 0 2px !default; +/// @prop - Padding top of the card title +$card-ios-title-padding-top: 8px !default; + +/// @prop - Padding end of the card title +$card-ios-title-padding-end: 0 !default; + +/// @prop - Padding bottom of the card title +$card-ios-title-padding-bottom: 8px !default; + +/// @prop - Padding start of the card title +$card-ios-title-padding-start: 0 !default; + +// deprecated +$card-ios-title-margin: null !default; + +/// @prop - Margin top of the card title +$card-ios-title-margin-top: 2px !default; + +/// @prop - Margin end of the card title +$card-ios-title-margin-end: 0 !default; + +/// @prop - Margin bottom of the card title +$card-ios-title-margin-bottom: 2px !default; + +/// @prop - Margin start of the card title +$card-ios-title-margin-start: 0 !default; /// @prop - Color of the card title $card-ios-title-text-color: #222 !default; @@ -69,19 +101,31 @@ $card-ios-header-font-size: 1.6rem !default; /// @prop - Font weight of the card header $card-ios-header-font-weight: 500 !default; -/// @prop - Padding of the card header -$card-ios-header-padding: 16px !default; +// deprecated +$card-ios-header-padding: null !default; + +/// @prop - Padding top of the card header +$card-ios-header-padding-top: 16px !default; + +/// @prop - Padding end of the card header +$card-ios-header-padding-end: $card-ios-header-padding-top !default; + +/// @prop - Padding bottom of the card header +$card-ios-header-padding-bottom: $card-ios-header-padding-top !default; + +/// @prop - Padding start of the card header +$card-ios-header-padding-start: $card-ios-header-padding-end !default; /// @prop - Color of the card header $card-ios-header-color: #333 !default; .card-ios { - margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left; + @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start); + @include border-radius($card-ios-border-radius); - width: calc(100% - #{($card-ios-margin-right + $card-ios-margin-left)}); + width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)}); - border-radius: $card-ios-border-radius; font-size: $card-ios-font-size; background: $card-ios-background-color; @@ -103,18 +147,20 @@ $card-ios-header-color: #333 !default; } .card-content-ios { - padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left; + @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start); font-size: $card-ios-font-size; line-height: 1.4; } .card-header-ios { - padding: $card-ios-header-padding; - font-size: $card-ios-header-font-size; font-weight: $card-ios-header-font-weight; color: $card-ios-header-color; + + @include deprecated-variable(padding, $card-ios-header-padding) { + @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start); + } } .card-header-ios + .card-content-ios, @@ -129,23 +175,28 @@ $card-ios-header-color: #333 !default; .card-title-ios { display: block; - margin: $card-ios-title-margin; - padding: $card-ios-title-padding; - font-size: $card-ios-title-font-size; line-height: 1.2; color: $card-ios-title-text-color; + + @include deprecated-variable(margin, $card-ios-title-margin) { + @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start); + } + + @include deprecated-variable(padding, $card-ios-title-padding) { + @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start); + } } .card-ios h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; } .card-ios h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -155,14 +206,14 @@ $card-ios-header-color: #333 !default; .card-ios h4, .card-ios h5, .card-ios h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; } .card-ios p { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; color: $card-ios-text-color; diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss index 4875196481..ae439b80b1 100644 --- a/src/components/card/card.md.scss +++ b/src/components/card/card.md.scss @@ -6,27 +6,35 @@ /// @prop - Margin top of the card $card-md-margin-top: 10px !default; -/// @prop - Margin right of the card +// deprecated $card-md-margin-right: 10px !default; +/// @prop - Margin end of the card +$card-md-margin-end: $card-md-margin-right !default; /// @prop - Margin bottom of the card $card-md-margin-bottom: 10px !default; -/// @prop - Margin left of the card +// deprecated $card-md-margin-left: 10px !default; +/// @prop - Margin start of the card +$card-md-margin-start: $card-md-margin-left; /// @prop - Padding top of the card $card-md-padding-top: 13px !default; -/// @prop - Padding right of the card +// deprecated $card-md-padding-right: 16px !default; +/// @prop - Padding right of the card +$card-md-padding-end: $card-md-padding-right; /// @prop - Padding bottom of the card $card-md-padding-bottom: 13px !default; -/// @prop - Padding left of the card +// deprecated $card-md-padding-left: 16px !default; +/// @prop - Padding start of the card +$card-md-padding-start: $card-md-padding-left; /// @prop - Padding top of the media on the card $card-md-padding-media-top: 10px !default; @@ -62,11 +70,35 @@ $card-md-text-color: #222 !default; /// @prop - Font size of the card title $card-md-title-font-size: 2.4rem !default; -/// @prop - Padding of the card title -$card-md-title-padding: 8px 0 8px 0 !default; +// deprecated +$card-md-title-padding: null !default; -/// @prop - Margin of the card title -$card-md-title-margin: 2px 0 2px !default; +/// @prop - Padding top of the card title +$card-md-title-padding-top: 8px !default; + +/// @prop - Padding end of the card title +$card-md-title-padding-end: 0 !default; + +/// @prop - Padding bottom of the card title +$card-md-title-padding-bottom: 8px !default; + +/// @prop - Padding start of the card title +$card-md-title-padding-start: 0 !default; + +// deprecated +$card-md-title-margin: null !default; + +/// @prop - Margin top of the card title +$card-md-title-margin-top: 2px !default; + +/// @prop - Margin end of the card title +$card-md-title-margin-end: 0 !default; + +/// @prop - Margin bottom of the card title +$card-md-title-margin-bottom: 2px !default; + +/// @prop - Margin start of the card title +$card-md-title-margin-start: $card-md-title-margin-end !default; /// @prop - Color of the card title $card-md-title-text-color: #222 !default; @@ -74,19 +106,31 @@ $card-md-title-text-color: #222 !default; /// @prop - Font size of the card header $card-md-header-font-size: 1.6rem !default; -/// @prop - Padding of the card header -$card-md-header-padding: 16px !default; +// deprecated +$card-md-header-padding: null !default; + +/// @prop - Padding top of the card header +$card-md-header-padding-top: 16px !default; + +/// @prop - Padding end of the card header +$card-md-header-padding-end: $card-md-header-padding-top !default; + +/// @prop - Padding bottom of the card header +$card-md-header-padding-bottom: $card-md-header-padding-top !default; + +/// @prop - Padding start of the card header +$card-md-header-padding-start: $card-md-header-padding-end !default; /// @prop - Color of the card header $card-md-header-color: #222 !default; .card-md { - margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left; + @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start); + @include border-radius($card-md-border-radius); - width: calc(100% - #{($card-md-margin-right + $card-md-margin-left)}); + width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)}); - border-radius: $card-md-border-radius; font-size: $card-md-font-size; background: $card-md-background-color; @@ -108,17 +152,19 @@ $card-md-header-color: #222 !default; } .card-content-md { - padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left; + @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start); font-size: $card-md-font-size; line-height: $card-md-line-height; } .card-header-md { - padding: $card-md-header-padding; - font-size: $card-md-header-font-size; color: $card-md-header-color; + + @include deprecated-variable(padding, $card-md-header-padding) { + @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start); + } } .card-header-md + .card-content-md, @@ -133,16 +179,21 @@ $card-md-header-color: #222 !default; .card-title-md { display: block; - margin: $card-md-title-margin; - padding: $card-md-title-padding; - font-size: $card-md-title-font-size; line-height: 1.2; color: $card-md-title-text-color; + + @include deprecated-variable(margin, $card-md-title-margin) { + @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start); + } + + @include deprecated-variable(padding, $card-md-title-padding) { + @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start); + } } .card-md h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; @@ -150,7 +201,7 @@ $card-md-header-color: #222 !default; } .card-md h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -161,7 +212,7 @@ $card-md-header-color: #222 !default; .card-md h4, .card-md h5, .card-md h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -169,7 +220,7 @@ $card-md-header-color: #222 !default; } .card-md p { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; font-weight: normal; diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss index f24f49ec89..120423d4a9 100644 --- a/src/components/card/card.wp.scss +++ b/src/components/card/card.wp.scss @@ -6,26 +6,34 @@ /// @prop - Margin top of the card $card-wp-margin-top: 8px !default; -/// @prop - Margin right of the card +// deprecated $card-wp-margin-right: 8px !default; +/// @prop - Margin end of the card +$card-wp-margin-end: $card-wp-margin-right !default; /// @prop - Margin bottom of the card $card-wp-margin-bottom: 8px !default; -/// @prop - Margin left of the card +// deprecated $card-wp-margin-left: 8px !default; +/// @prop - Margin start of the card +$card-wp-margin-start: $card-wp-margin-left; /// @prop - Padding top of the card $card-wp-padding-top: 13px !default; -/// @prop - Padding right of the card +// deprecated $card-wp-padding-right: 16px !default; +/// @prop - Padding end of the card +$card-wp-padding-end: $card-wp-padding-right; /// @prop - Padding bottom of the card $card-wp-padding-bottom: 13px !default; -/// @prop - Padding left of the card +// deprecated $card-wp-padding-left: 16px !default; +/// @prop - Padding start of the card +$card-wp-padding-start: $card-wp-padding-left; /// @prop - Padding top of the media on the card $card-wp-padding-media-top: 10px !default; @@ -63,11 +71,35 @@ $card-wp-text-color: #222 !default; /// @prop - Font size of card title $card-wp-title-font-size: 2.4rem !default; -/// @prop - Padding of the card title -$card-wp-title-padding: 8px 0 8px 0 !default; +// deprecated +$card-wp-title-padding: null !default; -/// @prop - Margin of the card title -$card-wp-title-margin: 2px 0 !default; +/// @prop - Padding top of the card title +$card-wp-title-padding-top: 8px !default; + +/// @prop - Padding end of the card title +$card-wp-title-padding-end: 0 !default; + +/// @prop - Padding bottom of the card title +$card-wp-title-padding-bottom: 8px !default; + +/// @prop - Padding start of the card title +$card-wp-title-padding-start: 0 !default; + +// deprecated +$card-wp-title-margin: null !default; + +/// @prop - Margin top of the card title +$card-wp-title-margin-top: 2px !default; + +/// @prop - Margin end of the card title +$card-wp-title-margin-end: 0 !default; + +/// @prop - Margin bottom of the card title +$card-wp-title-margin-bottom: $card-wp-title-margin-top !default; + +/// @prop - Margin start of the card title +$card-wp-title-margin-start: $card-wp-title-margin-end !default; /// @prop - Color of the card title $card-wp-title-text-color: #222 !default; @@ -75,19 +107,31 @@ $card-wp-title-text-color: #222 !default; /// @prop - Font size of the card header $card-wp-header-font-size: 1.6rem !default; -/// @prop - Padding of the card header -$card-wp-header-padding: 16px !default; +// deprecated +$card-wp-header-padding: null !default; + +/// @prop - Padding top of the card header +$card-wp-header-padding-top: 16px !default; + +/// @prop - Padding end of the card header +$card-wp-header-padding-end: $card-wp-header-padding-top !default; + +/// @prop - Padding bottom of the card header +$card-wp-header-padding-bottom: $card-wp-header-padding-top !default; + +/// @prop - Padding start of the card header +$card-wp-header-padding-start: $card-wp-header-padding-end !default; /// @prop - Color of the card header $card-wp-header-color: #222 !default; .card-wp { - margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left; + @include margin($card-wp-margin-top, $card-wp-margin-end, $card-wp-margin-bottom, $card-wp-margin-start); + @include border-radius($card-wp-border-radius); - width: calc(100% - #{($card-wp-margin-right + $card-wp-margin-left)}); + width: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)}); - border-radius: $card-wp-border-radius; font-size: $card-wp-font-size; background: $card-wp-background-color; @@ -109,18 +153,20 @@ $card-wp-header-color: #222 !default; } .card-content-wp { - padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left; + @include padding($card-wp-padding-top, $card-wp-padding-end, $card-wp-padding-bottom, $card-wp-padding-start); font-size: $card-wp-font-size; line-height: $card-wp-line-height; } .card-header-wp { - padding: $card-wp-header-padding; - font-size: $card-wp-header-font-size; color: $card-wp-header-color; + + @include deprecated-variable(padding, $card-wp-header-padding) { + @include padding($card-wp-header-padding-top, $card-wp-header-padding-end, $card-wp-header-padding-bottom, $card-wp-header-padding-start); + } } .card-header-wp + .card-content-wp, @@ -135,16 +181,21 @@ $card-wp-header-color: #222 !default; .card-title-wp { display: block; - margin: $card-wp-title-margin; - padding: $card-wp-title-padding; - font-size: $card-wp-title-font-size; line-height: 1.2; color: $card-wp-title-text-color; + + @include deprecated-variable(margin, $card-wp-title-margin) { + @include margin($card-wp-title-margin-top, $card-wp-title-margin-end, $card-wp-title-margin-bottom, $card-wp-title-margin-start); + } + + @include deprecated-variable(padding, $card-wp-title-padding) { + @include padding($card-wp-title-padding-top, $card-wp-title-padding-end, $card-wp-title-padding-bottom, $card-wp-title-padding-start); + } } .card-wp h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; @@ -152,7 +203,7 @@ $card-wp-header-color: #222 !default; } .card-wp h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -163,7 +214,7 @@ $card-wp-header-color: #222 !default; .card-wp h4, .card-wp h5, .card-wp h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -171,7 +222,7 @@ $card-wp-header-color: #222 !default; } .card-wp p { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; font-weight: normal; diff --git a/src/components/checkbox/checkbox.ios.scss b/src/components/checkbox/checkbox.ios.scss index 9f48578339..7116598c75 100644 --- a/src/components/checkbox/checkbox.ios.scss +++ b/src/components/checkbox/checkbox.ios.scss @@ -40,14 +40,34 @@ $checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox- $checkbox-ios-disabled-opacity: .3 !default; // deprecated -$checkbox-ios-item-left-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default; -/// @prop - Margin of the start checkbox item -$checkbox-ios-item-start-margin: $checkbox-ios-item-left-margin; +$checkbox-ios-item-left-margin: null !default; + +/// @prop - Margin top of the left checkbox item +$checkbox-ios-item-start-margin-top: $item-ios-padding-media-top !default; + +/// @prop - Margin end of the left checkbox item +$checkbox-ios-item-start-margin-end: $item-ios-padding-end !default; + +/// @prop - Margin bottom of the left checkbox item +$checkbox-ios-item-start-margin-bottom: $item-ios-padding-media-bottom !default; + +/// @prop - Margin start of the left checkbox item +$checkbox-ios-item-start-margin-start: 2px !default; // deprecated -$checkbox-ios-item-right-margin: 10px 8px 9px 0 !default; -/// @prop - Margin of the end checkbox item -$checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; +$checkbox-ios-item-right-margin: null !default; + +/// @prop - Margin top of the right checkbox item +$checkbox-ios-item-end-margin-top: 10px !default; + +/// @prop - Margin end of the right checkbox item +$checkbox-ios-item-end-margin-end: 8px !default; + +/// @prop - Margin bottom of the right checkbox item +$checkbox-ios-item-end-margin-bottom: 9px !default; + +/// @prop - Margin start of the right checkbox item +$checkbox-ios-item-end-margin-start: 0 !default; .checkbox-ios { @@ -60,6 +80,8 @@ $checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; // ----------------------------------------- .checkbox-ios .checkbox-icon { + @include border-radius($checkbox-ios-icon-border-radius); + position: relative; width: $checkbox-ios-icon-size; @@ -67,7 +89,6 @@ $checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; border-width: $checkbox-ios-icon-border-width; border-style: $checkbox-ios-icon-border-style; - border-radius: $checkbox-ios-icon-border-radius; border-color: $checkbox-ios-icon-border-color-off; background-color: $checkbox-ios-background-color-off; } @@ -86,9 +107,9 @@ $checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; // ----------------------------------------- .checkbox-ios .checkbox-checked .checkbox-inner { + @include position(4px, null, null, 7px); + position: absolute; - top: 4px; - left: 7px; width: 4px; height: 9px; @@ -120,12 +141,16 @@ $checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; position: static; display: block; - margin: $checkbox-ios-item-start-margin; + @include deprecated-variable(margin, $checkbox-ios-item-left-margin) { + @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start); + } } .item.item-ios .checkbox-ios[item-right], // deprecated .item.item-ios .checkbox-ios[item-end] { - margin: $checkbox-ios-item-end-margin; + @include deprecated-variable(margin, $checkbox-ios-item-right-margin) { + @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start); + } } diff --git a/src/components/checkbox/checkbox.md.scss b/src/components/checkbox/checkbox.md.scss index ec953315d1..ad76e0c5ce 100644 --- a/src/components/checkbox/checkbox.md.scss +++ b/src/components/checkbox/checkbox.md.scss @@ -12,12 +12,6 @@ $checkbox-md-border-bottom-style: solid !default; /// @prop - Border bottom color of the checkbox $checkbox-md-border-bottom-color: $list-md-border-color !default; -/// @prop - Padding of the checkbox -$checkbox-md-padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default; - -/// @prop - Margin of the checkbox -$checkbox-md-margin: 0 !default; - /// @prop - Opacity of the disabled checkbox $checkbox-md-disabled-opacity: .3 !default; @@ -61,14 +55,34 @@ $checkbox-md-transition-duration: 280ms !default; $checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; // deprecated -$checkbox-md-item-left-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default; -/// @prop - Margin of the start checkbox item -$checkbox-md-item-start-margin: $checkbox-md-item-left-margin; +$checkbox-md-item-left-margin: null !default; + +/// @prop - Margin top of the start checkbox item +$checkbox-md-item-start-margin-top: $item-md-padding-media-top !default; + +/// @prop - Margin end of the start checkbox item +$checkbox-md-item-start-margin-end: 36px !default; + +/// @prop - Margin bottom of the start checkbox item +$checkbox-md-item-start-margin-bottom: $item-md-padding-media-bottom !default; + +/// @prop - Margin start of the start checkbox item +$checkbox-md-item-start-margin-start: 4px !default; // deprecated -$checkbox-md-item-right-margin: 11px 10px 10px 0 !default; -/// @prop - Margin of the end checkbox item -$checkbox-md-item-end-margin: $checkbox-md-item-right-margin; +$checkbox-md-item-right-margin: null !default; + +/// @prop - Margin top of the end checkbox item +$checkbox-md-item-end-margin-top: 11px !default; + +/// @prop - Margin end of the end checkbox item +$checkbox-md-item-end-margin-end: 10px !default; + +/// @prop - Margin bottom of the end checkbox item +$checkbox-md-item-end-margin-bottom: 10px !default; + +/// @prop - Margin start of the end checkbox item +$checkbox-md-item-end-margin-start: 0 !default; .checkbox-md { @@ -81,6 +95,8 @@ $checkbox-md-item-end-margin: $checkbox-md-item-right-margin; // ----------------------------------------- .checkbox-md .checkbox-icon { + @include border-radius($checkbox-md-icon-border-radius); + position: relative; width: $checkbox-md-icon-size; @@ -88,7 +104,6 @@ $checkbox-md-item-end-margin: $checkbox-md-item-right-margin; border-width: $checkbox-md-icon-border-width; border-style: $checkbox-md-icon-border-style; - border-radius: $checkbox-md-icon-border-radius; border-color: $checkbox-md-icon-border-color-off; background-color: $checkbox-md-icon-background-color-off; @@ -111,9 +126,9 @@ $checkbox-md-item-end-margin: $checkbox-md-item-right-margin; // ----------------------------------------- .checkbox-md .checkbox-checked .checkbox-inner { + @include position(0, null, null, 4px); + position: absolute; - top: 0; - left: 4px; width: 5px; height: 10px; @@ -145,16 +160,20 @@ $checkbox-md-item-end-margin: $checkbox-md-item-right-margin; position: static; display: block; - margin: $checkbox-md-item-start-margin; + @include deprecated-variable(margin, $checkbox-md-item-left-margin) { + @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start); + } } .item.item-md .checkbox-md[item-right], // deprecated .item.item-md .checkbox-md[item-end] { - margin: $checkbox-md-item-end-margin; + @include deprecated-variable(margin, $checkbox-md-item-right-margin) { + @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start); + } } .checkbox-md + .item-inner ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/checkbox/checkbox.wp.scss b/src/components/checkbox/checkbox.wp.scss index 1f000f1c71..517e82871c 100644 --- a/src/components/checkbox/checkbox.wp.scss +++ b/src/components/checkbox/checkbox.wp.scss @@ -12,12 +12,6 @@ $checkbox-wp-border-bottom-style: solid !default; /// @prop - Border bottom color of the checkbox $checkbox-wp-border-bottom-color: $list-wp-border-color !default; -/// @prop - Padding of the checkbox -$checkbox-wp-padding: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0 !default; - -/// @prop - Margin of the checkbox -$checkbox-wp-margin: 0 !default; - /// @prop - Opacity of the disabled checkbox $checkbox-wp-disabled-opacity: .3 !default; @@ -55,15 +49,34 @@ $checkbox-wp-icon-border-color-off: #333 !default; $checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default; // deprecated -$checkbox-wp-item-left-margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default; -/// @prop - Margin of the start checkbox item -$checkbox-wp-item-start-margin: $checkbox-wp-item-left-margin; +$checkbox-wp-item-left-margin: null !default; + +/// @prop - Margin top of the start checkbox item +$checkbox-wp-item-start-margin-top: $item-wp-padding-media-top !default; + +/// @prop - Margin end of the start checkbox item +$checkbox-wp-item-start-margin-end: $item-wp-padding-end !default; + +/// @prop - Margin bottom of the start checkbox item +$checkbox-wp-item-start-margin-bottom: $item-wp-padding-media-bottom !default; + +/// @prop - Margin start of the start checkbox item +$checkbox-wp-item-start-margin-start: 4px !default; // deprecated -$checkbox-wp-item-right-margin: 11px 10px 10px 0 !default; -/// @prop - Margin of the end checkbox item -$checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; +$checkbox-wp-item-right-margin: null !default; +/// @prop - Margin top of the end checkbox item +$checkbox-wp-item-end-margin-top: 11px !default; + +/// @prop - Margin end of the end checkbox item +$checkbox-wp-item-end-margin-end: 10px !default; + +/// @prop - Margin bottom of the end checkbox item +$checkbox-wp-item-end-margin-bottom: 10px !default; + +/// @prop - Margin start of the end checkbox item +$checkbox-wp-item-end-margin-start: 0 !default; .checkbox-wp { position: relative; @@ -75,6 +88,8 @@ $checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; // ----------------------------------------- .checkbox-wp .checkbox-icon { + @include border-radius($checkbox-wp-icon-border-radius); + position: relative; width: $checkbox-wp-icon-size; @@ -82,7 +97,6 @@ $checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; border-width: $checkbox-wp-icon-border-width; border-style: $checkbox-wp-icon-border-style; - border-radius: $checkbox-wp-icon-border-radius; border-color: $checkbox-wp-icon-border-color-off; background-color: $checkbox-wp-icon-background-color-off; } @@ -101,9 +115,9 @@ $checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; // ----------------------------------------- .checkbox-wp .checkbox-checked .checkbox-inner { + @include position(-2px, null, null, 3px); + position: absolute; - top: -2px; - left: 3px; width: 6px; height: 12px; @@ -135,16 +149,20 @@ $checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; position: static; display: block; - margin: $checkbox-wp-item-start-margin; + @include deprecated-variable(margin, $checkbox-wp-item-left-margin) { + @include margin($checkbox-wp-item-start-margin-top, $checkbox-wp-item-start-margin-end, $checkbox-wp-item-start-margin-bottom, $checkbox-wp-item-start-margin-start); + } } .item.item-wp .checkbox-wp[item-right], // deprecated .item.item-wp .checkbox-wp[item-end] { - margin: $checkbox-wp-item-end-margin; + @include deprecated-variable(margin, $checkbox-wp-item-right-margin) { + @include margin($checkbox-wp-item-end-margin-top, $checkbox-wp-item-end-margin-end, $checkbox-wp-item-end-margin-bottom, $checkbox-wp-item-end-margin-start); + } } .checkbox-wp + .item-inner ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/chip/chip.ios.scss b/src/components/chip/chip.ios.scss index 40f81caa0f..f5ad7f57d3 100644 --- a/src/components/chip/chip.ios.scss +++ b/src/components/chip/chip.ios.scss @@ -2,8 +2,20 @@ // iOS Chip // -------------------------------------------------- -/// @prop - Margin of the chip -$chip-ios-margin: 2px 0 !default; +// deprecated +$chip-ios-margin: null !default; + +/// @prop - Margin top of the chip +$chip-ios-margin-top: 2px !default; + +/// @prop - Margin end of the chip +$chip-ios-margin-end: 0 !default; + +/// @prop - Margin bottom of the chip +$chip-ios-margin-bottom: $chip-ios-margin-top !default; + +/// @prop - Margin start of the chip +$chip-ios-margin-start: $chip-ios-margin-end !default; /// @prop - Height of the chip $chip-ios-height: 32px !default; @@ -20,8 +32,20 @@ $chip-ios-text-color: rgba(0, 0, 0, .87) !default; /// @prop - Background color of the chip $chip-ios-background-color: rgba(0, 0, 0, .12) !default; -/// @prop - Margin of the label in the chip -$chip-ios-label-margin: 0 10px !default; +// deprecated +$chip-ios-label-margin: null !default; + +/// @prop - Margin top of the label in the chip +$chip-ios-label-margin-top: 0 !default; + +/// @prop - Margin end of the label in the chip +$chip-ios-label-margin-end: 10px !default; + +/// @prop - Margin bottom of the label in the chip +$chip-ios-label-margin-bottom: $chip-ios-label-margin-top !default; + +/// @prop - Margin start of the label in the chip +$chip-ios-label-margin-start: $chip-ios-label-margin-end !default; /// @prop - Background color of the icon in the chip $chip-ios-icon-background-color: color($colors-ios, primary) !default; @@ -31,19 +55,24 @@ $chip-ios-icon-text-color: color-contrast($colors-ios, $chip-ios-icon .chip-ios { - margin: $chip-ios-margin; + @include border-radius($chip-ios-border-radius); height: $chip-ios-height; - border-radius: $chip-ios-border-radius; font-size: $chip-ios-font-size; line-height: $chip-ios-height; color: $chip-ios-text-color; background: $chip-ios-background-color; + + @include deprecated-variable(margin, $chip-ios-margin) { + @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start); + } } .chip-ios > ion-label { - margin: $chip-ios-label-margin; + @include deprecated-variable(margin, $chip-ios-label-margin) { + @include margin($chip-ios-label-margin-top, $chip-ios-label-margin-end, $chip-ios-label-margin-bottom, $chip-ios-label-margin-start); + } } .chip-ios > ion-icon { diff --git a/src/components/chip/chip.md.scss b/src/components/chip/chip.md.scss index 566d23d39c..3bc7a4e6ad 100644 --- a/src/components/chip/chip.md.scss +++ b/src/components/chip/chip.md.scss @@ -2,8 +2,20 @@ // Material Design Chip // -------------------------------------------------- -/// @prop - Margin of the chip -$chip-md-margin: 2px 0 !default; +// deprecated +$chip-md-margin: null !default; + +/// @prop - Margin top of the chip +$chip-md-margin-top: 2px !default; + +/// @prop - Margin end of the chip +$chip-md-margin-end: 0 !default; + +/// @prop - Margin bottom of the chip +$chip-md-margin-bottom: $chip-md-margin-top !default; + +/// @prop - Margin start of the chip +$chip-md-margin-start: $chip-md-margin-end !default; /// @prop - Height of the chip $chip-md-height: 32px !default; @@ -20,8 +32,20 @@ $chip-md-text-color: rgba(0, 0, 0, .87) !default; /// @prop - Background color of the chip $chip-md-background-color: rgba(0, 0, 0, .12) !default; -/// @prop - Margin of the label in the chip -$chip-md-label-margin: 0 10px !default; +// deprecated +$chip-md-label-margin: null !default; + +/// @prop - Margin top of the label in the chip +$chip-md-label-margin-top: 0 !default; + +/// @prop - Margin end of the label in the chip +$chip-md-label-margin-end: 10px !default; + +/// @prop - Margin bottom of the label in the chip +$chip-md-label-margin-bottom: $chip-md-label-margin-top !default; + +/// @prop - Margin start of the label in the chip +$chip-md-label-margin-start: $chip-md-label-margin-end !default; /// @prop - Background color of the icon in the chip $chip-md-icon-background-color: color($colors-md, primary) !default; @@ -31,19 +55,24 @@ $chip-md-icon-text-color: color-contrast($colors-md, $chip-md-icon-ba .chip-md { - margin: $chip-md-margin; + @include border-radius($chip-md-border-radius); height: $chip-md-height; - border-radius: $chip-md-border-radius; font-size: $chip-md-font-size; line-height: $chip-md-height; color: $chip-md-text-color; background: $chip-md-background-color; + + @include deprecated-variable(margin, $chip-md-margin) { + @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start); + } } .chip-md > ion-label { - margin: $chip-md-label-margin; + @include deprecated-variable(margin, $chip-md-label-margin) { + @include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start); + } } .chip-md > ion-icon { diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss index ee434909d4..eef06462c9 100644 --- a/src/components/chip/chip.scss +++ b/src/components/chip/chip.scss @@ -6,8 +6,20 @@ /// @prop - Border radius of the button in the chip $chip-button-border-radius: 50% !default; -/// @prop - Margin of the button in the chip -$chip-button-margin: 0 !default; +// deprecated +$chip-button-margin: null !default; + +/// @prop - Margin top of the button in the chip +$chip-button-margin-top: 0 !default; + +/// @prop - Margin end of the button in the chip +$chip-button-margin-end: $chip-button-margin-top !default; + +/// @prop - Margin bottom of the button in the chip +$chip-button-margin-bottom: $chip-button-margin-top !default; + +/// @prop - Margin start of the button in the chip +$chip-button-margin-start: $chip-button-margin-end !default; /// @prop - Width and height of the button in the chip $chip-button-size: 32px !default; @@ -43,42 +55,43 @@ ion-chip { } ion-chip .button { - margin: $chip-button-margin; + @include border-radius($chip-button-border-radius); width: $chip-button-size; height: $chip-button-size; - border-radius: $chip-button-border-radius; + @include deprecated-variable(margin, $chip-button-margin) { + @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start); + } } ion-chip ion-icon { @include text-align($chip-icon-text-align); + @include border-radius($chip-icon-border-radius); width: $chip-icon-size; height: $chip-icon-size; - border-radius: $chip-icon-border-radius; - font-size: $chip-icon-font-size; line-height: $chip-icon-size; } ion-chip ion-avatar { + @include border-radius($chip-avatar-border-radius); + width: $chip-avatar-size; min-width: $chip-avatar-size; height: $chip-avatar-size; min-height: $chip-avatar-size; - - border-radius: $chip-avatar-border-radius; } ion-chip ion-avatar img { + @include border-radius($chip-avatar-border-radius); + display: block; width: 100%; max-width: 100%; height: 100%; max-height: 100%; - - border-radius: $chip-avatar-border-radius; } diff --git a/src/components/chip/chip.wp.scss b/src/components/chip/chip.wp.scss index 412195325f..5898696093 100644 --- a/src/components/chip/chip.wp.scss +++ b/src/components/chip/chip.wp.scss @@ -2,8 +2,20 @@ // Windows Chip // -------------------------------------------------- -/// @prop - Margin of the chip -$chip-wp-margin: 2px 0 !default; +// deprecated +$chip-wp-margin: null !default; + +/// @prop - Margin top of the chip +$chip-wp-margin-top: 2px !default; + +/// @prop - Margin end of the chip +$chip-wp-margin-end: 0 !default; + +/// @prop - Margin bottom of the chip +$chip-wp-margin-bottom: $chip-wp-margin-top !default; + +/// @prop - Margin start of the chip +$chip-wp-margin-start: $chip-wp-margin-end !default; /// @prop - Height of the chip $chip-wp-height: 32px !default; @@ -20,8 +32,20 @@ $chip-wp-text-color: rgba(0, 0, 0, .87) !default; /// @prop - Background color of the chip $chip-wp-background-color: rgba(0, 0, 0, .12) !default; -/// @prop - Margin of the label in the chip -$chip-wp-label-margin: 0 10px !default; +// deprecated +$chip-wp-label-margin: null !default; + +/// @prop - Margin top of the label in the chip +$chip-wp-label-margin-top: 0 !default; + +/// @prop - Margin end of the label in the chip +$chip-wp-label-margin-end: 10px !default; + +/// @prop - Margin bottom of the label in the chip +$chip-wp-label-margin-bottom: $chip-wp-label-margin-top !default; + +/// @prop - Margin start of the label in the chip +$chip-wp-label-margin-start: $chip-wp-label-margin-end !default; /// @prop - Background color of the icon in the chip $chip-wp-icon-background-color: color($colors-wp, primary) !default; @@ -31,19 +55,24 @@ $chip-wp-icon-text-color: color-contrast($colors-wp, $chip-wp-icon-ba .chip-wp { - margin: $chip-wp-margin; + @include border-radius($chip-wp-border-radius); height: $chip-wp-height; - border-radius: $chip-wp-border-radius; font-size: $chip-wp-font-size; line-height: $chip-wp-height; color: $chip-wp-text-color; background: $chip-wp-background-color; + + @include deprecated-variable(margin, $chip-wp-margin) { + @include margin($chip-wp-margin-top, $chip-wp-margin-end, $chip-wp-margin-bottom, $chip-wp-margin-start); + } } .chip-wp > ion-label { - margin: $chip-wp-label-margin; + @include deprecated-variable(margin, $chip-wp-label-margin) { + @include margin($chip-wp-label-margin-top, $chip-wp-label-margin-end, $chip-wp-label-margin-bottom, $chip-wp-label-margin-start); + } } .chip-wp > ion-icon { diff --git a/src/components/content/content.ios.scss b/src/components/content/content.ios.scss index 5daee495b9..81f1b774b1 100644 --- a/src/components/content/content.ios.scss +++ b/src/components/content/content.ios.scss @@ -26,11 +26,11 @@ $content-ios-transition-background: #000 !default; } .ios .ion-page.show-page ~ .nav-decor { + @include position(0, null, null, 0); + // when ios pages transition, the leaving page grays out // this is the black square behind all pages so they gray out position: absolute; - top: 0; - left: 0; z-index: 0; display: block; diff --git a/src/components/content/content.scss b/src/components/content/content.scss index 3f584a6aae..cef3f332f4 100644 --- a/src/components/content/content.scss +++ b/src/components/content/content.scss @@ -4,9 +4,9 @@ // -------------------------------------------------- ion-content { + @include position(0, null, null, 0); + position: relative; - top: 0; - left: 0; display: block; width: 100%; @@ -28,11 +28,9 @@ a { // -------------------------------------------------- .scroll-content { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; z-index: $z-index-scroll-content; display: block; @@ -65,11 +63,9 @@ ion-content.js-scroll > .scroll-content { // -------------------------------------------------- .fixed-content { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; display: block; } @@ -87,13 +83,13 @@ ion-content.js-scroll > .scroll-content { ion-app [no-padding], ion-app [no-padding] .scroll-content { - padding: 0; + @include padding(0); } @mixin content-padding($mode, $content-padding) { ion-app.#{$mode} [padding], ion-app.#{$mode} [padding] .scroll-content { - padding: $content-padding; + @include padding($content-padding); } ion-app.#{$mode} [padding-top], @@ -103,12 +99,12 @@ ion-app [no-padding] .scroll-content { ion-app.#{$mode} [padding-left], ion-app.#{$mode} [padding-left] .scroll-content { - padding-left: $content-padding; + @include padding-horizontal($content-padding, null); } ion-app.#{$mode} [padding-right], ion-app.#{$mode} [padding-right] .scroll-content { - padding-right: $content-padding; + @include padding-horizontal(null, $content-padding); } ion-app.#{$mode} [padding-bottom], @@ -124,8 +120,7 @@ ion-app [no-padding] .scroll-content { ion-app.#{$mode} [padding-horizontal], ion-app.#{$mode} [padding-horizontal] .scroll-content { - padding-right: $content-padding; - padding-left: $content-padding; + @include padding-horizontal($content-padding); } } @@ -135,13 +130,13 @@ ion-app [no-padding] .scroll-content { ion-app [no-margin], ion-app [no-margin] .scroll-content { - margin: 0; + @include margin(0); } @mixin content-margin($mode, $content-margin) { ion-app.#{$mode} [margin], ion-app.#{$mode} [margin] .scroll-content { - margin: $content-margin; + @include margin($content-margin); } ion-app.#{$mode} [margin-top], @@ -151,14 +146,26 @@ ion-app [no-margin] .scroll-content { ion-app.#{$mode} [margin-left], ion-app.#{$mode} [margin-left] .scroll-content { + // scss-lint:disable PropertySpelling margin-left: $content-margin; } + ion-app.#{$mode} [margin-start], + ion-app.#{$mode} [margin-start] .scroll-content { + @include margin-horizontal($content-margin, null); + } + ion-app.#{$mode} [margin-right], ion-app.#{$mode} [margin-right] .scroll-content { + // scss-lint:disable PropertySpelling margin-right: $content-margin; } + ion-app.#{$mode} [margin-end], + ion-app.#{$mode} [margin-end] .scroll-content { + @include margin-horizontal(null, $content-margin); + } + ion-app.#{$mode} [margin-bottom], ion-app.#{$mode} [margin-bottom] .scroll-content { margin-bottom: $content-margin; @@ -172,7 +179,6 @@ ion-app [no-margin] .scroll-content { ion-app.#{$mode} [margin-horizontal], ion-app.#{$mode} [margin-horizontal] .scroll-content { - margin-right: $content-margin; - margin-left: $content-margin; + @include margin-horizontal($content-margin); } } diff --git a/src/components/datetime/datetime.ios.scss b/src/components/datetime/datetime.ios.scss index d103ec6c5b..726e711f01 100644 --- a/src/components/datetime/datetime.ios.scss +++ b/src/components/datetime/datetime.ios.scss @@ -6,21 +6,25 @@ /// @prop - Padding top of the DateTime component $datetime-ios-padding-top: $item-ios-padding-top !default; -/// @prop - Padding right of the DateTime component -$datetime-ios-padding-right: ($item-ios-padding-right / 2) !default; +// deprecated +$datetime-ios-padding-right: ($item-ios-padding-end / 2) !default; +/// @prop - Padding end of the DateTime component +$datetime-ios-padding-end: $datetime-ios-padding-right; /// @prop - Padding bottom of the DateTime component $datetime-ios-padding-bottom: $item-ios-padding-bottom !default; -/// @prop - Padding left of the DateTime component -$datetime-ios-padding-left: $item-ios-padding-left !default; +// deprecated +$datetime-ios-padding-left: $item-ios-padding-start !default; +/// @prop - Padding start of the DateTime component +$datetime-ios-padding-start: $datetime-ios-padding-left; /// @prop - Color of the DateTime placeholder $datetime-ios-placeholder-color: #999 !default; .datetime-ios { - padding: $datetime-ios-padding-top $datetime-ios-padding-right $datetime-ios-padding-bottom $datetime-ios-padding-left; + @include padding($datetime-ios-padding-top, $datetime-ios-padding-end, $datetime-ios-padding-bottom, $datetime-ios-padding-start); } .datetime-ios .datetime-placeholder { diff --git a/src/components/datetime/datetime.md.scss b/src/components/datetime/datetime.md.scss index a2bb9913c0..9f2162ee3e 100644 --- a/src/components/datetime/datetime.md.scss +++ b/src/components/datetime/datetime.md.scss @@ -6,21 +6,25 @@ /// @prop - Padding top of the DateTime component $datetime-md-padding-top: $item-md-padding-top !default; -/// @prop - Padding right of the DateTime component -$datetime-md-padding-right: ($item-md-padding-right / 2) !default; +// deprecated +$datetime-md-padding-right: ($item-md-padding-end / 2) !default; +/// @prop - Padding end of the DateTime component +$datetime-md-padding-end: $datetime-md-padding-right; /// @prop - Padding bottom of the DateTime component $datetime-md-padding-bottom: $item-md-padding-bottom !default; -/// @prop - Padding left of the DateTime component -$datetime-md-padding-left: $item-md-padding-left !default; +// deprecated +$datetime-md-padding-left: $item-md-padding-start !default; +/// @prop - Padding start of the DateTime component +$datetime-md-padding-start: $datetime-md-padding-left; /// @prop - Color of the DateTime placeholder $datetime-md-placeholder-color: #999 !default; .datetime-md { - padding: $datetime-md-padding-top $datetime-md-padding-right $datetime-md-padding-bottom $datetime-md-padding-left; + @include padding($datetime-md-padding-top, $datetime-md-padding-end, $datetime-md-padding-bottom, $datetime-md-padding-start); } .datetime-md .datetime-placeholder { diff --git a/src/components/datetime/datetime.scss b/src/components/datetime/datetime.scss index f1a3a58b14..bd3dd010dc 100644 --- a/src/components/datetime/datetime.scss +++ b/src/components/datetime/datetime.scss @@ -31,7 +31,7 @@ ion-datetime { .item-label-stacked ion-datetime, .item-label-floating ion-datetime { - padding-left: 0; + @include padding-horizontal(0, null); width: 100%; } diff --git a/src/components/datetime/datetime.wp.scss b/src/components/datetime/datetime.wp.scss index a9129a0fc8..72164592e6 100644 --- a/src/components/datetime/datetime.wp.scss +++ b/src/components/datetime/datetime.wp.scss @@ -9,14 +9,18 @@ $datetime-wp-min-width: 45% !default; /// @prop - Padding top of the DateTime component $datetime-wp-padding-top: $item-wp-padding-top !default; -/// @prop - Padding right of the DateTime component -$datetime-wp-padding-right: ($item-wp-padding-right / 2) !default; +// deprecated +$datetime-wp-padding-right: ($item-wp-padding-end / 2) !default; +/// @prop - Padding end of the DateTime component +$datetime-wp-padding-end: $datetime-wp-padding-right; /// @prop - Padding bottom of the DateTime component $datetime-wp-padding-bottom: $item-wp-padding-bottom !default; -/// @prop - Padding left of the DateTime component -$datetime-wp-padding-left: $item-wp-padding-left !default; +// deprecated +$datetime-wp-padding-left: $item-wp-padding-start !default; +/// @prop - Padding start of the DateTime component +$datetime-wp-padding-start: $datetime-wp-padding-left; /// @prop - Border width of the DateTime component $datetime-wp-border-width: 2px !default; @@ -29,13 +33,13 @@ $datetime-wp-placeholder-color: $input-wp-border-color !default; .datetime-wp { - padding: $datetime-wp-padding-top $datetime-wp-padding-right $datetime-wp-padding-bottom $datetime-wp-padding-left; + @include padding($datetime-wp-padding-top, $datetime-wp-padding-end, $datetime-wp-padding-bottom, $datetime-wp-padding-start); min-width: $datetime-wp-min-width; } .datetime-wp .datetime-text { - padding: 0 8px; + @include padding(0, 8px); min-height: 3.4rem; diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss index 66bb3ee326..97c7213ddf 100755 --- a/src/components/fab/fab.scss +++ b/src/components/fab/fab.scss @@ -22,6 +22,7 @@ $fab-list-button-background-color: #f4f4f4 !default; .fab { @include text-align(center); @include appearance(none); + @include border-radius(50%); position: relative; z-index: 0; @@ -31,7 +32,6 @@ $fab-list-button-background-color: #f4f4f4 !default; width: $fab-size; height: $fab-size; - border-radius: 50%; font-size: 14px; line-height: $fab-size; text-overflow: ellipsis; @@ -57,7 +57,7 @@ $fab-list-button-background-color: #f4f4f4 !default; // -------------------------------------------------- .fab[mini] { - margin: ($fab-size - $fab-mini-size) / 2; + @include margin(($fab-size - $fab-mini-size) / 2); width: $fab-mini-size; height: $fab-mini-size; @@ -78,9 +78,9 @@ ion-fab { z-index: $z-index-fixed-content; &[center] { - left: 50%; + @include position(null, null, null, 50%); - margin-left: -$fab-size / 2; + @include margin-horizontal(-$fab-size / 2, null); } &[middle] { @@ -94,17 +94,27 @@ ion-fab { } &[right] { + // scss-lint:disable PropertySpelling right: $fab-content-margin; } + &[end] { + @include position-horizontal(null, $fab-content-margin); + } + &[bottom] { bottom: $fab-content-margin; } &[left] { + // scss-lint:disable PropertySpelling left: $fab-content-margin; } + &[start] { + @include position-horizontal($fab-content-margin, null); + } + &[top][edge] { top: -$fab-size / 2; } @@ -119,6 +129,8 @@ ion-fab { // -------------------------------------------------- ion-fab-list { + @include margin($fab-size + $fab-list-margin, 0); + position: absolute; top: 0; display: none; @@ -126,14 +138,12 @@ ion-fab-list { flex-direction: column; align-items: center; - margin: $fab-size + $fab-list-margin 0; - min-width: $fab-size; min-height: $fab-size; } .fab-in-list { - margin: 8px 0; + @include margin(8px, 0); width: $fab-mini-size; height: $fab-mini-size; @@ -151,7 +161,7 @@ ion-fab-list { ion-fab-list[side=left] .fab-in-list, ion-fab-list[side=right] .fab-in-list { - margin: 0 8px; + @include margin(0, 8px); } ion-fab-list[side=top] { @@ -162,19 +172,17 @@ ion-fab-list[side=top] { } ion-fab-list[side=left] { - right: 0; + @include margin(0, $fab-size + $fab-list-margin); + @include position-horizontal(null, 0); flex-direction: row-reverse; - - margin: 0 $fab-size + $fab-list-margin; } ion-fab-list[side=right] { - left: 0; + @include margin(0, $fab-size + $fab-list-margin); + @include position(null, null, null, 0); flex-direction: row; - - margin: 0 $fab-size + $fab-list-margin; } @@ -186,10 +194,9 @@ ion-fab-list[side=right] { } .fab-close-icon { + @include position(0, 0, null, 0); + position: absolute; - top: 0; - right: 0; - left: 0; line-height: $fab-size; opacity: 0; diff --git a/src/components/grid/grid.mixins.scss b/src/components/grid/grid.mixins.scss index 25c2a4f6d2..ae693eb20e 100644 --- a/src/components/grid/grid.mixins.scss +++ b/src/components/grid/grid.mixins.scss @@ -8,9 +8,9 @@ // --------------------------------------------------------------------------------- @mixin make-grid($padding-width: $grid-padding-width) { - padding: $padding-width / 2; - margin-left: auto; - margin-right: auto; + @include padding($padding-width / 2); + @include margin-horizontal(auto); + width: 100%; display: flex; @@ -19,10 +19,10 @@ // Remove the padding from the grid and all immediate children columns &[no-padding] { - padding: 0; + @include padding(0); > .row > .col { - padding: 0; + @include padding(0); } } } @@ -100,12 +100,12 @@ // --------------------------------------------------------------------------------- @mixin make-column-base($padding-width: $grid-padding-width) { + @include padding($padding-width / 2); + position: relative; - padding: $padding-width / 2; - width: 100%; - margin: 0; + @include margin(0); min-height: 1px; // Prevent columns from collapsing when empty flex-basis: 0; flex-grow: 1; @@ -153,17 +153,17 @@ @each $breakpoint in map-keys($padding-widths) { @include media-breakpoint-up($breakpoint) { $padding-width: map-get($padding-widths, $breakpoint); - padding: ($padding-width / 2); + @include padding($padding-width / 2); } } } -// Offset the column using margin-left +// Offset the column using margin-start // --------------------------------------------------------------------------------- @mixin make-column-offset($size, $columns: $grid-columns) { - margin-left: percentage($size / $columns); + @include margin-horizontal(percentage($size / $columns), null); } @@ -171,7 +171,7 @@ // --------------------------------------------------------------------------------- @mixin make-column-push($size, $columns: $grid-columns) { - left: if($size > 0, percentage($size / $columns), auto); + @include position(null, null, null, if($size > 0, percentage($size / $columns), auto)); } @@ -179,7 +179,7 @@ // --------------------------------------------------------------------------------- @mixin make-column-pull($size, $columns: $grid-columns) { - right: if($size > 0, percentage($size / $columns), auto); + @include position(null, if($size > 0, percentage($size / $columns), auto), null, null); } diff --git a/src/components/grid/grid.ts b/src/components/grid/grid.ts index a771b10f38..78cb88d932 100644 --- a/src/components/grid/grid.ts +++ b/src/components/grid/grid.ts @@ -265,7 +265,7 @@ import { Directive } from '@angular/core'; * ### Offsetting columns * * Move columns to the right by adding the `offset-*` attributes. These attributes - * increase the margin left of the column by `*` columns. For example, in the following + * increase the margin start of the column by `*` columns. For example, in the following * grid the last column will be offset by 3 columns and take up 3 columns: * * ``` diff --git a/src/components/infinite-scroll/infinite-scroll.scss b/src/components/infinite-scroll/infinite-scroll.scss index dade088ae3..cf67304009 100644 --- a/src/components/infinite-scroll/infinite-scroll.scss +++ b/src/components/infinite-scroll/infinite-scroll.scss @@ -4,8 +4,20 @@ // -------------------------------------------------- -/// @prop - Margin of the infinite scroll loading icon -$infinite-scroll-loading-margin: 0 0 32px 0 !default; +// deprecated +$infinite-scroll-loading-margin: null !default; + +/// @prop - Margin top of the infinite scroll loading icon +$infinite-scroll-loading-margin-top: 0 !default; + +/// @prop - Margin end of the infinite scroll loading icon +$infinite-scroll-loading-margin-end: 0 !default; + +/// @prop - Margin bottom of the infinite scroll loading icon +$infinite-scroll-loading-margin-bottom: 32px !default; + +/// @prop - Margin start of the infinite scroll loading icon +$infinite-scroll-loading-margin-start: 0 !default; /// @prop - Color of the infinite scroll loading indicator $infinite-scroll-loading-color: #666 !default; @@ -13,9 +25,20 @@ $infinite-scroll-loading-color: #666 !default; /// @prop - Text color of the infinite scroll loading indicator $infinite-scroll-loading-text-color: $infinite-scroll-loading-color !default; -/// @prop - Margin of the infinite scroll loading text -$infinite-scroll-loading-text-margin: 4px 32px 0 32px !default; +// deprecated +$infinite-scroll-loading-text-margin: null !default; +/// @prop - Margin top of the infinite scroll loading text +$infinite-scroll-loading-text-margin-top:4px !default; + +/// @prop - Margin end of the infinite scroll loading text +$infinite-scroll-loading-text-margin-end:32px !default; + +/// @prop - Margin bottom of the infinite scroll loading text +$infinite-scroll-loading-text-margin-bottom:0 !default; + +/// @prop - Margin start of the infinite scroll loading text +$infinite-scroll-loading-text-margin-start:32px !default; ion-infinite-scroll { display: block; @@ -42,15 +65,19 @@ ion-infinite-scroll-content { .infinite-loading { display: none; - margin: $infinite-scroll-loading-margin; - width: 100%; + + @include deprecated-variable(margin, $infinite-scroll-loading-margin) { + @include margin($infinite-scroll-loading-margin-top, $infinite-scroll-loading-margin-end, $infinite-scroll-loading-margin-bottom, $infinite-scroll-loading-margin-start); + } } .infinite-loading-text { - margin: $infinite-scroll-loading-text-margin; - color: $infinite-scroll-loading-text-color; + + @include deprecated-variable(margin, $infinite-scroll-loading-text-margin) { + @include margin($infinite-scroll-loading-text-margin-top, $infinite-scroll-loading-text-margin-end, $infinite-scroll-loading-text-margin-bottom, $infinite-scroll-loading-text-margin-start); + } } .infinite-loading-spinner .spinner-ios line, diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss index 4b0f8be815..65a77007c7 100644 --- a/src/components/input/input.ios.scss +++ b/src/components/input/input.ios.scss @@ -9,14 +9,18 @@ $text-input-ios-background-color: $list-ios-background-color !default; /// @prop - Margin top of the input $text-input-ios-margin-top: $item-ios-padding-top !default; -/// @prop - Margin right of the input -$text-input-ios-margin-right: ($item-ios-padding-right / 2) !default; +// deprecated +$text-input-ios-margin-right: ($item-ios-padding-end / 2) !default; +/// @prop - Margin end of the input +$text-input-ios-margin-end: $text-input-ios-margin-right !default; /// @prop - Margin bottom of the input $text-input-ios-margin-bottom: $item-ios-padding-bottom !default; -/// @prop - Margin left of the input +// deprecated $text-input-ios-margin-left: 0 !default; +/// @prop - Margin start of the input +$text-input-ios-margin-start: $text-input-ios-margin-left; /// @prop - Width of the icon used to clear the input $text-input-ios-input-clear-icon-width: 30px !default; @@ -53,10 +57,10 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! // -------------------------------------------------- .text-input-ios { - margin: $text-input-ios-margin-top $text-input-ios-margin-right $text-input-ios-margin-bottom $text-input-ios-margin-left; - padding: 0; + @include margin($text-input-ios-margin-top, $text-input-ios-margin-end, $text-input-ios-margin-bottom, $text-input-ios-margin-start); + @include padding(0); - width: calc(100% - #{($text-input-ios-margin-right + $text-input-ios-margin-left)}); + width: calc(100% - #{($text-input-ios-margin-end + $text-input-ios-margin-start)}); } @@ -64,8 +68,8 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! // -------------------------------------------------- .input-ios .inset-input { - margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0; - padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2); + @include padding(($item-ios-padding-top / 2), ($item-ios-padding-end / 2), ($item-ios-padding-bottom / 2), ($item-ios-padding-start / 2)); + @include margin(($item-ios-padding-top / 2), $item-ios-padding-end, ($item-ios-padding-bottom / 2), 0); } @@ -132,23 +136,19 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! .item-ios.item-label-stacked .text-input, .item-ios.item-label-floating .text-input { - margin-top: 8px; - margin-bottom: 8px; - margin-left: 0; + @include margin(8px, null, 8px, 0); - width: calc(100% - #{$text-input-ios-margin-right}); + width: calc(100% - #{$text-input-ios-margin-end}); } .item-ios.item-label-stacked .label-ios + .input + .cloned-input, .item-ios.item-label-floating .label-ios + .input + .cloned-input { - margin-left: 0; + @include margin-horizontal(0, null); } .item-label-stacked .select-ios, .item-label-floating .select-ios { - padding-top: 8px; - padding-bottom: 8px; - padding-left: 0; + @include padding(8px, null, 8px, 0); } @@ -160,14 +160,13 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! } .input-ios[clearInput] .text-input { - padding-right: $text-input-ios-input-clear-icon-width; + @include padding-horizontal(null, $text-input-ios-input-clear-icon-width); } .input-ios .text-input-clear-icon { + @include position-horizontal(null, ($item-ios-padding-end / 2)); @include svg-background-image($text-input-ios-input-clear-icon-svg); - right: ($item-ios-padding-right / 2); - width: $text-input-ios-input-clear-icon-width; background-size: $text-input-ios-input-clear-icon-size; diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss index 8caebfce06..96a5cce965 100644 --- a/src/components/input/input.md.scss +++ b/src/components/input/input.md.scss @@ -9,14 +9,18 @@ $text-input-md-background-color: $list-md-background-color !default; /// @prop - Margin top of the input $text-input-md-margin-top: $item-md-padding-top !default; -/// @prop - Margin right of the input -$text-input-md-margin-right: ($item-md-padding-right / 2) !default; +// deprecated +$text-input-md-margin-right: ($item-md-padding-end / 2) !default; +/// @prop - Margin end of the input +$text-input-md-margin-end: $text-input-md-margin-right !default; /// @prop - Margin bottom of the input $text-input-md-margin-bottom: $item-md-padding-bottom !default; -/// @prop - Margin left of the input -$text-input-md-margin-left: ($item-md-padding-left / 2) !default; +// deprecated +$text-input-md-margin-left: ($item-md-padding-start / 2) !default; +/// @prop - Margin start of the input +$text-input-md-margin-start: $text-input-md-margin-left !default; /// @prop - Width of the icon used to clear the input $text-input-md-input-clear-icon-width: 30px !default; @@ -53,10 +57,10 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid // -------------------------------------------------- .text-input-md { - margin: $text-input-md-margin-top $text-input-md-margin-right $text-input-md-margin-bottom $text-input-md-margin-left; - padding: 0; + @include margin($text-input-md-margin-top, $text-input-md-margin-end, $text-input-md-margin-bottom, $text-input-md-margin-start); + @include padding(0); - width: calc(100% - #{$text-input-md-margin-right} - #{$text-input-md-margin-left}); + width: calc(100% - #{$text-input-md-margin-end} - #{$text-input-md-margin-start}); } @@ -64,8 +68,8 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid // -------------------------------------------------- .input-md .inset-input { - margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left; - padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2); + @include padding(($item-md-padding-top / 2), ($item-md-padding-end / 2), ($item-md-padding-bottom / 2), ($item-md-padding-start / 2)); + @include margin(($item-md-padding-top / 2), $item-md-padding-end, ($item-md-padding-bottom / 2), $item-md-padding-start); } @@ -133,18 +137,14 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid .item-label-stacked .text-input-md, .item-label-floating .text-input-md { - margin-top: 8px; - margin-bottom: 8px; - margin-left: 0; + @include margin(8px, null, 8px, 0); - width: calc(100% - #{$text-input-md-margin-right}); + width: calc(100% - #{$text-input-md-margin-end}); } .item-label-stacked .select-md, .item-label-floating .select-md { - padding-top: 8px; - padding-bottom: 8px; - padding-left: 0; + @include padding(8px, null, 8px, 0); } @@ -156,14 +156,13 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid } .input-md[clearInput] .text-input { - padding-right: $text-input-md-input-clear-icon-width; + @include padding-horizontal(null, $text-input-md-input-clear-icon-width); } .input-md .text-input-clear-icon { + @include position-horizontal(null, ($item-md-padding-end / 2)); @include svg-background-image($text-input-md-input-clear-icon-svg); - right: ($item-md-padding-right / 2); - width: $text-input-md-input-clear-icon-width; background-size: $text-input-md-input-clear-icon-size; diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 04ad51c18d..e9220087a6 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -46,6 +46,7 @@ ion-textarea { .text-input { @include placeholder($text-input-placeholder-color); @include appearance(none); + @include border-radius(0); display: inline-block; @@ -55,7 +56,7 @@ ion-textarea { width: calc(100% - 10px); border: 0; - border-radius: 0; + background: transparent; } @@ -86,9 +87,9 @@ input.text-input:-webkit-autofill { // The input cover is not clickable when the input is disabled .input-cover { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; width: 100%; height: 100%; @@ -125,11 +126,11 @@ input.text-input:-webkit-autofill { // Next and Previous input tabbing [next-input] { + @include padding(0); + position: absolute; bottom: 20px; - padding: 0; - width: 1px; height: 1px; @@ -144,13 +145,13 @@ input.text-input:-webkit-autofill { // -------------------------------------------------- .text-input-clear-icon { + @include margin(0); + @include padding(0); + position: absolute; top: 0; display: none; - margin: 0; - padding: 0; - height: 100%; background-repeat: no-repeat; diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss index 435d05294e..ae523688a5 100644 --- a/src/components/input/input.wp.scss +++ b/src/components/input/input.wp.scss @@ -15,14 +15,18 @@ $text-input-wp-border-width: 2px !default; /// @prop - Margin top of the input $text-input-wp-margin-top: $item-wp-padding-top !default; -/// @prop - Margin right of the input -$text-input-wp-margin-right: ($item-wp-padding-right / 2) !default; +// deprecated +$text-input-wp-margin-right: ($item-wp-padding-end / 2) !default; +/// @prop - Margin end of the input +$text-input-wp-margin-end: $text-input-wp-margin-right !default; /// @prop - Margin bottom of the input $text-input-wp-margin-bottom: $item-wp-padding-bottom !default; -/// @prop - Margin left of the input -$text-input-wp-margin-left: ($item-wp-padding-left / 2) !default; +// deprecated +$text-input-wp-margin-left: ($item-wp-padding-start / 2) !default; +/// @prop - Margin start of the input +$text-input-wp-margin-start: $text-input-wp-margin-left !default; /// @prop - Vertical padding of the input $text-input-wp-padding-vertical: 0 !default; @@ -68,10 +72,10 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid // -------------------------------------------------- .text-input-wp { - margin: $text-input-wp-margin-top $text-input-wp-margin-right $text-input-wp-margin-bottom $text-input-wp-margin-left; - padding: $text-input-wp-padding-vertical $text-input-wp-padding-horizontal; + @include margin($text-input-wp-margin-top, $text-input-wp-margin-end, $text-input-wp-margin-bottom, $text-input-wp-margin-start); + @include padding($text-input-wp-padding-vertical, $text-input-wp-padding-horizontal); - width: calc(100% - #{$text-input-wp-margin-right} - #{$text-input-wp-margin-left}); + width: calc(100% - #{$text-input-wp-margin-end} - #{$text-input-wp-margin-start}); border: $text-input-wp-border-width solid $text-input-wp-border-color; line-height: $text-input-wp-line-height; @@ -82,8 +86,8 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid // -------------------------------------------------- .item-wp .inset-input { - margin: ($item-wp-padding-top / 2) $item-wp-padding-right ($item-wp-padding-bottom / 2) $item-wp-padding-left; - padding: ($item-wp-padding-top / 2) ($item-wp-padding-right / 2) ($item-wp-padding-bottom / 2) ($item-wp-padding-left / 2); + @include padding(($item-wp-padding-top / 2), ($item-wp-padding-end / 2), ($item-wp-padding-bottom / 2), ($item-wp-padding-start / 2)); + @include margin(($item-wp-padding-top / 2), $item-wp-padding-end, ($item-wp-padding-bottom / 2), $item-wp-padding-start); } @@ -119,11 +123,9 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid .item-label-floating .text-input-wp, .item-label-stacked .select-wp, .item-label-floating .select-wp { - margin-top: 8px; - margin-bottom: 8px; - margin-left: 0; + @include margin(8px, null, 8px, 0); - width: calc(100% - #{$text-input-wp-margin-right}); + width: calc(100% - #{$text-input-wp-margin-end}); } .item-wp.item-label-stacked [item-right], // deprecated @@ -141,14 +143,13 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid } .input-wp[clearInput] .text-input { - padding-right: $text-input-wp-input-clear-icon-width; + @include padding-horizontal(null, $text-input-wp-input-clear-icon-width); } .input-wp .text-input-clear-icon { + @include position-horizontal(null, ($item-wp-padding-end / 2)); @include svg-background-image($text-input-wp-input-clear-icon-svg); - right: ($item-wp-padding-right / 2); - width: $text-input-wp-input-clear-icon-width; background-size: $text-input-wp-input-clear-icon-size; diff --git a/src/components/item/item-media.scss b/src/components/item/item-media.scss index eeaf66c3c9..a4188fd2e4 100644 --- a/src/components/item/item-media.scss +++ b/src/components/item/item-media.scss @@ -51,9 +51,9 @@ ion-thumbnail img { } .item-cover { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; width: 100%; height: 100%; diff --git a/src/components/item/item-sliding.scss b/src/components/item/item-sliding.scss index bfb54bb428..10ff2695de 100644 --- a/src/components/item/item-sliding.scss +++ b/src/components/item/item-sliding.scss @@ -17,9 +17,10 @@ ion-item-sliding .item { } ion-item-options { + @include position(0, 0, null, null); + position: absolute; - top: 0; - right: 0; + z-index: $z-index-item-options; display: none; @@ -33,19 +34,18 @@ ion-item-options { } ion-item-options[side=left] { - right: auto; - left: 0; + @include position-horizontal(0, auto); justify-content: flex-start; } ion-item-options .button { - margin: 0; - padding: 0 .7em; + @include margin(0); + @include padding(0, .7em); + @include border-radius(0); height: 100%; - border-radius: 0; box-shadow: none; box-sizing: content-box; @@ -57,9 +57,7 @@ ion-item-options:not([icon-left]) .button:not([icon-only]) { } ion-icon { - padding-right: 0; - padding-bottom: .3em; - padding-left: 0; + @include padding(null, 0, .3em, 0); } } @@ -107,18 +105,18 @@ button[expandable] { } ion-item-sliding.active-swipe-right button[expandable] { - order: 1; + @include padding-horizontal(90%, null); - padding-left: 90%; + order: 1; transition-duration: .6s; transition-property: padding-left; } ion-item-sliding.active-swipe-left button[expandable] { - order: -1; + @include padding-horizontal(null, 90%); - padding-right: 90%; + order: -1; transition-duration: .6s; transition-property: padding-right; diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss index c9f56c05f9..16ed2d8cca 100644 --- a/src/components/item/item.ios.scss +++ b/src/components/item/item.ios.scss @@ -6,8 +6,20 @@ /// @prop - Font size of the item text $item-ios-body-text-font-size: 1.7rem !default; -/// @prop - Margin of the item paragraph -$item-ios-paragraph-margin: 0 0 2px !default; +// deprecated +$item-ios-paragraph-margin: null !default; + +/// @prop - Margin top of the item paragraph +$item-ios-paragraph-margin-top: 0 !default; + +/// @prop - Margin end of the item paragraph +$item-ios-paragraph-margin-end: 0 !default; + +/// @prop - Margin bottom of the item paragraph +$item-ios-paragraph-margin-bottom: 2px !default; + +/// @prop - Margin start of the item paragraph +$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default; /// @prop - Font size of the item paragraph $item-ios-paragraph-font-size: 1.4rem !default; @@ -39,9 +51,6 @@ $item-ios-divider-background: #f7f7f7 !default; /// @prop - Color for the divider $item-ios-divider-color: #222 !default; -/// @prop - Padding for the divider -$item-ios-divider-padding: 5px 15px !default; - /// @prop - Background for the sliding content $item-ios-sliding-content-background: $list-ios-background-color !default; @@ -50,9 +59,9 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; // -------------------------------------------------- .item-ios { - position: relative; + @include padding-horizontal($item-ios-padding-start, null); - padding-left: $item-ios-padding-left; + position: relative; border-radius: 0; font-size: $item-ios-body-text-font-size; @@ -67,14 +76,14 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; } .item-ios h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; } .item-ios h2 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.7rem; font-weight: normal; @@ -84,7 +93,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-ios h4, .item-ios h5, .item-ios h6 { - margin: 0 0 3px; + @include margin(0, 0, 3px); font-size: 1.4rem; font-weight: normal; @@ -94,12 +103,14 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-ios p { overflow: inherit; - margin: $item-ios-paragraph-margin; - font-size: $item-ios-paragraph-font-size; line-height: normal; text-overflow: inherit; color: $item-ios-paragraph-text-color; + + @include deprecated-variable(margin, $item-ios-paragraph-margin) { + @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start); + } } .item-ios h2:last-child, @@ -112,7 +123,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; } .item-ios.item-block .item-inner { - padding-right: ($item-ios-padding-right / 2); + @include padding-horizontal(null, $item-ios-padding-end / 2); border-bottom: $hairlines-width solid $list-ios-border-color; } @@ -123,25 +134,23 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-ios [item-left], // deprecated .item-ios [item-start] { - margin: $item-ios-padding-media-top $item-ios-padding-left $item-ios-padding-media-bottom 0; + @include margin($item-ios-padding-media-top, $item-ios-padding-start, $item-ios-padding-media-bottom, 0); } .item-ios [item-right], // deprecated .item-ios [item-end] { - margin: $item-ios-padding-media-top ($item-ios-padding-left / 2) $item-ios-padding-media-bottom ($item-ios-padding-right / 2); + @include margin($item-ios-padding-media-top, ($item-ios-padding-start / 2), $item-ios-padding-media-bottom, ($item-ios-padding-end / 2)); } .item-ios ion-icon[item-left], // deprecated .item-ios ion-icon[item-right], // deprecated .item-ios ion-icon[item-start], .item-ios ion-icon[item-end] { - margin-top: $item-ios-padding-icon-top; - margin-bottom: $item-ios-padding-icon-bottom; - margin-left: 0; + @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0); } .item-ios .item-button { - padding: 0 .5em; + @include padding(0, .5em); height: 24px; @@ -150,21 +159,21 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-ios .item-button[icon-only] ion-icon, .item-ios .item-button[icon-only] { - padding: 0 1px; + @include padding(0, 1px); } .item-ios ion-avatar[item-left], // deprecated .item-ios ion-thumbnail[item-left], // deprecated .item-ios ion-avatar[item-start], .item-ios ion-thumbnail[item-start] { - margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0; + @include margin(($item-ios-padding-end / 2), $item-ios-padding-end, ($item-ios-padding-end / 2), 0); } .item-ios ion-avatar[item-right], // deprecated .item-ios ion-thumbnail[item-right], // deprecated .item-ios ion-avatar[item-end], .item-ios ion-thumbnail[item-end] { - margin: ($item-ios-padding-right / 2); + @include margin(($item-ios-padding-end / 2)); } @@ -212,10 +221,10 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; a.item-ios:not([detail-none]) .item-inner { @include svg-background-image($item-ios-detail-push-svg); - padding-right: 32px; + @include padding-horizontal(null, 32px); background-repeat: no-repeat; - background-position: right ($item-ios-padding-right - 2) center; + background-position: right ($item-ios-padding-end - 2) center; background-size: 14px 14px; } } @@ -238,7 +247,7 @@ ion-item-group .item-wrapper:last-child .item-ios .item-inner { // -------------------------------------------------- .item-divider-ios { - padding-left: $item-ios-padding-left; + @include padding-horizontal($item-ios-padding-start, null); color: $item-ios-divider-color; background-color: $item-ios-divider-background; diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss index 2bad0cd583..3c8456e597 100644 --- a/src/components/item/item.md.scss +++ b/src/components/item/item.md.scss @@ -45,18 +45,14 @@ $item-md-divider-font-size: $item-md-body-text-font-size !default; /// @prop - Border bottom for the divider $item-md-divider-border-bottom: 1px solid $list-md-border-color !default; -/// @prop - Padding for the divider -$item-md-divider-padding: 5px 15px !default; - /// @prop - Background for the sliding content $item-md-sliding-content-background: $list-md-background-color !default; .item-md { - position: relative; + @include padding-horizontal($item-md-padding-start, 0); - padding-right: 0; - padding-left: ($item-md-padding-left); + position: relative; font-size: $item-md-font-size; font-weight: normal; @@ -77,14 +73,14 @@ $item-md-sliding-content-background: $list-md-background-color !default; } .item-md h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; } .item-md h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -94,7 +90,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-md h4, .item-md h5, .item-md h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -104,7 +100,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-md p { overflow: inherit; - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; line-height: normal; @@ -113,7 +109,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; } .item-md.item-block .item-inner { - padding-right: ($item-md-padding-right / 2); + @include padding-horizontal(null, ($item-md-padding-end / 2)); border-bottom: 1px solid $list-md-border-color; } @@ -129,10 +125,10 @@ $item-md-sliding-content-background: $list-md-background-color !default; a.item-md:not([detail-none]) .item-inner { @include svg-background-image($item-md-detail-push-svg); - padding-right: 32px; + @include padding-horizontal(null, 32px); background-repeat: no-repeat; - background-position: right ($item-md-padding-right - 2) center; + background-position: right ($item-md-padding-end - 2) center; background-size: 14px 14px; } } @@ -145,20 +141,18 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-md [item-right], // deprecated .item-md [item-start], .item-md [item-end] { - margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0; + @include margin($item-md-padding-media-top, ($item-md-padding-end / 2), $item-md-padding-media-bottom, 0); } .item-md ion-icon[item-left], // deprecated .item-md ion-icon[item-right], // deprecated .item-md ion-icon[item-start], .item-md ion-icon[item-end] { - margin-top: $item-md-padding-icon-top; - margin-bottom: $item-md-padding-icon-bottom; - margin-left: 0; + @include margin($item-md-padding-icon-top, null, $item-md-padding-icon-bottom, 0); } .item-md .item-button { - padding: 0 .6em; + @include padding(0, .6em); height: 25px; @@ -167,28 +161,28 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-md .item-button[icon-only] ion-icon, .item-md .item-button[icon-only] { - padding: 0 1px; + @include padding(0, 1px); } .item-md ion-icon[item-left] + .item-inner, // deprecated .item-md ion-icon[item-left] + .item-input, // deprecated .item-md ion-icon[item-start] + .item-inner, .item-md ion-icon[item-start] + .item-input { - margin-left: $item-md-padding-left + ($item-md-padding-left / 2); + @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null); } .item-md ion-avatar[item-left], // deprecated .item-md ion-thumbnail[item-left], // deprecated .item-md ion-avatar[item-start], .item-md ion-thumbnail[item-start] { - margin: ($item-md-padding-right / 2) $item-md-padding-right ($item-md-padding-right / 2) 0; + @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0); } .item-md ion-avatar[item-right], // deprecated .item-md ion-thumbnail[item-right], // deprecated .item-md ion-avatar[item-end], .item-md ion-thumbnail[item-end] { - margin: ($item-md-padding-right / 2); + @include margin(($item-md-padding-end / 2)); } @@ -243,7 +237,7 @@ ion-item-group .item-md .item-wrapper:last-child .item-inner { // -------------------------------------------------- .item-divider-md { - padding-left: $item-md-padding-left; + @include padding-horizontal($item-md-padding-start, null); color: $item-md-divider-color; background-color: $item-md-divider-background; diff --git a/src/components/item/item.scss b/src/components/item/item.scss index c8ef0360d6..940e1250ab 100644 --- a/src/components/item/item.scss +++ b/src/components/item/item.scss @@ -19,6 +19,8 @@ } .item-block { + @include margin(0); + @include padding(0); @include text-align(initial); display: flex; @@ -27,9 +29,6 @@ align-items: center; justify-content: space-between; - margin: 0; - padding: 0; - width: 100%; min-height: 4.4rem; @@ -42,6 +41,9 @@ } .item-inner { + @include margin(0); + @include padding(0); + display: flex; overflow: hidden; @@ -50,9 +52,6 @@ align-items: inherit; align-self: stretch; - margin: 0; - padding: 0; - min-height: inherit; border: 0; @@ -80,6 +79,9 @@ ion-item-group { } ion-item-divider { + @include margin(0); + @include padding(0); + z-index: $z-index-item-divider; display: flex; overflow: hidden; @@ -87,9 +89,6 @@ ion-item-divider { align-items: center; justify-content: space-between; - margin: 0; - padding: 0; - width: 100%; min-height: 30px; diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss index a63f9c5912..8ce9632be9 100644 --- a/src/components/item/item.wp.scss +++ b/src/components/item/item.wp.scss @@ -51,18 +51,14 @@ $item-wp-divider-border-bottom: 1px solid $list-wp-border-color !default; /// @prop - Font size for the divider $item-wp-divider-font-size: 2rem !default; -/// @prop - Padding for the divider -$item-wp-divider-padding: 5px 15px !default; - /// @prop - Background for the sliding content $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp { - position: relative; + @include padding-horizontal($item-wp-padding-start, 0); - padding-right: 0; - padding-left: ($item-wp-padding-left); + position: relative; font-size: $item-wp-font-size; font-weight: normal; @@ -82,14 +78,14 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; } .item-wp h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; } .item-wp h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -99,7 +95,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp h4, .item-wp h5, .item-wp h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -107,9 +103,9 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; } .item-wp p { - overflow: inherit; + @include margin(0, 0, 2px); - margin: 0 0 2px; + overflow: inherit; font-size: 1.4rem; line-height: normal; @@ -118,7 +114,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; } .item-wp.item-block .item-inner { - padding-right: ($item-wp-padding-right / 2); + @include padding-horizontal(null, ($item-wp-padding-end / 2)); border-bottom: 1px solid $list-wp-border-color; } @@ -134,10 +130,10 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; a.item-wp:not([detail-none]) .item-inner { @include svg-background-image($item-wp-detail-push-svg); - padding-right: 32px; + @include padding-horizontal(null, 32px); background-repeat: no-repeat; - background-position: right ($item-wp-padding-right - 2) center; + background-position: right ($item-wp-padding-end - 2) center; background-size: 14px 14px; } } @@ -150,20 +146,18 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp [item-right], // deprecated .item-wp [item-start], .item-wp [item-end] { - margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0; + @include margin($item-wp-padding-media-top, ($item-wp-padding-end / 2), $item-wp-padding-media-bottom, 0); } .item-wp ion-icon[item-left], // deprecated .item-wp ion-icon[item-right], // deprecated .item-wp ion-icon[item-start], .item-wp ion-icon[item-end] { - margin-top: $item-wp-padding-icon-top; - margin-bottom: $item-wp-padding-icon-bottom; - margin-left: 0; + @include margin($item-wp-padding-icon-top, null, $item-wp-padding-icon-bottom, 0); } .item-wp .item-button { - padding: 0 .6em; + @include padding(0, .6em); height: 25px; @@ -172,7 +166,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp .item-button[icon-only] ion-icon, .item-wp .item-button[icon-only] { - padding: 0 1px; + @include padding(0, 1px); } .item-wp[text-wrap] ion-label { @@ -184,21 +178,21 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp ion-icon[item-left] + .item-input, // deprecated .item-wp ion-icon[item-start] + .item-inner, .item-wp ion-icon[item-start] + .item-input { - margin-left: ($item-wp-padding-left / 2); + @include margin-horizontal(($item-wp-padding-start / 2), null); } .item-wp ion-avatar[item-left], // deprecated .item-wp ion-thumbnail[item-left], // deprecated .item-wp ion-avatar[item-start], .item-wp ion-thumbnail[item-start] { - margin: ($item-wp-padding-right / 2) $item-wp-padding-right ($item-wp-padding-right / 2) 0; + @include margin(($item-wp-padding-end / 2), $item-wp-padding-end, ($item-wp-padding-end / 2), 0); } .item-wp ion-avatar[item-right], // deprecated .item-wp ion-thumbnail[item-right], // deprecated .item-wp ion-avatar[item-end], .item-wp ion-thumbnail[item-end] { - margin: ($item-wp-padding-right / 2); + @include margin($item-wp-padding-end / 2); } @@ -212,12 +206,12 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp ion-avatar ion-img, .item-wp ion-avatar img { + @include border-radius($item-wp-avatar-border-radius); + overflow: hidden; width: $item-wp-avatar-size; height: $item-wp-avatar-size; - - border-radius: $item-wp-avatar-border-radius; } @@ -240,7 +234,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; // -------------------------------------------------- .item-divider-wp { - padding-left: $item-wp-padding-left; + @include padding-horizontal($item-wp-padding-start, null); border-bottom: $item-wp-divider-border-bottom; font-size: $item-wp-divider-font-size; diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 8c9d58fa62..55070678f9 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -9,15 +9,28 @@ $label-ios-text-color: null !default; /// @prop - Text color of the stacked/floating label when it is focused $label-ios-text-color-focused: null !default; -/// @prop - Margin of the label -$label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0 !default; +// deprecated +$label-ios-margin: null !default; +/// @prop - Margin top of the label +$label-ios-margin-top: $item-ios-padding-top !default; + +/// @prop - Margin end of the label +$label-ios-margin-end: ($item-ios-padding-end / 2) !default; + +/// @prop - Margin bottom of the label +$label-ios-margin-bottom: $item-ios-padding-bottom !default; + +/// @prop - Margin start of the label +$label-ios-margin-start: 0 !default; // iOS Default Label // -------------------------------------------------- .label-ios { - margin: $label-ios-margin; + @include deprecated-variable(margin, $label-ios-margin) { + @include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start); + } } @@ -37,9 +50,9 @@ $label-ios-margin: $item-ios-padding-top ($item-ios-padding- .label-ios + ion-input .text-input, .label-ios + ion-textarea .text-input, .label-ios + .input + .cloned-input { - margin-left: $item-ios-padding-left; + @include margin-horizontal($item-ios-padding-start, null); - width: calc(100% - (#{$item-ios-padding-right} / 2) - #{$item-ios-padding-left}); + width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start}); } diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index 81575864ef..487f9f4c64 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -9,15 +9,28 @@ $label-md-text-color: #999 !default; /// @prop - Text color of the stacked/floating label when it is focused $label-md-text-color-focused: color($colors-md, primary) !default; -/// @prop - Margin of the label -$label-md-margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default; +// deprecated +$label-md-margin: null !default; +/// @prop - Margin top of the label +$label-md-margin-top: $item-md-padding-top !default; + +/// @prop - Margin end of the label +$label-md-margin-end: ($item-md-padding-end / 2) !default; + +/// @prop - Margin bottom of the label +$label-md-margin-bottom: $item-md-padding-bottom !default; + +/// @prop - Margin start of the label +$label-md-margin-start: 0 !default; // Material Design Default Label // -------------------------------------------------- .label-md { - margin: $label-md-margin; + @include deprecated-variable(margin, $label-md-margin) { + @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start); + } } [text-wrap] .label-md { @@ -54,8 +67,7 @@ $label-md-margin: $item-md-padding-top ($item-md-padding-rig .label-md[stacked], .label-md[floating] { - margin-bottom: 0; - margin-left: 0; + @include margin(null, null, 0, 0); } .input-has-focus .label-md[stacked], diff --git a/src/components/label/label.scss b/src/components/label/label.scss index 6f3f7ebf8b..3da376a995 100644 --- a/src/components/label/label.scss +++ b/src/components/label/label.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- ion-label { + @include margin(0); + display: block; overflow: hidden; flex: 1; - margin: 0; - font-size: inherit; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index 1194ad9586..f70148b842 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -14,7 +14,7 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default; // -------------------------------------------------- .label-wp { - margin: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0; + @include margin($item-wp-padding-top, ($item-wp-padding-end / 2), $item-wp-padding-bottom, 0); } @@ -47,8 +47,7 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default; .label-wp[stacked], .label-wp[floating] { - margin-bottom: 0; - margin-left: 0; + @include margin(null, null, 0, 0); } .input-has-focus .label-wp[stacked], diff --git a/src/components/list/list.ios.scss b/src/components/list/list.ios.scss index d36c3a6341..447f818599 100644 --- a/src/components/list/list.ios.scss +++ b/src/components/list/list.ios.scss @@ -6,32 +6,42 @@ /// @prop - Margin top of the list $list-ios-margin-top: 10px !default; -/// @prop - Margin right of the list +// deprecated $list-ios-margin-right: 0 !default; +/// @prop - Margin end of the list +$list-ios-margin-end: $list-ios-margin-right !default; /// @prop - Margin bottom of the list $list-ios-margin-bottom: 32px !default; -/// @prop - Margin left of the list +// deprecated $list-ios-margin-left: 0 !default; +/// @prop - Margin start of the list +$list-ios-margin-start: $list-ios-margin-left !default; /// @prop - Margin top of the inset list $list-inset-ios-margin-top: 16px !default; -/// @prop - Margin right of the inset list +// deprecated $list-inset-ios-margin-right: 16px !default; +/// @prop - Margin end of the inset list +$list-inset-ios-margin-end: $list-inset-ios-margin-right !default; /// @prop - Margin bottom of the inset list $list-inset-ios-margin-bottom: 16px !default; -/// @prop - Margin left of the inset list +// deprecated $list-inset-ios-margin-left: 16px !default; +/// @prop - Margin start of the inset list +$list-inset-ios-margin-start: $list-inset-ios-margin-left !default; /// @prop - Border radius of the inset list $list-inset-ios-border-radius: 4px !default; -/// @prop - Padding left of the header in a list -$list-ios-header-padding-left: $item-ios-padding-left !default; +// deprecated +$list-ios-header-padding-left: $item-ios-padding-start !default; +/// @prop - Padding start of the header in a list +$list-ios-header-padding-start: $list-ios-header-padding-left; /// @prop - Border bottom of the header in a list $list-ios-header-border-bottom: $hairlines-width solid $list-ios-border-color !default; @@ -59,7 +69,7 @@ $list-ios-header-background-color: transparent !default; // -------------------------------------------------- .list-ios { - margin: -1px $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left; + @include margin(-1px, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start); } .list-ios > .item-block:first-child { @@ -84,7 +94,7 @@ $list-ios-header-background-color: transparent !default; // the item itself (for last-child items) // the item-inner class (if it is not last) .list-ios .item[no-lines], -.list-ios .item[no-lines] .item-inner, { +.list-ios .item[no-lines] .item-inner { border-width: 0; } @@ -97,7 +107,7 @@ $list-ios-header-background-color: transparent !default; align-items: center; - margin: 0; + @include margin(0); height: 100%; min-height: 100%; @@ -109,7 +119,7 @@ $list-ios-header-background-color: transparent !default; } .list-ios ion-item-options .button::before { - margin: 0 auto; + @include margin(0, auto); } .list-ios:not([inset]) + .list-ios:not([inset]) ion-list-header { @@ -122,7 +132,7 @@ $list-ios-header-background-color: transparent !default; // -------------------------------------------------- .list-ios[inset] { - margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left; + @include margin($list-inset-ios-margin-top, $list-inset-ios-margin-end, $list-inset-ios-margin-bottom, $list-inset-ios-margin-start); border-radius: $list-inset-ios-border-radius; } @@ -169,9 +179,9 @@ $list-ios-header-background-color: transparent !default; // -------------------------------------------------- .list-header-ios { - position: relative; + @include padding-horizontal($list-ios-header-padding-start, null); - padding-left: $list-ios-header-padding-left; + position: relative; border-bottom: $list-ios-header-border-bottom; font-size: $list-ios-header-font-size; @@ -182,11 +192,6 @@ $list-ios-header-background-color: transparent !default; background: $list-ios-header-background-color; } -[dir="rtl"] .list-header-ios { - padding-right: $list-ios-header-padding-left; - padding-left: 0; -} - // Generate iOS List Header Colors // -------------------------------------------------- diff --git a/src/components/list/list.md.scss b/src/components/list/list.md.scss index d4f6167ee9..5df74f11f4 100644 --- a/src/components/list/list.md.scss +++ b/src/components/list/list.md.scss @@ -6,26 +6,34 @@ /// @prop - Margin top of the list $list-md-margin-top: 16px !default; -/// @prop - Margin right of the list +// deprecated $list-md-margin-right: 0 !default; +/// @prop - Margin end of the list +$list-md-margin-end: $list-md-margin-right !default; /// @prop - Margin bottom of the list $list-md-margin-bottom: 16px !default; -/// @prop - Margin left of the list +// deprecated $list-md-margin-left: 0 !default; +/// @prop - Margin start of the list +$list-md-margin-start: $list-md-margin-left !default; /// @prop - Margin top of the inset list $list-inset-md-margin-top: 16px !default; -/// @prop - Margin right of the inset list +// deprecated $list-inset-md-margin-right: 16px !default; +/// @prop - Margin end of the inset list +$list-inset-md-margin-end: $list-inset-md-margin-right !default; /// @prop - Margin bottom of the inset list $list-inset-md-margin-bottom: 16px !default; -/// @prop - Margin left of the inset list +// deprecated $list-inset-md-margin-left: 16px !default; +/// @prop - Margin start of the inset list +$list-inset-md-margin-start: $list-inset-md-margin-left !default; /// @prop - Border radius of the inset list $list-inset-md-border-radius: 2px !default; @@ -33,8 +41,10 @@ $list-inset-md-border-radius: 2px !default; /// @prop - Margin bottom of the header in a list $list-md-header-margin-bottom: 13px !default; -/// @prop - Padding left of the header in a list -$list-md-header-padding-left: $item-md-padding-left !default; +// deprecated +$list-md-header-padding-left: $item-md-padding-start !default; +/// @prop - Padding start of the header in a list +$list-md-header-padding-start: $list-md-header-padding-left; /// @prop - Minimum height of the header in a list $list-md-header-min-height: 4.5rem !default; @@ -53,7 +63,7 @@ $list-md-header-color: #757575 !default; // -------------------------------------------------- .list-md { - margin: -1px $list-md-margin-right $list-md-margin-bottom $list-md-margin-left; + @include margin(-1px, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start); } .list-md .item-block .item-inner { @@ -69,7 +79,7 @@ $list-md-header-color: #757575 !default; } .list-md > ion-input:last-child::after { - left: 0; + @include position-horizontal(0, null); } .list-md ion-item-options { @@ -77,23 +87,24 @@ $list-md-header-color: #757575 !default; } .list-md ion-item-options .button { + @include margin(1px, 0); + @include border-radius(0); + display: inline-flex; align-items: center; - margin: 1px 0; - height: calc(100% - 2px); border: 0; - border-radius: 0; + box-shadow: none; box-sizing: border-box; } .list-md ion-item-options .button::before { - margin: 0 auto; + @include margin(0, auto); } // If the item has the no-lines attribute remove the bottom border from: @@ -113,26 +124,24 @@ $list-md-header-color: #757575 !default; // -------------------------------------------------- .list-md[inset] { - margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left; - - border-radius: $list-inset-md-border-radius; + @include margin($list-inset-md-margin-top, $list-inset-md-margin-end, $list-inset-md-margin-bottom, $list-inset-md-margin-start); + @include border-radius($list-inset-md-border-radius); } .list-md[inset] .item:first-child { + @include border-radius($list-inset-md-border-radius, $list-inset-md-border-radius, null, null); + border-top-width: 0; - border-top-left-radius: $list-inset-md-border-radius; - border-top-right-radius: $list-inset-md-border-radius; } .list-md[inset] .item:last-child { + @include border-radius(null, null, $list-inset-md-border-radius, $list-inset-md-border-radius); + border-bottom-width: 0; - border-bottom-left-radius: $list-inset-md-border-radius; - border-bottom-right-radius: $list-inset-md-border-radius; } .list-md[inset] .item-input { - padding-right: 0; - padding-left: 0; + @include padding-horizontal(0); } .list-md[inset] + ion-list[inset] { @@ -158,8 +167,9 @@ $list-md-header-color: #757575 !default; // -------------------------------------------------- .list-header-md { + @include padding-horizontal($list-md-header-padding-start, null); + margin-bottom: $list-md-header-margin-bottom; - padding-left: $list-md-header-padding-left; min-height: $list-md-header-min-height; @@ -168,12 +178,6 @@ $list-md-header-color: #757575 !default; color: $list-md-header-color; } -[dir="rtl"] .list-header-md { - padding-right: $list-md-header-padding-left; - padding-left: 0; -} - - // Generate Material Design List Header Colors // -------------------------------------------------- diff --git a/src/components/list/list.scss b/src/components/list/list.scss index 061c1177a2..b1e04f484d 100644 --- a/src/components/list/list.scss +++ b/src/components/list/list.scss @@ -4,24 +4,24 @@ // -------------------------------------------------- ion-list-header { + @include margin(0); + @include padding(0); + display: flex; overflow: hidden; align-items: center; justify-content: space-between; - margin: 0; - padding: 0; - width: 100%; min-height: 4rem; } ion-list { - display: block; + @include margin(0); + @include padding(0); - margin: 0; - padding: 0; + display: block; list-style-type: none; } diff --git a/src/components/list/list.wp.scss b/src/components/list/list.wp.scss index 84f952c33c..6214bf1d47 100644 --- a/src/components/list/list.wp.scss +++ b/src/components/list/list.wp.scss @@ -6,32 +6,42 @@ /// @prop - Margin top of the list $list-wp-margin-top: 16px !default; -/// @prop - Margin right of the list +// deprecated $list-wp-margin-right: 0 !default; +/// @prop - Margin end of the list +$list-wp-margin-end: $list-wp-margin-right !default; /// @prop - Margin bottom of the list $list-wp-margin-bottom: 16px !default; -/// @prop - Margin left of the list +// deprecated $list-wp-margin-left: 0 !default; +/// @prop - Margin start of the list +$list-wp-margin-start: $list-wp-margin-left !default; /// @prop - Margin top of the inset list $list-inset-wp-margin-top: 16px !default; -/// @prop - Margin right of the inset list +// deprecated $list-inset-wp-margin-right: 16px !default; +/// @prop - Margin end of the inset list +$list-inset-wp-margin-end: $list-inset-wp-margin-right !default; /// @prop - Margin bottom of the inset list $list-inset-wp-margin-bottom: 16px !default; -/// @prop - Margin left of the inset list +// deprecated $list-inset-wp-margin-left: 16px !default; +/// @prop - Margin start of the inset list +$list-inset-wp-margin-start: $list-inset-wp-margin-left !default; /// @prop - Border radius of the inset list $list-inset-wp-border-radius: 2px !default; -/// @prop - Padding left of the header in a list -$list-wp-header-padding-left: $item-wp-padding-left !default; +// deprecated +$list-wp-header-padding-left: $item-wp-padding-start !default; +/// @prop - Padding start of the header in a list +$list-wp-header-padding-start: $list-wp-header-padding-left; /// @prop - Border bottom of the header in a list $list-wp-header-border-bottom: 1px solid $list-wp-border-color !default; @@ -47,7 +57,7 @@ $list-wp-header-color: $list-wp-text-color !default; // -------------------------------------------------- .list-wp { - margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left; + @include margin(0, $list-wp-margin-end, $list-wp-margin-bottom, $list-wp-margin-start); } .list-wp .item-block .item-inner { @@ -73,27 +83,27 @@ $list-wp-header-color: $list-wp-text-color !default; } .list-wp > ion-input:last-child::after { - left: 0; + @include position-horizontal(0, null); } .list-wp ion-item-options .button { + @include margin(1px, 0); + @include border-radius(0); + display: inline-flex; align-items: center; - margin: 1px 0; - height: calc(100% - 2px); border: 0; - border-radius: 0; box-shadow: none; box-sizing: border-box; } .list-wp ion-item-options .button::before { - margin: 0 auto; + @include margin(0, auto); } // If the item has the no-lines attribute remove the bottom border from: @@ -114,26 +124,24 @@ $list-wp-header-color: $list-wp-text-color !default; // -------------------------------------------------- .list-wp[inset] { - margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left; - - border-radius: $list-inset-wp-border-radius; + @include margin($list-inset-wp-margin-top, $list-inset-wp-margin-end, $list-inset-wp-margin-bottom, $list-inset-wp-margin-start); + @include border-radius($list-inset-wp-border-radius); } .list-wp[inset] .item:first-child { + @include border-radius($list-inset-wp-border-radius, $list-inset-wp-border-radius, null, null); + border-top-width: 0; - border-top-left-radius: $list-inset-wp-border-radius; - border-top-right-radius: $list-inset-wp-border-radius; } .list-wp[inset] .item:last-child { + @include border-radius(null, null, $list-inset-wp-border-radius, $list-inset-wp-border-radius); + border-bottom-width: 0; - border-bottom-left-radius: $list-inset-wp-border-radius; - border-bottom-right-radius: $list-inset-wp-border-radius; } .list-wp[inset] .item-input { - padding-right: 0; - padding-left: 0; + @include padding-horizontal(0); } .list-wp[inset] + ion-list[inset] { @@ -158,18 +166,13 @@ $list-wp-header-color: $list-wp-text-color !default; // -------------------------------------------------- .list-header-wp { - padding-left: $list-wp-header-padding-left; + @include padding-horizontal($list-wp-header-padding-start, null); border-bottom: $list-wp-header-border-bottom; font-size: $list-wp-header-font-size; color: $list-wp-header-color; } -[dir="rtl"] .list-header-wp { - padding-right: $list-wp-header-padding-left; - padding-left: 0; -} - // Generate Windows List Header Colors // -------------------------------------------------- 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.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/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/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.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.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 9424be005a..a20fd09752 100644 --- a/src/components/radio/radio.ios.scss +++ b/src/components/radio/radio.ios.scss @@ -4,32 +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; // deprecated -$radio-ios-item-left-margin: 8px 21px 8px 3px !default; -/// @prop - Margin of the item-start in a radio -$radio-ios-item-start-margin: $radio-ios-item-left-margin; +$radio-ios-item-left-margin: null !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: $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default; -/// @prop - Margin of the item-end in a radio -$radio-ios-item-end-margin: $radio-ios-item-right-margin; +$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 { @@ -54,9 +74,9 @@ $radio-ios-item-end-margin: $radio-ios-item-right-margin; // ----------------------------------------- .radio-ios .radio-checked .radio-inner { + @include position(4px, null, null, 7px); + position: absolute; - top: 4px; - left: 7px; width: 5px; height: 12px; @@ -88,16 +108,20 @@ $radio-ios-item-end-margin: $radio-ios-item-right-margin; position: static; display: block; - margin: $radio-ios-item-end-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], // deprecated &[item-start] { - margin: $radio-ios-item-start-margin; + @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 ef685c211a..3c8a535168 100644 --- a/src/components/radio/radio.md.scss +++ b/src/components/radio/radio.md.scss @@ -4,44 +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; // deprecated -$radio-md-item-left-margin: 11px 36px 10px 4px !default; -/// @prop - Margin of the item-start in a radio -$radio-md-item-start-margin: $radio-md-item-left-margin; +$radio-md-item-left-margin: null !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: $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default; -/// @prop - Margin of the item-end in a radio -$radio-md-item-end-margin: $radio-md-item-right-margin; +$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 { @@ -54,19 +74,18 @@ $radio-md-item-end-margin: $radio-md-item-right-margin; // ----------------------------------------- .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; } @@ -75,14 +94,14 @@ $radio-md-item-end-margin: $radio-md-item-right-margin; // ----------------------------------------- .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; @@ -123,16 +142,20 @@ $radio-md-item-end-margin: $radio-md-item-right-margin; position: static; display: block; - margin: $radio-md-item-end-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], // deprecated &[item-start] { - margin: $radio-md-item-start-margin; + @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 9226866e9a..c08c77355a 100644 --- a/src/components/radio/radio.wp.scss +++ b/src/components/radio/radio.wp.scss @@ -4,41 +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; // deprecated -$radio-wp-item-left-margin: 9px 20px 9px 4px !default; -/// @prop - Margin of the item-start in a radio -$radio-wp-item-start-margin: $radio-wp-item-left-margin; +$radio-wp-item-left-margin: null !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: 11px 10px 10px 0 !default; -/// @prop - Margin of the item-end in a radio -$radio-wp-item-end-margin: $radio-wp-item-right-margin; +$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 { @@ -51,19 +71,19 @@ $radio-wp-item-end-margin: $radio-wp-item-right-margin; // ----------------------------------------- .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; } @@ -72,15 +92,16 @@ $radio-wp-item-end-margin: $radio-wp-item-right-margin; // ----------------------------------------- .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; } @@ -122,18 +143,22 @@ $radio-wp-item-end-margin: $radio-wp-item-right-margin; order: $radio-wp-order; - margin: $radio-wp-item-start-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], // deprecated &[item-end] { order: 0; - margin: $radio-wp-item-end-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/range/range.ios.scss b/src/components/range/range.ios.scss index 07cc074abf..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 1169050398..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 c967f9c326..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 index f68893f714..69bca6d999 100644 --- a/src/components/scroll/scroll.scss +++ b/src/components/scroll/scroll.scss @@ -21,11 +21,9 @@ ion-scroll[center] .scroll-content { } ion-scroll .scroll-content { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; overflow-y: hidden; overflow-x: hidden; 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 807a02c5fb..47a83c7c07 100644 --- a/src/components/searchbar/searchbar.ts +++ b/src/components/searchbar/searchbar.ts @@ -236,11 +236,11 @@ export class Searchbar extends BaseInput { 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; } 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/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.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.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/slides.scss b/src/components/slides/slides.scss index 0c86d1922f..825158b7ad 100644 --- a/src/components/slides/slides.scss +++ b/src/components/slides/slides.scss @@ -15,8 +15,8 @@ */ .swiper-container { - margin-left: auto; - margin-right: auto; + @include margin-horizontal(auto); + position: relative; overflow: hidden; /* Fix of Webkit flickering */ @@ -51,8 +51,9 @@ } .swiper-container-free-mode > .swiper-wrapper { + @include margin(0, auto); + transition-timing-function: ease-out; - margin: 0 auto; } .swiper-slide { @@ -75,9 +76,10 @@ /* a11y */ .swiper-container .swiper-notification { + @include position(0, null, null, 0); + position: absolute; - left: 0; - top: 0; + pointer-events: none; opacity: 0; z-index: -1000; @@ -117,9 +119,9 @@ .swiper-button-prev, .swiper-container-rtl .swiper-button-next { + @include position-horizontal(10px, auto); + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); - left: 10px; - right: auto; } .swiper-button-prev.swiper-button-black, @@ -134,9 +136,9 @@ .swiper-button-next, .swiper-container-rtl .swiper-button-prev { + @include position-horizontal(auto, 10px); + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); - right: 10px; - left: auto; } .swiper-button-next.swiper-button-black, @@ -168,8 +170,8 @@ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { - bottom: 10px; - left: 0; + @include position(null, null, 10px, 0); + width: 100%; } @@ -185,9 +187,10 @@ } button.swiper-pagination-bullet { + @include margin(0); + @include padding(0); + border: none; - margin: 0; - padding: 0; box-shadow: none; @include appearance(none); } @@ -214,18 +217,18 @@ button.swiper-pagination-bullet { } .swiper-container-vertical > .swiper-pagination-bullets { - right: 10px; - top: 50%; + @include position(50%, 10px, null, null); + transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { - margin: 5px 0; + @include margin(5px, 0); display: block; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { - margin: 0 5px; + @include margin(0, 5px); } /* Progress */ @@ -235,10 +238,11 @@ button.swiper-pagination-bullet { } .swiper-pagination-progress .swiper-pagination-progressbar { + @include position(0, null, null, 0); + background: #007aff; position: absolute; - left: 0; - top: 0; + width: 100%; height: 100%; transform: scale(0); @@ -250,17 +254,17 @@ button.swiper-pagination-bullet { } .swiper-container-horizontal > .swiper-pagination-progress { + @include position(0, null, null, 0); + width: 100%; height: 4px; - left: 0; - top: 0; } .swiper-container-vertical > .swiper-pagination-progress { + @include position(0, null, null, 0); + width: 4px; height: 100%; - left: 0; - top: 0; } .swiper-pagination-progress.swiper-pagination-white { @@ -294,9 +298,9 @@ button.swiper-pagination-bullet { .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { + @include position(0, null, null, 0); + position: absolute; - left: 0; - top: 0; width: 100%; height: 100%; pointer-events: none; @@ -384,9 +388,10 @@ button.swiper-pagination-bullet { } .swiper-container-cube .swiper-cube-shadow { + @include position(null, null, 0, 0); + position: absolute; - left: 0; - bottom: 0; + width: 100%; height: 100%; background: #000; @@ -442,8 +447,10 @@ button.swiper-pagination-bullet { } .swiper-container-horizontal > .swiper-scrollbar { + @include position(null, null, null, 1%); + position: absolute; - left: 1%; + bottom: 3px; z-index: 50; height: 5px; @@ -451,22 +458,23 @@ button.swiper-pagination-bullet { } .swiper-container-vertical > .swiper-scrollbar { + @include position(1%, 3px, null, null); + position: absolute; - right: 3px; - top: 1%; + z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { + @include position(0, null, null, 0); + height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; - left: 0; - top: 0; } .swiper-scrollbar-cursor-drag { @@ -475,13 +483,12 @@ button.swiper-pagination-bullet { /* Preloader */ .swiper-lazy-preloader { + @include position(50%, null, null, 50%); + @include margin(-21px, null, null, -21px); + width: 42px; height: 42px; position: absolute; - left: 50%; - top: 50%; - margin-left: -21px; - margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s steps(12, end) infinite; @@ -523,17 +530,19 @@ ion-slides { } .swiper-container { + @include padding(0); + width: 100%; height: 100%; - padding: 0; display: flex; overflow: hidden; } .swiper-wrapper { + @include padding(0); + width: 100%; height: 100%; - padding: 0; display: flex; } 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/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/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.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/toggle.ios.scss b/src/components/toggle/toggle.ios.scss index f613b5ca06..e798411bf7 100644 --- a/src/components/toggle/toggle.ios.scss +++ b/src/components/toggle/toggle.ios.scss @@ -49,15 +49,34 @@ $toggle-ios-transition-duration: 300ms !default; $toggle-ios-disabled-opacity: .3 !default; // deprecated -$toggle-ios-item-left-padding: 6px 16px 5px 0 !default; -/// @prop - Padding of the toggle positioned on the left in an item -$toggle-ios-item-start-padding: $toggle-ios-item-left-padding; +$toggle-ios-item-left-padding: null !default; + +/// @prop - Padding top of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-top: 6px !default; + +/// @prop - Padding end of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-end: 16px !default; + +/// @prop - Padding bottom of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-bottom: 5px !default; + +/// @prop - Padding start of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-start: 0 !default; // deprecated -$toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default; -/// @prop - Padding of the toggle positioned on the right in an item -$toggle-ios-item-end-padding: $toggle-ios-item-right-padding; +$toggle-ios-item-right-padding: null !default; +/// @prop - Padding top of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-top: 6px !default; + +/// @prop - Padding end of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-end: ($item-ios-padding-end / 2) !default; + +/// @prop - Padding bottom of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-bottom: 5px !default; + +/// @prop - Padding start of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-start: $item-ios-padding-start !default; // iOS Toggle // ----------------------------------------- @@ -78,14 +97,14 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // ----------------------------------------- .toggle-ios .toggle-icon { + @include border-radius($toggle-ios-border-radius); + position: relative; display: block; width: 100%; height: 100%; - border-radius: $toggle-ios-border-radius; - background-color: $toggle-ios-border-color-off; transition: background-color $toggle-ios-transition-duration; @@ -97,13 +116,11 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // ----------------------------------------- .toggle-ios .toggle-icon::before { - position: absolute; - top: $toggle-ios-border-width; - right: $toggle-ios-border-width; - bottom: $toggle-ios-border-width; - left: $toggle-ios-border-width; + @include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width); + @include border-radius($toggle-ios-border-radius); + + position: absolute; - border-radius: $toggle-ios-border-radius; background-color: $toggle-ios-background-color-off; content: ""; @@ -116,14 +133,14 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // ----------------------------------------- .toggle-ios .toggle-inner { + @include position($toggle-ios-border-width, null, null, $toggle-ios-border-width); + @include border-radius($toggle-ios-handle-border-radius); + position: absolute; - top: $toggle-ios-border-width; - left: $toggle-ios-border-width; width: $toggle-ios-handle-width; height: $toggle-ios-handle-height; - border-radius: $toggle-ios-handle-border-radius; background-color: $toggle-ios-handle-background-color; box-shadow: $toggle-ios-handle-box-shadow; @@ -159,6 +176,7 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; } + // iOS Toggle Background Oval: Activated and Checked // ----------------------------------------- @@ -181,7 +199,7 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; .toggle-ios.toggle-activated.toggle-checked .toggle-inner { // when pressing down on the toggle and IS checked // make the knob wider and move it left a bit - left: $toggle-ios-border-width - 6; + @include position-horizontal($toggle-ios-border-width - 6, null); } @@ -200,13 +218,18 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // ----------------------------------------- .item-ios .toggle-ios { - margin: $toggle-ios-media-margin; - padding: $toggle-ios-item-end-padding; + @include margin($toggle-ios-media-margin); + + @include deprecated-variable(padding, $toggle-ios-item-right-padding) { + @include padding($toggle-ios-item-end-padding-top, $toggle-ios-item-end-padding-end, $toggle-ios-item-end-padding-bottom, $toggle-ios-item-end-padding-start); + } } .item-ios .toggle-ios[item-left], // deprecated .item-ios .toggle-ios[item-start] { - padding: $toggle-ios-item-start-padding; + @include deprecated-variable(padding, $toggle-ios-item-left-padding) { + @include padding($toggle-ios-item-start-padding-top, $toggle-ios-item-start-padding-end, $toggle-ios-item-start-padding-bottom, $toggle-ios-item-start-padding-start); + } } diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss index 0c5a6ade95..f070514eab 100644 --- a/src/components/toggle/toggle.md.scss +++ b/src/components/toggle/toggle.md.scss @@ -36,8 +36,20 @@ $toggle-md-handle-background-color-off: $background-md-color !default; /// @prop - Background color of the checked toggle handle $toggle-md-handle-background-color-on: $toggle-md-active-color !default; -/// @prop - Margin of the toggle -$toggle-md-media-margin: 0 !default; +// deprecated +$toggle-md-media-margin: null !default; + +/// @prop - Margin top of the toggle +$toggle-md-media-margin-top: 0 !default; + +/// @prop - Margin end of the toggle +$toggle-md-media-margin-end: $toggle-md-media-margin-top !default; + +/// @prop - Margin bottom of the toggle +$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default; + +/// @prop - Margin start of the toggle +$toggle-md-media-margin-start: $toggle-md-media-margin-end !default; /// @prop - Transition duration of the toggle icon $toggle-md-transition-duration: 300ms !default; @@ -45,19 +57,50 @@ $toggle-md-transition-duration: 300ms !default; /// @prop - Opacity of the disabled toggle $toggle-md-disabled-opacity: .3 !default; -/// @prop - Padding of standalone toggle -$toggle-md-padding: 12px !default; +// deprecated +$toggle-md-padding: null !default; + +/// @prop - Padding top of standalone toggle +$toggle-md-padding-top: 12px !default; + +/// @prop - Padding end of standalone toggle +$toggle-md-padding-end: $toggle-md-padding-top !default; + +/// @prop - Padding bottom of standalone toggle +$toggle-md-padding-bottom: $toggle-md-padding-top !default; + +/// @prop - Padding start of standalone toggle +$toggle-md-padding-start: $toggle-md-padding-end !default; // deprecated -$toggle-md-item-left-padding: 12px 18px 12px 2px !default; -/// @prop - Padding of the toggle positioned on the start in an item -$toggle-md-item-start-padding: $toggle-md-item-left-padding; +$toggle-md-item-left-padding: null !default; + +/// @prop - Padding top of the toggle positioned on the start in an item +$toggle-md-item-start-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the start in an item +$toggle-md-item-start-padding-end: 18px !default; + +/// @prop - Padding bottom of the toggle positioned on the start in an item +$toggle-md-item-start-padding-bottom: 12px !default; + +/// @prop - Padding start the toggle positioned on the start in an item +$toggle-md-item-start-padding-start: 2px !default; // deprecated -$toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default; -/// @prop - Padding of the toggle positioned on the end in an item -$toggle-md-item-end-padding: $toggle-md-item-right-padding; +$toggle-md-item-right-padding: null !default; +/// @prop - Padding top of the toggle positioned on the end in an item +$toggle-md-item-end-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the end in an item +$toggle-md-item-end-padding-end: ($item-md-padding-end / 2) !default; + +/// @prop - Padding bottom of the toggle positioned on the end in an item +$toggle-md-item-end-padding-bottom: 12px !default; + +/// @prop - Padding start of the toggle positioned on the end in an item +$toggle-md-item-end-padding-start: $item-md-padding-start !default; // Material Design Toggle // ----------------------------------------- @@ -65,14 +108,16 @@ $toggle-md-item-end-padding: $toggle-md-item-right-padding; .toggle-md { position: relative; - padding: $toggle-md-padding; - width: $toggle-md-track-width; height: $toggle-md-track-height; box-sizing: content-box; contain: strict; + + @include deprecated-variable(padding, $toggle-md-padding) { + @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start); + } } @@ -80,13 +125,14 @@ $toggle-md-item-end-padding: $toggle-md-item-right-padding; // ----------------------------------------- .toggle-md .toggle-icon { + @include border-radius($toggle-md-track-height); + position: relative; display: block; width: 100%; height: 100%; - border-radius: $toggle-md-track-height; background-color: $toggle-md-track-background-color-off; transition: background-color $toggle-md-transition-duration; @@ -99,14 +145,14 @@ $toggle-md-item-end-padding: $toggle-md-item-right-padding; // ----------------------------------------- .toggle-md .toggle-inner { + @include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0); + @include border-radius($toggle-md-handle-border-radius); + position: absolute; - top: ($toggle-md-handle-height - $toggle-md-track-height) / -2; - left: 0; width: $toggle-md-handle-width; height: $toggle-md-handle-height; - border-radius: $toggle-md-handle-border-radius; background-color: $toggle-md-handle-background-color-off; box-shadow: $toggle-md-handle-box-shadow; @@ -156,19 +202,26 @@ $toggle-md-item-end-padding: $toggle-md-item-right-padding; // ----------------------------------------- .item-md .toggle-md { - margin: $toggle-md-media-margin; - padding: $toggle-md-item-end-padding; - cursor: pointer; + + @include deprecated-variable(margin, $toggle-md-media-margin) { + @include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-start); + } + + @include deprecated-variable(padding, $toggle-md-item-right-padding) { + @include padding($toggle-md-item-end-padding-top, $toggle-md-item-end-padding-end, $toggle-md-item-end-padding-bottom, $toggle-md-item-end-padding-start); + } } .item-md .toggle-md[item-left], // deprecated .item-md .toggle-md[item-start] { - padding: $toggle-md-item-start-padding; + @include deprecated-variable(padding, $toggle-md-item-left-padding) { + @include padding($toggle-md-item-start-padding-top, $toggle-md-item-start-padding-end, $toggle-md-item-start-padding-bottom, $toggle-md-item-start-padding-start); + } } .item-md.item-toggle ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss index d239f21770..155acc4a83 100644 --- a/src/components/toggle/toggle.wp.scss +++ b/src/components/toggle/toggle.wp.scss @@ -61,15 +61,34 @@ $toggle-wp-transition-duration: 300ms !default; $toggle-wp-disabled-opacity: .3 !default; // deprecated -$toggle-wp-item-left-padding: 12px 18px 12px 2px !default; -/// @prop - Padding of the toggle positioned on the start in an item -$toggle-wp-item-start-padding: $toggle-wp-item-left-padding; +$toggle-wp-item-left-padding: null !default; + +/// @prop - Padding top of the toggle positioned on the start in an item +$toggle-wp-item-start-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the start in an item +$toggle-wp-item-start-padding-end: 18px !default; + +/// @prop - Padding bottom of the toggle positioned on the start in an item +$toggle-wp-item-start-padding-bottom: 12px !default; + +/// @prop - Padding start the toggle positioned on the start in an item +$toggle-wp-item-start-padding-start: 2px !default; // deprecated -$toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default; -/// @prop - Padding of the toggle positioned on the end in an item -$toggle-wp-item-end-padding: $toggle-wp-item-right-padding; +$toggle-wp-item-right-padding: null !default; +/// @prop - Padding top of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-end: ($item-wp-padding-end / 2) !default; + +/// @prop - Padding bottom of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-bottom: 12px !default; + +/// @prop - Padding start of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-start: $item-wp-padding-start !default; // Windows Toggle // ----------------------------------------- @@ -90,6 +109,8 @@ $toggle-wp-item-end-padding: $toggle-wp-item-right-padding; // ----------------------------------------- .toggle-wp .toggle-icon { + @include border-radius($toggle-wp-track-height); + position: relative; display: block; @@ -97,7 +118,6 @@ $toggle-wp-item-end-padding: $toggle-wp-item-right-padding; height: 100%; border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off; - border-radius: $toggle-wp-track-height; background-color: $toggle-wp-track-background-color-off; pointer-events: none; @@ -110,14 +130,14 @@ $toggle-wp-item-end-padding: $toggle-wp-item-right-padding; // ----------------------------------------- .toggle-wp .toggle-inner { + @include position($toggle-wp-handle-top, null, null, $toggle-wp-handle-left); + @include border-radius($toggle-wp-handle-border-radius); + position: absolute; - top: $toggle-wp-handle-top; - left: $toggle-wp-handle-left; width: $toggle-wp-handle-width; height: $toggle-wp-handle-height; - border-radius: $toggle-wp-handle-border-radius; background-color: $toggle-wp-handle-background-color-off; transition-duration: $toggle-wp-transition-duration; @@ -164,19 +184,24 @@ $toggle-wp-item-end-padding: $toggle-wp-item-right-padding; // ----------------------------------------- .item-wp .toggle-wp { - margin: $toggle-wp-media-margin; - padding: $toggle-wp-item-end-padding; + @include margin($toggle-wp-media-margin); cursor: pointer; + + @include deprecated-variable(padding, $toggle-wp-item-right-padding) { + @include padding($toggle-wp-item-end-padding-top, $toggle-wp-item-end-padding-end, $toggle-wp-item-end-padding-bottom, $toggle-wp-item-end-padding-start); + } } .item-wp .toggle-wp[item-left], // deprecated .item-wp .toggle-wp[item-start] { - padding: $toggle-wp-item-start-padding; + @include deprecated-variable(padding, $toggle-wp-item-left-padding) { + @include padding($toggle-wp-item-start-padding-top, $toggle-wp-item-start-padding-end, $toggle-wp-item-start-padding-bottom, $toggle-wp-item-start-padding-start); + } } .item-wp.item-toggle ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } 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.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/virtual-scroll.scss b/src/components/virtual-scroll/virtual-scroll.scss index 25d0fc0e01..99d39298bd 100644 --- a/src/components/virtual-scroll/virtual-scroll.scss +++ b/src/components/virtual-scroll/virtual-scroll.scss @@ -14,10 +14,9 @@ .virtual-scroll .virtual-position, .virtual-scroll .virtual-position.item { - position: absolute; + @include position(0, null, null, 0); - top: 0; - left: 0; + position: absolute; transition-duration: 0ms; diff --git a/src/themes/ionic.functions.scss b/src/themes/ionic.functions.scss index b25acc66fd..682ea4734b 100644 --- a/src/themes/ionic.functions.scss +++ b/src/themes/ionic.functions.scss @@ -2,6 +2,41 @@ // Color Functions // -------------------------------------------------- +@function color-error($color-value, $color-name: null) { + $error-msg: " + + The value `#{$color-value}` must be a color. + If you are setting the value as a map make sure + both the base and contrast are defined as colors. + + For example: + + $colors: ( + primary: #327eff, + secondary: (base: #32db64, contrast: #000), + );"; + + // If there was a name passed it means the value doesn't exist + // so error that the value isn't defined + @if ($color-name) { + $error-msg: " + + The map color `#{$color-name}` is not defined. + Please make sure the color exists in your + `$colors` map. + + For example: + + $colors: ( + #{$color-name}: #327eff + );"; + } + + @error $error-msg; + + @return null; +} + @function color-brightness($color-value) { @if (type-of($color-value) != color) { @return color-error($color-value); @@ -76,41 +111,6 @@ @return mix($shade, $color-value, $amount); } -@function color-error($color-value, $color-name: null) { - $error-msg: " - - The value `#{$color-value}` must be a color. - If you are setting the value as a map make sure - both the base and contrast are defined as colors. - - For example: - - $colors: ( - primary: #327eff, - secondary: (base: #32db64, contrast: #000), - );"; - - // If there was a name passed it means the value doesn't exist - // so error that the value isn't defined - @if ($color-name) { - $error-msg: " - - The map color `#{$color-name}` is not defined. - Please make sure the color exists in your - `$colors` map. - - For example: - - $colors: ( - #{$color-name}: #327eff - );"; - } - - @error $error-msg; - - @return null; -} - // Copy Colors Map // -------------------------------------------------- @@ -291,19 +291,3 @@ @return $colors-list; } - -// Sets correct text align with support for old browsers -// @param {string} $direction - text direction -// @param {string} $decorator - !important -// ---------------------------------------------------------- -@mixin text-align($direction, $decorator: null) { - @if $direction == start { - text-align: left; - text-align: start $decorator; - } @else if $direction == end { - text-align: right; - text-align: end $decorator; - } @else { - text-align: $direction $decorator; - } -} diff --git a/src/themes/ionic.mixins.scss b/src/themes/ionic.mixins.scss index c3a5fc1e91..218f1ea99a 100644 --- a/src/themes/ionic.mixins.scss +++ b/src/themes/ionic.mixins.scss @@ -155,4 +155,240 @@ } @else { @content; } +} + +$include-rtl: true !default; + +@mixin rtl() { + @if $include-rtl { + $root: #{&}; + @at-root [dir="rtl"] { + #{$root} { + @content; + } + } + } +} + +// If deprecated variable exists, use it, otherwise, use alternative +// @param {string} $property - property to default +// @param {string} $variable - the deprecated variable +// ---------------------------------------------------------- +@mixin deprecated-variable($property, $variable) { + @if $variable == null { + @content; + } @else { + // TODO find variable name + @warn "you are using a deprecated variable"; + #{$property}: $variable; + } +} + +// Add padding horizontal +// @param {string} $start - amount to pad start +// @param {string} $end - amount to pad end +// ---------------------------------------------------------- +@mixin padding-horizontal($start, $end: $start) { + @if $start != null { + padding-left: $start; + } + + @if $end != null { + padding-right: $end; + } + + @if $start != $end { + @include rtl() { + @if $start != null { + padding-right: $start; + } @else if $end != null { + padding-right: initial; + } + + @if $end != null { + padding-left: $end; + } @else if $start != null { + padding-left: initial; + } + } + } +} + +// Add padding for all sides +// @param {string} $top +// @param {string} $end +// @param {string} $bottom +// @param {string} $start +// ---------------------------------------------------------- +@mixin padding($top, $end: $top, $bottom: $top, $start: $end) { + @if ($top == $end and $top == $bottom and $top == $start) { + padding: $top; + } @else { + @include padding-horizontal($start, $end); + padding-top: $top; + padding-bottom: $bottom; + } +} + +// Add margin horizontal +// @param {string} $start - amount to margin start +// @param {string} $end - amount to margin end +// ---------------------------------------------------------- +@mixin margin-horizontal($start, $end: $start) { + @if $start != null { + margin-left: $start; + } + + @if $end != null { + margin-right: $end; + } + + @if $start != $end { + @include rtl() { + @if $start != null { + margin-right: $start; + } @else if $end != null { + margin-right: initial; + } + + @if $end != null { + margin-left: $end; + } @else if $start != null { + margin-left: initial; + } + } + } +} + +// Add margin for all sides +// @param {string} $top +// @param {string} $end +// @param {string} $bottom +// @param {string} $start +// ---------------------------------------------------------- +@mixin margin($top, $end: $top, $bottom: $top, $start: $end) { + @if ($top == $end and $top == $bottom and $top == $start) { + margin: $top; + } @else { + @include margin-horizontal($start, $end); + margin-top: $top; + margin-bottom: $bottom; + } +} + +// Add position horizontal +// @param {string} $start - amount to position start +// @param {string} $end - amount to left: 0; end +// ---------------------------------------------------------- +@mixin position-horizontal($start: null, $end: null) { + @if $start != null { + left: $start; + } + + @if $end != null { + right: $end; + } + + @if $start != $end { + @include rtl() { + @if $start != null { + right: $start; + } @else if $end != null { + right: auto; + } + + @if $end != null { + left: $end; + } @else if $start != null { + left: auto; + } + } + } +} + +// Add position for all sides +// @param {string} $top +// @param {string} $end +// @param {string} $bottom +// @param {string} $start +// ---------------------------------------------------------- +@mixin position($top: null, $end: null, $bottom: null, $start: null) { + @include position-horizontal($start, $end); + @if $top != null { + top: $top; + } + @if $bottom != null { + bottom: $bottom; + } +} + +// Add correct border radius for ltr and rtl +// @param {string} $top-start +// @param {string} $top-end +// @param {string} $bottom-end +// @param {string} $bottom-start +// ---------------------------------------------------------- +@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) { + @if ($top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start) { + border-radius: $top-start; + } @else { + @if $top-start != null { + border-top-left-radius: $top-start; + } + + @if $top-end != null { + border-top-right-radius: $top-end; + } + + @if $bottom-end != null { + border-bottom-right-radius: $bottom-end; + } + + @if $bottom-start != null { + border-bottom-left-radius: $bottom-start; + } + + @include rtl() { + @if $top-start != null { + border-top-right-radius: $top-start; + } @else if $top-end != null { + border-top-right-radius: 0; + } + + @if $top-end != null { + border-top-left-radius: $top-end; + } @else if $top-start != null { + border-top-left-radius: 0; + } + + @if $bottom-end != null { + border-bottom-left-radius: $bottom-end; + } @else if $bottom-start != null { + border-bottom-left-radius: 0; + } + + @if $bottom-start != null { + border-bottom-right-radius: $bottom-start; + } @else if $bottom-end != null { + border-bottom-right-radius: 0; + } + } + } +} + + +// Sets correct text align with support for old browsers +// @param {string} $direction - text direction +// @param {string} $decorator - !important +// ---------------------------------------------------------- +@mixin text-align($direction, $decorator: null) { + @if $direction == start { + text-align: left; + text-align: start $decorator; + } @else if $direction == end { + text-align: right; + text-align: end $decorator; + } @else { + text-align: $direction $decorator; + } } \ No newline at end of file diff --git a/src/themes/ionic.theme.dark.ios.scss b/src/themes/ionic.theme.dark.ios.scss index b5d9736a01..b2eb14bbc4 100644 --- a/src/themes/ionic.theme.dark.ios.scss +++ b/src/themes/ionic.theme.dark.ios.scss @@ -69,9 +69,13 @@ $item-ios-divider-color: $text-color !default; // -------------------------------------------------- $item-ios-padding-top: 11px !default; +// deprecated $item-ios-padding-right: 16px !default; +$item-ios-padding-end: $item-ios-padding-right; $item-ios-padding-bottom: 11px !default; +// deprecated $item-ios-padding-left: 16px !default; +$item-ios-padding-start: $item-ios-padding-left; $item-ios-padding-media-top: 10px !default; $item-ios-padding-media-bottom: 10px !default; $item-ios-padding-icon-top: 9px !default; diff --git a/src/themes/ionic.theme.dark.md.scss b/src/themes/ionic.theme.dark.md.scss index baf96ed4a2..acaa2d3881 100644 --- a/src/themes/ionic.theme.dark.md.scss +++ b/src/themes/ionic.theme.dark.md.scss @@ -58,9 +58,13 @@ $list-md-activated-background-color: #d9d9d9 !default; // -------------------------------------------------- $item-md-padding-top: 13px !default; +// deprecated $item-md-padding-right: 16px !default; +$item-md-padding-end: $item-md-padding-right; $item-md-padding-bottom: 13px !default; +// deprecated $item-md-padding-left: 16px !default; +$item-md-padding-start: $item-md-padding-left; $item-md-padding-media-top: 9px !default; $item-md-padding-media-bottom: 9px !default; $item-md-padding-icon-top: 11px !default; diff --git a/src/themes/ionic.theme.dark.wp.scss b/src/themes/ionic.theme.dark.wp.scss index b24a7b51ab..9cd8876f52 100644 --- a/src/themes/ionic.theme.dark.wp.scss +++ b/src/themes/ionic.theme.dark.wp.scss @@ -59,9 +59,13 @@ $list-wp-activated-background-color: #d9d9d9 !default; // -------------------------------------------------- $item-wp-padding-top: 13px !default; +// deprecated $item-wp-padding-right: 16px !default; +$item-wp-padding-end: $item-wp-padding-right; $item-wp-padding-bottom: 13px !default; +// deprecated $item-wp-padding-left: 16px !default; +$item-wp-padding-start: $item-wp-padding-left; $item-wp-padding-media-top: 9px !default; $item-wp-padding-media-bottom: 9px !default; $item-wp-padding-icon-top: 11px !default; diff --git a/src/themes/ionic.theme.default.ios.scss b/src/themes/ionic.theme.default.ios.scss index be748e992b..af9cc1d8fa 100644 --- a/src/themes/ionic.theme.default.ios.scss +++ b/src/themes/ionic.theme.default.ios.scss @@ -51,9 +51,13 @@ $list-ios-activated-background-color: #d9d9d9 !default; // -------------------------------------------------- $item-ios-padding-top: 11px !default; +// deprecated $item-ios-padding-right: 16px !default; +$item-ios-padding-end: $item-ios-padding-right; $item-ios-padding-bottom: 11px !default; +// deprecated $item-ios-padding-left: 16px !default; +$item-ios-padding-start: $item-ios-padding-left; $item-ios-padding-media-top: 8px !default; $item-ios-padding-media-bottom: 8px !default; $item-ios-padding-icon-top: 9px !default; diff --git a/src/themes/ionic.theme.default.md.scss b/src/themes/ionic.theme.default.md.scss index f0696efc06..3a839202a7 100644 --- a/src/themes/ionic.theme.default.md.scss +++ b/src/themes/ionic.theme.default.md.scss @@ -50,9 +50,13 @@ $list-md-activated-background-color: #f1f1f1 !default; // -------------------------------------------------- $item-md-padding-top: 13px !default; +// deprecated $item-md-padding-right: 16px !default; +$item-md-padding-end: $item-md-padding-right; $item-md-padding-bottom: 13px !default; +// deprecated $item-md-padding-left: 16px !default; +$item-md-padding-start: $item-md-padding-left; $item-md-padding-media-top: 9px !default; $item-md-padding-media-bottom: 9px !default; $item-md-padding-icon-top: 11px !default; diff --git a/src/themes/ionic.theme.default.wp.scss b/src/themes/ionic.theme.default.wp.scss index fa2daefcb0..8cf8ac7254 100644 --- a/src/themes/ionic.theme.default.wp.scss +++ b/src/themes/ionic.theme.default.wp.scss @@ -51,9 +51,13 @@ $list-wp-activated-background-color: #aaa !default; // -------------------------------------------------- $item-wp-padding-top: 13px !default; +// deprecated $item-wp-padding-right: 16px !default; +$item-wp-padding-end: $item-wp-padding-right; $item-wp-padding-bottom: 13px !default; +// deprecated $item-wp-padding-left: 16px !default; +$item-wp-padding-start: $item-wp-padding-left; $item-wp-padding-media-top: 9px !default; $item-wp-padding-media-bottom: 9px !default; $item-wp-padding-icon-top: 11px !default; diff --git a/src/themes/util.scss b/src/themes/util.scss index 79ef88ed27..c0a79391d9 100755 --- a/src/themes/util.scss +++ b/src/themes/util.scss @@ -52,11 +52,10 @@ ion-input :focus { } .click-block-enabled { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + z-index: $z-index-click-block; display: block; From db94ef606fb2141fa08841d8779e342cf2c2aa50 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 12 May 2017 16:43:33 -0400 Subject: [PATCH 31/34] test(rtl): do not set dir to ltr by default, add reorder e2e --- scripts/e2e/index.html | 2 -- src/components/item/test/reorder/e2e.ts | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) create mode 100644 src/components/item/test/reorder/e2e.ts diff --git a/scripts/e2e/index.html b/scripts/e2e/index.html index 65b155dcec..9f9a0fdb78 100644 --- a/scripts/e2e/index.html +++ b/scripts/e2e/index.html @@ -22,8 +22,6 @@ if (location.href.indexOf('rtl=true') > -1) { document.dir = 'rtl'; - } else { - document.dir = 'ltr'; } window.domCount = function domCount(ele) { diff --git a/src/components/item/test/reorder/e2e.ts b/src/components/item/test/reorder/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/item/test/reorder/e2e.ts @@ -0,0 +1 @@ + From 8bc827a531ff4b9dd1276b92e0766d34b559f5ba Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 15 May 2017 11:16:53 -0400 Subject: [PATCH 32/34] docs(slides): update slides demo to use correct img path closes driftyco/ionic-site#11652 --- demos/src/slides/pages/page-one/page-one.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/src/slides/pages/page-one/page-one.html b/demos/src/slides/pages/page-one/page-one.html index 4e67e33737..57a4f7e551 100644 --- a/demos/src/slides/pages/page-one/page-one.html +++ b/demos/src/slides/pages/page-one/page-one.html @@ -1,5 +1,5 @@ - + From e0b27d4ad74f1fea45579e1ac2eb0d603aa2fd11 Mon Sep 17 00:00:00 2001 From: Daniel Sogl Date: Wed, 17 May 2017 22:23:35 +0200 Subject: [PATCH 33/34] docs(readme): update readme --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 2d8b75e70d..60b9428cf4 100644 --- a/README.md +++ b/README.md @@ -3,19 +3,19 @@ # Ionic -[Ionic](http://ionicframework.com/) is the open-source mobile app development framework that makes it easy to +[Ionic](https://ionicframework.com/) is the open-source mobile app development framework that makes it easy to build top quality native and progressive web apps with web technologies. Ionic is based on [Angular](https://angular.io/) and comes with many significant performance, usability, and feature improvements over the past versions. -See the [Building Apps with Ionic](http://adamdbradley.github.io/building-with-ionic2) slides for a quick +See the [Building Apps with Ionic](https://adamdbradley.github.io/building-with-ionic2) slides for a quick overview or watch our [Crash Course](https://youtu.be/O2WiI9QrS5s) video for a quick walkthrough on how to get started using Ionic. ### Getting Started -Start a new project by following our quick [Getting Started guide](http://ionicframework.com/getting-started/). +Start a new project by following our quick [Getting Started guide](https://ionicframework.com/getting-started/). We would love to hear from you! If you have any feedback or run into issues using our framework, please file an [issue](https://github.com/driftyco/ionic/issues/new) on this repository. @@ -31,7 +31,7 @@ label. The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic app. It is the perfect starting point for learning and building your own app. -### Ionic 1.x +### Ionic V1 -The source code for Ionic 1.x has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1). -Please open any issues and pull requests related to Ionic 1.x on that repository. +The source code for Ionic V1 has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1). +Please open any issues and pull requests related to Ionic V1 on that repository. From 257b5fcc49f4e74617bd381f9e2a5cfad1246da9 Mon Sep 17 00:00:00 2001 From: Daniel Sogl Date: Wed, 17 May 2017 22:25:08 +0200 Subject: [PATCH 34/34] docs(): update issue template --- .github/ISSUE_TEMPLATE.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 5c272d77f9..017c46458b 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -17,9 +17,9 @@ **Steps to reproduce:** **Related code:**