Usage
arrow($side, $align, $size, $color, $borderColor, $borderSize)
Parameters
$side
(Optional) (String) Which side the arrow appears on
Default: right
$align
(Optional) (String) The alignment of the arrow
Default: center
$size
(Optional) (String) The size of the arrow
Default: 20px
$color
(Optional) (String) The color of the arrow
Default: #f6f6f6
$borderColor
(Optional) (String) The border color of the arrow
Default: none
$borderSize
(Optional) (String) The border thickness
Default: 3px
Examples
.element-solid {@include arrow('top','left', 10px, #4fade3);}
.element-border {@include arrow('top','left', 10px, #eee, #4fade3, 6px);}
Source File
Located in /assets/scss/partials/_mixins.scss on line 284.
@mixin arrow($side: "right", $align: "center", $size: 20px, $color: #f6f6f6, $borderColor: "none", $borderSize: 3px) {
$selector: "&::after, &::before";
@if $borderColor == "none" {
$selector: "&::after";
}
#{$selector} {border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; visibility: visible;}
&::after {border-width: $size; @include arrow_helper($size, $color, $size, $side, $align);}
@if $borderColor != "none" {
&::before {border-width: $borderSize + $size; @include arrow_helper($size + $borderSize, $borderColor, $size - $borderSize, $side, $align);}
}
}
Override
To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.
@mixin arrow($side, $align, $size, $color, $borderColor, $borderSize){
//Write your own code here, leave it blank, or return false.
}