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

fix(icon): update icon color for svg

Browse Source
This commit is contained in:
Brandy Carney
2017-07-18 16:29:24 -04:00
parent 2db8320aaa
commit 4e52ace620
5 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/core/src/components/fab/fab.ios.scss
View File

@ -10,6 +10,9 @@ $fab-ios-background-color: color($colors-ios, primary) !d
/// @prop - Text color of the button /// @prop - Text color of the button
$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default; $fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default;
/// @prop - Color of the button icon
$fab-ios-icon-color: color-contrast($colors-ios, $fab-ios-background-color) !default;
/// @prop - Background color of the activated button /// @prop - Background color of the activated button
$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default; $fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default;
@ -53,6 +56,10 @@ $fab-ios-list-button-transition-delay: 10ms !default;
background-color: $fab-ios-list-button-background-color-activated; background-color: $fab-ios-list-button-background-color-activated;
} }
.fab-ios .icon {
fill: $fab-ios-icon-color;
}
// Generate iOS FAB colors // Generate iOS FAB colors
// -------------------------------------------------- // --------------------------------------------------
@ -68,6 +75,10 @@ $fab-ios-list-button-transition-delay: 10ms !default;
background-color: $bg-color; background-color: $bg-color;
} }
.fab-ios-#{$color-name} .icon {
fill: $fg-color;
}
.fab-ios-#{$color-name}.activated { .fab-ios-#{$color-name}.activated {
background-color: $bg-color-activated; background-color: $bg-color-activated;
} }

2
packages/core/src/components/icon/icon.wp.scss
View File

@ -11,7 +11,7 @@
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) { @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
.icon-wp-#{$color-name} { .icon-wp-#{$color-name} {
color: $color-base; fill: $color-base;
} }
} }

11
packages/core/src/components/item-sliding/item-sliding.ios.scss
View File

@ -17,6 +17,9 @@ $item-ios-sliding-button-background-color: color($colors-ios, primary) !defaul
/// @prop - Text color of the sliding option button /// @prop - Text color of the sliding option button
$item-ios-sliding-button-text-color: color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default; $item-ios-sliding-button-text-color: color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default;
/// @prop - color of the sliding option button icon
$item-ios-sliding-button-icon-color: color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default;
.list-ios ion-item-sliding { .list-ios ion-item-sliding {
background-color: $item-ios-sliding-content-background; background-color: $item-ios-sliding-content-background;
@ -32,6 +35,10 @@ $item-ios-sliding-button-text-color: color-contrast($colors-ios, $item-i
background-color: $item-ios-sliding-button-background-color; background-color: $item-ios-sliding-button-background-color;
} }
.item-option-button-ios .icon {
fill: $item-ios-sliding-button-icon-color;
}
// iOS No Lines List // iOS No Lines List
// -------------------------------------------------- // --------------------------------------------------
@ -51,4 +58,8 @@ $item-ios-sliding-button-text-color: color-contrast($colors-ios, $item-i
background-color: $color-base; background-color: $color-base;
} }
.item-option-button-ios-#{$color-name} .icon {
fill: $color-contrast;
}
} }

11
packages/core/src/components/item-sliding/item-sliding.md.scss
View File

@ -17,6 +17,9 @@ $item-md-sliding-button-background-color: color($colors-md, primary) !default
/// @prop - Text color of the sliding option button /// @prop - Text color of the sliding option button
$item-md-sliding-button-text-color: color-contrast($colors-md, $item-md-sliding-button-background-color) !default; $item-md-sliding-button-text-color: color-contrast($colors-md, $item-md-sliding-button-background-color) !default;
/// @prop - color of the sliding option button icon
$item-md-sliding-button-icon-color: color-contrast($colors-md, $item-md-sliding-button-background-color) !default;
.list-md ion-item-sliding { .list-md ion-item-sliding {
background-color: $item-md-sliding-content-background; background-color: $item-md-sliding-content-background;
@ -32,6 +35,10 @@ $item-md-sliding-button-text-color: color-contrast($colors-md, $item-md
background-color: $item-md-sliding-button-background-color; background-color: $item-md-sliding-button-background-color;
} }
.item-option-button-md .icon {
fill: $item-md-sliding-button-icon-color;
}
// Material Design No Lines List // Material Design No Lines List
// -------------------------------------------------- // --------------------------------------------------
@ -50,4 +57,8 @@ $item-md-sliding-button-text-color: color-contrast($colors-md, $item-md
background-color: $color-base; background-color: $color-base;
} }
.item-option-button-md-#{$color-name} .icon {
fill: $color-contrast;
}
} }

10
packages/core/src/components/item-sliding/item-sliding.wp.scss
View File

@ -17,6 +17,9 @@ $item-wp-sliding-button-background-color: color($colors-wp, primary) !default
/// @prop - Text color of the sliding option button /// @prop - Text color of the sliding option button
$item-wp-sliding-button-text-color: color-contrast($colors-wp, $item-wp-sliding-button-background-color) !default; $item-wp-sliding-button-text-color: color-contrast($colors-wp, $item-wp-sliding-button-background-color) !default;
/// @prop - Color of the sliding option button icon
$item-wp-sliding-button-icon-color: color-contrast($colors-wp, $item-wp-sliding-button-background-color) !default;
.list-wp ion-item-sliding { .list-wp ion-item-sliding {
background-color: $item-wp-sliding-content-background; background-color: $item-wp-sliding-content-background;
@ -32,6 +35,9 @@ $item-wp-sliding-button-text-color: color-contrast($colors-wp, $item-wp
background-color: $item-wp-sliding-button-background-color; background-color: $item-wp-sliding-button-background-color;
} }
.item-option-button-wp .icon {
fill: $item-wp-sliding-button-icon-color;
}
// Windows No Lines List // Windows No Lines List
// -------------------------------------------------- // --------------------------------------------------
@ -51,4 +57,8 @@ $item-wp-sliding-button-text-color: color-contrast($colors-wp, $item-wp
background-color: $color-base; background-color: $color-base;
} }
.item-option-button-wp-#{$color-name} .icon {
fill: $color-contrast;
}
} }