1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-24 02:06:17 +01:00
blog/_src/_assets/styl/_kremalicious/tooltips.styl

53 lines
1.2 KiB
Stylus

//
// kremalicious3
// --------------
// Tooltips
//
// Base class
.tooltip
position: absolute
z-index: 1000
display: block
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
font-family: $font-family-base
// We deliberately do NOT reset font-size.
font-style: normal
font-weight: normal
letter-spacing: normal
line-break: auto
line-height: $line-height
text-align: left; // Fallback for where `start` is not supported
text-align: start
text-decoration: none
text-shadow: none
text-transform: none
white-space: normal
word-break: normal
word-spacing: normal
word-wrap: normal
font-size: $font-size-mini
opacity: 0
&.in
opacity: .8
&.top
margin-top: -1px
&.right
margin-left: 1px
&.bottom
margin-top: 1px
&.left
margin-left: -1px
// Wrapper for the tooltip content
.tooltip-inner
max-width: 120px
padding: 4px 8px
color: $tooltip-color
text-align: center
background-color: $tooltip-bg
border-radius: $border-radius-base