提交 | 用户 | 时间
|
58d006
|
1 |
/*! |
A |
2 |
* Colorpicker for Bootstrap |
|
3 |
* |
|
4 |
* Copyright 2012 Stefan Petre |
|
5 |
* Licensed under the Apache License v2.0 |
|
6 |
* http://www.apache.org/licenses/LICENSE-2.0 |
|
7 |
* |
|
8 |
*/ |
|
9 |
.colorpicker-saturation { |
|
10 |
width: 100px; |
|
11 |
height: 100px; |
|
12 |
background-image: url(img/saturation.png); |
|
13 |
cursor: crosshair; |
|
14 |
float: left; |
|
15 |
} |
|
16 |
.colorpicker-saturation i { |
|
17 |
display: block; |
|
18 |
height: 5px; |
|
19 |
width: 5px; |
|
20 |
border: 1px solid #000; |
|
21 |
-webkit-border-radius: 5px; |
|
22 |
-moz-border-radius: 5px; |
|
23 |
border-radius: 5px; |
|
24 |
position: absolute; |
|
25 |
top: 0; |
|
26 |
left: 0; |
|
27 |
margin: -4px 0 0 -4px; |
|
28 |
} |
|
29 |
.colorpicker-saturation i b { |
|
30 |
display: block; |
|
31 |
height: 5px; |
|
32 |
width: 5px; |
|
33 |
border: 1px solid #fff; |
|
34 |
-webkit-border-radius: 5px; |
|
35 |
-moz-border-radius: 5px; |
|
36 |
border-radius: 5px; |
|
37 |
} |
|
38 |
.colorpicker-hue, .colorpicker-alpha { |
|
39 |
width: 15px; |
|
40 |
height: 100px; |
|
41 |
float: left; |
|
42 |
cursor: row-resize; |
|
43 |
margin-left: 4px; |
|
44 |
margin-bottom: 4px; |
|
45 |
} |
|
46 |
.colorpicker-hue i, .colorpicker-alpha i { |
|
47 |
display: block; |
|
48 |
height: 1px; |
|
49 |
background: #000; |
|
50 |
border-top: 1px solid #fff; |
|
51 |
position: absolute; |
|
52 |
top: 0; |
|
53 |
left: 0; |
|
54 |
width: 100%; |
|
55 |
margin-top: -1px; |
|
56 |
} |
|
57 |
.colorpicker-hue { |
|
58 |
background-image: url(img/hue.png); |
|
59 |
} |
|
60 |
.colorpicker-alpha { |
|
61 |
background-image: url(img/alpha.png); |
|
62 |
display: none; |
|
63 |
} |
|
64 |
.colorpicker { |
|
65 |
*zoom: 1; |
|
66 |
top: 0; |
|
67 |
left: 0; |
|
68 |
padding: 4px; |
|
69 |
min-width: 120px; |
|
70 |
margin-top: 1px; |
|
71 |
-webkit-border-radius: 4px; |
|
72 |
-moz-border-radius: 4px; |
|
73 |
border-radius: 4px; |
|
74 |
} |
|
75 |
.colorpicker:before, .colorpicker:after { |
|
76 |
display: table; |
|
77 |
content: ""; |
|
78 |
} |
|
79 |
.colorpicker:after { |
|
80 |
clear: both; |
|
81 |
} |
|
82 |
.colorpicker:before { |
|
83 |
content: ''; |
|
84 |
display: inline-block; |
|
85 |
border-left: 7px solid transparent; |
|
86 |
border-right: 7px solid transparent; |
|
87 |
border-bottom: 7px solid #ccc; |
|
88 |
border-bottom-color: rgba(0, 0, 0, 0.2); |
|
89 |
position: absolute; |
|
90 |
top: -7px; |
|
91 |
left: 6px; |
|
92 |
} |
|
93 |
.colorpicker:after { |
|
94 |
content: ''; |
|
95 |
display: inline-block; |
|
96 |
border-left: 6px solid transparent; |
|
97 |
border-right: 6px solid transparent; |
|
98 |
border-bottom: 6px solid #ffffff; |
|
99 |
position: absolute; |
|
100 |
top: -6px; |
|
101 |
left: 7px; |
|
102 |
} |
|
103 |
.colorpicker div { |
|
104 |
position: relative; |
|
105 |
} |
|
106 |
.colorpicker.alpha { |
|
107 |
min-width: 140px; |
|
108 |
} |
|
109 |
.colorpicker.alpha .colorpicker-alpha { |
|
110 |
display: block; |
|
111 |
} |
|
112 |
.colorpicker-color { |
|
113 |
height: 10px; |
|
114 |
margin-top: 5px; |
|
115 |
clear: both; |
|
116 |
background-image: url(img/alpha.png); |
|
117 |
background-position: 0 100%; |
|
118 |
} |
|
119 |
.colorpicker-color div { |
|
120 |
height: 10px; |
|
121 |
} |
|
122 |
.input-append.color .add-on i, .input-prepend.color .add-on i { |
|
123 |
display: block; |
|
124 |
cursor: pointer; |
|
125 |
width: 16px; |
|
126 |
height: 16px; |
|
127 |
} |