javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'core' of github.com:ionic-team/ionic into core

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-01-13 12:36:09 +01:00
parent 81ebc0e71b a658f08b88
commit beacb9d1c1
21 changed files with 59 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
BREAKING.md
View File

@ -23,7 +23,6 @@ A list of the breaking changes introduced in Ionic Angular v4.
- [Select](#select) - [Select](#select)
- [Text/Typography](#text-typography) - [Text/Typography](#text-typography)
- [Toolbar](#toolbar) - [Toolbar](#toolbar)
- [Sass](#sass)
## Dynamic Mode ## Dynamic Mode
@ -278,6 +277,10 @@ If any `CSS` is being overridden for an icon it will need to change to override
} }
``` ```
### Property Removed
The `isActive` property has been removed. It only worked for `ios` icons previously. If you would like to switch between an outline and solid icon you should set it in the `name`, or `ios`/`md` attribute and then change it when needed.
## Input ## Input
The Sass variables were all renamed from having `$text-input` as the prefix to `$input`. The Sass variables were all renamed from having `$text-input` as the prefix to `$input`.
@ -686,13 +689,3 @@ The properties have been renamed to the following:
| `end` | `slot="mode-end"` | Positions element to the `right` of the content in `ios` mode, and to the far right in `md` and `wp` mode. | | `end` | `slot="mode-end"` | Positions element to the `right` of the content in `ios` mode, and to the far right in `md` and `wp` mode. |
| `left` | `slot="start"` | Positions element to the `left` of all other elements in `LTR`, and to the `right` in `RTL`. | | `left` | `slot="start"` | Positions element to the `left` of all other elements in `LTR`, and to the `right` in `RTL`. |
| `right` | `slot="end"` | Positions element to the `right` of all other elements in `LTR`, and to the `left` in `RTL`. | | `right` | `slot="end"` | Positions element to the `right` of all other elements in `LTR`, and to the `left` in `RTL`. |
## Sass
### Deprecated Styles
Deprecated variables and styles have been removed.
- [e0a29db](https://github.com/ionic-team/ionic/commit/e0a29db)
- [07e4330](https://github.com/ionic-team/ionic/commit/07e4330)
- TODO continue to add what is removed here

6
packages/core/package-lock.json generated
View File

@ -3484,9 +3484,9 @@
"dev": true "dev": true
}, },
"ionicons": { "ionicons": {
"version": "4.0.0-11", "version": "4.0.0-12",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.0.0-11.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.0.0-12.tgz",
"integrity": "sha512-AoK+gnAE9ABLI0/swX5By8SXxU8AMpX2vpGMr7/lbc6emPhSV/ESfYMMa88a65tsMp8yG+zGOJI/LSwY6YeAQA==", "integrity": "sha512-yPlHH82F93N64aNLokRtJq25QncCgSWIhSMHFxXt/Ff0DJmrqQLo8tst9QxCYNnqQQRsqfLHh76psea6vzeD6g==",
"dev": true "dev": true
}, },
"is-arrayish": { "is-arrayish": {

2
packages/core/package.json
View File

@ -16,7 +16,7 @@
"chai": "^4.1.2", "chai": "^4.1.2",
"chromedriver": "^2.33.2", "chromedriver": "^2.33.2",
"glob": "^7.1.2", "glob": "^7.1.2",
"ionicons": "4.0.0-11", "ionicons": "4.0.0-12",
"jest": "^21.2.1", "jest": "^21.2.1",
"mocha": "^4.0.1", "mocha": "^4.0.1",
"np": "^2.17.0", "np": "^2.17.0",

2
packages/core/scripts/e2e/index.js
View File

@ -86,7 +86,7 @@ function getTotalTests(suite) {
async function run() { async function run() {
// TODO look into removing chrome startup from the timeout // TODO look into removing chrome startup from the timeout
const mocha = new Mocha({ const mocha = new Mocha({
timeout: 10000, timeout: 5000,
slow: 2000 slow: 2000
}); });

9
packages/core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -98,14 +98,9 @@
@include padding-horizontal(null, $action-sheet-ios-button-icon-padding-right); @include padding-horizontal(null, $action-sheet-ios-button-icon-padding-right);
width: $action-sheet-ios-icon-width;
height: $action-sheet-ios-button-icon-height; height: $action-sheet-ios-button-icon-height;
font-size: $action-sheet-ios-button-icon-font-size; font-size: $action-sheet-ios-button-icon-font-size;
vertical-align: $action-sheet-ios-icon-vertical-align;
fill: $action-sheet-ios-button-icon-fill-color;
} }
.action-sheet-ios .action-sheet-button:last-child { .action-sheet-ios .action-sheet-button:last-child {
@ -129,10 +124,6 @@
color: $action-sheet-ios-button-destructive-text-color; color: $action-sheet-ios-button-destructive-text-color;
} }
.action-sheet-ios .action-sheet-destructive .action-sheet-icon {
fill: $action-sheet-ios-button-destructive-icon-fill-color;
}
.action-sheet-ios .action-sheet-cancel { .action-sheet-ios .action-sheet-cancel {
font-weight: $action-sheet-ios-button-cancel-font-weight; font-weight: $action-sheet-ios-button-cancel-font-weight;
background: $action-sheet-ios-button-cancel-background; background: $action-sheet-ios-button-cancel-background;

12
packages/core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

@ -87,9 +87,6 @@ $action-sheet-ios-button-padding: 18px !default;
/// @prop - Text color of the action sheet button /// @prop - Text color of the action sheet button
$action-sheet-ios-button-text-color: #007aff !default; $action-sheet-ios-button-text-color: #007aff !default;
/// @prop - Fill color of the action sheet button icon
$action-sheet-ios-button-icon-fill-color: $action-sheet-ios-button-text-color !default;
/// @prop - Font size of the action sheet button icon /// @prop - Font size of the action sheet button icon
$action-sheet-ios-button-icon-font-size: 1.4em !default; $action-sheet-ios-button-icon-font-size: 1.4em !default;
@ -99,15 +96,9 @@ $action-sheet-ios-button-icon-padding-right: .1em !default;
/// @prop - Height of the action sheet button icon /// @prop - Height of the action sheet button icon
$action-sheet-ios-button-icon-height: .7em !default; $action-sheet-ios-button-icon-height: .7em !default;
/// @prop - Width of the icon in the action sheet button
$action-sheet-ios-icon-width: 23px !default;
/// @prop - Margin top of the action sheet button icon /// @prop - Margin top of the action sheet button icon
$action-sheet-ios-button-icon-margin-top: -10px !default; $action-sheet-ios-button-icon-margin-top: -10px !default;
/// @prop - Vertical align of the icon in the action sheet button
$action-sheet-ios-icon-vertical-align: middle !default;
/// @prop - Font size of the action sheet button /// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: 20px !default; $action-sheet-ios-button-font-size: 20px !default;
@ -129,9 +120,6 @@ $action-sheet-ios-button-background-activated: rgba(115, 115, 115, .1)
/// @prop - Destructive text color of the action sheet button /// @prop - Destructive text color of the action sheet button
$action-sheet-ios-button-destructive-text-color: #f53d3d !default; $action-sheet-ios-button-destructive-text-color: #f53d3d !default;
/// @prop - Destructive fill color of the action sheet button icon
$action-sheet-ios-button-destructive-icon-fill-color: $action-sheet-ios-button-destructive-text-color !default;
/// @prop - Background color of the action sheet cancel button /// @prop - Background color of the action sheet cancel button
$action-sheet-ios-button-cancel-background: #fff !default; $action-sheet-ios-button-cancel-background: #fff !default;

7
packages/core/src/components/action-sheet/action-sheet.md.scss
View File

@ -68,14 +68,7 @@
.action-sheet-md .action-sheet-icon { .action-sheet-md .action-sheet-icon {
@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); @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);
@include padding(0);
@include text-align($action-sheet-md-icon-text-align);
width: $action-sheet-md-icon-width;
font-size: $action-sheet-md-icon-font-size; font-size: $action-sheet-md-icon-font-size;
vertical-align: $action-sheet-md-icon-vertical-align;
} }
.action-sheet-md .action-sheet-group .button-inner { .action-sheet-md .action-sheet-group .button-inner {

9
packages/core/src/components/action-sheet/action-sheet.md.vars.scss
View File

@ -81,15 +81,6 @@ $action-sheet-md-button-background-activated: #f1f1f1 !default;
/// @prop - Font size of the icon in the action sheet button /// @prop - Font size of the icon in the action sheet button
$action-sheet-md-icon-font-size: 24px !default; $action-sheet-md-icon-font-size: 24px !default;
/// @prop - Width of the icon in the action sheet button
$action-sheet-md-icon-width: 23px !default;
/// @prop - Text align of the icon in the action sheet button
$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 top of the icon in the action sheet button /// @prop - Margin top of the icon in the action sheet button
$action-sheet-md-icon-margin-top: 0 !default; $action-sheet-md-icon-margin-top: 0 !default;

5
packages/core/src/components/button/button.ios.scss
View File

@ -34,11 +34,6 @@
opacity: $button-ios-opacity-hover; opacity: $button-ios-opacity-hover;
} }
.button-ios .icon {
fill: $button-ios-icon-fill-color;
}
// iOS Default Button Color Mixin // iOS Default Button Color Mixin
// -------------------------------------------------- // --------------------------------------------------

3
packages/core/src/components/button/button.ios.vars.scss
View File

@ -39,9 +39,6 @@ $button-ios-border-radius: 4px !default;
/// @prop - Font size of the button text /// @prop - Font size of the button text
$button-ios-font-size: 16px !default; $button-ios-font-size: 16px !default;
/// @prop - Color of the button icon
$button-ios-icon-fill-color: currentColor !default;
/// @prop - Background color of the button /// @prop - Background color of the button
$button-ios-background-color: color($colors-ios, primary) !default; $button-ios-background-color: color($colors-ios, primary) !default;

4
packages/core/src/components/button/button.md.scss
View File

@ -46,10 +46,6 @@
background-color: $button-md-text-color; background-color: $button-md-text-color;
} }
.button-md .icon {
fill: $button-md-icon-fill-color;
}
// Material Design Default Button Color Mixin // Material Design Default Button Color Mixin
// -------------------------------------------------- // --------------------------------------------------

3
packages/core/src/components/button/button.md.vars.scss
View File

@ -45,9 +45,6 @@ $button-md-font-weight: 500 !default;
/// @prop - Capitalization of the button text /// @prop - Capitalization of the button text
$button-md-text-transform: uppercase !default; $button-md-text-transform: uppercase !default;
/// @prop - Color of the button icon
$button-md-icon-fill-color: currentColor !default;
/// @prop - Background color of the button /// @prop - Background color of the button
$button-md-background-color: color($colors-md, primary) !default; $button-md-background-color: color($colors-md, primary) !default;

6
packages/core/src/components/button/button.scss
View File

@ -107,8 +107,7 @@ button[disabled],
// -------------------------------------------------- // --------------------------------------------------
.button ion-icon { .button ion-icon {
width: 1.4em; font-size: 1.4em;
height: 1.4em;
pointer-events: none; pointer-events: none;
} }
@ -122,6 +121,5 @@ button[disabled],
} }
.button ion-icon[slot="icon-only"] { .button ion-icon[slot="icon-only"] {
width: 1.8em; font-size: 1.8em;
height: 1.8em;
} }

5
packages/core/src/components/chip/chip.ios.scss
View File

@ -14,7 +14,6 @@
font-family: $chip-ios-font-family; font-family: $chip-ios-font-family;
font-size: $chip-ios-font-size; font-size: $chip-ios-font-size;
line-height: $chip-ios-height;
color: $chip-ios-text-color; color: $chip-ios-text-color;
background: $chip-ios-background-color; background: $chip-ios-background-color;
} }
@ -26,7 +25,7 @@
.chip-ios > ion-icon { .chip-ios > ion-icon {
background-color: $chip-ios-icon-background-color; background-color: $chip-ios-icon-background-color;
fill: $chip-ios-icon-fill-color; color: $chip-ios-icon-fill-color;
} }
.chip-ios ion-avatar { .chip-ios ion-avatar {
@ -48,7 +47,7 @@
.chip-ios .icon-ios-#{$color-name} { .chip-ios .icon-ios-#{$color-name} {
background-color: $color-base; background-color: $color-base;
fill: $color-contrast; color: $color-contrast;
} }
} }

