-
Notifications
You must be signed in to change notification settings - Fork 0
/
bicolor-selector.html
38 lines (38 loc) · 1.05 KB
/
bicolor-selector.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<polymer-element name="bicolor-selector">
<template>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
<span class="fa fa-tint" title="Select a color"></span>
<label for="primary">
<span class="fa fa-circle"></span>
<input type="color" id="primary" style="color:{{primary}}" value="{{primary}}">
</label>
<label for="secundary">
<span class="fa fa-circle" style="color:{{secundary}}"></span>
<input type="color" id="secundary" value="{{secundary}}">
</label>
<style>
label{
width:15px;
height:17px;
overflow: hidden;
display: inline-block;
}
input[type=color]{
/*width:0;
border:0;
padding:0;
height:0;
outline:0;*/
position: absolute;
}
</style>
</template>
<script>
Polymer('bicolor-selector', {
color : 'black',
primary : '#000',
secundary : '#fff',
selected : 'primary'
});
</script>
</polymer-element>