lychee/assets/scss/tooltip.scss
2014-08-26 16:47:12 +02:00

33 lines
2.0 KiB
SCSS

/**
* @name tooltip.css
*/
.tipsy {
padding: 4px;
font-size: 12px;
position: absolute;
z-index: 100000;
animation-name: fadeIn;
animation-duration: .3s;
}
.tipsy-inner {
padding: 8px 10px 7px;
color: #fff;
max-width: 200px;
text-align: center;
background: rgba(0, 0, 0, .8);
border-radius: 25px;
}
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed rgba(0, 0, 0, .8); }
.tipsy-arrow-n { border-bottom-color: rgba(0, 0, 0, .8); }
.tipsy-arrow-s { border-top-color: rgba(0, 0, 0, .8); }
.tipsy-arrow-e { border-left-color: rgba(0, 0, 0, .8); }
.tipsy-arrow-w { border-right-color: rgba(0, 0, 0, .8); }
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }