| Index: third_party/polymer/components-chromium/core-overlay/core-overlay.html
|
| diff --git a/third_party/polymer/components-chromium/core-overlay/core-overlay.html b/third_party/polymer/components-chromium/core-overlay/core-overlay.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..4b185e98bdc97281d771ac8959dbe1ba37bc2921
|
| --- /dev/null
|
| +++ b/third_party/polymer/components-chromium/core-overlay/core-overlay.html
|
| @@ -0,0 +1,89 @@
|
| +<!--
|
| +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
|
| +-->
|
| +
|
| +<link rel="import" href="../polymer/polymer.html">
|
| +<link rel="import" href="../core-transition/core-transition.html">
|
| +<link rel="import" href="core-key-helper.html">
|
| +<link rel="import" href="core-overlay-layer.html">
|
| +
|
| +<!--
|
| +The `core-overlay` element displays overlayed on top of other content. It starts
|
| +out hidden and is displayed by setting its `opened` property to true.
|
| +A `core-overlay's` opened state can be toggled by calling the `toggle`
|
| +method.
|
| +
|
| +The `core-overlay` will, by default, show/hide itself when it's opened. The
|
| +`target` property may be set to another element to cause that element to
|
| +be shown when the overlay is opened.
|
| +
|
| +It's common to want a `core-overlay` to animate to its opened
|
| +position. The `core-overlay` element uses a `core-transition` to handle
|
| +animation. The default transition is `core-transition-fade` which
|
| +causes the overlay to fade in when displayed. See
|
| +<a href="../core-transition/">`core-transition`</a> for more
|
| +information about customizing a `core-overlay's` opening animation. The
|
| +`backdrop` property can be set to true to show a backdrop behind the overlay
|
| +that will darken the rest of the window.
|
| +
|
| +An element that should close the `core-overlay` will automatically
|
| +do so if it's given the `core-overlay-toggle` attribute. This attribute
|
| +can be customized with the `closeAttribute` property. You can also use
|
| +`closeSelector` if more general matching is needed.
|
| +
|
| +By default `core-overlay` will close whenever the user taps outside it or
|
| +presses the escape key. This behavior can be turned off via the
|
| +`autoCloseDisabled` property.
|
| +
|
| + <core-overlay>
|
| + <h2>Dialog</h2>
|
| + <input placeholder="say something..." autofocus>
|
| + <div>I agree with this wholeheartedly.</div>
|
| + <button core-overlay-toggle>OK</button>
|
| + </core-overlay>
|
| +
|
| +`core-overlay` will automatically size and position itself according to the
|
| +following rules. If the target's style.top and style.left are unset, the
|
| +target will be centered. The size of the target is constrained to be no larger
|
| +than the window dimensions. The `margin` property specifies the extra amount
|
| +of space that should be reserved around the overlay. This can be used to ensure
|
| +that, for example, a drop shadow is always visible around the overlay.
|
| +
|
| +@group Core Elements
|
| +@element core-overlay
|
| +@homepage github.io
|
| +-->
|
| +<!--
|
| +Fired when the `core-overlay`'s `opened` property changes.
|
| +
|
| +@event core-overlay-open
|
| +@param {Object} detail
|
| +@param {Object} detail.opened the opened state
|
| +-->
|
| +
|
| +<style>
|
| + .core-overlay-backdrop {
|
| + position: fixed;
|
| + top: 0;
|
| + left: 0;
|
| + width: 100vw;
|
| + height: 100vh;
|
| + background-color: black;
|
| + opacity: 0;
|
| + transition: opacity 0.2s;
|
| + }
|
| +
|
| + .core-overlay-backdrop.core-opened {
|
| + opacity: 0.6;
|
| + }
|
| +</style>
|
| +
|
| +<polymer-element name="core-overlay" assetpath="">
|
| +
|
| +</polymer-element>
|
| +<script src="core-overlay-extracted.js"></script>
|
|
|