diff --git a/BREAKING.md b/BREAKING.md index b5c35f9e70..20c5edf1f6 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -23,7 +23,6 @@ A list of the breaking changes introduced in Ionic Angular v4. - [Select](#select) - [Text/Typography](#text-typography) - [Toolbar](#toolbar) -- [Sass](#sass) ## 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 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. | | `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`. | - -## 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 diff --git a/packages/core/package-lock.json b/packages/core/package-lock.json index b9bb61dca2..55b9cd33e1 100644 --- a/packages/core/package-lock.json +++ b/packages/core/package-lock.json @@ -3484,9 +3484,9 @@ "dev": true }, "ionicons": { - "version": "4.0.0-11", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.0.0-11.tgz", - "integrity": "sha512-AoK+gnAE9ABLI0/swX5By8SXxU8AMpX2vpGMr7/lbc6emPhSV/ESfYMMa88a65tsMp8yG+zGOJI/LSwY6YeAQA==", + "version": "4.0.0-12", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.0.0-12.tgz", + "integrity": "sha512-yPlHH82F93N64aNLokRtJq25QncCgSWIhSMHFxXt/Ff0DJmrqQLo8tst9QxCYNnqQQRsqfLHh76psea6vzeD6g==", "dev": true }, "is-arrayish": { diff --git a/packages/core/package.json b/packages/core/package.json index a67e3d7c56..fba347c9d8 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -16,7 +16,7 @@ "chai": "^4.1.2", "chromedriver": "^2.33.2", "glob": "^7.1.2", - "ionicons": "4.0.0-11", + "ionicons": "4.0.0-12", "jest": "^21.2.1", "mocha": "^4.0.1", "np": "^2.17.0", diff --git a/packages/core/scripts/e2e/index.js b/packages/core/scripts/e2e/index.js index a3b35d6c3b..bb2868b79d 100644 --- a/packages/core/scripts/e2e/index.js +++ b/packages/core/scripts/e2e/index.js @@ -86,7 +86,7 @@ function getTotalTests(suite) { async function run() { // TODO look into removing chrome startup from the timeout const mocha = new Mocha({ - timeout: 10000, + timeout: 5000, slow: 2000 }); diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss index f299b1b4e3..ed50a1d5eb 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.scss @@ -98,14 +98,9 @@ @include padding-horizontal(null, $action-sheet-ios-button-icon-padding-right); - width: $action-sheet-ios-icon-width; height: $action-sheet-ios-button-icon-height; 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 { @@ -129,10 +124,6 @@ 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 { font-weight: $action-sheet-ios-button-cancel-font-weight; background: $action-sheet-ios-button-cancel-background; diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss index 1c9111ac18..22f86dc275 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -87,9 +87,6 @@ $action-sheet-ios-button-padding: 18px !default; /// @prop - Text color of the action sheet button $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 $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 $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 $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 $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 $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 $action-sheet-ios-button-cancel-background: #fff !default; diff --git a/packages/core/src/components/action-sheet/action-sheet.md.scss b/packages/core/src/components/action-sheet/action-sheet.md.scss index 25c7110011..08d24f4181 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.scss @@ -68,14 +68,7 @@ .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 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; - vertical-align: $action-sheet-md-icon-vertical-align; } .action-sheet-md .action-sheet-group .button-inner { diff --git a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss index cdfb8ce7bc..9d6e3a72d1 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -81,15 +81,6 @@ $action-sheet-md-button-background-activated: #f1f1f1 !default; /// @prop - Font size of the icon in the action sheet button $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 $action-sheet-md-icon-margin-top: 0 !default; diff --git a/packages/core/src/components/button/button.ios.scss b/packages/core/src/components/button/button.ios.scss index 74333a0f26..5c4b91ccc5 100644 --- a/packages/core/src/components/button/button.ios.scss +++ b/packages/core/src/components/button/button.ios.scss @@ -34,11 +34,6 @@ opacity: $button-ios-opacity-hover; } -.button-ios .icon { - fill: $button-ios-icon-fill-color; -} - - // iOS Default Button Color Mixin // -------------------------------------------------- diff --git a/packages/core/src/components/button/button.ios.vars.scss b/packages/core/src/components/button/button.ios.vars.scss index a21bef75db..3fc98079cb 100644 --- a/packages/core/src/components/button/button.ios.vars.scss +++ b/packages/core/src/components/button/button.ios.vars.scss @@ -39,9 +39,6 @@ $button-ios-border-radius: 4px !default; /// @prop - Font size of the button text $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 $button-ios-background-color: color($colors-ios, primary) !default; diff --git a/packages/core/src/components/button/button.md.scss b/packages/core/src/components/button/button.md.scss index df872d0988..de40eaf7b1 100644 --- a/packages/core/src/components/button/button.md.scss +++ b/packages/core/src/components/button/button.md.scss @@ -46,10 +46,6 @@ background-color: $button-md-text-color; } -.button-md .icon { - fill: $button-md-icon-fill-color; -} - // Material Design Default Button Color Mixin // -------------------------------------------------- diff --git a/packages/core/src/components/button/button.md.vars.scss b/packages/core/src/components/button/button.md.vars.scss index 223a87df28..d66584f089 100644 --- a/packages/core/src/components/button/button.md.vars.scss +++ b/packages/core/src/components/button/button.md.vars.scss @@ -45,9 +45,6 @@ $button-md-font-weight: 500 !default; /// @prop - Capitalization of the button text $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 $button-md-background-color: color($colors-md, primary) !default; diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss index bc7b60c61f..db9ba77e4a 100644 --- a/packages/core/src/components/button/button.scss +++ b/packages/core/src/components/button/button.scss @@ -107,8 +107,7 @@ button[disabled], // -------------------------------------------------- .button ion-icon { - width: 1.4em; - height: 1.4em; + font-size: 1.4em; pointer-events: none; } @@ -122,6 +121,5 @@ button[disabled], } .button ion-icon[slot="icon-only"] { - width: 1.8em; - height: 1.8em; + font-size: 1.8em; } diff --git a/packages/core/src/components/chip/chip.ios.scss b/packages/core/src/components/chip/chip.ios.scss index f8141c98d2..816d9d1aeb 100644 --- a/packages/core/src/components/chip/chip.ios.scss +++ b/packages/core/src/components/chip/chip.ios.scss @@ -14,7 +14,6 @@ font-family: $chip-ios-font-family; font-size: $chip-ios-font-size; - line-height: $chip-ios-height; color: $chip-ios-text-color; background: $chip-ios-background-color; } @@ -26,7 +25,7 @@ .chip-ios > ion-icon { background-color: $chip-ios-icon-background-color; - fill: $chip-ios-icon-fill-color; + color: $chip-ios-icon-fill-color; } .chip-ios ion-avatar { @@ -48,7 +47,7 @@ .chip-ios .icon-ios-#{$color-name} { background-color: $color-base; - fill: $color-contrast; + color: $color-contrast; } } diff --git a/packages/core/src/components/chip/chip.md.scss b/packages/core/src/components/chip/chip.md.scss index f0ed260f81..20b864880d 100644 --- a/packages/core/src/components/chip/chip.md.scss +++ b/packages/core/src/components/chip/chip.md.scss @@ -14,7 +14,6 @@ font-family: $chip-md-font-family; font-size: $chip-md-font-size; - line-height: $chip-md-height; color: $chip-md-text-color; background: $chip-md-background-color; } @@ -26,7 +25,7 @@ .chip-md > ion-icon { background-color: $chip-md-icon-background-color; - fill: $chip-md-icon-fill-color; + color: $chip-md-icon-fill-color; } .chip-md ion-avatar { @@ -48,7 +47,7 @@ .chip-md .icon-md-#{$color-name} { background-color: $color-base; - fill: $color-contrast; + color: $color-contrast; } } diff --git a/packages/core/src/components/chip/chip.scss b/packages/core/src/components/chip/chip.scss index c919fb1bee..1a8ba2a0cc 100644 --- a/packages/core/src/components/chip/chip.scss +++ b/packages/core/src/components/chip/chip.scss @@ -7,19 +7,24 @@ ion-chip { box-sizing: border-box; display: inline-flex; + align-items: center; align-self: center; font-weight: normal; vertical-align: middle; } -ion-chip ion-icon { - @include text-align($chip-icon-text-align); +ion-chip > ion-icon { @include border-radius($chip-icon-border-radius); + display: inline-flex; + align-items: center; + justify-content: center; + width: $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; } diff --git a/packages/core/src/components/chip/chip.vars.scss b/packages/core/src/components/chip/chip.vars.scss index 886543d653..94b1ae50a1 100644 --- a/packages/core/src/components/chip/chip.vars.scss +++ b/packages/core/src/components/chip/chip.vars.scss @@ -14,6 +14,3 @@ $chip-icon-size: 32px !default; /// @prop - Font size of the icon in the chip $chip-icon-font-size: 18px !default; - -/// @prop - Line height of the icon in the chip -$chip-icon-line-height: 36px !default; diff --git a/packages/core/src/components/fab-button/fab-button.scss b/packages/core/src/components/fab-button/fab-button.scss index 70cab936a8..8dfbe0bd81 100755 --- a/packages/core/src/components/fab-button/fab-button.scss +++ b/packages/core/src/components/fab-button/fab-button.scss @@ -32,10 +32,8 @@ } .fab-button ion-icon { - flex: 1; - font-size: 24px; - line-height: 18px; + line-height: 1; } // FAB Mini @@ -66,15 +64,6 @@ ion-fab-button[mini] .fab-button { transition-property: transform, opacity; } -.fab-button-close-icon .icon-inner { - display: flex; - - align-items: center; - justify-content: center; - - height: 100%; -} - // FAB Animation // -------------------------------------------------- diff --git a/packages/core/src/components/icon/test/basic/index.html b/packages/core/src/components/icon/test/basic/index.html index f4f020b8b6..abeb5975af 100644 --- a/packages/core/src/components/icon/test/basic/index.html +++ b/packages/core/src/components/icon/test/basic/index.html @@ -29,10 +29,10 @@ - + - name="home" is-active="true" + name="home" @@ -47,19 +47,10 @@ - + - name="md-home" is-active="false" - - - - - - - - - name="ios-home" is-active="false" + name="md-home" @@ -73,6 +64,15 @@ + + + + + name="ios-home" + + + + @@ -83,10 +83,10 @@ - + - name="ios-star-outline" is-active="false" + name="IOS-STAR-OUTLINE" @@ -119,19 +119,28 @@ - + - ios="md-color-filter" md="ios-color-filter" + name="color-filter" - + - ios="md-color-filter" md="ios-color-filter" is-active="false" + ios="ios-color-filter" md="md-color-filter" + + + + + + + + + ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" diff --git a/packages/core/src/components/item/item.scss b/packages/core/src/components/item/item.scss index 2b706ab698..d407430a65 100644 --- a/packages/core/src/components/item/item.scss +++ b/packages/core/src/components/item/item.scss @@ -96,3 +96,8 @@ ion-input.item { background: transparent; cursor: pointer; } + +.item > ion-icon, +.item-inner > ion-icon { + font-size: 1.6em; +} diff --git a/packages/core/src/components/range/range.scss b/packages/core/src/components/range/range.scss index 8b363372ab..98c688e474 100644 --- a/packages/core/src/components/range/range.scss +++ b/packages/core/src/components/range/range.scss @@ -37,10 +37,7 @@ ion-range ion-label { } ion-range ion-icon { - min-height: 24px; - font-size: 24px; - line-height: 1; } ion-range ion-gesture,