please add mixin for .buttons

[davidmaxwaterman]

I want to move the buttons to the left hand side, but there is no mixin for the buttons like there is for h2.

Please consider adding a mixin to the end of the .buttons rule.

https://github.com/PolymerElements/paper-dialog-behavior/blob/master/paper-dialog-shared-styles.html#L63

[valdrinkoshi]

.buttons is a distributed element, so you should be able to style it from the host where those are defined. e.g.

<custom-style><style>
  .buttons {
    @apply --layout-start-justified;
  }
</style></custom-style>
<paper-dialog>
  <h2>dialog</h2>
  <p>Hello world</p>
  <div class="buttons">
    <button dialog-dismiss>dismiss</button>
    <button dialog-confirm>confirm</button>
  </div>
</paper-dialog>

Alternatively, you can avoid using the .buttons class and style the div yourself.

[davidmaxwaterman]

I tried styling them, but my styles were overridden by the ones in the element. I ended up using ! important. Please add a mixin.

[davidmaxwaterman]

Perhaps I should mention I'm using 1.9.

I also notice that other elements that are distributed have mixins, so why not this one?

[valdrinkoshi]

Strange, you shouldn't require to use !important, here's a working example (try commenting the <base> to switch from polymer 1.9 to 2.0) http://jsbin.com/yisigon/2/edit?html,output Tested on FF and Chrome, e.g.

Sure we can add a mixin, but I think it looks weird to style distributed content through a mixin, as you can style it normally through css. e.g. this

.buttons {
  background-color: orange;
}

is much cleaner than this

paper-dialog {
  --paper-dialog-buttons: {
    background-color: orange;
  };
}

WDYT?

[davidmaxwaterman]

That jsbin does do what I want, but it doesn't for me. When I examine paper-dialog in dev tools, I see that the paper-dialog-behavior style takes precedence. Here is it with '!important':

Here it is without !important:

Things of note:

1. I am using paper-dialog within an element, while your jsbin is in the main doc.
3. I also have to 'hard code' justify-content: flex-start in order to add '!important' - not especially relevant since, if it worked for me as you showed, then I could also use the --layout mixin.
4. I'm using polymer-dialog#1.1.0 and paper-dialog-behavior#1.2.8
5. Google Chrome | 60.0.3112.90 (Official Build) (64-bit) (cohort: Stable)
6. Are your arguments valid for removing the mixins for the other distributed elements? I'd guess so. At least, the inconsistency seems odd.

I guess I could try newer versions of paper-dialog/paper-dialog-behavior. WDYT?

[davidmaxwaterman]

followup:

I quickly tried updating paper-dialog{,-behavior} - looks like I have some issue:

$ bower list | grep paper-dialog
├─┬ paper-dialog#2.0.0 incompatible with ^1.1.0 (1.1.0 available, latest is 2.0.0)
│ ├─┬ paper-dialog-behavior#2.0.1
├── paper-dialog-behavior#2.0.1 extraneous

The result is I lost the .buttons styling from paper-dialog-behavior completely...so they end up on the left, which is the default position anyway.

What is going on?? Any clues very welcome.

[davidmaxwaterman]

After manually updating my bower.json files, I managed to get it to list the versions sensibly:

├─┬ paper-dialog#2.0.0
│ ├─┬ paper-dialog-behavior#2.0.1

but still no .buttons style from paper-dialog-behavior :/

[valdrinkoshi]

Could you share an example repo? The fact that styles aren't being applied might be caused by the fact that in 2.x .buttons must be a direct child of the dialog in order to be styled (see https://github.com/PolymerElements/paper-dialog-behavior#changes-in-20).