kdf
Version:
178 lines (153 loc) • 4.44 kB
text/stylus
@import "./kdfn"
div.kdtooltip
// transform translate3d(0,0,0)
bg color, transparent
top -100%
left -100%
width auto
height auto
min-width 200px
min-height 50px
overflow visible
z-index 100000
borderBox()
abs()
// vendor transition, opacity 0.1s ease-out
&.animate-movement
vendor transition, left 0.15s ease-in \, top 0.15s ease-in // \, opacity 0.1s ease-out
&:after
content ""
size 0, 0
border 5px solid transparent
z-index 9002
abs()
div.wrapper
bg color, white
shadow 0 10px 20px 5px rgba(0,0,0,0.15)
padding 5px
width 100%
height 100%
min-height 50px
min-width 200px
z-index 9001
rounded 5px
borderBox()
rel()
&.direction-right
div.wrapper
text-align left
&.direction-left
div.wrapper
text-align right
&.placement-top
&:after
border-top-color #fff
bottom -10px
&.direction-right
&:after
left 5px
&.direction-left
&:after
right 5px
&.direction-center
&:after
margin-left -9px
left 50%
&.placement-bottom
&:after
border-bottom-color #fff
top -9px
&.direction-right
&:after
left 5px
&.direction-left
&:after
right 5px
&.direction-center
&:after
margin-left -9px
left 50%
&.placement-left
&:after
border-left-color #fff
right -9px
&.direction-top
&:after
bottom 5px
&.direction-bottom
&:after
top 5px
&.direction-center
&:after
top 50%
margin-top -5px
&.placement-right
&:after
border-right-color #fff
left -9px
&.direction-top
&:after
bottom 5px
&.direction-bottom
&:after
top 5px
&.direction-center
&:after
top 50%
margin-top -5px
&.out
opacity 0
&.in
opacity 1
&.just-text
margin-left 0
min-height 5px
min-width 20px
max-width 300px
div.wrapper
shadow 0 3px 7px rgba(0, 0, 0, 0.25)
rounded 3px
bg color, rgba(0,0,0,0.65)
min-height 5px
min-width 20px
color white
white-space normal
text-align center
hyphens auto
direction ltr
text-rendering optimizeLegibility
word-wrap break-word
font-size 12px
font-weight 300
&.placement-right
&:after
border-right-color rgba(0,0,0,0.65)
&.direction-center
&:after
top 50%
margin-top -5px
&.placement-left
&:after
border-left-color rgba(0,0,0,0.65)
&.direction-center
&:after
top 50%
margin-top -5px
&.placement-bottom
&:after
border-bottom-color rgba(0,0,0,0.65)
&.direction-left
margin-left 10px
&.direction-center
&:after
margin-left -5px
left 50%
&.placement-top
&:after
border-top-color rgba(0,0,0,0.65)
&.direction-left
margin-left 10px
&.direction-center
&:after
margin-left -5px
left 50%