diff --git a/package.json b/package.json index 3435c47b14..5f49947644 100644 --- a/package.json +++ b/package.json @@ -25,17 +25,17 @@ "link": "gulp release.prepareReleasePackage && cd dist/ionic-angular && npm link" }, "dependencies": { - "@angular/common": "4.0.2", - "@angular/compiler": "4.0.2", - "@angular/compiler-cli": "4.0.2", - "@angular/core": "4.0.2", - "@angular/forms": "4.0.2", - "@angular/http": "4.0.2", - "@angular/platform-browser": "4.0.2", - "@angular/platform-browser-dynamic": "4.0.2", + "@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", "ionicons": "~3.0.0", "rxjs": "5.1.1", - "zone.js": "^0.8.5" + "zone.js": "^0.8.9" }, "devDependencies": { "@ionic/app-scripts": "nightly", diff --git a/scripts/docs/templates/api_index.template.html b/scripts/docs/templates/api_index.template.html index b07427752a..f930446583 100644 --- a/scripts/docs/templates/api_index.template.html +++ b/scripts/docs/templates/api_index.template.html @@ -11,15 +11,15 @@ header_sub_title: Extend Ionic even further with the power of AngularJS searchable: false --- -# Ionic 2 API Docs +# Ionic API Docs -Ionic 2 takes everything you know and loved about Ionic 1, and builds on top of it to provide a much more flexible framework. +Ionic takes everything you know and loved about Ionic V1, and builds on top of it to provide a much more flexible framework. In the API docs, you'll find two kinds of doc pages: Component and Service APIs. The Component APIs include classes like `Checkbox`, `Toggle` or `Item` and show you how to use them, in addition to listing their selectors, available properties and events. -The Service APIs are classes like `MenuController`, `Config` or `Platform`. These are services provided by Ionic 2 that can be injected into your classes. +The Service APIs are classes like `MenuController`, `Config` or `Platform`. These are services provided by Ionic that can be injected into your classes. diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss index 8cc0035268..13de9dfcf8 100644 --- a/src/components/action-sheet/action-sheet.ios.scss +++ b/src/components/action-sheet/action-sheet.ios.scss @@ -74,7 +74,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default; .action-sheet-ios { - text-align: $action-sheet-ios-text-align; + @include text-align($action-sheet-ios-text-align); } .action-sheet-ios .action-sheet-container { @@ -95,13 +95,14 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default; } .action-sheet-ios .action-sheet-title { + @include text-align($action-sheet-ios-text-align); + padding: $action-sheet-ios-title-padding; 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; - text-align: $action-sheet-ios-text-align; color: $action-sheet-ios-title-color; } diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss index 4988b931ed..2c85ba50b2 100644 --- a/src/components/action-sheet/action-sheet.md.scss +++ b/src/components/action-sheet/action-sheet.md.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text align of the action sheet -$action-sheet-md-text-align: left !default; +$action-sheet-md-text-align: start !default; /// @prop - Background color of the action sheet $action-sheet-md-background: #fafafa !default; @@ -61,14 +61,17 @@ $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; - text-align: $action-sheet-md-text-align; color: $action-sheet-md-title-color; } .action-sheet-md .action-sheet-button { + @include text-align($action-sheet-md-text-align); + position: relative; overflow: hidden; @@ -77,7 +80,6 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default; min-height: $action-sheet-md-button-min-height; font-size: $action-sheet-md-button-font-size; - text-align: $action-sheet-md-text-align; color: $action-sheet-md-button-text-color; background: $action-sheet-md-button-background; } @@ -87,13 +89,14 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default; } .action-sheet-md .action-sheet-icon { + @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; - text-align: $action-sheet-md-icon-text-align; vertical-align: $action-sheet-md-icon-vertical-align; } diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss index 3f44fa85d3..cc2ea65437 100644 --- a/src/components/action-sheet/action-sheet.wp.scss +++ b/src/components/action-sheet/action-sheet.wp.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text align of the action sheet -$action-sheet-wp-text-align: left !default; +$action-sheet-wp-text-align: start !default; /// @prop - Background color of the action sheet $action-sheet-wp-background: #fff !default; @@ -69,20 +69,22 @@ $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; - text-align: $action-sheet-wp-title-text-align; color: $action-sheet-wp-title-color; } .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; - text-align: $action-sheet-wp-button-text-align; color: $action-sheet-wp-button-text-color; background: $action-sheet-wp-button-background; } @@ -92,13 +94,14 @@ $action-sheet-wp-icon-margin: 0 20px 0 0 !default; } .action-sheet-wp .action-sheet-icon { + @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; - text-align: $action-sheet-wp-icon-text-align; vertical-align: $action-sheet-wp-icon-vertical-align; } diff --git a/src/components/alert/alert-controller.ts b/src/components/alert/alert-controller.ts index 2d6b197ca8..fa985a6839 100644 --- a/src/components/alert/alert-controller.ts +++ b/src/components/alert/alert-controller.ts @@ -128,15 +128,15 @@ import { Config } from '../../config/config'; * * Alert options * - * | Property | Type | Description | - * |-----------------------|-----------|---------------------------------------------------------------------------| - * | title | `string` | The title for the alert. | - * | subTitle | `string` | The subtitle for the alert. | - * | message | `string` | The message for the alert. | - * | cssClass | `string` | Additional classes for custom styles, separated by spaces. | - * | inputs | `array` | An array of inputs for the alert. See input options. | - * | buttons | `array` | An array of buttons for the alert. See buttons options. | - * | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop. | + * | Property | Type | Description | + * |-----------------------|-----------|------------------------------------------------------------------------------| + * | title | `string` | The title for the alert. | + * | subTitle | `string` | The subtitle for the alert. | + * | message | `string` | The message for the alert. | + * | cssClass | `string` | Additional classes for custom styles, separated by spaces. | + * | inputs | `array` | An array of inputs for the alert. See input options. | + * | buttons | `array` | An array of buttons for the alert. See buttons options. | + * | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop. Default true. | * * * Input options diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss index 8359a92096..e80f13861e 100644 --- a/src/components/alert/alert.ios.scss +++ b/src/components/alert/alert.ios.scss @@ -230,9 +230,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-ios .alert-head { - padding: $alert-ios-head-padding; + @include text-align($alert-ios-head-text-align); - text-align: $alert-ios-head-text-align; + padding: $alert-ios-head-padding; } .alert-ios .alert-title { @@ -253,10 +253,11 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-ios .alert-message, .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; - text-align: $alert-ios-message-text-align; color: $alert-ios-message-text-color; } diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss index 1a0eb70fb2..74fe4af07f 100644 --- a/src/components/alert/alert.md.scss +++ b/src/components/alert/alert.md.scss @@ -22,7 +22,7 @@ $alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-c $alert-md-head-padding: 24px 24px 20px 24px !default; /// @prop - Text align of the alert head -$alert-md-head-text-align: left !default; +$alert-md-head-text-align: start !default; /// @prop - Font size of the alert title $alert-md-title-font-size: 22px !default; @@ -112,7 +112,7 @@ $alert-md-button-border-radius: 2px !default; $alert-md-button-text-transform: uppercase !default; /// @prop - Text align of the alert button -$alert-md-button-text-align: right !default; +$alert-md-button-text-align: end !default; /// @prop - Border top of the alert list @@ -256,9 +256,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-md .alert-head { - padding: $alert-md-head-padding; + @include text-align($alert-md-head-text-align); - text-align: $alert-md-head-text-align; + padding: $alert-md-head-padding; } .alert-md .alert-title { @@ -474,6 +474,8 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; } .alert-md .alert-button { + @include text-align($alert-md-button-text-align); + // necessary for ripple to work properly position: relative; overflow: hidden; @@ -483,7 +485,6 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; border-radius: $alert-md-button-border-radius; font-weight: $alert-md-button-font-weight; - text-align: $alert-md-button-text-align; text-transform: $alert-md-button-text-transform; color: $alert-md-button-text-color; background-color: $alert-md-button-background-color; diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 0e52fbf5ee..df2a17b404 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -108,6 +108,7 @@ ion-alert input { } .alert-tappable { + @include text-align(start); @include appearance(none); margin: 0; @@ -117,7 +118,5 @@ ion-alert input { font-size: inherit; line-height: initial; - text-align: left; - text-align: start; background: transparent; } diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss index ef428750b5..f5a4c2b21e 100644 --- a/src/components/alert/alert.wp.scss +++ b/src/components/alert/alert.wp.scss @@ -31,7 +31,7 @@ $alert-wp-background: #e6e6e6 !default; $alert-wp-head-padding: 20px 22px 5px 22px !default; /// @prop - Text align of the alert head -$alert-wp-head-text-align: left !default; +$alert-wp-head-text-align: start !default; /// @prop - Font size of the alert title $alert-wp-title-font-size: 20px !default; @@ -256,9 +256,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-wp .alert-head { - padding: $alert-wp-head-padding; + @include text-align($alert-wp-head-text-align); - text-align: $alert-wp-head-text-align; + padding: $alert-wp-head-padding; } .alert-wp .alert-title { diff --git a/src/components/app/app.scss b/src/components/app/app.scss index 3466c29cd6..329de43362 100644 --- a/src/components/app/app.scss +++ b/src/components/app/app.scss @@ -333,33 +333,27 @@ ion-footer { // Provide `[text-{bp}]` attributes for aligning the text based // on the breakpoint [text#{$infix}-center] { - // scss-lint:disable ImportantRule - text-align: center !important; + @include text-align(center, !important); } [text#{$infix}-justify] { - // scss-lint:disable ImportantRule - text-align: justify !important; + @include text-align(justify, !important); } [text#{$infix}-start] { - // scss-lint:disable ImportantRule - text-align: start !important; + @include text-align(start, !important); } [text#{$infix}-end] { - // scss-lint:disable ImportantRule - text-align: end !important; + @include text-align(end, !important); } [text#{$infix}-left] { - // scss-lint:disable ImportantRule - text-align: left !important; + @include text-align(left, !important); } [text#{$infix}-right] { - // scss-lint:disable ImportantRule - text-align: right !important; + @include text-align(right, !important); } [text#{$infix}-nowrap] { diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss index 5503a6e397..d9f76b735e 100644 --- a/src/components/badge/badge.scss +++ b/src/components/badge/badge.scss @@ -11,8 +11,9 @@ $badge-font-size: 1.3rem !default; $badge-font-weight: bold !default; -ion-badge, -:host { +ion-badge { + @include text-align(center); + display: inline-block; visibility: inherit !important; contain: content; @@ -27,7 +28,6 @@ ion-badge, font-weight: $badge-font-weight; line-height: 1; - text-align: center; white-space: nowrap; vertical-align: baseline; } diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 1ddac2820c..cc8cf9ce0f 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -15,13 +15,13 @@ $button-round-border-radius: 64px !default; .button { + @include text-align(center); @include appearance(none); position: relative; z-index: 0; display: inline-block; - text-align: center; text-overflow: ellipsis; text-transform: none; diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss index ea5720e913..ee434909d4 100644 --- a/src/components/chip/chip.scss +++ b/src/components/chip/chip.scss @@ -52,6 +52,8 @@ ion-chip .button { } ion-chip ion-icon { + @include text-align($chip-icon-text-align); + width: $chip-icon-size; height: $chip-icon-size; @@ -59,7 +61,6 @@ ion-chip ion-icon { font-size: $chip-icon-font-size; line-height: $chip-icon-size; - text-align: $chip-icon-text-align; } ion-chip ion-avatar { diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss index d084c26568..66bb3ee326 100755 --- a/src/components/fab/fab.scss +++ b/src/components/fab/fab.scss @@ -20,6 +20,7 @@ $fab-list-button-background-color: #f4f4f4 !default; .fab { + @include text-align(center); @include appearance(none); position: relative; @@ -33,7 +34,6 @@ $fab-list-button-background-color: #f4f4f4 !default; border-radius: 50%; font-size: 14px; line-height: $fab-size; - text-align: center; text-overflow: ellipsis; text-transform: none; white-space: nowrap; diff --git a/src/components/infinite-scroll/infinite-scroll.scss b/src/components/infinite-scroll/infinite-scroll.scss index d9397ce9d8..dade088ae3 100644 --- a/src/components/infinite-scroll/infinite-scroll.scss +++ b/src/components/infinite-scroll/infinite-scroll.scss @@ -28,6 +28,8 @@ ion-infinite-scroll { // -------------------------------------------------- ion-infinite-scroll-content { + @include text-align(center); + display: flex; flex-direction: column; @@ -35,8 +37,6 @@ ion-infinite-scroll-content { height: 100%; min-height: 84px; - - text-align: center; } .infinite-loading { diff --git a/src/components/item/item-media.scss b/src/components/item/item-media.scss index 0fdacd6201..eeaf66c3c9 100644 --- a/src/components/item/item-media.scss +++ b/src/components/item/item-media.scss @@ -11,9 +11,9 @@ .item > ion-icon:first-child, .item-inner > ion-icon:first-child { - min-width: 24px; + @include text-align(center); - text-align: center; + min-width: 24px; } .item > ion-icon, diff --git a/src/components/item/item.scss b/src/components/item/item.scss index 3a006805a6..c8ef0360d6 100644 --- a/src/components/item/item.scss +++ b/src/components/item/item.scss @@ -19,6 +19,8 @@ } .item-block { + @include text-align(initial); + display: flex; overflow: hidden; @@ -35,7 +37,6 @@ font-weight: normal; line-height: normal; - text-align: initial; text-decoration: none; color: inherit; } diff --git a/src/components/picker/picker.ios.scss b/src/components/picker/picker.ios.scss index 2b78541a81..5baeb80cd3 100644 --- a/src/components/picker/picker.ios.scss +++ b/src/components/picker/picker.ios.scss @@ -69,10 +69,9 @@ $picker-button-ios-strong-font-weight: 600 !default; } .picker-ios .picker-toolbar-button { - flex: 1; + @include text-align(end); - text-align: right; - text-align: end; + flex: 1; } .picker-ios .picker-toolbar-button:last-child .picker-button { @@ -80,10 +79,9 @@ $picker-button-ios-strong-font-weight: 600 !default; } .picker-ios .picker-toolbar-cancel { - font-weight: normal; + @include text-align(start); - text-align: left; - text-align: start; + font-weight: normal; } .picker-ios .picker-button, diff --git a/src/components/picker/picker.scss b/src/components/picker/picker.scss index 9b6a3237c1..7a478a5c2c 100644 --- a/src/components/picker/picker.scss +++ b/src/components/picker/picker.scss @@ -87,6 +87,8 @@ ion-picker-cmp { } .picker-prefix { + @include text-align(end); + position: relative; flex: 2; @@ -94,12 +96,12 @@ ion-picker-cmp { min-width: 45%; max-width: 50%; - text-align: right; - text-align: end; white-space: nowrap; } .picker-suffix { + @include text-align(start); + position: relative; flex: 2; @@ -107,13 +109,13 @@ ion-picker-cmp { min-width: 45%; max-width: 50%; - text-align: left; - text-align: start; white-space: nowrap; } // contain property is supported by Chrome .picker-opt { + @include text-align(center); + position: absolute; top: 0; left: 0; @@ -122,7 +124,6 @@ ion-picker-cmp { width: 100%; - text-align: center; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/components/picker/picker.wp.scss b/src/components/picker/picker.wp.scss index 1c1fa69c52..86c8714592 100644 --- a/src/components/picker/picker.wp.scss +++ b/src/components/picker/picker.wp.scss @@ -70,17 +70,15 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul } .picker-wp .picker-toolbar-button { - flex: 1; + @include text-align(end); - text-align: right; - text-align: end; + flex: 1; } .picker-wp .picker-toolbar-cancel { - font-weight: normal; + @include text-align(start); - text-align: left; - text-align: start; + font-weight: normal; } .picker-wp .picker-button, diff --git a/src/components/popover/test/basic/pages/page-one/page-one.html b/src/components/popover/test/basic/pages/page-one/page-one.html index 13fdc338d3..ce5cfc2c92 100644 --- a/src/components/popover/test/basic/pages/page-one/page-one.html +++ b/src/components/popover/test/basic/pages/page-one/page-one.html @@ -34,10 +34,10 @@ - Present List Popover left + Present List Popover start - - Present List Popover right + + Present List Popover end diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss index 973d7cbcf2..8bd56e6e25 100644 --- a/src/components/range/range.ios.scss +++ b/src/components/range/range.ios.scss @@ -122,6 +122,8 @@ $range-ios-pin-padding: 8px !default; } .range-ios .range-knob-handle { + @include text-align(center); + position: absolute; top: ($range-ios-slider-height / 2); left: 0%; @@ -131,8 +133,6 @@ $range-ios-pin-padding: 8px !default; width: $range-ios-hit-width; height: $range-ios-hit-height; - - text-align: center; } .range-ios .range-knob { @@ -173,6 +173,8 @@ $range-ios-pin-padding: 8px !default; } .range-ios .range-pin { + @include text-align(center); + position: relative; top: -20px; display: inline-block; @@ -185,8 +187,6 @@ $range-ios-pin-padding: 8px !default; font-size: $range-ios-pin-font-size; - text-align: center; - color: $range-ios-pin-color; background: $range-ios-pin-background-color; diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss index 3a4395d829..8a1d74cad9 100644 --- a/src/components/range/range.md.scss +++ b/src/components/range/range.md.scss @@ -126,6 +126,8 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def } .range-md .range-knob-handle { + @include text-align(center); + position: absolute; top: ($range-md-slider-height / 2); left: 0%; @@ -135,8 +137,6 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def width: $range-md-hit-width; height: $range-md-hit-height; - - text-align: center; } .range-md .range-knob { @@ -186,6 +186,8 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def } .range-md .range-pin { + @include text-align(center); + position: relative; top: -20px; display: inline-block; @@ -199,8 +201,6 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def font-size: $range-md-pin-font-size; - text-align: center; - color: $range-md-pin-color; background: $range-md-pin-background-color; diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss index c5e6e3555e..0fbcd0dc2b 100644 --- a/src/components/range/range.wp.scss +++ b/src/components/range/range.wp.scss @@ -117,6 +117,8 @@ $range-wp-pin-padding: 8px !default; } .range-wp .range-knob-handle { + @include text-align(center); + position: absolute; top: ($range-wp-slider-height / 2); left: 0%; @@ -126,8 +128,6 @@ $range-wp-pin-padding: 8px !default; width: $range-wp-hit-width; height: $range-wp-hit-height; - - text-align: center; } .range-wp .range-knob { @@ -166,6 +166,8 @@ $range-wp-pin-padding: 8px !default; } .range-wp .range-pin { + @include text-align(center); + position: relative; top: -24px; display: inline-block; @@ -178,8 +180,6 @@ $range-wp-pin-padding: 8px !default; font-size: $range-wp-pin-font-size; - text-align: center; - color: $range-wp-pin-color; background: $range-wp-pin-background-color; diff --git a/src/components/refresher/refresher.scss b/src/components/refresher/refresher.scss index 94b8260f89..f727f414f0 100644 --- a/src/components/refresher/refresher.scss +++ b/src/components/refresher/refresher.scss @@ -69,8 +69,9 @@ ion-refresher-content { .refresher-pulling-icon, .refresher-refreshing-icon { + @include text-align(center); + font-size: $refresher-icon-font-size; - text-align: center; color: $refresher-icon-color; transform-origin: center; transition: 200ms; @@ -78,8 +79,9 @@ ion-refresher-content { .refresher-pulling-text, .refresher-refreshing-text { + @include text-align(center); + font-size: $refresher-text-font-size; - text-align: center; color: $refresher-text-color; } diff --git a/src/components/segment/segment.scss b/src/components/segment/segment.scss index 2655ebdbc2..67b6e69e5a 100644 --- a/src/components/segment/segment.scss +++ b/src/components/segment/segment.scss @@ -15,6 +15,8 @@ ion-segment { } .segment-button { + @include text-align(center); + position: relative; display: block; overflow: hidden; @@ -22,7 +24,6 @@ ion-segment { margin-right: 0; margin-left: 0; - text-align: center; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; diff --git a/src/components/slides/slides.scss b/src/components/slides/slides.scss index 9d601307be..a69bac378d 100644 --- a/src/components/slides/slides.scss +++ b/src/components/slides/slides.scss @@ -158,8 +158,9 @@ ion-slides { /* Pagination Styles */ .swiper-pagination { + @include text-align(center); + position: absolute; - text-align: center; transition: 300ms; transform: translate3d(0, 0, 0); z-index: 10; @@ -423,12 +424,13 @@ button.swiper-pagination-bullet { } .swiper-zoom-container { + @include text-align(center); + width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; - text-align: center; } .swiper-zoom-container > img, @@ -514,6 +516,20 @@ button.swiper-pagination-bullet { } } + +ion-slides { + width: 100%; + height: 100%; + display: block; +} + +.slide-zoom { + @include text-align(center); + + display: block; + width: 100%; +} + .swiper-container { width: 100%; height: 100%; @@ -528,3 +544,26 @@ button.swiper-pagination-bullet { padding: 0; display: flex; } + +.swiper-slide { + @include text-align(center); + + width: 100%; + height: 100%; + + box-sizing: border-box; + + font-size: 18px; + + /* Center slide text vertically */ + display: flex; + justify-content: center; + align-items: center; +} + +.swiper-slide img { + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; +} diff --git a/src/components/slides/test/intro/main.html b/src/components/slides/test/intro/main.html index f7e9f8e57a..707971027b 100644 --- a/src/components/slides/test/intro/main.html +++ b/src/components/slides/test/intro/main.html @@ -75,6 +75,7 @@ } #list ol li { text-align: left; + text-align: start; list-style: decimal; margin: 10px 0px; } diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index ce1d1c4ef0..48a9127ebd 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -26,6 +26,8 @@ } .tab-button { + @include text-align(center); + position: relative; z-index: 0; display: flex; @@ -42,7 +44,6 @@ border: 0; border-radius: 0; - text-align: center; text-decoration: none; background: none; cursor: pointer; @@ -98,17 +99,17 @@ } [tabsLayout=icon-left] .tab-button .tab-button-icon { - padding-right: 8px; + @include text-align(end); - text-align: right; + padding-right: 8px; } [tabsLayout=icon-right] .tab-button .tab-button-icon { + @include text-align(start); + order: 10; padding-left: 8px; - - text-align: left; } .tab-hidden, diff --git a/src/components/toolbar/toolbar-button.scss b/src/components/toolbar/toolbar-button.scss index bb9dca7f30..1a26357c03 100644 --- a/src/components/toolbar/toolbar-button.scss +++ b/src/components/toolbar/toolbar-button.scss @@ -4,6 +4,7 @@ // -------------------------------------------------- .bar-button { + @include text-align(center); @include appearance(none); position: relative; @@ -13,7 +14,6 @@ padding: 0; line-height: 1; - text-align: center; text-overflow: ellipsis; text-transform: none; white-space: nowrap; diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss index 9d1e2d57e4..766592f93e 100644 --- a/src/components/toolbar/toolbar.ios.scss +++ b/src/components/toolbar/toolbar.ios.scss @@ -97,9 +97,10 @@ $toolbar-button-ios-strong-font-weight: 600 !default; } .toolbar-title-ios { + @include text-align($toolbar-ios-title-text-align); + font-size: $toolbar-ios-title-font-size; font-weight: $toolbar-ios-title-font-weight; - text-align: $toolbar-ios-title-text-align; color: $toolbar-ios-title-text-color; pointer-events: auto; @@ -156,15 +157,15 @@ $toolbar-button-ios-strong-font-weight: 600 !default; } .bar-buttons-ios[end] { - order: map-get($toolbar-order-ios, buttons-end); + @include text-align(end); - text-align: right; + order: map-get($toolbar-order-ios, buttons-end); } .bar-buttons-ios[right] { - order: map-get($toolbar-order-ios, buttons-right); + @include text-align(right); - text-align: right; + order: map-get($toolbar-order-ios, buttons-right); } diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss index b30609793b..98b9b1c3d0 100644 --- a/src/components/toolbar/toolbar.md.scss +++ b/src/components/toolbar/toolbar.md.scss @@ -169,15 +169,15 @@ $toolbar-button-md-strong-font-weight: bold !default; } .bar-buttons-md[end] { - order: map-get($toolbar-order-md, buttons-end); + @include text-align(end); - text-align: right; + order: map-get($toolbar-order-md, buttons-end); } .bar-buttons-md[right] { - order: map-get($toolbar-order-md, buttons-right); + @include text-align(right); - text-align: right; + order: map-get($toolbar-order-md, buttons-right); } @@ -346,12 +346,13 @@ $toolbar-button-md-strong-font-weight: bold !default; } .back-button-icon-md { + @include text-align(start); + margin: 0; padding: 0 6px; font-size: 2.4rem; font-weight: normal; - text-align: left; } diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss index a020227066..bdeca672a0 100644 --- a/src/components/toolbar/toolbar.wp.scss +++ b/src/components/toolbar/toolbar.wp.scss @@ -129,15 +129,15 @@ $toolbar-button-wp-strong-font-weight: bold !default; } .bar-buttons-wp[end] { - order: map-get($toolbar-order-wp, buttons-end); + @include text-align(end); - text-align: right; + order: map-get($toolbar-order-wp, buttons-end); } .bar-buttons-wp[right] { - order: map-get($toolbar-order-wp, buttons-right); + @include text-align(right); - text-align: right; + order: map-get($toolbar-order-wp, buttons-right); } @@ -300,12 +300,13 @@ $toolbar-button-wp-strong-font-weight: bold !default; } .back-button-icon-wp { + @include text-align(start); + margin: 0; padding: 0 6px; font-size: 2.4rem; font-weight: normal; - text-align: left; } diff --git a/src/themes/ionic.functions.scss b/src/themes/ionic.functions.scss index 5be3b38170..b25acc66fd 100644 --- a/src/themes/ionic.functions.scss +++ b/src/themes/ionic.functions.scss @@ -291,3 +291,19 @@ @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/util/events.ts b/src/util/events.ts index fa3aac97fa..2c6cd100fa 100644 --- a/src/util/events.ts +++ b/src/util/events.ts @@ -12,19 +12,21 @@ import { ScrollView } from '../util/scroll-view'; * ```ts * import { Events } from 'ionic-angular'; * - * constructor(public events: Events) {} - * * // first page (publish an event when a user is created) - * function createUser(user) { + * constructor(public events: Events) {} + * createUser(user) { * console.log('User created!') * events.publish('user:created', user, Date.now()); * } * - * // second page (listen for the user created event) - * events.subscribe('user:created', (user, time) => { - * // user and time are the same arguments passed in `events.publish(user, time)` - * console.log('Welcome', user, 'at', time); - * }); + * + * // second page (listen for the user created event after function is called) + * constructor(public events: Events) { + * events.subscribe('user:created', (user, time) => { + * // user and time are the same arguments passed in `events.publish(user, time)` + * console.log('Welcome', user, 'at', time); + * }); + * } * * ``` * @demo /docs/demos/src/events/