third_party/polymer/components-chromium/core-style/my-theme.html

   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>