Floating Label style not adjustable when input focused

[jeffreychan637]

In the paper-input-decorator, it is necessary to include the following lines in my CSS file to get the color of the floating label to change when the input field is focused.

paper-input-decorator[focused] /deep/ .floating-label,
paper-input-decorator[focused] /deep/ .label-text {
  /* floating label color when the input is focused */
  color: orange !important;
}

when based on the documentation, this should be sufficient:

paper-input-decorator[focused] /deep/ .floating-label .label-text {
    /* floating label color when the input is focused */
    color: orange;
}

Also, surprisingly, the important flag on it's own doesn't work:

paper-input-decorator[focused] /deep/ .floating-label .label-text {
    /* floating label color when the input is focused */
    color: orange !important;
}

It's necessary to actually retype "paper-input-decorator[foc..." again to get it to work. That in itself may be a whole other bug.

Based on my attempts to figure this out, it looks like the style set by the host overrides everything causing the second and third pieces of code above to not work.

[jnwarner]

Is there a method to get around this aside from changing the host style set?

[jeffreychan637]

The only way I was able to get around this issue was with this:

paper-input-decorator[focused] /deep/ .floating-label,
paper-input-decorator[focused] /deep/ .label-text {
  /* floating label color when the input is focused */
  color: orange !important;
}

Notice how it was necessary to type paper-input-decorator[focused] /deep/ twice.