Index: pkg/polymer/lib/elements/polymer-overlay/polymer-overlay.css |
diff --git a/pkg/polymer/lib/elements/polymer-overlay/polymer-overlay.css b/pkg/polymer/lib/elements/polymer-overlay/polymer-overlay.css |
new file mode 100644 |
index 0000000000000000000000000000000000000000..344ae548deb888ef6b3b74ff560d9d3a62ad8b8a |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/polymer-overlay/polymer-overlay.css |
@@ -0,0 +1,61 @@ |
+/* |
+ * Copyright 2013 The Polymer Authors. All rights reserved. |
+ * Use of this source code is governed by a BSD-style |
+ * license that can be found in the LICENSE file. |
+ */ |
+ |
+/* Note that trbl: 0 + position: fixed will not 'fit to window' |
+if a transform is applied to a parent of this element. That parent |
+becomes the containing block; see: |
+http://dev.w3.org/csswg/css3-transforms/#transform-rendering |
+We address this by using script based positioning =( |
+*/ |
+:host(.polymer-overlay:host) { |
+ position: fixed; |
+ z-index: 10; |
+ outline: none; |
+ display: none; |
+ -webkit-transition: opacity 0.001s; |
+ transition: opacity 0.001s; |
+} |
+ |
+:host(.revealed:host) { |
+ display: block; |
+ visibility: hidden; |
+} |
+ |
+:host(.revealed.opened:host) { |
+ display: block; |
+ visibility: visible; |
+} |
+ |
+.polymer-overlay { |
+ position: fixed; |
+ z-index: 10; |
+ outline: none; |
+ display: none; |
+ -webkit-transition: opacity 0.001s; |
+ transition: opacity 0.001s; |
+} |
+ |
+/* |
+ The revealed class exists because it's necessary to 'show' a node |
+ before applying a transition. When an overlay is opened, it is |
+ immediately revealed (display: block) and then asynchronously the |
+ opened or closing classes are added. |
+ |
+ Because we don't want to actually show the node before a transition |
+ or animation is applied, when the node is |
+ revealed, it is made display: block but visibility: hidden. |
+ It is then made visibility: visible when it is opened. |
+*/ |
+ |
+.revealed { |
+ display: block; |
+ visibility: hidden; |
+} |
+ |
+.revealed.opened { |
+ display: block; |
+ visibility: visible; |
+} |