Index: third_party/polymer/components/core-style/elements.html |
diff --git a/third_party/polymer/components/core-style/elements.html b/third_party/polymer/components/core-style/elements.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..f09f2e583face6ae34c72064a1fa40ba54d1fcfe |
--- /dev/null |
+++ b/third_party/polymer/components/core-style/elements.html |
@@ -0,0 +1,46 @@ |
+<link rel="import" href="core-style.html"> |
+ |
+<core-style id="my-toolbar"> |
+ :host { |
+ height: 54px; |
+ font-size: 1.3rem; |
+ background-color: steelblue; |
+ color: white; |
+ } |
+ |
+ polyfill-next-selector { |
+ content: ':host > *'; |
+ } |
+ ::content > * { |
+ margin: 8px; |
+ } |
+</core-style> |
+ |
+<polymer-element name="my-toolbar" horizontal center layout noscript> |
+ <template> |
+ <core-style ref="my-toolbar"></core-style> |
+ <content></content> |
+ </template> |
+</polymer-element> |
+ |
+<core-style id="my-panel"> |
+ :host { |
+ display: inline-block; |
+ height: 200px; |
+ width: calc({{ 100 / g.columns }}% - 16px); |
+ font-size: 50px; |
+ background: gray; |
+ margin: 8px; |
+ } |
+</core-style> |
+ |
+<script> |
+ CoreStyle.g.columns = 3; |
+</script> |
+ |
+<polymer-element name="my-panel" vertical center center-justified layout noscript> |
+ <template> |
+ <core-style ref="my-panel"></core-style> |
+ <content></content> |
+ </template> |
+</polymer-element> |