46 lines
1.1 KiB
SCSS
46 lines
1.1 KiB
SCSS
@mixin triangle ($size, $color, $direction) {
|
|
height: 0;
|
|
width: 0;
|
|
|
|
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
border-width: $size / 2;
|
|
|
|
@if $direction == up {
|
|
border-bottom-color: $color;
|
|
|
|
} @else if $direction == right {
|
|
border-left-color: $color;
|
|
|
|
} @else if $direction == down {
|
|
border-top-color: $color;
|
|
|
|
} @else if $direction == left {
|
|
border-right-color: $color;
|
|
}
|
|
}
|
|
|
|
@else if ($direction == up-right) or ($direction == up-left) {
|
|
border-top: $size solid $color;
|
|
|
|
@if $direction == up-right {
|
|
border-left: $size solid transparent;
|
|
|
|
} @else if $direction == up-left {
|
|
border-right: $size solid transparent;
|
|
}
|
|
}
|
|
|
|
@else if ($direction == down-right) or ($direction == down-left) {
|
|
border-bottom: $size solid $color;
|
|
|
|
@if $direction == down-right {
|
|
border-left: $size solid transparent;
|
|
|
|
} @else if $direction == down-left {
|
|
border-right: $size solid transparent;
|
|
}
|
|
}
|
|
}
|