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

Paper input container mixin not applying #613

Closed
watsab opened this issue Jan 29, 2018 · 1 comment
Closed

Paper input container mixin not applying #613

watsab opened this issue Jan 29, 2018 · 1 comment

Comments

@watsab
Copy link

watsab commented Jan 29, 2018

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
Copy link
Contributor

Fixed in #639

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants