/*mixing is from http://codepen.io/erindotio/pen/BLFqe*/
@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) {
// initiate internal variables
$box-edge-inverse: bottom;
$edge-side-pos: $edge-side;
$edge-side-pos-value: 0;
// establish inverse variables
@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; }
// calculate remaining internal variables
@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;
z-index: 10;
pointer-events: none;
border: solid transparent;
}
&: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;
}
}
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.