OLD | NEW |
(Empty) | |
| 1 <link rel="import" href="../polymer/polymer.html"> |
| 2 <link rel="import" href="../polymer-overlay/polymer-overlay.html"> |
| 3 |
| 4 <polymer-element name="polymer-ui-overlay" attributes="active modal backdrop tra
nsitions"> |
| 5 <template> |
| 6 <style> |
| 7 #backdrop { |
| 8 background: rgba(0, 0, 0, 0.25); |
| 9 position: fixed; |
| 10 left: 0; |
| 11 top: 0; |
| 12 bottom: 0; |
| 13 right: 0; |
| 14 z-index: -1; |
| 15 visibility: hidden; |
| 16 } |
| 17 :host(.polymer-overlay.opened:not(.animating)) #backdrop { |
| 18 visibility: visible; |
| 19 } |
| 20 </style> |
| 21 <polymer-overlay id="overlay" opened="{{active}}" autoCloseDisabled="{{modal
}}" transitions="{{transitions}}"></polymer-overlay> |
| 22 <div id="backdrop" hidden?="{{!backdrop}}" on-click="{{toggle: !modal}}"></d
iv> |
| 23 <content></content> |
| 24 </template> |
| 25 <script> |
| 26 Polymer('polymer-ui-overlay', { |
| 27 active: false, |
| 28 modal: false, |
| 29 backdrop: false, |
| 30 ready: function() { |
| 31 this.$.overlay.target = this; |
| 32 }, |
| 33 toggle: function() { |
| 34 this.active = !this.active; |
| 35 } |
| 36 }); |
| 37 </script> |
| 38 </polymer-element> |
OLD | NEW |