Usage
arrow_helper($arrowSize, $arrowColor, $margin, $side, $align)
Parameters
$arrowSize
(Required) (String) The size of the arrow
Default: None
$arrowColor
(Required) (String) The color of the arrow
Default: None
$margin
(Required) (String) The margin of the alignment
Default: None
$side
(Required) (String) The side of the element
Default: None
$align
(Required) (String) The alignment of the arrow
Default: None
Additional Notes
This mixin is a supportive function, so it does not need to be called specifically. Use arrow() itself.
Source File
Located in /assets/scss/partials/_mixins.scss on line 296.
@mixin arrow_helper($arrowSize, $arrowColor, $margin, $side, $align) {
@if $side == "top" {
border-bottom-color: $arrowColor; top: -2 * $arrowSize;
}
@if $side == "bottom" {
border-top-color: $arrowColor; bottom: -2 * $arrowSize;
}
@if $side == "left" {
border-right-color: $arrowColor; left: -2 * $arrowSize;
}
@if $side == "right" {
border-left-color: $arrowColor; right: -2 * $arrowSize;
}
@if $side == "right" or $side == "left" {
@if $align == "center" {
top: 50%; margin-top: -$arrowSize;
} @else if $align == "top" {
top: $margin;
} @else if $align == "bottom" {
bottom: $margin;
}
}
@if $side == "bottom" or $side == "top" {
@if $align == "center" {
right: 50%; margin-right: -$arrowSize;
} @else if $align == "left" {
left: $margin;
} @else if $align == "right" {
right: $margin;
}
}
}
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_helper($arrowSize, $arrowColor, $margin, $side, $align){
//Write your own code here, leave it blank, or return false.
}