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
|
|
|
|
2018-04-18 18:11:20 +00:00
|
|
|
mixin tip-before
|
|
|
|
|
content attr(aria-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 ui-background
|
|
|
|
|
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 ui-background 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:34:12 +00:00
|
|
|
|
2018-04-20 11:39:27 +00:00
|
|
|
// When the browser is idle, we give all tips the "tip-active" class.
|
2018-04-20 11:34:12 +00:00
|
|
|
.tip-active
|
2018-04-18 09:26:40 +00:00
|
|
|
position relative
|
|
|
|
|
|
|
|
|
|
:before
|
2018-04-18 18:11:20 +00:00
|
|
|
tip-before
|
2018-04-18 09:26:40 +00:00
|
|
|
|
|
|
|
|
:after
|
2018-04-18 18:11:20 +00:00
|
|
|
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
|
2018-04-18 18:11:20 +00:00
|
|
|
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
|
