They are, by the CSS selector you use in your styling. You can touch every element inside a card if you use the correct selector.
Example - using red as a class name on a text-input to set the input elements' background colour light red and the label elements' foreground colour red...
Any card with red class and containing a label or input
.red label {
color: red !important;
}
.red input {
background-color: #e3bfbf8c;
}
To be more specific and only target ui-text-input labels and inputs ...
.nr-dashboard-textinput.red label {
color: red !important;
}
.nr-dashboard-textinput.red input {
background-color: #e3bfbf8c;
}
Lastly, to be ultra specific (note how the !important hack is not needed now)...
md-card.nr-dashboard-textinput.red > md-input-container.md-block > label {
color: red;
}
md-card.nr-dashboard-textinput.red > md-input-container.md-block > input {
background-color: #e3bfbf8c;
}
The thing to realise is how would the dashboard style elements without its own classes? So to override them we need to be specific. The new class field permits you to target groups of elements (thus permitting consistent styles across multiple widgets) but you still have to target the things to style.
Lastly, to be able to use a simple single class name to override specific parts, every style-able element inside the card would need its own class entry and its own input on the editor to allow you to set a class against each internal part. e.g. a button is not just a button - there is a ui-icon element, a span and a div nested inside it.
Alternatively: If instead of putting the class into the cards class list (as we do now) we instead put the class on the button element - you still wouldnt be accessing the "visually styled" parts (which are the icon, span and div). And you wouldnt be able to style the parent container(s) either.
I do agree you need a level of knowledge as to what is inside the card (to be able to target them) but that goes with the territory. What may be beneficial, to help others, would be to put together a list of selectors that will affect what part of a widget.
something like...
| widget | element | selector |
|---|---|---|
| any card | md-card | md-card.YOUR-CLASS-HERE |
| text input | label | md-card.nr-dashboard-textinput.YOUR-CLASS-HERE > md-input-container.md-block > label |
| text input | input | md-card.nr-dashboard-textinput.YOUR-CLASS-HERE > md-input-container.md-block > input |
| etc | etc | etc |
Final tip: you can set multiple classes to combine styles e.g. blue-card bold-p-label underlined-label would allow you to combine 3 sets of styling
