AsiaMoma/assets/stylesheets/template/base/_mixins.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;
}