_triangle.scss (2537B)
1 @mixin triangle($size, $color, $direction) { 2 $width: nth($size, 1); 3 $height: nth($size, length($size)); 4 $foreground-color: nth($color, 1); 5 $background-color: if(length($color) == 2, nth($color, 2), transparent); 6 height: 0; 7 width: 0; 8 9 @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 10 $width: $width / 2; 11 $height: if(length($size) > 1, $height, $height/2); 12 13 @if $direction == up { 14 border-bottom: $height solid $foreground-color; 15 border-left: $width solid $background-color; 16 border-right: $width solid $background-color; 17 } @else if $direction == right { 18 border-bottom: $width solid $background-color; 19 border-left: $height solid $foreground-color; 20 border-top: $width solid $background-color; 21 } @else if $direction == down { 22 border-left: $width solid $background-color; 23 border-right: $width solid $background-color; 24 border-top: $height solid $foreground-color; 25 } @else if $direction == left { 26 border-bottom: $width solid $background-color; 27 border-right: $height solid $foreground-color; 28 border-top: $width solid $background-color; 29 } 30 } @else if ($direction == up-right) or ($direction == up-left) { 31 border-top: $height solid $foreground-color; 32 33 @if $direction == up-right { 34 border-left: $width solid $background-color; 35 } @else if $direction == up-left { 36 border-right: $width solid $background-color; 37 } 38 } @else if ($direction == down-right) or ($direction == down-left) { 39 border-bottom: $height solid $foreground-color; 40 41 @if $direction == down-right { 42 border-left: $width solid $background-color; 43 } @else if $direction == down-left { 44 border-right: $width solid $background-color; 45 } 46 } @else if ($direction == inset-up) { 47 border-color: $background-color $background-color $foreground-color; 48 border-style: solid; 49 border-width: $height $width; 50 } @else if ($direction == inset-down) { 51 border-color: $foreground-color $background-color $background-color; 52 border-style: solid; 53 border-width: $height $width; 54 } @else if ($direction == inset-right) { 55 border-color: $background-color $background-color $background-color $foreground-color; 56 border-style: solid; 57 border-width: $width $height; 58 } @else if ($direction == inset-left) { 59 border-color: $background-color $foreground-color $background-color $background-color; 60 border-style: solid; 61 border-width: $width $height; 62 } 63 }