5
packages/core/src/components/chip/chip.md.scss
View File

@ -14,7 +14,6 @@
font-family: $chip-md-font-family; font-family: $chip-md-font-family;
font-size: $chip-md-font-size; font-size: $chip-md-font-size;
line-height: $chip-md-height;
color: $chip-md-text-color; color: $chip-md-text-color;
background: $chip-md-background-color; background: $chip-md-background-color;
} }
@ -26,7 +25,7 @@
.chip-md > ion-icon { .chip-md > ion-icon {
background-color: $chip-md-icon-background-color; background-color: $chip-md-icon-background-color;
fill: $chip-md-icon-fill-color; color: $chip-md-icon-fill-color;
} }
.chip-md ion-avatar { .chip-md ion-avatar {
@ -48,7 +47,7 @@
.chip-md .icon-md-#{$color-name} { .chip-md .icon-md-#{$color-name} {
background-color: $color-base; background-color: $color-base;
fill: $color-contrast; color: $color-contrast;
} }
} }

15
packages/core/src/components/chip/chip.scss
View File

@ -7,19 +7,24 @@ ion-chip {
box-sizing: border-box; box-sizing: border-box;
display: inline-flex; display: inline-flex;
align-items: center;
align-self: center; align-self: center;
font-weight: normal; font-weight: normal;
vertical-align: middle; vertical-align: middle;
} }
ion-chip ion-icon { ion-chip > ion-icon {
@include text-align($chip-icon-text-align);
@include border-radius($chip-icon-border-radius); @include border-radius($chip-icon-border-radius);
display: inline-flex;
align-items: center;
justify-content: center;
width: $chip-icon-size; width: $chip-icon-size;
height: $chip-icon-size; height: $chip-icon-size;
}
font-size: $chip-icon-font-size;
line-height: $chip-icon-line-height; ion-chip ion-icon {
font-size: $chip-icon-font-size;
} }

