// Triangles
// --------------------------------------------------
.triangle-base() {
content: '';
display: block;
width: 0;
height: 0;
}
.triangle(@direction, @width, @height, @color) when (@direction = up) {
.triangle-base();
border-left: (@width / 2) solid transparent;
border-right: (@width / 2) solid transparent;
border-bottom: @height solid @color;
}
.triangle(@direction, @width, @height, @color) when (@direction = down) {
.triangle-base();
border-left: (@width / 2) solid transparent;
border-right: (@width / 2) solid transparent;
border-top: @height solid @color;
border-bottom-width: 0;
}
.triangle(@direction, @width, @height, @color) when (@direction = left) {
.triangle-base();
border-top: (@height / 2) solid transparent;
border-bottom: (@height / 2) solid transparent;
border-right: @width solid @color;
}
.triangle(@direction, @width, @height, @color) when (@direction = right) {
.triangle-base();
border-top: (@height / 2) solid transparent;
border-bottom: (@height / 2) solid transparent;
border-left: @width solid @color;
}
|