Add material theme support

[alexberazouski]

Fix lumo issue #60
Fix lumo issue when custom and default buttons look distorted

---

This change is 

[jouni]

We are using unsupported and undocumented selectors in our own themes, which gives the wrong impression for our users (that it would be okay to rely on those). I’m talking about all the class selectors used here, like .cancel-button. We are using those in the Lumo theme as well 🙁

We should consider exposing more stylable parts for those if needed. Ideally, we could set those directly on the button elements, but that prevents from setting any flex properties on them. Not exactly sure what to do here.

Nit: would like to see PRs that focus on one issue at a time. Now it’s a bit odd, IMO, fix the Lumo theme in this same PR.

Otherwise looks good to me 👍

[jouni]

Fix lumo issue when custom and default buttons look distorted

I was wondering what this means. Can you share a screenshot what the distorted buttons look like?

[alexberazouski]

@jouni In the following case cancel is a default button and the rest are custom:

[alexberazouski]

Issue to remove the class css selectors: https://github.com/vaadin/vaadin-confirm-dialog/issues/66

[jouni]

@jouni In the following case cancel is a default button and the rest are custom

Yeah, that case is tricky with MD, because they don’t really have that in the specs.

[DiegoCardoso]

Reviewed 2 of 3 files at r1, 1 of 1 files at r3.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @jouni)

[alexberazouski]

Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @jouni)

---

theme/material/vaadin-confirm-dialog-styles.html, line 14 at r1 (raw file):

Previously, jouni (Jouni Koivuviita) wrote…

Actually, I looked at the specs wrong. I think 28px is fine after all.

Done.

---

theme/material/vaadin-confirm-dialog-styles.html, line 19 at r1 (raw file):

Previously, jouni (Jouni Koivuviita) wrote…

Would like to avoid this, and let the “Cancel” buttons be next to the main button, aligned to the right end of the footer, like they are in MD specs.

Note, that even though our own guidelines suggest placing the dismissive action at the other end of the footer, we don’t need to follow them in the Material theme, as it has its own guidelines to follow.

Done.

[alexberazouski]

Dismissed @jouni from 2 discussions.
Reviewable status: complete! all files reviewed, all discussions resolved