2017-05-17 09:38:05 +00:00
|
|
|
//- 💫 CSS > COMPONENTS > TOOLTIPS
|
|
|
|
|
|
|
|
|
|
[data-tooltip]
|
|
|
|
|
position: relative
|
|
|
|
|
|
|
|
|
|
@include breakpoint(min, sm)
|
2017-10-03 12:14:52 +00:00
|
|
|
&[data-tooltip-style="code"]:before
|
|
|
|
|
-webkit-font-smoothing: subpixel-antialiased
|
|
|
|
|
-moz-osx-font-smoothing: auto
|
|
|
|
|
padding: 0.35em 0.85em 0.45em
|
|
|
|
|
font: normal 1rem/#{1.25} $font-code
|
|
|
|
|
white-space: nowrap
|
|
|
|
|
min-width: auto
|
|
|
|
|
|
2017-05-17 09:38:05 +00:00
|
|
|
&:before
|
|
|
|
|
@include position(absolute, top, left, 125%, 50%)
|
|
|
|
|
display: inline-block
|
|
|
|
|
content: attr(data-tooltip)
|
|
|
|
|
background: $color-front
|
2017-10-03 12:14:52 +00:00
|
|
|
border-radius: $border-radius
|
2017-05-21 18:51:30 +00:00
|
|
|
border: 1px solid rgba($color-subtle-dark, 0.5)
|
2017-05-17 09:38:05 +00:00
|
|
|
color: $color-back
|
2017-10-03 12:14:52 +00:00
|
|
|
font: normal 1.2rem/#{1.25} $font-primary
|
2017-05-19 18:24:32 +00:00
|
|
|
text-transform: none
|
2017-10-03 12:14:52 +00:00
|
|
|
text-align: left
|
2017-05-17 09:38:05 +00:00
|
|
|
opacity: 0
|
|
|
|
|
transform: translateX(-50%) translateY(-2px)
|
|
|
|
|
transition: opacity 0.1s ease-out, transform 0.1s ease-out
|
|
|
|
|
visibility: hidden
|
|
|
|
|
max-width: 300px
|
2017-10-03 12:14:52 +00:00
|
|
|
min-width: 200px
|
|
|
|
|
padding: 0.75em 1em 1em
|
2017-05-17 09:38:05 +00:00
|
|
|
z-index: 200
|
2017-10-03 12:14:52 +00:00
|
|
|
white-space: pre-wrap
|
2017-05-17 09:38:05 +00:00
|
|
|
|
|
|
|
|
&:hover:before
|
|
|
|
|
opacity: 1
|
|
|
|
|
transform: translateX(-50%) translateY(0)
|
|
|
|
|
visibility: visible
|
