|
1 // |
|
2 // Popovers |
|
3 // -------------------------------------------------- |
|
4 |
|
5 |
|
6 .popover { |
|
7 position: absolute; |
|
8 top: 0; |
|
9 left: 0; |
|
10 z-index: @zindex-popover; |
|
11 display: none; |
|
12 max-width: @popover-max-width; |
|
13 padding: 1px; |
|
14 text-align: left; // Reset given new insertion method |
|
15 background-color: @popover-bg; |
|
16 background-clip: padding-box; |
|
17 border: 1px solid @popover-fallback-border-color; |
|
18 border: 1px solid @popover-border-color; |
|
19 border-radius: @border-radius-large; |
|
20 .box-shadow(0 5px 10px rgba(0,0,0,.2)); |
|
21 |
|
22 // Overrides for proper insertion |
|
23 white-space: normal; |
|
24 |
|
25 // Offset the popover to account for the popover arrow |
|
26 &.top { margin-top: -10px; } |
|
27 &.right { margin-left: 10px; } |
|
28 &.bottom { margin-top: 10px; } |
|
29 &.left { margin-left: -10px; } |
|
30 } |
|
31 |
|
32 .popover-title { |
|
33 margin: 0; // reset heading margin |
|
34 padding: 8px 14px; |
|
35 font-size: @font-size-base; |
|
36 font-weight: normal; |
|
37 line-height: 18px; |
|
38 background-color: @popover-title-bg; |
|
39 border-bottom: 1px solid darken(@popover-title-bg, 5%); |
|
40 border-radius: 5px 5px 0 0; |
|
41 } |
|
42 |
|
43 .popover-content { |
|
44 padding: 9px 14px; |
|
45 } |
|
46 |
|
47 // Arrows |
|
48 // |
|
49 // .arrow is outer, .arrow:after is inner |
|
50 |
|
51 .popover .arrow { |
|
52 &, |
|
53 &:after { |
|
54 position: absolute; |
|
55 display: block; |
|
56 width: 0; |
|
57 height: 0; |
|
58 border-color: transparent; |
|
59 border-style: solid; |
|
60 } |
|
61 } |
|
62 .popover .arrow { |
|
63 border-width: @popover-arrow-outer-width; |
|
64 } |
|
65 .popover .arrow:after { |
|
66 border-width: @popover-arrow-width; |
|
67 content: ""; |
|
68 } |
|
69 |
|
70 .popover { |
|
71 &.top .arrow { |
|
72 left: 50%; |
|
73 margin-left: -@popover-arrow-outer-width; |
|
74 border-bottom-width: 0; |
|
75 border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback |
|
76 border-top-color: @popover-arrow-outer-color; |
|
77 bottom: -@popover-arrow-outer-width; |
|
78 &:after { |
|
79 content: " "; |
|
80 bottom: 1px; |
|
81 margin-left: -@popover-arrow-width; |
|
82 border-bottom-width: 0; |
|
83 border-top-color: @popover-arrow-color; |
|
84 } |
|
85 } |
|
86 &.right .arrow { |
|
87 top: 50%; |
|
88 left: -@popover-arrow-outer-width; |
|
89 margin-top: -@popover-arrow-outer-width; |
|
90 border-left-width: 0; |
|
91 border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback |
|
92 border-right-color: @popover-arrow-outer-color; |
|
93 &:after { |
|
94 content: " "; |
|
95 left: 1px; |
|
96 bottom: -@popover-arrow-width; |
|
97 border-left-width: 0; |
|
98 border-right-color: @popover-arrow-color; |
|
99 } |
|
100 } |
|
101 &.bottom .arrow { |
|
102 left: 50%; |
|
103 margin-left: -@popover-arrow-outer-width; |
|
104 border-top-width: 0; |
|
105 border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback |
|
106 border-bottom-color: @popover-arrow-outer-color; |
|
107 top: -@popover-arrow-outer-width; |
|
108 &:after { |
|
109 content: " "; |
|
110 top: 1px; |
|
111 margin-left: -@popover-arrow-width; |
|
112 border-top-width: 0; |
|
113 border-bottom-color: @popover-arrow-color; |
|
114 } |
|
115 } |
|
116 |
|
117 &.left .arrow { |
|
118 top: 50%; |
|
119 right: -@popover-arrow-outer-width; |
|
120 margin-top: -@popover-arrow-outer-width; |
|
121 border-right-width: 0; |
|
122 border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback |
|
123 border-left-color: @popover-arrow-outer-color; |
|
124 &:after { |
|
125 content: " "; |
|
126 right: 1px; |
|
127 border-right-width: 0; |
|
128 border-left-color: @popover-arrow-color; |
|
129 bottom: -@popover-arrow-width; |
|
130 } |
|
131 } |
|
132 |
|
133 } |