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