Vuetify: [Bug Report] Data Table Progress bar overlaps table header border

[06b]

Versions and Environment

Vuetify: 1.1.10
Vue: 2.5.17
Browsers: Microsoft Edge, Google Chrome, Mozilla Firefox
OS: Windows 10

Steps to reproduce

Use a data-table and set the loading state to true.

Expected Behavior

The progress bar should appear as if it's not being overlaid over the data table header but appear as if it's part of the data table.

Actual Behavior

When using the progress bar on a data-table due to .v-progress-linear__background having an opacity applied to it, the border on the data table's header is visible.

Reproduction Link

https://codepen.io/anon/pen/RBqRdj

Other comments

Removing the property of top from v-progress-linear within _data-table.styl and changing the value of margin to 0 rather than 0 0 -2px appears to fix this issue.

Let me know if you want me to create a pull request.

[praveenpuglia]

Do you mean this is correct?

and this is wrong?

If that's what you mean then I don't think it's an issue. The loader is placed there by design.

[06b]

No, the first image you've attached would suggest completely removing top:2px and margin: 0 0 -2px;.

I'm suggesting removing only top:2px and changing margin: 0 0 -2px; to just margin: 0

I believe the following is wrong (if you look closely you can see the blue overlapping the border from the header)

and this would be correct:

[praveenpuglia]

Agreed. Will fix this.