1 files changed, 24 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_mixins.scss b/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_mixins.scss
new file mode 100644
index 0000000..e1733dc
--- /dev/null
+++ b/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_mixins.scss
@@ -0,0 +1,24 @@
+@use "sass:math";
+
+/// Create a triangle with CSS.
+/// @link https://sass-lang.com/documentation/at-rules/control/if#else-if
+@mixin triangle($size, $color, $direction) {
+  height: 0;
+  width: 0;
+
+  border-color: transparent;
+  border-style: solid;
+  border-width: math.div($size, 2);
+
+  @if $direction == up {
+    border-bottom-color: $color;
+  } @else if $direction == right {
+    border-left-color: $color;
+  } @else if $direction == down {
+    border-top-color: $color;
+  } @else if $direction == left {
+    border-right-color: $color;
+  } @else {
+    @error "Unknown direction #{$direction}.";
+  }
+}