children of "layered" core-overlay and its decendants wont style.

[mwinters-stuff]

With the addition of the layered propery, any attempt to style the children (which works without the layered property) wont work.. This also happens with things like core-dialog (which has layered by default).

Eg. the style

      paper-action-dialog {
        width: 40%;
        min-width: 430px;
      }
      paper-action-dialog paper-button {
        font-weight: bold;
      }

      paper-button[affirmative] {
        color: #4285f4;
      }

will not apply if the layered="true", which is the default for paper-action-dialog, when set to false, it styles as it used to.

Also with layered=true, the paper-dropdown layer is below the dialog layer, but it must be layered itself to appear outside the dialog to stop scroll-bars showing.

    <paper-action-dialog id="edit_sensor_dialog" heading="{{dialogSensor.id == null ? 'New' : 'Edit'}} Sensor" transition="paper-transition-center" layered="false">
      <div id="sensor_edit_form" layout vertical>
        <paper-input-decorator  label="Name" floatingLabel>
          <input is="core-input" id="input_sensor_name" floatingLabel value="{{dialogSensor.name}}" required></input>
        </paper-input-decorator>

        <paper-dropdown-menu id="input_sensor_type"  label="Sensor Type" >
          <paper-dropdown class="dropdown" layered>
            <core-menu class="menu" selected="{{dialogSensor.type}}" valueattr="id">
              <template repeat="{{type in sensorTypes}}">
                <paper-item id="{{type.name}}">{{type.caption}}</paper-item>
              </template>
            </core-menu>
          </paper-dropdown>
        </paper-dropdown-menu>

      </div>
      <paper-button id="buttonCancel"  dismissive>Cancel</paper-button>
      <paper-button id="buttonOk" affirmative on-tap="{{sensorButtonOkTapped}}">Ok</paper-button>
    </paper-action-dialog>

[mwinters-stuff]

So have done some more investigating, it seems that where you declare the style in your polymer element, will affect styling the overlay (dialog e.t.c.)

It seems that

<polymer-element name="translator-page">
    <style >
      html /deep/ paper-button[affirmative] {
        color: #03a9f4;
      }

      html /deep/ paper-button {
        font-weight: bold;
      }

      html /deep/ paper-action-dialog {
        min-width: 600px;
      }
 </style>
<template>
      <paper-action-dialog id="edit_translation_dialog" heading="Edit Translation" transition="core-transition-center" >
        <div id="edit_form" layout vertical>
          <paper-input label="Token" floatingLabel="true" required value="{{dialogTranslation.token}}"></paper-input>
          <paper-input label="Comment" floatingLabel="true" required value="{{dialogTranslation.comment}}"></paper-input>
          <paper-input label="Machine Type" floatingLabel="true"  value="{{dialogTranslation.machinetype}}"></paper-input>
          <paper-input label="Resource Type" floatingLabel="true" value="{{dialogTranslation.resourcetype}}"></paper-input>
          <paper-input label="Used By" floatingLabel="true" value="{{dialogTranslation.usedby}}"></paper-input>
          <paper-input label="english" floatingLabel="true" required value="{{dialogTranslation.english}}" ></paper-input>
        </div>
        <paper-button dismissive on-tap="{{cancelEditDialog}}">Cancel</paper-button>
        <paper-button id="ok" disabled?= "{{!dialogTranslation.token || !dialogTranslation.english || !dialogTranslation.comment}}" affirmative on-tap="{{editOkTapped}}">OK</paper-button>
      </paper-action-dialog>
</template>
.....
</polymer-element>

which works is different to

<polymer-element name="translator-page">
<template>
    <style >
      html /deep/ paper-button[affirmative] {
        color: #03a9f4;
      }

      html /deep/ paper-button {
        font-weight: bold;
      }

      html /deep/ paper-action-dialog {
        min-width: 600px;
      }
 </style>
      <paper-action-dialog id="edit_translation_dialog" heading="Edit Translation" transition="core-transition-center" >
        <div id="edit_form" layout vertical>
          <paper-input label="Token" floatingLabel="true" required value="{{dialogTranslation.token}}"></paper-input>
          <paper-input label="Comment" floatingLabel="true" required value="{{dialogTranslation.comment}}"></paper-input>
          <paper-input label="Machine Type" floatingLabel="true"  value="{{dialogTranslation.machinetype}}"></paper-input>
          <paper-input label="Resource Type" floatingLabel="true" value="{{dialogTranslation.resourcetype}}"></paper-input>
          <paper-input label="Used By" floatingLabel="true" value="{{dialogTranslation.usedby}}"></paper-input>
          <paper-input label="english" floatingLabel="true" required value="{{dialogTranslation.english}}" ></paper-input>
        </div>
        <paper-button dismissive on-tap="{{cancelEditDialog}}">Cancel</paper-button>
        <paper-button id="ok" disabled?= "{{!dialogTranslation.token || !dialogTranslation.english || !dialogTranslation.comment}}" affirmative on-tap="{{editOkTapped}}">OK</paper-button>
      </paper-action-dialog>
</template>
.....
</polymer-element>

which does not work.. There is nothing in the documentation that specifies where the style should go (it should be noted that for styling elements not on the overlay, the style should be inside the template.

[morethanreal]

See this StackOverflow answer: http://stackoverflow.com/questions/26919246/issue-with-upgrade-to-polymer-0-5-1-and-styling-paper-dialog/26954690#26954690