scratch – Blame information for rev 58
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
58 | office | 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 | // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element. |
||
15 | // So reset our font and text properties to avoid inheriting weird values. |
||
16 | .reset-text(); |
||
17 | font-size: @font-size-base; |
||
18 | |||
19 | background-color: @popover-bg; |
||
20 | background-clip: padding-box; |
||
21 | border: 1px solid @popover-fallback-border-color; |
||
22 | border: 1px solid @popover-border-color; |
||
23 | border-radius: @border-radius-large; |
||
24 | .box-shadow(0 5px 10px rgba(0,0,0,.2)); |
||
25 | |||
26 | // Offset the popover to account for the popover arrow |
||
27 | &.top { margin-top: -@popover-arrow-width; } |
||
28 | &.right { margin-left: @popover-arrow-width; } |
||
29 | &.bottom { margin-top: @popover-arrow-width; } |
||
30 | &.left { margin-left: -@popover-arrow-width; } |
||
31 | } |
||
32 | |||
33 | .popover-title { |
||
34 | margin: 0; // reset heading margin |
||
35 | padding: 8px 14px; |
||
36 | font-size: @font-size-base; |
||
37 | background-color: @popover-title-bg; |
||
38 | border-bottom: 1px solid darken(@popover-title-bg, 5%); |
||
39 | border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0; |
||
40 | } |
||
41 | |||
42 | .popover-content { |
||
43 | padding: 9px 14px; |
||
44 | } |
||
45 | |||
46 | // Arrows |
||
47 | // |
||
48 | // .arrow is outer, .arrow:after is inner |
||
49 | |||
50 | .popover > .arrow { |
||
51 | &, |
||
52 | &:after { |
||
53 | position: absolute; |
||
54 | display: block; |
||
55 | width: 0; |
||
56 | height: 0; |
||
57 | border-color: transparent; |
||
58 | border-style: solid; |
||
59 | } |
||
60 | } |
||
61 | .popover > .arrow { |
||
62 | border-width: @popover-arrow-outer-width; |
||
63 | } |
||
64 | .popover > .arrow:after { |
||
65 | border-width: @popover-arrow-width; |
||
66 | content: ""; |
||
67 | } |
||
68 | |||
69 | .popover { |
||
70 | &.top > .arrow { |
||
71 | left: 50%; |
||
72 | margin-left: -@popover-arrow-outer-width; |
||
73 | border-bottom-width: 0; |
||
74 | border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback |
||
75 | border-top-color: @popover-arrow-outer-color; |
||
76 | bottom: -@popover-arrow-outer-width; |
||
77 | &:after { |
||
78 | content: " "; |
||
79 | bottom: 1px; |
||
80 | margin-left: -@popover-arrow-width; |
||
81 | border-bottom-width: 0; |
||
82 | border-top-color: @popover-arrow-color; |
||
83 | } |
||
84 | } |
||
85 | &.right > .arrow { |
||
86 | top: 50%; |
||
87 | left: -@popover-arrow-outer-width; |
||
88 | margin-top: -@popover-arrow-outer-width; |
||
89 | border-left-width: 0; |
||
90 | border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback |
||
91 | border-right-color: @popover-arrow-outer-color; |
||
92 | &:after { |
||
93 | content: " "; |
||
94 | left: 1px; |
||
95 | bottom: -@popover-arrow-width; |
||
96 | border-left-width: 0; |
||
97 | border-right-color: @popover-arrow-color; |
||
98 | } |
||
99 | } |
||
100 | &.bottom > .arrow { |
||
101 | left: 50%; |
||
102 | margin-left: -@popover-arrow-outer-width; |
||
103 | border-top-width: 0; |
||
104 | border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback |
||
105 | border-bottom-color: @popover-arrow-outer-color; |
||
106 | top: -@popover-arrow-outer-width; |
||
107 | &:after { |
||
108 | content: " "; |
||
109 | top: 1px; |
||
110 | margin-left: -@popover-arrow-width; |
||
111 | border-top-width: 0; |
||
112 | border-bottom-color: @popover-arrow-color; |
||
113 | } |
||
114 | } |
||
115 | |||
116 | &.left > .arrow { |
||
117 | top: 50%; |
||
118 | right: -@popover-arrow-outer-width; |
||
119 | margin-top: -@popover-arrow-outer-width; |
||
120 | border-right-width: 0; |
||
121 | border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback |
||
122 | border-left-color: @popover-arrow-outer-color; |
||
123 | &:after { |
||
124 | content: " "; |
||
125 | right: 1px; |
||
126 | border-right-width: 0; |
||
127 | border-left-color: @popover-arrow-color; |
||
128 | bottom: -@popover-arrow-width; |
||
129 | } |
||
130 | } |
||
131 | } |