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

text color md-fab and md-mini-fab is not the default-contrast color #2539

Closed
riankol opened this issue Jan 5, 2017 · 2 comments · Fixed by #2561
Closed

text color md-fab and md-mini-fab is not the default-contrast color #2539

riankol opened this issue Jan 5, 2017 · 2 comments · Fixed by #2561

Comments

@riankol
Copy link

riankol commented Jan 5, 2017

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The text color of a md-fab or md-mini-fab should be the default-contrast of the chosen theme accent color. For example when using the prebuilt the indigo-pink the default $accent is set to A200, so according to the palette the contrast A200 is white, so the text-color of the md-fab or md-mini-fab should be white against a pink background-color.

What is the current behavior?

The text-color is set to the current color (in my case grey).

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/LbeegL?p=preview
http://stackoverflow.com/questions/40478419/angular-material2-button-text-color

What is the use-case or motivation for changing an existing behavior?

readability

Which versions of Angular, Material, OS, browsers are affected?

I'm using angular-material 2.0.0-beta.1

Is there anything else we should know?

No

@riankol
Copy link
Author

riankol commented Jan 10, 2017

Even so, when I add a class in my custom-style.scss, the md-contast color is overwritten. This is my custom-style.scss:
`@import '../lib/@angular/material/core/theming/all-theme';

@include md-core();

$primary: md-palette($md-grey);
$accent: md-palette($md-light-blue, 700, 600, 800);

$theme: md-light-theme($primary, $accent);

.accent-text-color{
color: md-color($accent, 700);
}
.accent-background-color{
background-color: md-color($accent, 700);
color: md-contrast($accent,700);
}
.accent-border-color{
border-color: md-color($accent, 700);
}
.primary-background-color{
background-color: md-color($primary, 50);
}
.primary-border-color{
border-color: md-color($primary, 700);
}

md-list-item.zoekresultaat:hover{
background-color: md-color($accent, 700);
color: md-contrast($accent,700);
cursor: pointer;
}

@include angular-material-theme($theme);`

I can use all this classes in my whole application, but the contast color always is overwritten.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant