Last active
October 13, 2015 06:27
-
-
Save Swaagie/4153431 to your computer and use it in GitHub Desktop.
Stylus CSS arrows made easy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Create an arrow on the element using before and after pseudo selectors. | |
| * | |
| * Example: | |
| * | |
| * .tooltip | |
| * arrow('right', 20px, 15px, #CCC, #FFF, 1) | |
| * | |
| * Display an arrow right of the element 20 pixels from the top. The border | |
| * is grey colored and 1 pixel wide. If the background color matches the | |
| * parents color it will look like the arrow originates from the parent. | |
| * | |
| * Works in all major browser, but IE 6 and 7. | |
| * | |
| * @param string side which side to show the star | |
| * @param integer offset from the top or left dependant on side (pixels) | |
| * @param integer size of arrow (pixels) | |
| * @param string border color | |
| * @param string background color | |
| * @param integer width of the border | |
| * @return markup for attached to parent | |
| */ | |
| arrow(side, offset, size, border, background, width) | |
| // Transpose the sides, right arrow requires left border etc. | |
| if side is 'right' | |
| side = 'left' | |
| pos = left 100% top 0 | |
| else if side is 'left' | |
| side = 'right' | |
| pos = right 100% top 0 | |
| else if side is 'top' | |
| side = 'bottom' | |
| pos = left 0 bottom 100% | |
| else if side is 'bottom' | |
| side = 'top' | |
| pos = left 0 top 100% | |
| sides = side is 'left' or side is 'right' ? 1 : 0 | |
| &:before | |
| &:after | |
| absolute: pos | |
| height: 0 | |
| width: 0 | |
| content: ' ' | |
| &:before | |
| {sides ? 'top' : 'left'}: offset | |
| border: size solid transparent | |
| border-{side}-color: border | |
| &:after | |
| {sides ? 'top' : 'left'}: offset | |
| border: (size - width) solid transparent | |
| border-{side}-color: background |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I believe the background arrow isn't centered at least it's not for me. Adding:
seems to fix this.
I also let the arguments inherit from their parent selector's css or gave them common properties so that you have to pass fewer variables.
Now, in most cases I can just provide a position and size