From f5a204d1def48a776c9cd8d0fd76a82e81b6ca4c Mon Sep 17 00:00:00 2001
From: "aaron.morey" <aaron.morey@sca.com.au>
Date: Tue, 14 Feb 2017 09:14:05 +1100
Subject: [PATCH] U4-9491 feedback to implement into core css, be more specific
 with class naming & with usage and to implement a lighter red color for
 appearance

---
 src/Umbraco.Web.UI.Client/lib/bootstrap/less/variables.less | 3 +++
 src/Umbraco.Web.UI.Client/src/less/main.less                | 5 +++++
 .../src/views/components/property/umb-property.html         | 6 +++---
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/variables.less b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/variables.less
index cb5d4d3152..2ae83c8031 100644
--- a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/variables.less
@@ -246,6 +246,9 @@
 @infoBackground:          #d9edf7;
 @infoBorder:              darken(spin(@infoBackground, -10), 7%);
 
+// Property / Control States
+// -------------------------
+@controlRequiredColor:     #ee5f5b;
 
 // Tooltips and popovers
 // -------------------------
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index 85ab4e6e56..f977684c25 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -156,6 +156,11 @@ h5.-black {
   margin-left: 0;
 }
 
+/* CONTROL VALIDATION */
+.umb-control-required {
+    color: @controlRequiredColor;
+}
+
 .controls-row {
   padding-bottom: 5px;
   margin-left: 240px;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
index 8bdd6234df..b24e0985af 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
@@ -8,9 +8,9 @@
 
                 <label class="control-label" ng-hide="property.hideLabel" for="{{property.alias}}" ng-attr-title="{{propertyAlias}}">
                     {{property.label}}
-                    <strong ng-if="property.validation.mandatory">
-                        <span class="red">&nbsp;*&nbsp;</span>
-                    </strong>
+                    <span ng-if="property.validation.mandatory">
+                        <strong class="umb-control-required">*</strong>
+                    </span>
                     <small ng-bind-html="property.description"></small>
                 </label>