74 lines
1.9 KiB
HTML
74 lines
1.9 KiB
HTML
<!--
|
|
@license
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<link rel="import" href="core-style.html">
|
|
|
|
<script>
|
|
|
|
CoreStyle.g.theme = {
|
|
colorOne: '#abcdef',
|
|
colorTwo: '#123456',
|
|
colorThree: '#224433'
|
|
}
|
|
</script>
|
|
|
|
<core-style id="main">
|
|
body {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
section {
|
|
overflow: auto;
|
|
}
|
|
|
|
button {
|
|
border: 1px solid {{g.theme.colorOne | cycle(-50)}};
|
|
border-radius: 4px;
|
|
background-color: {{g.theme.colorOne}};
|
|
color: {{g.theme.colorTwo}};
|
|
}
|
|
|
|
button:active {
|
|
border: 1px solid {{g.theme.colorTwo | cycle(50)}};
|
|
border-radius: 4px;
|
|
background-color: {{g.theme.colorTwo}};
|
|
color: {{g.theme.colorOne}};
|
|
}
|
|
|
|
<template repeat="{{item in g.items}}">
|
|
my-panel:nth-of-type({{item+1}}) {
|
|
background-color: {{ g.theme.colorThree | cycle(item * -1) }};
|
|
}
|
|
</template>
|
|
</core-style>
|
|
|
|
<core-style id="my-toolbar">
|
|
:host {
|
|
border-bottom: 8px solid {{g.theme.colorOne}};
|
|
color: {{g.theme.colorOne | cycle(100)}};
|
|
background-color: {{g.theme.colorTwo}};
|
|
}
|
|
</core-style>
|
|
|
|
<core-style id="my-panel">
|
|
:host {
|
|
box-sizing: border-box;
|
|
background-color: {{g.theme.colorOne}};
|
|
border: 8px solid {{g.theme.colorOne | cycle(50)}};
|
|
color: {{g.theme.colorOne | cycle(-100)}};
|
|
}
|
|
|
|
:host(:nth-of-type(2n + 1)) {
|
|
background-color: {{g.theme.colorTwo}};
|
|
border: 8px solid {{g.theme.colorTwo | cycle(-50)}};
|
|
color: {{g.theme.colorTwo | cycle(100)}}
|
|
}
|
|
|
|
</core-style>
|