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

fix(chip-button): use the correct colors for the icons and buttons

Browse Source
This commit is contained in:
Brandy Carney
2018-02-13 18:44:38 -05:00
parent 4305a5e346
commit 89d4e2db22
4 changed files with 16 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/core/src/components/chip-button/chip-button.ios.scss
View File

@ -5,13 +5,10 @@
// --------------------------------------------------
.chip-button-ios {
color: $chip-button-ios-text-color;
background-color: $chip-button-ios-background-color;
}
.chip-button-ios .icon {
fill: $chip-button-ios-icon-fill-color;
}
// iOS Clear Chip Button
// --------------------------------------------------
@ -21,10 +18,6 @@
background-color: $chip-button-ios-clear-background-color;
}
.chip-button-clear-ios .icon {
fill: $chip-button-ios-clear-icon-fill-color;
}
// Generate iOS Chip Button Colors
// --------------------------------------------------
@ -36,19 +29,11 @@
.chip-button-ios-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
.icon {
fill: $color-contrast;
}
}
.chip-ios-#{$color-name} .chip-button-ios {
color: $color-base;
background-color: $color-contrast;
.icon {
fill: $color-base;
}
}
// Clear Chip Buttons
@ -57,18 +42,10 @@
.chip-button-clear-ios-#{$color-name} {
color: $color-base;
background-color: transparent;
.icon {
fill: $color-base;
}
}
.chip-ios-#{$color-name} .chip-button-clear-ios {
color: $color-contrast;
background-color: transparent;
.icon {
fill: $color-contrast;
}
}
}

4
packages/core/src/components/chip-button/chip-button.ios.vars.scss
View File

@ -6,8 +6,8 @@
/// @prop - Background color of the chip button
$chip-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Fill color of the icon in the chip button
$chip-button-ios-icon-fill-color: ion-color($colors-ios, $chip-button-ios-background-color, contrast, ios) !default;
/// @prop - Text color of the chip button
$chip-button-ios-text-color: ion-color($colors-ios, $chip-button-ios-background-color, contrast, ios) !default;
/// @prop - Background color of the clear chip button
$chip-button-ios-clear-background-color: transparent !default;

23
packages/core/src/components/chip-button/chip-button.md.scss
View File

@ -5,13 +5,10 @@
// --------------------------------------------------
.chip-button-md {
color: $chip-button-md-text-color;
background-color: $chip-button-md-background-color;
}
.chip-button-md .icon {
fill: $chip-button-md-icon-fill-color;
}
// Material Design Clear Chip Button
// --------------------------------------------------
@ -21,10 +18,6 @@
background-color: $chip-button-md-clear-background-color;
}
.chip-button-clear-md .icon {
fill: $chip-button-md-clear-icon-fill-color;
}
// Generate Material Design Chip Button Colors
// --------------------------------------------------
@ -38,15 +31,21 @@
background-color: $color-base;
}
.chip-button-md-#{$color-name} .icon {
fill: $color-contrast;
.chip-md-#{$color-name} .chip-button-md {
color: $color-base;
background-color: $color-contrast;
}
// Clear Chip Buttons
// --------------------------------------------------
.chip-button-clear-md-#{$color-name} {
color: $color-base;
background-color: transparent;
}
.chip-button-clear-md-#{$color-name} .icon {
fill: $color-base;
.chip-md-#{$color-name} .chip-button-clear-md {
color: $color-contrast;
background-color: transparent;
}
}

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

@ -6,8 +6,8 @@
/// @prop - Background color of the chip button
$chip-button-md-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Fill color of the icon in the chip button
$chip-button-md-icon-fill-color: ion-color($colors-md, $chip-button-md-background-color, contrast, md) !default;
/// @prop - Text color of the chip button
$chip-button-md-text-color: ion-color($colors-md, $chip-button-md-background-color, contrast, md) !default;
/// @prop - Background color of the clear chip button
$chip-button-md-clear-background-color: transparent !default;