New way target elements and css

[balthazar]

Instead of using some css wildcards, use a common class to style the elements and something to distinguish multiple editors on the same page.

Suggestion from @chovy at #6.

[ralyodio]

you could use a data attribute data-suffix="{{suffix}}" or just class="mw-editor mw-{{suffix}}"

[balthazar]

Be able to get the good css and the link with the other elements only with one class was cool to me, but seems a little tricky after when we have to change the stylish.

Will go for a general class to apply the css, but I'm not sure with the suffix attribute, that was okay since it was also used to suffix the class, but now I don't think it's really appropriate.

[staxmanade]

Would be nice if there was an easier way to override the css background color - on a white background page the dark background markdown control is less than ideal.

I'm using the following to override the colors, but would be interested in a cleaner implementation.

Any thoughts?

/* override ng-markdown background colors */
[class^="wmd-input"], [class*=" wmd-input"] {
  background: white;
}
[class^="wmd-prompt-dialog"], [class*=" wmd-prompt-dialog"] {
  background-color: white;
}

[balthazar]

Yep, that's not very clean when you want to override every editor, I give you that.

I thing we will keep the current usage to target the editors, previews and bars but add some global classes like wmd-preview, wmd-input; and maybe some pre-configured themes would be great too