javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(icon) remove extra icon styles (#13793)

Browse Source 
* fix(action-sheet) remove extra icon styles

* fix(button) remove extra icon styles

* fix(fab-button) remove extra icon styles

* fix(range) remove extra icon styles

* fix(item) increase item icon size

* fix(chip) adjust icon styles

* fix(item) apply icon styles to item-inner
This commit is contained in:
Cam Wiegert
2018-01-12 15:22:50 -06:00
committed by GitHub
parent 2a4486440e
commit a658f08b88
16 changed files with 22 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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);
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;

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
$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;

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

@ -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 {

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
$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;

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

@ -34,11 +34,6 @@
opacity: $button-ios-opacity-hover;
}
.button-ios .icon {
fill: $button-ios-icon-fill-color;
}
// 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
$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;

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

@ -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
// --------------------------------------------------

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
$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;

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

@ -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;
}

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

@ -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;
}
}

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

@ -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;
}
}

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

@ -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;
}

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
$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 {
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
// --------------------------------------------------

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

@ -96,3 +96,8 @@ ion-input.item {
background: transparent;
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 {
min-height: 24px;
font-size: 24px;
line-height: 1;
}
ion-range ion-gesture,