paper-dialog.html

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--

Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a>

`paper-dialog` is an overlay with a drop shadow.

Example:

    <paper-dialog heading="Dialog Title">
      <p>Some content</p>
    </paper-dialog>

Styling
-------

Because a `paper-dialog` is `layered` by default, you need to use the `/deep/`
combinator to style all instances of the `paper-dialog`. Style the position,
colors and other inherited properties of the dialog using the
`html /deep/ paper-dialog` selector. Use the `html /deep/ paper-dialog::shadow #scroller` selector to size the dialog. Note that if you provided actions, the height
of the actions will be added to the height of the dialog.

    html /deep/ paper-dialog {
        color: green;
    }

    html /deep/ paper-dialog::shadow #scroller {
        height: 300px;
        width: 300px;
    }

Transitions
-----------

You can use transitions provided by `core-transition` with this element.

    <paper-dialog transition="core-transition-center">
      <p>Some content</p>
    </paper-dialog>

Accessibility
-------------

By default, the `aria-label` will be set to the value of the `heading` attribute.

@group Paper Elements
@element paper-dialog
@extends paper-dialog-base
@homepage github.io
@status unstable
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../paper-shadow/paper-shadow.html" rel="import">

<link href="paper-dialog-base.html" rel="import">

<polymer-element name="paper-dialog" extends="paper-dialog-base" role="dialog" layout vertical noscript>

<template>

  <style>
    :host {
      background: #fff;
      color: rgba(0, 0, 0, 0.87);
      margin: 32px;
      overflow: visible !important;
    }

    h1 {
      font-size: 20px;
    }

    #scroller {
      overflow: auto;
      box-sizing: border-box;
      padding: 24px;
    }
  </style>

  <paper-shadow z="3" fit></paper-shadow>

  <!-- need this because the host needs to be overflow: visible -->
  <div id="scroller" relative flex auto>
    <template if="{{heading}}">
      <h1>{{heading}}</h1>
    </template>

    <content></content>
  </div>

</template>

</polymer-element>