1 | /* tooltips and popovers */ |
---|
2 | |
---|
3 | .tooltip.in { |
---|
4 | .opacity(1); |
---|
5 | } |
---|
6 | |
---|
7 | .tooltip-inner { |
---|
8 | background-color:@tooltip-color; |
---|
9 | color:#FFF; |
---|
10 | font-size:12px; |
---|
11 | |
---|
12 | text-shadow:1px 1px 0 rgba(42,45,50,0.5); |
---|
13 | .border-radius(0); |
---|
14 | |
---|
15 | padding: 5px 9px; |
---|
16 | //box-shadow:0 0 2px 1px rgba(0,0,0,0.2); |
---|
17 | } |
---|
18 | |
---|
19 | .tooltip.top .tooltip-arrow { |
---|
20 | border-top-color: @tooltip-color; |
---|
21 | } |
---|
22 | .tooltip.right .tooltip-arrow { |
---|
23 | border-right-color: @tooltip-color; |
---|
24 | } |
---|
25 | .tooltip.left .tooltip-arrow { |
---|
26 | border-left-color: @tooltip-color; |
---|
27 | } |
---|
28 | .tooltip.bottom .tooltip-arrow { |
---|
29 | border-bottom-color: @tooltip-color; |
---|
30 | } |
---|
31 | |
---|
32 | |
---|
33 | /* error tooltip */ |
---|
34 | .tooltip-error + .tooltip { |
---|
35 | > .tooltip-inner { |
---|
36 | background-color:@tooltip-error-color; |
---|
37 | color:#FFF; |
---|
38 | text-shadow:1px 1px 0 rgba(100,60,20,0.3); |
---|
39 | .border-radius(0); |
---|
40 | } |
---|
41 | |
---|
42 | &.top .tooltip-arrow { |
---|
43 | border-top-color: @tooltip-error-color; |
---|
44 | } |
---|
45 | &.right .tooltip-arrow { |
---|
46 | border-right-color: @tooltip-error-color; |
---|
47 | } |
---|
48 | &.left .tooltip-arrow { |
---|
49 | border-left-color: @tooltip-error-color; |
---|
50 | } |
---|
51 | &.bottom .tooltip-arrow { |
---|
52 | border-bottom-color: @tooltip-error-color; |
---|
53 | } |
---|
54 | } |
---|
55 | |
---|
56 | /* success tooltip */ |
---|
57 | .tooltip-success + .tooltip { |
---|
58 | > .tooltip-inner { |
---|
59 | background-color:@tooltip-success-color; |
---|
60 | color:#FFF; |
---|
61 | text-shadow:1px 1px 0 rgba(60,100,20,0.3); |
---|
62 | border-radius:0; |
---|
63 | } |
---|
64 | |
---|
65 | &.top .tooltip-arrow { |
---|
66 | border-top-color: @tooltip-success-color; |
---|
67 | } |
---|
68 | &.right .tooltip-arrow { |
---|
69 | border-right-color: @tooltip-success-color; |
---|
70 | } |
---|
71 | &.left .tooltip-arrow { |
---|
72 | border-left-color: @tooltip-success-color; |
---|
73 | } |
---|
74 | &.bottom .tooltip-arrow { |
---|
75 | border-bottom-color: @tooltip-success-color; |
---|
76 | } |
---|
77 | } |
---|
78 | |
---|
79 | /* warning tooltip */ |
---|
80 | .tooltip-warning + .tooltip { |
---|
81 | > .tooltip-inner { |
---|
82 | background-color:@tooltip-warning-color; |
---|
83 | color:#FFF; |
---|
84 | text-shadow:1px 1px 0 rgba(100,90,10,0.3); |
---|
85 | border-radius:0; |
---|
86 | } |
---|
87 | |
---|
88 | &.top .tooltip-arrow { |
---|
89 | border-top-color: @tooltip-warning-color; |
---|
90 | } |
---|
91 | &.right .tooltip-arrow { |
---|
92 | border-right-color: @tooltip-warning-color; |
---|
93 | } |
---|
94 | &.left .tooltip-arrow { |
---|
95 | border-left-color: @tooltip-warning-color; |
---|
96 | } |
---|
97 | &.bottom .tooltip-arrow { |
---|
98 | border-bottom-color: @tooltip-warning-color; |
---|
99 | } |
---|
100 | } |
---|
101 | |
---|
102 | /* info tooltip */ |
---|
103 | .tooltip-info + .tooltip { |
---|
104 | > .tooltip-inner { |
---|
105 | background-color:@tooltip-info-color; |
---|
106 | color:#FFF; |
---|
107 | text-shadow:1px 1px 0 rgba(40,50,100,0.3); |
---|
108 | border-radius:0; |
---|
109 | } |
---|
110 | |
---|
111 | &.top .tooltip-arrow { |
---|
112 | border-top-color: @tooltip-info-color; |
---|
113 | } |
---|
114 | &.right .tooltip-arrow { |
---|
115 | border-right-color: @tooltip-info-color; |
---|
116 | } |
---|
117 | &.left .tooltip-arrow { |
---|
118 | border-left-color: @tooltip-info-color; |
---|
119 | } |
---|
120 | &.bottom .tooltip-arrow { |
---|
121 | border-bottom-color: @tooltip-info-color; |
---|
122 | } |
---|
123 | } |
---|
124 | |
---|
125 | |
---|
126 | |
---|
127 | |
---|
128 | |
---|
129 | |
---|
130 | |
---|
131 | |
---|
132 | /* popover */ |
---|
133 | .popover { |
---|
134 | .border-radius(0); |
---|
135 | padding:0; |
---|
136 | border-color:#ccc; |
---|
137 | border-width:1px; |
---|
138 | |
---|
139 | .box-shadow(~"0 0 4px 2px rgba(0,0,0,0.2)"); |
---|
140 | color:#4D6883; |
---|
141 | } |
---|
142 | |
---|
143 | |
---|
144 | .popover-title { |
---|
145 | border-radius: 0; |
---|
146 | background-color:#EFF3F8; |
---|
147 | color:#555; |
---|
148 | border-bottom:1px solid #DFE3E8; |
---|
149 | |
---|
150 | text-shadow:1px 1px 1px rgba(220,220,220,0.2); |
---|
151 | } |
---|
152 | .popover.bottom .arrow:after { |
---|
153 | top: 1px; |
---|
154 | margin-left: -10px; |
---|
155 | border-bottom-color: #EFF3F8; |
---|
156 | border-top-width: 0; |
---|
157 | } |
---|
158 | |
---|
159 | |
---|
160 | .tooltip-error + .popover { |
---|
161 | color:#555; |
---|
162 | border:1px solid #F7F0EF; |
---|
163 | |
---|
164 | .popover-title { |
---|
165 | background-color:#F7F0EF; border-bottom-color:#E8E0DF; |
---|
166 | color:#B75445; |
---|
167 | text-shadow:none; |
---|
168 | } |
---|
169 | /* |
---|
170 | &.top .arrow:after { |
---|
171 | border-top-color:#F7F0EF; |
---|
172 | } |
---|
173 | &.bottom .arrow:after { |
---|
174 | border-bottom-color:#F7F0EF; |
---|
175 | } |
---|
176 | &.right .arrow:after { |
---|
177 | border-right-color:#F7F0EF; |
---|
178 | } |
---|
179 | &.left .arrow:after { |
---|
180 | border-left-color:#F7F0EF; |
---|
181 | } |
---|
182 | */ |
---|
183 | } |
---|
184 | |
---|
185 | |
---|
186 | |
---|
187 | .tooltip-warning + .popover { |
---|
188 | color:#555; |
---|
189 | border:1px solid #F4EEE3; |
---|
190 | |
---|
191 | .popover-title { |
---|
192 | background-color:#F4EEE3; border-bottom-color:#E4DCD3; |
---|
193 | color:#D67E31; |
---|
194 | text-shadow:none; |
---|
195 | } |
---|
196 | /* |
---|
197 | &.top .arrow:after { |
---|
198 | border-top-color:#F4EEE3; |
---|
199 | } |
---|
200 | &.bottom .arrow:after { |
---|
201 | border-bottom-color:#F4EEE3; |
---|
202 | } |
---|
203 | &.right .arrow:after { |
---|
204 | border-right-color:#F4EEE3; |
---|
205 | } |
---|
206 | &.left .arrow:after { |
---|
207 | border-left-color:#F4EEE3; |
---|
208 | } |
---|
209 | */ |
---|
210 | } |
---|
211 | |
---|
212 | |
---|
213 | .tooltip-success + .popover { |
---|
214 | color:#555; |
---|
215 | border:1px solid #E8F2E3; |
---|
216 | |
---|
217 | .popover-title { |
---|
218 | background-color:#E8F2E3; border-bottom-color:#D8E2D3; |
---|
219 | color:@tooltip-success-color; |
---|
220 | text-shadow:none; |
---|
221 | } |
---|
222 | /* |
---|
223 | &.top .arrow:after { |
---|
224 | border-top-color:#E8F2E3; |
---|
225 | } |
---|
226 | &.bottom .arrow:after { |
---|
227 | border-bottom-color:#E8F2E3; |
---|
228 | } |
---|
229 | &.right .arrow:after { |
---|
230 | border-right-color:#E8F2E3; |
---|
231 | } |
---|
232 | &.left .arrow:after { |
---|
233 | border-left-color:#E8F2E3; |
---|
234 | } |
---|
235 | */ |
---|
236 | } |
---|
237 | |
---|
238 | |
---|
239 | .tooltip-info + .popover { |
---|
240 | color:#555; |
---|
241 | border:1px solid #E5EDF8; |
---|
242 | |
---|
243 | .popover-title { |
---|
244 | background-color:#E5EDF8; border-bottom-color:#D5DDE8; |
---|
245 | color:#3F79B6; |
---|
246 | text-shadow:none; |
---|
247 | } |
---|
248 | /* |
---|
249 | &.top .arrow:after { |
---|
250 | border-top-color:#E5EDF8; |
---|
251 | } |
---|
252 | &.bottom .arrow:after { |
---|
253 | border-bottom-color:#E5EDF8; |
---|
254 | } |
---|
255 | &.right .arrow:after { |
---|
256 | border-right-color:#E5EDF8; |
---|
257 | } |
---|
258 | &.left .arrow:after { |
---|
259 | border-left-color:#E5EDF8; |
---|
260 | } |
---|
261 | */ |
---|
262 | } |
---|
263 | |
---|
264 | |
---|
265 | .popover-notitle + .popover { |
---|
266 | .popover-title { |
---|
267 | display:none; |
---|
268 | } |
---|
269 | &.top .arrow:after { |
---|
270 | border-top-color:#FFF; |
---|
271 | } |
---|
272 | &.bottom .arrow:after { |
---|
273 | border-bottom-color:#FFF; |
---|
274 | } |
---|
275 | &.left .arrow:after { |
---|
276 | border-left-color:#FFF; |
---|
277 | } |
---|
278 | &.right .arrow:after { |
---|
279 | border-left-color:#FFF; |
---|
280 | } |
---|
281 | } |
---|
282 | |
---|