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