source: pro-violet-viettel/sourcecode/assets/css/less/tooltip-popover.less @ 775

Last change on this file since 775 was 313, checked in by dungnv, 11 years ago
File size: 4.9 KB
Line 
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
Note: See TracBrowser for help on using the repository browser.