Experiments page.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / utils / bourbon / library / _triangle.scss
1 @charset "UTF-8";
2
3 /// Generates a triangle pointing in a specified direction.
4 ///
5 /// @argument {string} $direction
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 {number (with unit)} $width
10 ///   Width of the triangle.
11 ///
12 /// @argument {number (with unit)} $height
13 ///   Height of the triangle.
14 ///
15 /// @argument {color} $color
16 ///   Color of the triangle.
17 ///
18 /// @example scss
19 ///   .element {
20 ///     &::before {
21 ///       @include triangle("up", 2rem, 1rem, #b25c9c);
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;
32 ///     border-width: 0 1rem 1rem;
33 ///     content: "";
34 ///   }
35
36 @mixin triangle(
37   $direction,
38   $width,
39   $height,
40   $color
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 }