Skip to content

Instantly share code, notes, and snippets.

@erin-dot-io

erin-dot-io/css-arrow.scss

Last active December 15, 2015 10:39
Show Gist options
  • Save erin-dot-io/5247046 to your computer and use it in GitHub Desktop.
Save erin-dot-io/5247046 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. erin-dot-io revised this gist Mar 27, 2013. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions css-arrow.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -77,6 +77,15 @@

    // @include css-arrow([$box-edge], [$edge-side], [$arrow-size], [$edge-side-offset], [$fill-color], [$border-color], [$border-style])

    // $box-edge accepts 'top', 'bottom', 'left', or 'right'
    // $edge-side accepts 'left', 'right', or 'center' if $box-edge is 'top' or 'bottom', or:
    // $edge-side accepts 'top', 'bottom', or 'center', if $box-edge is 'left' or 'right'
    // $arrow-size accepts any standard unit size for css border attribute
    // $edge-side-offset accepts any standard unit size for css margin attribute
    // NOTE: $edge-side-offset will be ignored if $edge-side is 'center'. It can also be set to the default of 0 in this case.
    // $fill-color and $border-color take any color value or variable containing a color
    // $border-style accepts 'default' or 'flag' - more options are planned, including border width

    .default { @include css-arrow; }
    // If $edge-side is not 'center', use $edge-side-offset to offset the arrow from the top, right, bottom, or left side of the parent container
    .offset { @include css-arrow(bottom, right, 14px, 15px, #ddd); }
  2. erin-dot-io created this gist Mar 26, 2013.
    86 changes: 86 additions & 0 deletions css-arrow.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    // The mixin

    @mixin css-arrow($box-edge : bottom,
    $edge-side : center,
    $arrow-size : 10px,
    $edge-side-offset : 0,
    $fill-color : black,
    $border-color : none,
    $border-style : border) {

    $box-edge-inverse: bottom;
    $edge-side-pos: $edge-side;
    $edge-side-pos-value: 0;

    @if $box-edge == top { $box-edge-inverse: bottom; }
    @else if $box-edge == right { $box-edge-inverse: left; }
    @else if $box-edge == bottom { $box-edge-inverse: top; }
    @else if $box-edge == left { $box-edge-inverse: right; }

    @if ($box-edge == 'top' or
    $box-edge == 'bottom') {
    @if $edge-side == center {
    $edge-side-pos: left;
    $edge-side-pos-value: 50%;
    $edge-side-offset: (-$arrow-size);
    }
    }
    @if ($box-edge == 'left' or
    $box-edge == 'right') {
    @if $edge-side == center {
    $edge-side-pos: top;
    $edge-side-pos-value: 50%;
    $edge-side-offset: (-$arrow-size);
    }
    }
    &:after, &:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: solid rgba(#fff, 0);
    }

    &:after {
    border-color: rgba(#fff, 0);
    border-width: $arrow-size - 1;
    #{$box-edge}: (-$arrow-size) - $arrow-size + 2;
    border-#{$box-edge-inverse}-color: $fill-color;
    #{$edge-side-pos}: $edge-side-pos-value;
    margin-#{$edge-side-pos}: $edge-side-offset + 1;
    }

    @if $border-style == flag {
    @include border-radius(2px);
    &:before {
    border-color: rgba(#fff, 0);
    border-width: $arrow-size - 1;
    #{$box-edge}: (-$arrow-size) - $arrow-size + 2;
    border-#{$box-edge-inverse}-color: $border-color;
    #{$edge-side-pos}: $edge-side-pos-value;
    margin-#{$edge-side-pos}: $edge-side-offset + 2;
    }
    } @else {
    &:before {
    border-color: rgba(#fff, 0);
    border-width: $arrow-size;
    #{$box-edge}: (-$arrow-size) - $arrow-size;
    border-#{$box-edge-inverse}-color: $border-color;
    #{$edge-side-pos}: $edge-side-pos-value;
    margin-#{$edge-side-pos}: $edge-side-offset;
    }
    }
    }

    // Example uses

    // @include css-arrow([$box-edge], [$edge-side], [$arrow-size], [$edge-side-offset], [$fill-color], [$border-color], [$border-style])

    .default { @include css-arrow; }
    // If $edge-side is not 'center', use $edge-side-offset to offset the arrow from the top, right, bottom, or left side of the parent container
    .offset { @include css-arrow(bottom, right, 14px, 15px, #ddd); }
    // Add a second color to create a 1px border effect
    .border-style { @include css-arrow(top, center, 18px, 0, #ddd, #aaa); }
    // Adding 'flag' to the end of the mxin drops the :before arrow by 1 pixel to create a shadow effect instead of 1px border effect
    .flag-style { @include css-arrow(right, center, 20px, 0, #ddd, #aaa, flag); }