1<!-- 2 @license 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 Code distributed by Google as part of the polymer project is also 8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10<link rel="import" href="core-style.html"> 11 12<core-style id="my-toolbar"> 13 :host { 14 height: 54px; 15 font-size: 1.3rem; 16 background-color: steelblue; 17 color: white; 18 } 19 20 polyfill-next-selector { 21 content: ':host > *'; 22 } 23 ::content > * { 24 margin: 8px; 25 } 26</core-style> 27 28<polymer-element name="my-toolbar" horizontal center layout noscript> 29 <template> 30 <core-style ref="my-toolbar"></core-style> 31 <content></content> 32 </template> 33</polymer-element> 34 35<core-style id="my-panel"> 36 :host { 37 display: inline-block; 38 height: 200px; 39 width: calc({{ 100 / g.columns }}% - 16px); 40 font-size: 50px; 41 background: gray; 42 margin: 8px; 43 } 44</core-style> 45 46<script> 47 CoreStyle.g.columns = 3; 48</script> 49 50<polymer-element name="my-panel" vertical center center-justified layout noscript> 51 <template> 52 <core-style ref="my-panel"></core-style> 53 <content></content> 54 </template> 55</polymer-element> 56