refactor(styles): improve css-triangle/breakpoint mixins and implement pseudo-element mixin

styles/abstracts/_mixins.scss

@@ -24,34 +24,74 @@
   visibility: visible #{$important};
 }
 
-@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+@mixin pseudo-element(
-  content: '';
+  $element,
-  display: block;
+  $el-height: 0,
-  width: 0;
+  $el-width: 0,
-  height: 0;
+  $isCentered: false,
-  border-style: solid;
+  $el-background: transparent,
-  border-width: $triangle-size;
+  $el-rotation: 0deg,
+  $el-transition: none,
+  $isVisible: true
+) {
+  @if $element == 'before' or $element == 'after' {
+    position: relative;
 
-  @if $triangle-direction == down {
+    &:#{$element} {
-    border-bottom-width: 0;
+      @extend %content;
-    border-color: $triangle-color transparent transparent;
+
-  }
+      width: #{$el-width};
-  @if $triangle-direction == up {
+      height: #{$el-height};
-    border-top-width: 0;
+      background: #{$el-background};
-    border-color: transparent transparent $triangle-color;
+      transition: #{$el-transition};
-  }
+      @content;
-  @if $triangle-direction == right {
+
-    border-right-width: 0;
+      @if $isVisible {
-    border-color: transparent transparent transparent $triangle-color;
+        @include element-invisible-off;
-  }
+      } @else {
-  @if $triangle-direction == left {
+        @include element-invisible;
-    border-left-width: 0;
+      }
-    border-color: transparent $triangle-color transparent transparent;
+
+      @if $isCentered {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) rotate(#{$el-rotation});
+      } @else {
+        transform: rotate(#{$el-rotation});
+        @content;
+      }
+    }
+  } @else {
+    @warn "`#{$el}` isn't a valid pseudo element";
   }
 }
 
-@mixin breakpoint($query, $no-query: false) {
+@mixin css-triangle(
-  @include breakpoints.breakpoint($query, $no-query) {
+  $pseudo,
+  $triangle-size,
+  $triangle-color,
+  $triangle-direction
+) {
+  @include pseudo-element(#{$pseudo}) {
+    border-style: solid;
+    border-width: $triangle-size;
     @content;
+
+    border-#{$triangle-direction}-width: 0;
+    border-color: if($triangle-direction == down, $triangle-color, transparent)
+      if($triangle-direction == left, $triangle-color, transparent)
+      if($triangle-direction == up, $triangle-color, transparent)
+      if($triangle-direction == right, $triangle-color, transparent);
+  }
+}
+
+@mixin respond-to($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    @media (max-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Available breakpoints are: #{map-keys($breakpoints)}.";
   }
 }