streamlines some validation styling: no more focuses border highlighting since that doesn't work consistently with all fields, ensures that the new fields have a border but it's set to transparent since we want to show a border for validation, removes the zero padding from new fields since when a validation border is added it doesn't look good and now padding is just using the base consistent padding for fields. Moves the valrequirecomponent.directive to the validation folder.

src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less

@@ -410,11 +410,10 @@ input.umb-group-builder__group-sort-value {
   }
 
   textarea.editor-label {
-    border: none;
+    border-color:transparent;
     box-shadow: none;
     width: 100%;
-    box-sizing: border-box;
-    padding: 10px 0 0 0;
+    box-sizing: border-box;    
     margin-bottom: 10px;
     font-size: 16px;
     font-weight: bold;

src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less

@@ -27,9 +27,8 @@
 
 input.umb-locked-field__input {
   background: rgba(255, 255, 255, 0); // if using transparent it will hide the text in safari
-  border: none;
-  font-size: 13px;
-  padding: 0;
+  border-color:transparent;
+  font-size: 13px;  
   margin-bottom: 0;
   color: #ccc;
   transition: color 0.25s;

src/Umbraco.Web.UI.Client/src/less/forms.less

@@ -436,38 +436,11 @@ input[type="checkbox"][readonly] {
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
-// Warning
-.show-validation.ng-invalid .control-group.warning {
-  .formFieldState(@formWarningText, @formWarningText, @formWarningBackground);
-}
 // Error
 .show-validation.ng-invalid .control-group.error, 
 .show-validation.ng-invalid .umb-panel-header-content-wrapper {
     .formFieldState(@formErrorText, @formErrorText, @formErrorBackground);
 }
-// Success
-.show-validation.ng-invalid .control-group.success {
-  .formFieldState(@formSuccessText, @formSuccessText, @formSuccessBackground);
-}
-// Success
-.show-validation.ng-invalid .control-group.info {
-  .formFieldState(@formInfoText, @formInfoText, @formInfoBackground);
-}
-
-// HTML5 invalid states 
-// Shares styles with the .control-group.error above
-
-.show-validation input:focus:invalid,
-.show-validation textarea:focus:invalid,
-.show-validation select:focus:invalid {
-  color: @formErrorText;
-  border-color: #ee5f5b;
-  &:focus {
-    border-color: darken(#ee5f5b, 10%);
-    @shadow: 0 0 6px lighten(#ee5f5b, 20%);
-    .box-shadow(@shadow);
-  }
-}
 
 //val-highlight directive styling
 .highlight-error {

src/Umbraco.Web.UI.Client/src/less/mixins.less

@@ -182,12 +182,6 @@
   select.ng-invalid,
   textarea.ng-invalid {
     border-color: @borderColor;
-    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
-    &:focus {
-      border-color: darken(@borderColor, 10%);
-      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
-      .box-shadow(@shadow);
-    }
   }
   // Give a small background color for input-prepend/-append
   .input-prepend .add-on,

src/Umbraco.Web.UI.Client/src/less/panel.less

@@ -99,21 +99,13 @@
     color: @red;
 }
 
+.umb-headline-editor-wrapper input.ng-invalid::-moz-placeholder,
+.umb-headline-editor-wrapper input.ng-invalid:-ms-input-placeholder,
 .umb-headline-editor-wrapper input.ng-invalid::-webkit-input-placeholder {
     color: @red;
     line-height: 22px;
 }
 
-.umb-headline-editor-wrapper input.ng-invalid::-moz-placeholder {
-    color: @red;
-    line-height: 22px;
-}
-
-.umb-headline-editor-wrapper input.ng-invalid:-ms-input-placeholder {
-    color: @red;
-    line-height: 22px;
-}
-
 /*
 .umb-panel-header i {
     font-size: 13px;

src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/propertysettings/propertysettings.html

@@ -1,9 +1,7 @@
 <div class="content-type-editor-dialog edit-property-settings" ng-controller="Umbraco.Overlay.PropertySettingsOverlay as vm">
 
-   <div class="umb-control-group clearfix">
-
-      <div class="validation-wrapper">
-         <textarea class="editor-label"
+   <div class="umb-control-group control-group">
+        <textarea class="editor-label"
             name="propertyLabel"
             ng-model="model.property.label"
             placeholder="Enter a name..."
@@ -12,25 +10,24 @@
             umb-auto-resize
             required
             overlay-submit-on-enter>
-         </textarea>
-         <span class="validation-label" val-msg-for="propertyLabel" val-toggle-msg="required"><localize key="required" /></span>
-      </div>
-
-      <umb-generate-alias enable-lock="true" alias-from="model.property.label" alias="model.property.alias"></umb-generate-alias>
-
+        </textarea>
    </div>
 
-   <div class="umb-control-group clearfix">
+    <div class="umb-control-group control-group">
+        <umb-generate-alias enable-lock="true" alias-from="model.property.label" alias="model.property.alias"></umb-generate-alias>
+    </div>
+
+   <div class="umb-control-group control-group">
       <textarea
-      class="editor-description"
-      ng-model="model.property.description"
-      placeholder="Add your description here..."
-      overlay-submit-on-enter
-      umb-auto-resize>
+          class="editor-description"
+          ng-model="model.property.description"
+          placeholder="Add your description here..."
+          overlay-submit-on-enter
+          umb-auto-resize>
       </textarea>
    </div>
 
-   <div class="editor-wrapper umb-control-group clearfix" ng-model="model.property.editor" val-require-component>
+   <div class="editor-wrapper umb-control-group control-group" ng-model="model.property.editor" val-require-component>
 
       <a href="" ng-if="!model.property.editor" class="editor-placeholder" hotkey="alt+shift+e" ng-click="vm.openEditorPickerOverlay(model.property)">Add Editor</a>