91 lines
1.6 KiB
Plaintext
Raw Normal View History

2018-04-19 13:04:25 +00:00
const tip-opacity = 0.97
2018-04-20 10:47:10 +00:00
const tip-transform-hidden = translateX(-50%) translateY(-80%)
const tip-transform-visible = translateX(-50%) translateY(-100%)
2018-04-18 10:33:19 +00:00
mixin tip-before
2018-04-22 12:45:06 +00:00
content attr(data-label)
position absolute
top -10px
left 50%
z-index 100000
pointer-events none
opacity 0
transform tip-transform-hidden
font-size 0.92rem
color text-color
text-shadow none
padding 0.2rem 0.7rem
background tip-bg-color
border 1px solid ui-border-color
border-radius ui-element-border-radius
box-shadow shadow-light
white-space nowrap
default-transition
mixin tip-after
content ""
position absolute
top -4px
left 50%
z-index 100001
pointer-events none
opacity 0
width 0
height 0
border-style solid
border-width 8px 8px 0 8px
border-color tip-bg-color transparent transparent transparent
transform tip-transform-hidden
default-transition
.tip-offset-child
position absolute !important
left 0
top 0
pointer-events none
2018-04-20 11:39:27 +00:00
// Tooltips are not activated by default.
// This helps loading times as the browser
// doesn't need to create pseudo elements on page load.
2018-04-18 09:26:40 +00:00
.tip
2018-04-20 11:39:27 +00:00
// ...
2018-04-20 11:39:27 +00:00
// When the browser is idle, we give all tips the "tip-active" class.
.tip-active
2018-04-18 09:26:40 +00:00
position relative
2018-07-07 15:40:21 +00:00
z-index 9999
2018-04-18 09:26:40 +00:00
:before
tip-before
2018-04-18 09:26:40 +00:00
:after
tip-after
2018-04-18 09:26:40 +00:00
:hover
:before
2018-04-18 10:33:19 +00:00
opacity tip-opacity
2018-04-18 11:09:13 +00:00
transform tip-transform-visible
2018-04-18 09:26:40 +00:00
:after
2018-04-18 10:33:19 +00:00
opacity tip-opacity
transform tip-transform-visible
.tip-offset-root
position relative
:after
tip-after
.tip-offset-child
:before
tip-before
:hover
:after
opacity tip-opacity
transform tip-transform-visible
.tip-offset-child
:before
opacity tip-opacity
transform tip-transform-visible