Commit | Line | Data |
---|---|---|
7b869721 S |
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 | } |