From 20779dff017610c95acfb373bbde5a3f586c8c0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 31 Jul 2020 10:47:01 +0200
Subject: [PATCH] speach bubble look for property-errors

---
 .../lib/bootstrap/less/alerts.less            | 17 ++++++++++++
 .../src/less/alerts.less                      | 27 +++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/alerts.less b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/alerts.less
index 0116b191b3..c999481032 100644
--- a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/alerts.less
+++ b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/alerts.less
@@ -77,3 +77,20 @@
 .alert-block p + p {
   margin-top: 5px;
 }
+
+
+// Property error alerts
+// -------------------------
+.alert.property-error {
+    &::after {
+        content:'';
+        position: absolute;
+        bottom:0;
+        left: 32px;
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid @warningBackground;
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/alerts.less b/src/Umbraco.Web.UI.Client/src/less/alerts.less
index 3907b59f58..3539e21064 100644
--- a/src/Umbraco.Web.UI.Client/src/less/alerts.less
+++ b/src/Umbraco.Web.UI.Client/src/less/alerts.less
@@ -7,6 +7,7 @@
 // -------------------------
 
 .alert {
+  position: relative;
   padding: 8px 35px 8px 14px;
   margin-bottom: @baseLineHeight;
   background-color: @warningBackground;
@@ -98,3 +99,29 @@
 .alert-block p + p {
   margin-top: 5px;
 }
+
+
+// Property error alerts
+// -------------------------
+.alert.property-error {
+
+    display: inline-block;
+    font-size: 14px;
+    padding: 6px 16px 6px 12px;
+    margin-bottom: 6px;
+
+    &::after {
+        content:'';
+        position: absolute;
+        bottom:-6px;
+        left: 6px;
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 6px solid;
+    }
+    &.alert-error::after {
+        border-top-color: @errorBackground;
+    }
+}