src/resources/themes/vendor/compass-recipes/stylesheets/recipes/ui/helper/_arrow.scss

   1 @import "recipes/shape/polygon/triangle";
   2
   3 @mixin ui-helper-arrow($position: bottom, $width: 6px, $color: #fff)
   4 {
   5     position: relative;
   6
   7     &:after
   8     {
   9         @include ui-helper-arrow-element($position, $width, $color)
  10     }
  11 }
  12
  13 @mixin ui-helper-arrow-element($position: bottom, $width: 6px, $color: #fff, $margin-side: auto, $margin: auto)
  14 {
  15     position: absolute;
  16
  17     display: block;
  18     content: "";
  19     width:0; height:0;
  20
  21     $position-offset: 50%;
  22     @if ($margin-side == auto)
  23     {
  24         $margin: -#{$width};
  25
  26     }
  27     @else
  28     {
  29         $position-offset: 0;
  30     }
  31
  32     // vertical
  33     @if ($position == top)
  34     {
  35         top: -$width;
  36     }
  37     @if ($position == bottom)
  38     {
  39         bottom: -$width;
  40     }
  41     @if ($position == top or $position == bottom)
  42     {
  43         left: $position-offset;
  44         @if ($margin-side == center)
  45         {
  46             margin-left: $margin;
  47         }
  48         @else
  49         {
  50             margin-#{$margin-side}: $margin;
  51         }
  52     }
  53
  54     @if ($position == left)
  55     {
  56         left: -$width;
  57     }
  58     @if ($position == right)
  59     {
  60         right: -$width;
  61     }
  62     @if ($position == left or $position == right)
  63     {
  64         top: $position-offset;
  65         @if ($margin-side == center)
  66         {
  67             margin-top: $margin;
  68         }
  69         @else
  70         {
  71             margin-#{$margin-side}: $margin;
  72         }
  73     }
  74
  75     @include triangle($position, $width, 0, $color);
  76 }