Material: Namespace Angular Material CSS

[naomiblack]

We've run into some issues from our early adopters over CSS style collisions. Specifically, globally defined styles like display: block in the case below are applied to all input elements. For apps that include other stylesheets, this is problematic.

``` textarea,
input[type="text"],
... {
display: block;
border-width: 0 0 1px 0;
padding-top:2px;
line-height: $tff-line-height;
...
}

(from `_textField.scss`)

As a best practice, we should not apply global styles to any standard tags (including input, button, textarea, etc), but rather provide classes, e.g.  input.material-input, button.material-button. Or at least have them namespaced, or scoped somehow, e.g.:

.material-ui input {}
.material-ui button {}

Re-defining box-sizing is particularly bad because it's not enough to just scope that like this:

.material-ui * { box-sizing: border-box }

We should also provide some sort of cancelling rule, to cover cases (for example) where users find themselves using widgets inside blocks which have .material-ui applied to them. E.g.

.material-ui .no-material-ui * {box-sizing: initial}
```

[naomiblack]

@ThomasBurleson can you assess effort? I think this is important to do in 0.5 as it's potentially another significant breaking change.

[ThomasBurleson]

@rschmukler Let's assess how much effort this is to be included in the Theme merge.
I would love to have this already finished (as part of Theme) before we close 0.5.

[naomiblack]

@ThomasBurleson is this ok to close now, or is there more work to do post-0.5?

[ThomasBurleson]

@naomiblack - Now TextFields styles have been better namespaced, I still need to check all the other components. So let's leave open a little longer.

[ryan-boder]

I see this issue was addressed but I don't see how to namespace or scope angular md styles. The styles are being applied globally to my page. How can I limit md styles to just within my ng app without affecting the surrounding page?