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

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