|
0
|
1 @charset "UTF-8";
|
|
|
2
|
|
|
3 /// Generates a triangle pointing in a specified direction.
|
|
|
4 ///
|
|
|
5 /// @argument {string} $direction [up]
|
|
|
6 /// The direction the triangle should point. Accepts `up`, `up-right`,
|
|
|
7 /// `right`, `down-right`, `down`, `down-left`, `left` or `up-left`.
|
|
|
8 ///
|
|
|
9 /// @argument {color} $color [currentColor]
|
|
|
10 /// Color of the triangle.
|
|
|
11 ///
|
|
|
12 /// @argument {number (with unit)} $width [1rem]
|
|
|
13 /// Width of the triangle.
|
|
|
14 ///
|
|
|
15 /// @argument {number (with unit)} $height [($width / 2)]
|
|
|
16 /// Height of the triangle.
|
|
|
17 ///
|
|
|
18 /// @example scss
|
|
|
19 /// .element {
|
|
|
20 /// &::before {
|
|
|
21 /// @include triangle(up, #b25c9c, 2rem);
|
|
|
22 /// content: "";
|
|
|
23 /// }
|
|
|
24 /// }
|
|
|
25 ///
|
|
|
26 /// // CSS Output
|
|
|
27 /// .element::before {
|
|
|
28 /// border-style: solid;
|
|
|
29 /// height: 0;
|
|
|
30 /// width: 0;
|
|
|
31 /// border-color: transparent transparent #b25c9c transparent;
|
|
|
32 /// border-width: 0 1rem 1rem;
|
|
|
33 /// content: "";
|
|
|
34 /// }
|
|
|
35
|
|
|
36 @mixin triangle(
|
|
|
37 $direction: up,
|
|
|
38 $color: currentColor,
|
|
|
39 $width: 1rem,
|
|
|
40 $height: ($width / 2)
|
|
|
41 ) {
|
|
|
42 @if not index(
|
|
|
43 "up" "up-right" "right" "down-right" "down" "down-left" "left" "up-left",
|
|
|
44 $direction
|
|
|
45 ) {
|
|
|
46 @error "Direction must be `up`, `up-right`, `right`, `down-right`, " +
|
|
|
47 "`down`, `down-left`, `left` or `up-left`.";
|
|
|
48 } @else if not _is-color($color) {
|
|
|
49 @error "`#{$color}` is not a valid color for the `$color` argument in " +
|
|
|
50 "the `triangle` mixin.";
|
|
|
51 } @else {
|
|
|
52 border-style: solid;
|
|
|
53 height: 0;
|
|
|
54 width: 0;
|
|
|
55
|
|
|
56 @if $direction == "up" {
|
|
|
57 border-color: transparent transparent $color;
|
|
|
58 border-width: 0 ($width / 2) $height;
|
|
|
59 } @else if $direction == "up-right" {
|
|
|
60 border-color: transparent $color transparent transparent;
|
|
|
61 border-width: 0 $width $width 0;
|
|
|
62 } @else if $direction == "right" {
|
|
|
63 border-color: transparent transparent transparent $color;
|
|
|
64 border-width: ($height / 2) 0 ($height / 2) $width;
|
|
|
65 } @else if $direction == "down-right" {
|
|
|
66 border-color: transparent transparent $color;
|
|
|
67 border-width: 0 0 $width $width;
|
|
|
68 } @else if $direction == "down" {
|
|
|
69 border-color: $color transparent transparent;
|
|
|
70 border-width: $height ($width / 2) 0;
|
|
|
71 } @else if $direction == "down-left" {
|
|
|
72 border-color: transparent transparent transparent $color;
|
|
|
73 border-width: $width 0 0 $width;
|
|
|
74 } @else if $direction == "left" {
|
|
|
75 border-color: transparent $color transparent transparent;
|
|
|
76 border-width: ($height / 2) $width ($height / 2) 0;
|
|
|
77 } @else if $direction == "up-left" {
|
|
|
78 border-color: $color transparent transparent;
|
|
|
79 border-width: $width $width 0 0;
|
|
|
80 }
|
|
|
81 }
|
|
|
82 }
|
