feat(checkbox): Add color attribute.

[mathebox]

Fixes #947

Do you any suggestions how improve setting the default value?
(src/lib/checkbox/checkbox.ts line 138)

[jelbourn]

It would be a little more concise as

.md-checkbox-indeterminate, .md-checkbox-checked {
  &.primary .md-checkbox-background {
    background: md-color($primary, 500);
  }

  ...
}

[mathebox]

Done if you meant &.md-primary instead of &.primary.
MdButton also uses the CSS classes md-primary, md-accent and md-warn.

[jelbourn]

I don't think these variables are necessary; you can use md-color directly where its needed.

[mathebox]

Done.

[jelbourn]

It would also be a little more concise as

.md-checkbox-focused {
  &.primary .md-ink-ripple {
    background: md-color($primary, 0.26);
  }
  ...
}

[mathebox]

Done if you meant &.md-primary instead of &.primary.
MdButton also uses the CSS classes md-primary, md-accent and md-warn.

[jelbourn]

Why is md-elevation-transition-property-value here? This was only meant to be used with elevation

[mathebox]

Here it's used in the same way. _button-base.scss

[jelbourn]

You can just say private _color: string = 'accent';

[mathebox]

Unfortunately that alone won't do the magic. The md-checkbox DOM element has to get the class md-accent. To achieve this you have the following options:

1. Add one of these lines to the constructor (All are somehow weird calls):
   • this.color = 'accent';
   • this._updateColor(this._color)
   • this._setElementColor(this._color, true)
   • this._renderer.setElementClass(this._elementRef.nativeElement, md-${this._color}, true);
2. Alternative way: Modify the theme css like this (Introduce a "base" color):

.md-checkbox-indeterminate, .md-checkbox-checked {
  .md-checkbox-background {
    background-color: md-color($accent, 500);
  }
  &.md-primary .md-checkbox-background {
    background-color: md-color($primary, 500);
  }
  ...
}

Which option do you think is the best? Have a missed an option?

[mathebox]

@jelbourn Any thoughts on this?

[jelbourn]

LGTM

I'm not sure we'll keep all of the color attributes in the long term (vs. preferring styling via theming), but this is good for now.

[jaibatrik]

Now that this is merged, how do I actually change the color of the checkbox? I have tried doing this -

<md-checkbox [checked]="(task.state == 'STATE_CLEARED')" color="red"></md-checkbox>

All it does is to add the mat-red class to md-checkbox element. I tried putting the following styles in my Component CSS -

.mat-red .mat-checkbox-background {
  background-color: red;
}

But the selectors get converted to .mat-red[_ngcontent-c7] .mat-checkbox-background[_ngcontent-c7].

I don't want to define global styles for this.

[willshowell]

@jaibatrik your color options are primary|accent|warn. See the docs

[jaibatrik]

Oh. But what if I want my checkbox to be colored red? Or any custom color? Is there any way to do it? Let's suppose none of primary, accent, and warn are red in my theme.

[willshowell]

In that case, global styles or the /deep/ selector (search for it on this page) should do it for you.

If you're still unable to get the override, make sure your selectors have a higher specificity than the original selector.

[jaibatrik]

Just so that others can know, I was able to achieve this by using the /deep/ selector and constructing the selector like the following -

.mat-red.mat-checkbox-checked /deep/ .mat-checkbox-background {
  background-color: red;
}

According to the docs, \deep\ will propagate to any depth of children components; but since the checkbox doesn't have any, I'll be safe here.

Thanks!

[angular-automatic-lock-bot]

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.}