// Generates the css for a border with a triangle set along it // // $side is the border side (left, right, top, bottom) // $width is the border's width // $style is the border's style // $color is the border/triangle color // $size is the size of the triangle // it takes one or two values: width and height // $offset is how far down the border the triangle should sit // $direction is how the triangle should face // up, down, left, right, up-right, up-left, down-right, down-left, inset-up, inset-down, inset-left, inset-right // // // Copyright (C) 2014 Turn4 LLC // // This program is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // This program is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with this program. If not, see . @mixin border-triangle($side, $width, $style, $color, $size, $offset, $direction) { border-#{$side}:$width $style $color; position:relative; &::before { position:absolute; content:''; @include triangle($size, $color, $direction); @if ($side == left) { left:0; top:$offset; @if ($direction == inset-right) { margin-top:-$size; } @else { margin-top:-$size/2; } } @else if ($side == right) { right:-$size * 2; bottom:$offset; margin-bottom:-$size; } @else if ($side == top) { top:0; left:$offset; margin-left:-$size/2; } @else if ($side == bottom) { bottom:-(if(length($size) > 1, nth($size,2), $size/2 + $width)); left:$offset; margin-left:-$size/2; } } }