Skip to content

Instantly share code, notes, and snippets.

@geta6
Last active December 17, 2015 08:39
Show Gist options
  • Save geta6/5581482 to your computer and use it in GitHub Desktop.
Save geta6/5581482 to your computer and use it in GitHub Desktop.
Stylusで使用できる、after要素で吹き出しツールチップを実現するfunctionです
@import 'fukidashi'
.item1
fukidashi white 5px of 60px on left
// 親要素の左側、上から30px位置を中心とする「底辺10px、高さ5px」の白い三角形をつけます
.item2
fukidashi red 12px of auto on right
// 親要素の右側、上から50%位置を中心とする「底辺24px、高さ12px」の赤い三角形をつけます
.item3
fukidashi rgba(0,0,0,.86) 6px of auto on top
// 親要素の上側、左から50%位置を中心とする「底辺12px、高さ6px」の86%Blackな三角形をつけます
.item4
fukidashi green 2px of 120px on bottom
// 親要素の下側、左から60px位置を中心とする「底辺4px、高さ2px」の緑な三角形をつけます
fukidashi(colour, size, of, mastersize, on, direction)
&:after
content ' '
position absolute
margin-top 0
margin-left 0
margin-right 0
margin-bottom 0
width 0
height 0
border size solid transparent
if direction is 'top'
if mastersize is 'auto'
left 50%
margin-left (-1*size)px
else
left 0
margin-left (mastersize/2 - size)px
top 0
margin-top (-1*size*2)px
border-bottom-color colour
if direction is 'left'
if mastersize is 'auto'
top 50%
margin-top (-1*size)px
else
top 0
margin-top (mastersize/2 - size)px
left 0
margin-left (-1*size*2)px
border-right-color colour
if direction is 'right'
if mastersize is 'auto'
top 50%
margin-top (-1*size)px
else
top 0
margin-top (mastersize/2 - size)px
right 0
margin-right (-1*size*2)px
border-left-color colour
if direction is 'bottom'
if mastersize is 'auto'
left 50%
margin-left (-1*size)px
else
left 0
margin-left (mastersize/2 - size)px
bottom 0
margin-bottom (-1*size*2)px
border-top-color colour
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment