third_party/polymer/components/core-style/elements.html

   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>