3
packages/core/src/components/chip/chip.vars.scss
View File

@ -14,6 +14,3 @@ $chip-icon-size: 32px !default;
/// @prop - Font size of the icon in the chip /// @prop - Font size of the icon in the chip
$chip-icon-font-size: 18px !default; $chip-icon-font-size: 18px !default;
/// @prop - Line height of the icon in the chip
$chip-icon-line-height: 36px !default;

13
packages/core/src/components/fab-button/fab-button.scss
View File

@ -32,10 +32,8 @@
} }
.fab-button ion-icon { .fab-button ion-icon {
flex: 1;
font-size: 24px; font-size: 24px;
line-height: 18px; line-height: 1;
} }
// FAB Mini // FAB Mini
@ -66,15 +64,6 @@ ion-fab-button[mini] .fab-button {
transition-property: transform, opacity; transition-property: transform, opacity;
} }
.fab-button-close-icon .icon-inner {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
// FAB Animation // FAB Animation
// -------------------------------------------------- // --------------------------------------------------

47
packages/core/src/components/icon/test/basic/index.html
View File

@ -29,10 +29,10 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon name="home" is-active="true" slot="start"></ion-icon> <ion-icon name="home" slot="start"></ion-icon>
<ion-label> <ion-label>
<code> <code>
name="home" is-active="true" name="home"
</code> </code>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -47,19 +47,10 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon name="md-home" is-active="false" slot="start"></ion-icon> <ion-icon name="md-home" slot="start"></ion-icon>
<ion-label> <ion-label>
<code> <code>
name="md-home" is-active="false" name="md-home"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="ios-home" is-active="false" slot="start"></ion-icon>
<ion-label>
<code>
name="ios-home" is-active="false"
</code> </code>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -73,6 +64,15 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item>
<ion-icon name="ios-home" slot="end"></ion-icon>
<ion-label>
<code>
name="ios-home"
</code>
</ion-label>
</ion-item>
<ion-item> <ion-item>
<ion-icon name="ios-star-outline" slot="start"></ion-icon> <ion-icon name="ios-star-outline" slot="start"></ion-icon>
<ion-label> <ion-label>
@ -83,10 +83,10 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon name="ios-star-outline" is-active="false" slot="start"></ion-icon> <ion-icon name="IOS-STAR-OUTLINE" slot="end"></ion-icon>
<ion-label> <ion-label>
<code> <code>
name="ios-star-outline" is-active="false" name="IOS-STAR-OUTLINE"
</code> </code>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -119,19 +119,28 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon ios="md-color-filter" md="ios-color-filter" slot="start"></ion-icon> <ion-icon name="color-filter" slot="start"></ion-icon>
<ion-label> <ion-label>
<code> <code>
ios="md-color-filter" md="ios-color-filter" name="color-filter"
</code> </code>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon ios="md-color-filter" md="ios-color-filter" is-active="false" slot="start"></ion-icon> <ion-icon ios="ios-color-filter" md="md-color-filter" slot="start"></ion-icon>
<ion-label> <ion-label>
<code> <code>
ios="md-color-filter" md="ios-color-filter" is-active="false" ios="ios-color-filter" md="md-color-filter"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" slot="start"></ion-icon>
<ion-label>
<code>
ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER"
</code> </code>
</ion-label> </ion-label>
</ion-item> </ion-item>

5
packages/core/src/components/item/item.scss
View File

@ -96,3 +96,8 @@ ion-input.item {
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
} }
.item > ion-icon,
.item-inner > ion-icon {
font-size: 1.6em;
}

3
packages/core/src/components/range/range.scss
View File

@ -37,10 +37,7 @@ ion-range ion-label {
} }
ion-range ion-icon { ion-range ion-icon {
min-height: 24px;
font-size: 24px; font-size: 24px;
line-height: 1;
} }
ion-range ion-gesture, ion-range ion-gesture,