PolymerElements / paper-input

A Material Design text field
https://www.webcomponents.org/element/PolymerElements/paper-input
130 stars 159 forks source link

Paper input container mixin not applying #613

Closed watsab closed 6 years ago

watsab commented 6 years ago

Hi! I've got an issue with a mixin that is not applied and I guess it's linked to a css rule that may need some change.

Here's the style:

:host {
  --input-border: {
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    border: 1px solid var(--input-border-color);
    box-sizing: border-box;
  };

  --error-color: #ec2c45;
  --focus-color: #4296b4;
}

paper-input  {
  --paper-input-container-input: {
      font-size: var(--input-font-size);
      display: block;
      background-color: #ffffff;
      color: var(--primary-text-color);
      height: var(--input-height);
      padding-left: 2rem;
      @apply --input-border;
  };
  --paper-input-container-input-focus: {
    border-color: var(--focus-color);
  };
  --paper-input-container-input-invalid: {
    border-color: var(--error-color);
  };
}

The --paper-input-container-input is actually applied but when the input is invalid or focused, the border color is not applied as I would expect. My guess is because of the following css rule:

.input-content.focused ::slotted(input),
.input-content.focused ::slotted(textarea),
.input-content.focused ::slotted(iron-autogrow-textarea),
.input-content.focused ::slotted(.paper-input-input) {
  @apply --paper-input-container-input-focus;
}

In v2 the input is actually surrounded by an iron-input, and that would be why the mixin is not applied although I don't understand why the mixin --paper-input-container-input is applied in the first place and not --paper-input-container-input-focus or --paper-input-container-input-invalid.

Thanks!

notwaldorf commented 6 years ago

Fixed in https://github.com/PolymerElements/paper-input/pull/639