From 16e1a469972414f264309ed40bbb4352eef1b913 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Wed, 21 Aug 2019 03:54:17 +0200
Subject: [PATCH] validation messages can position on the left

---
 src/components/forms/validation-message.scss | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/validation-message.scss b/src/components/forms/validation-message.scss
index acb19820a..96aeec220 100644
--- a/src/components/forms/validation-message.scss
+++ b/src/components/forms/validation-message.scss
@@ -1,8 +1,9 @@
 @import "../../colors";
 @import "../../frameless";
 
+$arrow-border-width: 1rem;
+
 .validation-message {
-    $arrow-border-width: 1rem;
     display: block;
     position: absolute;
     top: 0;
@@ -37,6 +38,23 @@
     }
 }
 
+.validation-left {
+    left: unset;
+    right: 0;
+    margin-left: unset;
+    margin-right: $arrow-border-width;
+    transform: translate(-16rem, 0);
+
+    &:before {
+        left: unset;
+        right: -$arrow-border-width / 2;
+        border-top: 1px solid $active-gray;
+        border-right: 1px solid $active-gray;
+        border-bottom: none;
+        border-left: none;
+    }
+}
+
 @media #{$intermediate-and-smaller} {
     .validation-message {
         position: relative;