|
1 // ColorPicker |
|
2 |
|
3 .@{prefix}-colorpicker { |
|
4 position: relative; |
|
5 width: 250px; |
|
6 height: 220px; |
|
7 } |
|
8 |
|
9 .@{prefix}-colorpicker-sv { |
|
10 position: absolute; |
|
11 top: 0; left: 0; |
|
12 width: 90%; |
|
13 height: 100%; |
|
14 border: 1px solid @colorpicker-border; |
|
15 cursor: crosshair; |
|
16 overflow: hidden; |
|
17 } |
|
18 |
|
19 .@{prefix}-colorpicker-h-chunk { |
|
20 width: 100%; |
|
21 } |
|
22 |
|
23 .@{prefix}-colorpicker-overlay1, .@{prefix}-colorpicker-overlay2 { |
|
24 width: 100%; |
|
25 height: 100%; |
|
26 position: absolute; |
|
27 top: 0; |
|
28 left: 0; |
|
29 } |
|
30 |
|
31 .@{prefix}-colorpicker-overlay1 { |
|
32 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); |
|
33 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; |
|
34 background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); |
|
35 } |
|
36 |
|
37 .@{prefix}-colorpicker-overlay2 { |
|
38 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000'); |
|
39 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; |
|
40 background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); |
|
41 } |
|
42 |
|
43 .@{prefix}-colorpicker-selector1 { |
|
44 background: none; |
|
45 position: absolute; |
|
46 width: 12px; |
|
47 height: 12px; |
|
48 margin: -8px 0 0 -8px; |
|
49 border: 1px solid black; |
|
50 border-radius: 50%; |
|
51 } |
|
52 |
|
53 .@{prefix}-colorpicker-selector2 { |
|
54 position: absolute; |
|
55 width: 10px; |
|
56 height: 10px; |
|
57 border: 1px solid white; |
|
58 border-radius: 50%; |
|
59 } |
|
60 |
|
61 .@{prefix}-colorpicker-h { |
|
62 position: absolute; |
|
63 top: 0; right: 0; |
|
64 width: 6.5%; |
|
65 height: 100%; |
|
66 border: 1px solid @colorpicker-border; |
|
67 cursor: crosshair; |
|
68 } |
|
69 |
|
70 .@{prefix}-colorpicker-h-marker { |
|
71 margin-top: -4px; |
|
72 position: absolute; |
|
73 top: 0; |
|
74 left: -1px; |
|
75 width: 100%; |
|
76 border: 1px solid @colorpicker-hue-border; |
|
77 background: @colorpicker-hue-bg; |
|
78 height: 4px; |
|
79 z-index: 100; |
|
80 } |