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

fix(toolbar): use the correct contrast color for MD toolbar

Browse Source 
fixes #11848
This commit is contained in:
Brandy Carney
2017-05-30 11:25:29 -04:00
parent e354f21936
commit 041689b5f5
3 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
scripts/e2e/variables.scss
View File

@ -31,7 +31,15 @@ $colors: (
light: #f4f4f4, light: #f4f4f4,
dark: #222, dark: #222,
vibrant: rebeccapurple, vibrant: rebeccapurple,
bright: #ffc125 bright: #ffc125,
greyYellow: (
base:#49606e,
contrast:#fbb636
),
greyWhite: (
base:#49606e,
contrast:#fff
)
); );

7
src/components/toolbar/test/colors/pages/root-page/root-page.html
View File

@ -199,4 +199,11 @@
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
</ion-toolbar> </ion-toolbar>
<ion-toolbar color="greyYellow">
<ion-title>Grey Yellow</ion-title>
</ion-toolbar>
<ion-toolbar color="greyWhite">
<ion-title>Grey White</ion-title>
</ion-toolbar>
</ion-content> </ion-content>

7
src/components/toolbar/toolbar.md.scss
View File

@ -116,7 +116,6 @@ $toolbar-button-md-strong-font-weight: bold !default;
@mixin md-toolbar-theme($color-name, $color-base, $color-contrast) { @mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
.toolbar-md-#{$color-name} { .toolbar-md-#{$color-name} {
$fg-color: color-contrast($colors-md, $color-base, md);
.toolbar-background-md { .toolbar-background-md {
background: $color-base; background: $color-base;
@ -126,19 +125,19 @@ $toolbar-button-md-strong-font-weight: bold !default;
.bar-button-default-md, .bar-button-default-md,
.bar-button-outline-md, .bar-button-outline-md,
.toolbar-title-md { .toolbar-title-md {
color: $fg-color; color: $color-contrast;
} }
.bar-button-clear-md, .bar-button-clear-md,
.bar-button-default-md, .bar-button-default-md,
.bar-button-outline-md { .bar-button-outline-md {
.button-effect { .button-effect {
background-color: $fg-color; background-color: $color-contrast;
} }
} }
.bar-button-outline-md { .bar-button-outline-md {
border-color: $fg-color; border-color: $color-contrast;
} }
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) { @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {