Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toolbar button color attribute doesn't work if the toolbar has a lower value color that the button #8566

Closed
Loutrinos opened this issue Oct 7, 2016 · 3 comments
Assignees
Milestone

Comments

@Loutrinos
Copy link

Buttons inside ion-toolbar will not have their color changed if the parent has a lower value of color.

Short description of the problem:

when adding the color="primary" to a button inside a toolbar with color="primary" the color assigned to the button is not the primary.

What behavior are you expecting?

To use the color attributes on the toolbar buttons abstract from the toolbar color value

Steps to reproduce:

  1. Create a page with ion-toolbar and set color="secondary"
  2. Add a ion-button inside the toolbar and set color="primary"
  3. You should see a white texted button and not a primary colored one

Which Ionic Version?
Ionic 2.0

The problem occurs cause of the way the toolbar colors and toolbar button colors are being generated:
https://github.com/driftyco/ionic/blob/master/src/components/toolbar/toolbar.ios.scss#L349

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
  @include ios-toolbar-theme($color-name, $color-base, $color-contrast);
  @include ios-bar-button-default($color-name, $color-base, $color-contrast);
  @include ios-bar-button-outline($color-name, $color-base, $color-contrast);
  @include ios-bar-button-solid($color-name, $color-base, $color-contrast);
}

The above code should be split to 2 loops to cater for the problem

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
  @include ios-bar-button-default($color-name, $color-base, $color-contrast);
  @include ios-bar-button-outline($color-name, $color-base, $color-contrast);
  @include ios-bar-button-solid($color-name, $color-base, $color-contrast);
}

@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
  @include ios-toolbar-theme($color-name, $color-base, $color-contrast);
}
@Loutrinos
Copy link
Author

@brandyscarney is there any feedback about this issue?

@brandyscarney brandyscarney added this to the 2.0.0-rc.2 milestone Oct 17, 2016
@brandyscarney
Copy link
Member

@Loutrinos I haven't had a chance to look into this yet but I added it to a milestone to look at. Thanks!

@brandyscarney
Copy link
Member

Thanks for the issue! I have fixed this and it will be in the rc.3 release. I released a nightly version if you'd like to try it out sooner: [email protected]

npm install --save ionic-angular@nightly

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 9, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants