mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-14 09:05:17 +01:00
Matthias Kretschmann
384b364a63
- switch to rem based typography - switch to rem based spacing - responsive typography through root font size change
53 lines
1.2 KiB
Stylus
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
|