Skip to content

Instantly share code, notes, and snippets.

@kirkas
Created March 15, 2014 00:43
Show Gist options
  • Save kirkas/9560076 to your computer and use it in GitHub Desktop.
Save kirkas/9560076 to your computer and use it in GitHub Desktop.
@mixin arrow_helper($arrowSize, $arrowColor, $margin, $side, $align) {
@if $side == "top" {
border-bottom-color: $arrowColor;
top: -2 * $arrowSize;
}
@if $side == "bottom" {
border-top-color: $arrowColor;
bottom: -2 * $arrowSize;
}
@if $side == "left" {
border-right-color: $arrowColor;
left: -2 * $arrowSize;
}
@if $side == "right" {
border-left-color: $arrowColor;
right: -2 * $arrowSize;
}
@if $side == "right" or $side == "left" {
@if $align == "center" {
top: 50%;
margin-top: -$arrowSize;
}
@else if $align == "top" {
top: $margin;
}
@else if $align == "bottom" {
bottom: $margin;
}
}
@if $side == "bottom" or $side == "top" {
@if $align == "center" {
right: 50%;
margin-right: -$arrowSize;
}
@else if $align == "left" {
left: $margin;
}
@else if $align == "right" {
right: $margin;
}
}
}
@mixin arrow($side: "right", $align: "center", $size: 20px, $color: #f6f6f6, $borderColor: "none", $borderSize: 3px) {
$selector: "&:after, &:before";
@if $borderColor == "none" {
$selector: "&:after";
}
#{$selector} {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
visibility: visible;
}
&:after {
border-width: $size;
@include arrow_helper($size, $color, $size, $side, $align);
}
@if $borderColor != "none" {
&:before {
border-width: $borderSize + $size;
@include arrow_helper($size + $borderSize, $borderColor, $size - $borderSize, $side, $align);
}
}
}
@strarsis
Copy link

@kirkas: Putting this into a GitHub repository and publishing to npm for using it with webpack/sass eyeglass would be great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment