OLD | NEW |
(Empty) | |
| 1 <link rel="import" href="core-style.html"> |
| 2 |
| 3 |
| 4 |
| 5 <core-style id="main"> |
| 6 body { |
| 7 font-family: sans-serif; |
| 8 } |
| 9 |
| 10 section { |
| 11 overflow: auto; |
| 12 } |
| 13 |
| 14 button { |
| 15 border: 1px solid {{g.theme.colorOne | cycle(-50)}}; |
| 16 border-radius: 4px; |
| 17 background-color: {{g.theme.colorOne}}; |
| 18 color: {{g.theme.colorTwo}}; |
| 19 } |
| 20 |
| 21 button:active { |
| 22 border: 1px solid {{g.theme.colorTwo | cycle(50)}}; |
| 23 border-radius: 4px; |
| 24 background-color: {{g.theme.colorTwo}}; |
| 25 color: {{g.theme.colorOne}}; |
| 26 } |
| 27 |
| 28 <template repeat="{{item in g.items}}"> |
| 29 my-panel:nth-of-type({{item+1}}) { |
| 30 background-color: {{ g.theme.colorThree | cycle(item * -1) }}; |
| 31 } |
| 32 </template> |
| 33 </core-style> |
| 34 |
| 35 <core-style id="my-toolbar"> |
| 36 :host { |
| 37 border-bottom: 8px solid {{g.theme.colorOne}}; |
| 38 color: {{g.theme.colorOne | cycle(100)}}; |
| 39 background-color: {{g.theme.colorTwo}}; |
| 40 } |
| 41 </core-style> |
| 42 |
| 43 <core-style id="my-panel"> |
| 44 :host { |
| 45 box-sizing: border-box; |
| 46 background-color: {{g.theme.colorOne}}; |
| 47 border: 8px solid {{g.theme.colorOne | cycle(50)}}; |
| 48 color: {{g.theme.colorOne | cycle(-100)}}; |
| 49 } |
| 50 |
| 51 :host(:nth-of-type(2n + 1)) { |
| 52 background-color: {{g.theme.colorTwo}}; |
| 53 border: 8px solid {{g.theme.colorTwo | cycle(-50)}}; |
| 54 color: {{g.theme.colorTwo | cycle(100)}} |
| 55 } |
| 56 |
| 57 </core-style><script src="my-theme-extracted.js"></script> |
OLD | NEW |