javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into v4

Browse Source 
# Conflicts:
#	package.json
#	src/components/badge/badge.scss
#	src/components/slides/slides.scss
This commit is contained in:
Adam Bradley
2017-05-02 12:55:07 -05:00
parent 94e54eed98 04120b4719
commit cae0c0e050
36 changed files with 199 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
package.json
View File

@ -25,17 +25,17 @@
"link": "gulp release.prepareReleasePackage && cd dist/ionic-angular && npm link" "link": "gulp release.prepareReleasePackage && cd dist/ionic-angular && npm link"
}, },
"dependencies": { "dependencies": {
"@angular/common": "4.0.2", "@angular/common": "4.1.0",
"@angular/compiler": "4.0.2", "@angular/compiler": "4.1.0",
"@angular/compiler-cli": "4.0.2", "@angular/compiler-cli": "4.1.0",
"@angular/core": "4.0.2", "@angular/core": "4.1.0",
"@angular/forms": "4.0.2", "@angular/forms": "4.1.0",
"@angular/http": "4.0.2", "@angular/http": "4.1.0",
"@angular/platform-browser": "4.0.2", "@angular/platform-browser": "4.1.0",
"@angular/platform-browser-dynamic": "4.0.2", "@angular/platform-browser-dynamic": "4.1.0",
"ionicons": "~3.0.0", "ionicons": "~3.0.0",
"rxjs": "5.1.1", "rxjs": "5.1.1",
"zone.js": "^0.8.5" "zone.js": "^0.8.9"
}, },
"devDependencies": { "devDependencies": {
"@ionic/app-scripts": "nightly", "@ionic/app-scripts": "nightly",

6
scripts/docs/templates/api_index.template.html vendored
View File

@ -11,15 +11,15 @@ header_sub_title: Extend Ionic even further with the power of AngularJS
searchable: false searchable: false
--- ---
# Ionic 2 API Docs # Ionic API Docs
<img class="section-header" src="/img/docs/api-intro-header.png" /> <img class="section-header" src="/img/docs/api-intro-header.png" />
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. 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 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.

5
src/components/action-sheet/action-sheet.ios.scss
View File

@ -74,7 +74,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
.action-sheet-ios { .action-sheet-ios {
text-align: $action-sheet-ios-text-align; @include text-align($action-sheet-ios-text-align);
} }
.action-sheet-ios .action-sheet-container { .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 { .action-sheet-ios .action-sheet-title {
@include text-align($action-sheet-ios-text-align);
padding: $action-sheet-ios-title-padding; 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-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; border-radius: $action-sheet-ios-title-border-radius;
font-size: $action-sheet-ios-title-font-size; font-size: $action-sheet-ios-title-font-size;
font-weight: $action-sheet-ios-title-font-weight; font-weight: $action-sheet-ios-title-font-weight;
text-align: $action-sheet-ios-text-align;
color: $action-sheet-ios-title-color; color: $action-sheet-ios-title-color;
} }

11
src/components/action-sheet/action-sheet.md.scss
View File

@ -4,7 +4,7 @@
// -------------------------------------------------- // --------------------------------------------------
/// @prop - Text align of the action sheet /// @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 /// @prop - Background color of the action sheet
$action-sheet-md-background: #fafafa !default; $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 { .action-sheet-md .action-sheet-title {
@include text-align($action-sheet-md-text-align);
padding: $action-sheet-md-title-padding; padding: $action-sheet-md-title-padding;
font-size: $action-sheet-md-title-font-size; font-size: $action-sheet-md-title-font-size;
text-align: $action-sheet-md-text-align;
color: $action-sheet-md-title-color; color: $action-sheet-md-title-color;
} }
.action-sheet-md .action-sheet-button { .action-sheet-md .action-sheet-button {
@include text-align($action-sheet-md-text-align);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -77,7 +80,6 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default;
min-height: $action-sheet-md-button-min-height; min-height: $action-sheet-md-button-min-height;
font-size: $action-sheet-md-button-font-size; font-size: $action-sheet-md-button-font-size;
text-align: $action-sheet-md-text-align;
color: $action-sheet-md-button-text-color; color: $action-sheet-md-button-text-color;
background: $action-sheet-md-button-background; 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 { .action-sheet-md .action-sheet-icon {
@include text-align($action-sheet-md-icon-text-align);
margin: $action-sheet-md-icon-margin; margin: $action-sheet-md-icon-margin;
padding: 0; padding: 0;
width: $action-sheet-md-icon-width; width: $action-sheet-md-icon-width;
font-size: $action-sheet-md-icon-font-size; font-size: $action-sheet-md-icon-font-size;
text-align: $action-sheet-md-icon-text-align;
vertical-align: $action-sheet-md-icon-vertical-align; vertical-align: $action-sheet-md-icon-vertical-align;
} }

11
src/components/action-sheet/action-sheet.wp.scss
View File

@ -4,7 +4,7 @@
// -------------------------------------------------- // --------------------------------------------------
/// @prop - Text align of the action sheet /// @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 /// @prop - Background color of the action sheet
$action-sheet-wp-background: #fff !default; $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 { .action-sheet-wp .action-sheet-title {
@include text-align($action-sheet-wp-title-text-align);
padding: $action-sheet-wp-title-padding; padding: $action-sheet-wp-title-padding;
font-size: $action-sheet-wp-title-font-size; font-size: $action-sheet-wp-title-font-size;
text-align: $action-sheet-wp-title-text-align;
color: $action-sheet-wp-title-color; color: $action-sheet-wp-title-color;
} }
.action-sheet-wp .action-sheet-button { .action-sheet-wp .action-sheet-button {
@include text-align($action-sheet-wp-button-text-align);
padding: $action-sheet-wp-button-padding; padding: $action-sheet-wp-button-padding;
min-height: $action-sheet-wp-button-height; min-height: $action-sheet-wp-button-height;
font-size: $action-sheet-wp-button-font-size; font-size: $action-sheet-wp-button-font-size;
text-align: $action-sheet-wp-button-text-align;
color: $action-sheet-wp-button-text-color; color: $action-sheet-wp-button-text-color;
background: $action-sheet-wp-button-background; 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 { .action-sheet-wp .action-sheet-icon {
@include text-align($action-sheet-wp-icon-text-align);
margin: $action-sheet-wp-icon-margin; margin: $action-sheet-wp-icon-margin;
padding: 0; padding: 0;
width: $action-sheet-wp-icon-width; width: $action-sheet-wp-icon-width;
font-size: $action-sheet-wp-icon-font-size; font-size: $action-sheet-wp-icon-font-size;
text-align: $action-sheet-wp-icon-text-align;
vertical-align: $action-sheet-wp-icon-vertical-align; vertical-align: $action-sheet-wp-icon-vertical-align;
} }

4
src/components/alert/alert-controller.ts
View File

@ -129,14 +129,14 @@ import { Config } from '../../config/config';
* Alert options * Alert options
* *
* | Property | Type | Description | * | Property | Type | Description |
* |-----------------------|-----------|---------------------------------------------------------------------------| * |-----------------------|-----------|------------------------------------------------------------------------------|
* | title | `string` | The title for the alert. | * | title | `string` | The title for the alert. |
* | subTitle | `string` | The subtitle for the alert. | * | subTitle | `string` | The subtitle for the alert. |
* | message | `string` | The message for the alert. | * | message | `string` | The message for the alert. |
* | cssClass | `string` | Additional classes for custom styles, separated by spaces. | * | cssClass | `string` | Additional classes for custom styles, separated by spaces. |
* | inputs | `array` | An array of inputs for the alert. See input options. | * | inputs | `array` | An array of inputs for the alert. See input options. |
* | buttons | `array` | An array of buttons for the alert. See buttons 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. | * | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop. Default true. |
* *
* *
* Input options * Input options

7
src/components/alert/alert.ios.scss
View File

@ -230,9 +230,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
// -------------------------------------------------- // --------------------------------------------------
.alert-ios .alert-head { .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 { .alert-ios .alert-title {
@ -253,10 +253,11 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
.alert-ios .alert-message, .alert-ios .alert-message,
.alert-ios .alert-input-group { .alert-ios .alert-input-group {
@include text-align($alert-ios-message-text-align);
padding: $alert-ios-message-padding; padding: $alert-ios-message-padding;
font-size: $alert-ios-message-font-size; font-size: $alert-ios-message-font-size;
text-align: $alert-ios-message-text-align;
color: $alert-ios-message-text-color; color: $alert-ios-message-text-color;
} }

11
src/components/alert/alert.md.scss
View File

@ -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; $alert-md-head-padding: 24px 24px 20px 24px !default;
/// @prop - Text align of the alert head /// @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 /// @prop - Font size of the alert title
$alert-md-title-font-size: 22px !default; $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; $alert-md-button-text-transform: uppercase !default;
/// @prop - Text align of the alert button /// @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 /// @prop - Border top of the alert list
@ -256,9 +256,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
// -------------------------------------------------- // --------------------------------------------------
.alert-md .alert-head { .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 { .alert-md .alert-title {
@ -474,6 +474,8 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
} }
.alert-md .alert-button { .alert-md .alert-button {
@include text-align($alert-md-button-text-align);
// necessary for ripple to work properly // necessary for ripple to work properly
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -483,7 +485,6 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
border-radius: $alert-md-button-border-radius; border-radius: $alert-md-button-border-radius;
font-weight: $alert-md-button-font-weight; font-weight: $alert-md-button-font-weight;
text-align: $alert-md-button-text-align;
text-transform: $alert-md-button-text-transform; text-transform: $alert-md-button-text-transform;
color: $alert-md-button-text-color; color: $alert-md-button-text-color;
background-color: $alert-md-button-background-color; background-color: $alert-md-button-background-color;

3
src/components/alert/alert.scss
View File

@ -108,6 +108,7 @@ ion-alert input {
} }
.alert-tappable { .alert-tappable {
@include text-align(start);
@include appearance(none); @include appearance(none);
margin: 0; margin: 0;
@ -117,7 +118,5 @@ ion-alert input {
font-size: inherit; font-size: inherit;
line-height: initial; line-height: initial;
text-align: left;
text-align: start;
background: transparent; background: transparent;
} }

6
src/components/alert/alert.wp.scss
View File

@ -31,7 +31,7 @@ $alert-wp-background: #e6e6e6 !default;
$alert-wp-head-padding: 20px 22px 5px 22px !default; $alert-wp-head-padding: 20px 22px 5px 22px !default;
/// @prop - Text align of the alert head /// @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 /// @prop - Font size of the alert title
$alert-wp-title-font-size: 20px !default; $alert-wp-title-font-size: 20px !default;
@ -256,9 +256,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
// -------------------------------------------------- // --------------------------------------------------
.alert-wp .alert-head { .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 { .alert-wp .alert-title {

18
src/components/app/app.scss
View File

@ -333,33 +333,27 @@ ion-footer {
// Provide `[text-{bp}]` attributes for aligning the text based // Provide `[text-{bp}]` attributes for aligning the text based
// on the breakpoint // on the breakpoint
[text#{$infix}-center] { [text#{$infix}-center] {
// scss-lint:disable ImportantRule @include text-align(center, !important);
text-align: center !important;
} }
[text#{$infix}-justify] { [text#{$infix}-justify] {
// scss-lint:disable ImportantRule @include text-align(justify, !important);
text-align: justify !important;
} }
[text#{$infix}-start] { [text#{$infix}-start] {
// scss-lint:disable ImportantRule @include text-align(start, !important);
text-align: start !important;
} }
[text#{$infix}-end] { [text#{$infix}-end] {
// scss-lint:disable ImportantRule @include text-align(end, !important);
text-align: end !important;
} }
[text#{$infix}-left] { [text#{$infix}-left] {
// scss-lint:disable ImportantRule @include text-align(left, !important);
text-align: left !important;
} }
[text#{$infix}-right] { [text#{$infix}-right] {
// scss-lint:disable ImportantRule @include text-align(right, !important);
text-align: right !important;
} }
[text#{$infix}-nowrap] { [text#{$infix}-nowrap] {

6
src/components/badge/badge.scss
View File

@ -11,8 +11,9 @@ $badge-font-size: 1.3rem !default;
$badge-font-weight: bold !default; $badge-font-weight: bold !default;
ion-badge, ion-badge {
:host { @include text-align(center);
display: inline-block; display: inline-block;
visibility: inherit !important; visibility: inherit !important;
contain: content; contain: content;
@ -27,7 +28,6 @@ ion-badge,
font-weight: $badge-font-weight; font-weight: $badge-font-weight;
line-height: 1; line-height: 1;
text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
} }

2
src/components/button/button.scss
View File

@ -15,13 +15,13 @@ $button-round-border-radius: 64px !default;
.button { .button {
@include text-align(center);
@include appearance(none); @include appearance(none);
position: relative; position: relative;
z-index: 0; z-index: 0;
display: inline-block; display: inline-block;
text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: none; text-transform: none;

3
src/components/chip/chip.scss
View File

@ -52,6 +52,8 @@ ion-chip .button {
} }
ion-chip ion-icon { ion-chip ion-icon {
@include text-align($chip-icon-text-align);
width: $chip-icon-size; width: $chip-icon-size;
height: $chip-icon-size; height: $chip-icon-size;
@ -59,7 +61,6 @@ ion-chip ion-icon {
font-size: $chip-icon-font-size; font-size: $chip-icon-font-size;
line-height: $chip-icon-size; line-height: $chip-icon-size;
text-align: $chip-icon-text-align;
} }
ion-chip ion-avatar { ion-chip ion-avatar {

2
src/components/fab/fab.scss
View File

@ -20,6 +20,7 @@ $fab-list-button-background-color: #f4f4f4 !default;
.fab { .fab {
@include text-align(center);
@include appearance(none); @include appearance(none);
position: relative; position: relative;
@ -33,7 +34,6 @@ $fab-list-button-background-color: #f4f4f4 !default;
border-radius: 50%; border-radius: 50%;
font-size: 14px; font-size: 14px;
line-height: $fab-size; line-height: $fab-size;
text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: none; text-transform: none;
white-space: nowrap; white-space: nowrap;

4
src/components/infinite-scroll/infinite-scroll.scss
View File

@ -28,6 +28,8 @@ ion-infinite-scroll {
// -------------------------------------------------- // --------------------------------------------------
ion-infinite-scroll-content { ion-infinite-scroll-content {
@include text-align(center);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -35,8 +37,6 @@ ion-infinite-scroll-content {
height: 100%; height: 100%;
min-height: 84px; min-height: 84px;
text-align: center;
} }
.infinite-loading { .infinite-loading {

4
src/components/item/item-media.scss
View File

@ -11,9 +11,9 @@
.item > ion-icon:first-child, .item > ion-icon:first-child,
.item-inner > 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, .item > ion-icon,

3
src/components/item/item.scss
View File

@ -19,6 +19,8 @@
} }
.item-block { .item-block {
@include text-align(initial);
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@ -35,7 +37,6 @@
font-weight: normal; font-weight: normal;
line-height: normal; line-height: normal;
text-align: initial;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }

10
src/components/picker/picker.ios.scss
View File

@ -69,10 +69,9 @@ $picker-button-ios-strong-font-weight: 600 !default;
} }
.picker-ios .picker-toolbar-button { .picker-ios .picker-toolbar-button {
flex: 1; @include text-align(end);
text-align: right; flex: 1;
text-align: end;
} }
.picker-ios .picker-toolbar-button:last-child .picker-button { .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 { .picker-ios .picker-toolbar-cancel {
font-weight: normal; @include text-align(start);
text-align: left; font-weight: normal;
text-align: start;
} }
.picker-ios .picker-button, .picker-ios .picker-button,

11
src/components/picker/picker.scss
View File

@ -87,6 +87,8 @@ ion-picker-cmp {
} }
.picker-prefix { .picker-prefix {
@include text-align(end);
position: relative; position: relative;
flex: 2; flex: 2;
@ -94,12 +96,12 @@ ion-picker-cmp {
min-width: 45%; min-width: 45%;
max-width: 50%; max-width: 50%;
text-align: right;
text-align: end;
white-space: nowrap; white-space: nowrap;
} }
.picker-suffix { .picker-suffix {
@include text-align(start);
position: relative; position: relative;
flex: 2; flex: 2;
@ -107,13 +109,13 @@ ion-picker-cmp {
min-width: 45%; min-width: 45%;
max-width: 50%; max-width: 50%;
text-align: left;
text-align: start;
white-space: nowrap; white-space: nowrap;
} }
// contain property is supported by Chrome // contain property is supported by Chrome
.picker-opt { .picker-opt {
@include text-align(center);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -122,7 +124,6 @@ ion-picker-cmp {
width: 100%; width: 100%;
text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

10
src/components/picker/picker.wp.scss
View File

@ -70,17 +70,15 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul
} }
.picker-wp .picker-toolbar-button { .picker-wp .picker-toolbar-button {
flex: 1; @include text-align(end);
text-align: right; flex: 1;
text-align: end;
} }
.picker-wp .picker-toolbar-cancel { .picker-wp .picker-toolbar-cancel {
font-weight: normal; @include text-align(start);
text-align: left; font-weight: normal;
text-align: start;
} }
.picker-wp .picker-button, .picker-wp .picker-button,

6
src/components/popover/test/basic/pages/page-one/page-one.html
View File

@ -34,10 +34,10 @@
<ion-grid style="padding: 10px 0;"> <ion-grid style="padding: 10px 0;">
<ion-row> <ion-row>
<ion-col col-6> <ion-col col-6>
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover left</a> <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover start</a>
</ion-col> </ion-col>
<ion-col col-6 style="text-align: right;"> <ion-col col-6 text-end>
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover right</a> <a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover end</a>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>

8
src/components/range/range.ios.scss
View File

@ -122,6 +122,8 @@ $range-ios-pin-padding: 8px !default;
} }
.range-ios .range-knob-handle { .range-ios .range-knob-handle {
@include text-align(center);
position: absolute; position: absolute;
top: ($range-ios-slider-height / 2); top: ($range-ios-slider-height / 2);
left: 0%; left: 0%;
@ -131,8 +133,6 @@ $range-ios-pin-padding: 8px !default;
width: $range-ios-hit-width; width: $range-ios-hit-width;
height: $range-ios-hit-height; height: $range-ios-hit-height;
text-align: center;
} }
.range-ios .range-knob { .range-ios .range-knob {
@ -173,6 +173,8 @@ $range-ios-pin-padding: 8px !default;
} }
.range-ios .range-pin { .range-ios .range-pin {
@include text-align(center);
position: relative; position: relative;
top: -20px; top: -20px;
display: inline-block; display: inline-block;
@ -185,8 +187,6 @@ $range-ios-pin-padding: 8px !default;
font-size: $range-ios-pin-font-size; font-size: $range-ios-pin-font-size;
text-align: center;
color: $range-ios-pin-color; color: $range-ios-pin-color;
background: $range-ios-pin-background-color; background: $range-ios-pin-background-color;

8
src/components/range/range.md.scss
View File

@ -126,6 +126,8 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
} }
.range-md .range-knob-handle { .range-md .range-knob-handle {
@include text-align(center);
position: absolute; position: absolute;
top: ($range-md-slider-height / 2); top: ($range-md-slider-height / 2);
left: 0%; left: 0%;
@ -135,8 +137,6 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
width: $range-md-hit-width; width: $range-md-hit-width;
height: $range-md-hit-height; height: $range-md-hit-height;
text-align: center;
} }
.range-md .range-knob { .range-md .range-knob {
@ -186,6 +186,8 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def
} }
.range-md .range-pin { .range-md .range-pin {
@include text-align(center);
position: relative; position: relative;
top: -20px; top: -20px;
display: inline-block; 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; font-size: $range-md-pin-font-size;
text-align: center;
color: $range-md-pin-color; color: $range-md-pin-color;
background: $range-md-pin-background-color; background: $range-md-pin-background-color;

8
src/components/range/range.wp.scss
View File

@ -117,6 +117,8 @@ $range-wp-pin-padding: 8px !default;
} }
.range-wp .range-knob-handle { .range-wp .range-knob-handle {
@include text-align(center);
position: absolute; position: absolute;
top: ($range-wp-slider-height / 2); top: ($range-wp-slider-height / 2);
left: 0%; left: 0%;
@ -126,8 +128,6 @@ $range-wp-pin-padding: 8px !default;
width: $range-wp-hit-width; width: $range-wp-hit-width;
height: $range-wp-hit-height; height: $range-wp-hit-height;
text-align: center;
} }
.range-wp .range-knob { .range-wp .range-knob {
@ -166,6 +166,8 @@ $range-wp-pin-padding: 8px !default;
} }
.range-wp .range-pin { .range-wp .range-pin {
@include text-align(center);
position: relative; position: relative;
top: -24px; top: -24px;
display: inline-block; display: inline-block;
@ -178,8 +180,6 @@ $range-wp-pin-padding: 8px !default;
font-size: $range-wp-pin-font-size; font-size: $range-wp-pin-font-size;
text-align: center;
color: $range-wp-pin-color; color: $range-wp-pin-color;
background: $range-wp-pin-background-color; background: $range-wp-pin-background-color;

6
src/components/refresher/refresher.scss
View File

@ -69,8 +69,9 @@ ion-refresher-content {
.refresher-pulling-icon, .refresher-pulling-icon,
.refresher-refreshing-icon { .refresher-refreshing-icon {
@include text-align(center);
font-size: $refresher-icon-font-size; font-size: $refresher-icon-font-size;
text-align: center;
color: $refresher-icon-color; color: $refresher-icon-color;
transform-origin: center; transform-origin: center;
transition: 200ms; transition: 200ms;
@ -78,8 +79,9 @@ ion-refresher-content {
.refresher-pulling-text, .refresher-pulling-text,
.refresher-refreshing-text { .refresher-refreshing-text {
@include text-align(center);
font-size: $refresher-text-font-size; font-size: $refresher-text-font-size;
text-align: center;
color: $refresher-text-color; color: $refresher-text-color;
} }

3
src/components/segment/segment.scss
View File

@ -15,6 +15,8 @@ ion-segment {
} }
.segment-button { .segment-button {
@include text-align(center);
position: relative; position: relative;
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -22,7 +24,6 @@ ion-segment {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;

43
src/components/slides/slides.scss
View File

@ -158,8 +158,9 @@ ion-slides {
/* Pagination Styles */ /* Pagination Styles */
.swiper-pagination { .swiper-pagination {
@include text-align(center);
position: absolute; position: absolute;
text-align: center;
transition: 300ms; transition: 300ms;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
z-index: 10; z-index: 10;
@ -423,12 +424,13 @@ button.swiper-pagination-bullet {
} }
.swiper-zoom-container { .swiper-zoom-container {
@include text-align(center);
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center;
} }
.swiper-zoom-container > img, .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 { .swiper-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -528,3 +544,26 @@ button.swiper-pagination-bullet {
padding: 0; padding: 0;
display: flex; 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%;
}

1
src/components/slides/test/intro/main.html
View File

@ -75,6 +75,7 @@
} }
#list ol li { #list ol li {
text-align: left; text-align: left;
text-align: start;
list-style: decimal; list-style: decimal;
margin: 10px 0px; margin: 10px 0px;
} }

11
src/components/tabs/tabs.scss
View File

@ -26,6 +26,8 @@
} }
.tab-button { .tab-button {
@include text-align(center);
position: relative; position: relative;
z-index: 0; z-index: 0;
display: flex; display: flex;
@ -42,7 +44,6 @@
border: 0; border: 0;
border-radius: 0; border-radius: 0;
text-align: center;
text-decoration: none; text-decoration: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
@ -98,17 +99,17 @@
} }
[tabsLayout=icon-left] .tab-button .tab-button-icon { [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 { [tabsLayout=icon-right] .tab-button .tab-button-icon {
@include text-align(start);
order: 10; order: 10;
padding-left: 8px; padding-left: 8px;
text-align: left;
} }
.tab-hidden, .tab-hidden,

2
src/components/toolbar/toolbar-button.scss
View File

@ -4,6 +4,7 @@
// -------------------------------------------------- // --------------------------------------------------
.bar-button { .bar-button {
@include text-align(center);
@include appearance(none); @include appearance(none);
position: relative; position: relative;
@ -13,7 +14,6 @@
padding: 0; padding: 0;
line-height: 1; line-height: 1;
text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
text-transform: none; text-transform: none;
white-space: nowrap; white-space: nowrap;

11
src/components/toolbar/toolbar.ios.scss
View File

@ -97,9 +97,10 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
} }
.toolbar-title-ios { .toolbar-title-ios {
@include text-align($toolbar-ios-title-text-align);
font-size: $toolbar-ios-title-font-size; font-size: $toolbar-ios-title-font-size;
font-weight: $toolbar-ios-title-font-weight; font-weight: $toolbar-ios-title-font-weight;
text-align: $toolbar-ios-title-text-align;
color: $toolbar-ios-title-text-color; color: $toolbar-ios-title-text-color;
pointer-events: auto; pointer-events: auto;
@ -156,15 +157,15 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
} }
.bar-buttons-ios[end] { .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] { .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);
} }

11
src/components/toolbar/toolbar.md.scss
View File

@ -169,15 +169,15 @@ $toolbar-button-md-strong-font-weight: bold !default;
} }
.bar-buttons-md[end] { .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] { .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 { .back-button-icon-md {
@include text-align(start);
margin: 0; margin: 0;
padding: 0 6px; padding: 0 6px;
font-size: 2.4rem; font-size: 2.4rem;
font-weight: normal; font-weight: normal;
text-align: left;
} }

11
src/components/toolbar/toolbar.wp.scss
View File

@ -129,15 +129,15 @@ $toolbar-button-wp-strong-font-weight: bold !default;
} }
.bar-buttons-wp[end] { .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] { .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 { .back-button-icon-wp {
@include text-align(start);
margin: 0; margin: 0;
padding: 0 6px; padding: 0 6px;
font-size: 2.4rem; font-size: 2.4rem;
font-weight: normal; font-weight: normal;
text-align: left;
} }

16
src/themes/ionic.functions.scss
View File

@ -291,3 +291,19 @@
@return $colors-list; @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;
}
}

10
src/util/events.ts
View File

@ -12,19 +12,21 @@ import { ScrollView } from '../util/scroll-view';
* ```ts * ```ts
* import { Events } from 'ionic-angular'; * import { Events } from 'ionic-angular';
* *
* constructor(public events: Events) {}
*
* // first page (publish an event when a user is created) * // first page (publish an event when a user is created)
* function createUser(user) { * constructor(public events: Events) {}
* createUser(user) {
* console.log('User created!') * console.log('User created!')
* events.publish('user:created', user, Date.now()); * events.publish('user:created', user, Date.now());
* } * }
* *
* // second page (listen for the user created event) *
* // second page (listen for the user created event after function is called)
* constructor(public events: Events) {
* events.subscribe('user:created', (user, time) => { * events.subscribe('user:created', (user, time) => {
* // user and time are the same arguments passed in `events.publish(user, time)` * // user and time are the same arguments passed in `events.publish(user, time)`
* console.log('Welcome', user, 'at', time); * console.log('Welcome', user, 'at', time);
* }); * });
* }
* *
* ``` * ```
* @demo /docs/demos/src/events/ * @demo /docs/demos/src/events/