Index: third_party/polymer/components-chromium/core-style/my-theme.html |
diff --git a/third_party/polymer/components-chromium/core-style/my-theme.html b/third_party/polymer/components-chromium/core-style/my-theme.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9dee3b72cf7fa8d620760bd43bb9e7dfb907619d |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-style/my-theme.html |
@@ -0,0 +1,57 @@ |
+<link rel="import" href="core-style.html"> |
+ |
+ |
+ |
+<core-style id="main"> |
+ body { |
+ font-family: sans-serif; |
+ } |
+ |
+ section { |
+ overflow: auto; |
+ } |
+ |
+ button { |
+ border: 1px solid {{g.theme.colorOne | cycle(-50)}}; |
+ border-radius: 4px; |
+ background-color: {{g.theme.colorOne}}; |
+ color: {{g.theme.colorTwo}}; |
+ } |
+ |
+ button:active { |
+ border: 1px solid {{g.theme.colorTwo | cycle(50)}}; |
+ border-radius: 4px; |
+ background-color: {{g.theme.colorTwo}}; |
+ color: {{g.theme.colorOne}}; |
+ } |
+ |
+ <template repeat="{{item in g.items}}"> |
+ my-panel:nth-of-type({{item+1}}) { |
+ background-color: {{ g.theme.colorThree | cycle(item * -1) }}; |
+ } |
+ </template> |
+</core-style> |
+ |
+<core-style id="my-toolbar"> |
+ :host { |
+ border-bottom: 8px solid {{g.theme.colorOne}}; |
+ color: {{g.theme.colorOne | cycle(100)}}; |
+ background-color: {{g.theme.colorTwo}}; |
+ } |
+</core-style> |
+ |
+<core-style id="my-panel"> |
+ :host { |
+ box-sizing: border-box; |
+ background-color: {{g.theme.colorOne}}; |
+ border: 8px solid {{g.theme.colorOne | cycle(50)}}; |
+ color: {{g.theme.colorOne | cycle(-100)}}; |
+ } |
+ |
+ :host(:nth-of-type(2n + 1)) { |
+ background-color: {{g.theme.colorTwo}}; |
+ border: 8px solid {{g.theme.colorTwo | cycle(-50)}}; |
+ color: {{g.theme.colorTwo | cycle(100)}} |
+ } |
+ |
+</core-style><script src="my-theme-extracted.js"></script> |