-
Notifications
You must be signed in to change notification settings - Fork 1
/
color_picker.html
84 lines (84 loc) · 3.14 KB
/
color_picker.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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div class='color-plus-plus'>
<div class='shadow top'></div>
<div class='close-color-picker'>×</div>
<div class='color-picker-section section-level' data-section="color-picker">
<h1>Color Gradient</h1>
<div class='color-picker-container'>
<div class='color-picker'></div>
<input class='color-string' value='{{color}}'>
</div>
<div class='colors-types-container'>
<div class='colors-copmare'>
<span class='new-color' style='background-color: {{color}}'></span>
<span class='old-color' style='background-color: {{color}}'></span>
</div>
<div class='colors-types' data-type='{{type}}'>
<span class='hex' data-type='hex'>Hex</span>
<span class='rgb' data-type='rgb'>RGBa</span>
<span class='hsl' data-type='hsl'>HSLa</span>
<span class='hsv' data-type='hsv'>HSV</span>
</div>
<div class='select-color'>Select</div>
</div>
</div>
<div class='document-colors-section section-level' data-section="document-colors">
<h1>Document Colors</h1>
<div class='color-meta'>
<div>
<span>Color:</span>
<span class='color-name'></span>
</div>
<div>
<span>Line No:</span>
<span class='line-number'></span>
</div>
</div>
<ul class='document-colors-list'>{{{documentColors}}}</ul>
</div>
<div class='document-variables-section section-level' data-section="document-color-variables">
<h1>Document Variables</h1>
<div class='color-meta'>
<div>
<span>Variable:</span>
<span class='color-name'></span>
</div>
<div>
<span>Line No:</span>
<span class='line-number'></span>
</div>
</div>
<ul class='document-variables-list'>{{{documentVariables}}}</ul>
</div>
<div class='color-combinations-section section-level' data-section="color-combinations">
<h1>Color Combinations</h1>
<div class='color-combinations-triad'>
<h2>Triad</h2>
<ul></ul>
</div>
<div class='color-combinations-splitcomplement'>
<h2>Splitcomplement</h2>
<ul></ul>
</div>
<div class='color-combinations-tetrad'>
<h2>Tetrad</h2>
<ul></ul>
</div>
<div class='color-combinations-complement'>
<h2>Complement</h2>
<ul></ul>
</div>
<div class='color-combinations-analogous'>
<h2>Analogous</h2>
<ul></ul>
</div>
<div class='color-combinations-monochromatic'>
<h2>Monochromatic</h2>
<ul></ul>
</div>
</div>
<div class='function-variants-section section-level' data-section="function-variants">
<h1>Function Variants</h1>
<ul></ul>
</div>
<div class='shadow bottom'></div>
</div>