Permalink
Fetching contributors…
Cannot retrieve contributors at this time
50 lines (45 sloc) 1.55 KB
/// Used to set up an arrow element
/// @access private
/// @group arrow
@mixin __arrow-base($size: 10px) {
display: inline-block;
width: 0;
height: 0;
$size: $size/2;
border: $size solid transparent;
}
/// Used with arrow-base($size) to create an arrow shape
/// @access private
/// @group arrow
/// @todo abstract out direction to helper map
@mixin __arrow-make($color: inherit, $direction: down) {
// Set up the direction
@if $direction == down {
$direction: "top";
} @elseif $direction == up {
$direction: "bottom";
} @elseif $direction == left {
$direction: "right";
} @elseif $direction == right {
$direction: "left";
} @else {
@warn "[@include arrow[-*](vars)] $direction can only accept the following values: up, down, left, right. Falling back to default (down)";
$direction: "top";
}
border-#{$direction}-color: $color;
}
/// Allows creation of CSS-only directional arrows
/// Shorthand mixin accessor for arrow-base() and arrow-make()
/// @example scss - Turn the .el element into a 10px downward-facing arrow that inherits its color from the parent.
/// .el {
/// @include arrow(10px, inherit, down);
/// }
/// @access public
/// @group arrow
/// @param {number} $size [10px] - arglist of selctors to assert
/// @param {color} $color [inherit] - arrow color
/// @param {direction} $direction [down] - arrow direction
@mixin arrow($size: 10px, $color: inherit, $direction: down) {
@include __arrow-base($size);
@include __arrow-make($color, $direction);
}