src/sass/popover.scss
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 25em;
padding: 1px;
font: 0.8em/1.1 $sans;
background-color: #dcdcdc;
background: linear-gradient(#FFF, #dcdcdc);
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
&-content {
padding: 9px 14px;
a,
a:visited {
color: $navigationbackground;
line-height: 1.1em;
background: transparent;
display: inline;
&:hover {
background: transparent;
display: inline;
margin: 0px;
padding: 0px;
color: $darkbeige;
line-height: 1.1em;
}
}
}
}
h3.popover-title {
text-align: center;
text-transform: uppercase;
padding: 18px 0px;
font-weight: normal;
border-bottom: 1px solid lighten($footernavigationhover, 20%);
}
.popover-content {
margin-top: 5px;
}
.popover.bottom {
margin-top: 10px;
}
.popover > .arrow,
.popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover > .arrow {
border-width: 11px;
}
.popover > .arrow:after {
border-width: 10px;
content: "";
}
.popover.bottom > .arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: rgba(0, 0, 0, 0.1);
top: -11px;
}
.popover.bottom > .arrow:after {
content: " ";
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}