--paper-toolbar-title mixin ignores margin

jfletcher-nuxeo commented 8 years ago

The --paper-toolbar-title mixin seems to be ignoring some CSS and not others. Just to be clear, this was working fine before 1.1.4 (but I think it's a dependency change?). Here is an example:

<html>

<head>
  <link rel="import" href="../../../bower_components/polymer/polymer.html">
  <link rel="import" href="../../../bower_components/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
  <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
</head>

<style is="custom-style">
  paper-toolbar {
    --paper-toolbar-title: {
      margin-left: 5px;
      margin-right: 5px;
      font-size: initial;
    }
  }
</style>

<body unresolved class="fullbleed layout vertical">
  <template is="dom-bind" id="app">
    <paper-toolbar>
      <paper-icon-button icon="menu"></paper-icon-button>
      <div class="title">This is the title</div>
    </paper-toolbar>
  </template>
</body>

</html>

In this case font-size works but margin-left does not.

mcarey1590 commented 8 years ago

I think it has to do with a change in ordering of css rules. Until a fix is made, this can be overcome by using !important

paper-toolbar {
    --paper-toolbar-title: {
      margin-left: 5px !important;
      ....
}

bicknellr commented 8 years ago

The general case is solved by #89, but this particular case with the paper-icon-button immediately before the title is intentional: https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html#L229. (Also, you can work around this by adding margin-right to the paper-icon-button instead. :) )

PolymerElements / paper-toolbar

--paper-toolbar-title mixin ignores margin #82