54 lines
1.3 KiB
SCSS
54 lines
1.3 KiB
SCSS
// Set Triangle
|
|
@import "variables";
|
|
|
|
@mixin arrow($direction, $width, $height, $color) {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
|
|
@if $direction == "top" {
|
|
border-width: $width $height 0 $height;
|
|
border-color: $color transparent transparent transparent;
|
|
}
|
|
|
|
@else if $direction == "right" {
|
|
border-width: $height $width $height 0;
|
|
border-color: transparent $color transparent transparent;
|
|
}
|
|
|
|
@else if $direction == "bottom" {
|
|
border-width: 0 $height $width $height;
|
|
border-color: transparent transparent $color transparent;
|
|
}
|
|
|
|
@else if $direction == "left" {
|
|
border-width: $height 0 $height $width;
|
|
border-color: transparent transparent transparent $color;
|
|
}
|
|
|
|
@else if $direction == "top-right" {
|
|
border-width: 0 $width $height 0;
|
|
border-color: transparent $color transparent transparent;
|
|
}
|
|
|
|
@else if $direction == "top-left" {
|
|
border-width: $height $width 0 0;
|
|
border-color: $color transparent transparent transparent;
|
|
}
|
|
|
|
@else if $direction == "bottom-right" {
|
|
border-width: 0 0 $height $width;
|
|
border-color: transparent transparent $color transparent;
|
|
}
|
|
|
|
@else if $direction == "bottom-left" {
|
|
border-width: $height 0 0 $width;
|
|
border-color: transparent transparent transparent $color;
|
|
}
|
|
}
|
|
|
|
@mixin list-reset {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
} |