Fix icon direction bug #218

1 files changed, 64 insertions, 16 deletions

diff --git a/src/icons.less b/src/icons.less
index 9077b12..b59ecca 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -36,42 +36,90 @@
     border-right: 0;
     content: "";
     height: .65em;
-    transform: translate(-25%, -50%) rotate(-45deg);
     width: .65em;
   }
 }
 
-.icon-arrow-down,
-.icon-downward {
-  transform: rotate(-90deg);
+.icon-arrow-down {
+  &::before {
+    transform: translate(-50%, -75%) rotate(225deg);
+  }
 }
 
-.icon-arrow-right,
-.icon-forward {
-  transform: rotate(180deg);
+.icon-arrow-left {
+  &::before {
+    transform: translate(-25%, -50%) rotate(-45deg);
+  }
 }
 
-.icon-arrow-up,
-.icon-upward {
-  transform: rotate(90deg);
+.icon-arrow-right {
+  &::before {
+    transform: translate(-75%, -50%) rotate(135deg);
+  }
 }
 
-.icon-downward,
-.icon-back,
-.icon-forward,
-.icon-upward {
+.icon-arrow-up {
   &::before {
-    transform: translate(-50%, -50%) rotate(-45deg);
+    transform: translate(-50%, -25%) rotate(45deg);
   }
+}
+
+.icon-back,
+.icon-forward {
   &::after {
     background: currentColor;
     content: "";
     height: @icon-border-width;
-    left: 55%;
     width: .8em;
   }
 }
 
+.icon-downward,
+.icon-upward {
+  &::after {
+    background: currentColor;
+    content: "";
+    height: .8em;
+    width: @icon-border-width;
+  }
+}
+
+.icon-back {
+  &::after {
+    left: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}
+
+.icon-downward {
+  &::after {
+    top: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-135deg);
+  }
+}
+
+.icon-forward {
+  &::after {
+    left: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+}
+
+.icon-upward {
+  &::after {
+    top: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
 // Icon caret
 .icon-caret {
   &::before {