Mixin --paper-input-container-underline applied globally

[DavidHenri008]

Description

I wanted to remove the underline of a paper-input to make it look more like a read-only component. So I added a css class named "nounderline" to my paper-input and I defined the class as follow:

CSS style

.nounderline {
        --paper-input-container-underline: {
          border: none;
        }
        ;
 }

HTML

<paper-input class="" label="Original"></paper-input>
<paper-input class="nounderline" label="No Underline"></paper-input>

Expected outcome

Only my paper-input with my class "nounderline" should hide the underline.

Actual outcome

All my paper-input components has no bottom border anymore. I don't understand why suddenly the mixin --paper-input-container-underline is applied to all my paper-input even the one without the css class "nounderline".

Browsers Affected

• [x] Chrome (tested only on Chrome)
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[madiganz]

I had the same problem. Did not work:

--paper-input-container-underline: {
    border-color: transparent;
}

worked

--paper-input-container-underline: {
    display: none;
}

Seems like it is something specific to changing the border style.

[garcus]

I can confirm what DavidHenri008 is saying. It worked before I upgraded my project to 2.x. Now it seems the mixin is applied to ALL input-elements regardless of the CSS-selector.

[notwaldorf]

Hmm confirmed, here's a jsbin with repro steps: http://jsbin.com/hobuveviro/1/edit?html,output

@azakus is this a shady CSS bug?

[myfrom]

I got border-color: color to work normally but to get border: none working you either need !important or modify border-bottom instead.

I think it's because style declares border-bottom and if you've got eg. border:none; border-bottom: 1px solid black; it will still paint the bottom border AFAIK. So not really a bug but would need to be pointed out in docs IMO.