Revert "less bright and "dangerous" alerts, notifications and validation messages"

This reverts commit 691c13d1e1.

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

@@ -7,10 +7,10 @@
 // -------------------------
 
 .alert {
-  padding: 5px 35px 5px 14px;
+  padding: 8px 35px 8px 14px;
   margin-bottom: @baseLineHeight;
   background-color: @warningBackground;
-  border-left: 2px solid @warningBorder;
+  border: 1px solid @warningBorder;
   .border-radius(@baseBorderRadius);
 }
 .alert,
@@ -44,36 +44,31 @@
   border-color: @successBorder;
   color: @successText;
 }
-
 .alert-success h4 {
   color: @successText;
 }
-
 .alert-danger,
 .alert-error {
   background-color: @errorBackground;
   border-color: @errorBorder;
   color: @errorText;
 }
-
 .alert-danger h4,
 .alert-error h4 {
   color: @errorText;
 }
-
 .alert-info {
   background-color: @infoBackground;
   border-color: @infoBorder;
   color: @infoText;
 }
-
 .alert-info h4 {
   color: @infoText;
 }
 
 .alert-form {
   background-color: @gray-10;
-  border-color: @gray-7;
+  border: 1px solid @gray-3 !important;
   color: @gray-3;
 }
 
@@ -82,10 +77,7 @@
 }
 
 .alert-form h4 {
-  color: @gray-1;
-  margin-bottom: 5px;
-  font-weight: bold;
-  font-size: 16px;
+  color: @gray-3;
 }
 
 

src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less

@@ -1,40 +1,35 @@
 .umb-notifications {
-    z-index: 1000;
-    position: absolute;
-    bottom: 53px;
-    left: 0;
-    right: 0;
-    border-bottom: none;
-    margin: auto;
-    padding: 0px;
-    background: none;
-    border-radius: 0;
+   z-index: 1000;
+   position: absolute;
+   bottom: 52px;
+   left: 0;
+   right: 0;
+   border-bottom: none;
+   margin: auto;
+   padding: 0px;
+   border: none;
+   background: none;
+   border-radius: 0;
 }
 
 .umb-notifications__notifications {
-    list-style: none;
-    margin: 0;
-    position: relative;
+   list-style: none;
+   margin: 0;
+   position: relative;
 }
 
+
 .umb-notifications__notification {
-    border-width: 1px;
-    border-style: solid;
-    padding: 5px 20px;
-    text-shadow: none;
-    font-size: 14px;
-    border-radius: 3px;
-    position: relative;
-    margin-bottom: 0;
-    left: 50%;
-    transform: translate(-50%);
-    width: 85%;
-    bottom: 10px;
-    margin-bottom: 2px;
-    box-shadow: 0 5px 10px rgba(0,0,0,0.05), 0 3px 3px rgba(0,0,0,0.12);
+   padding: 5px 20px;
+   text-shadow: none;
+   font-size: 14px;
+   border: none;
+   border-radius: 0;
+   position: relative;
+   margin-bottom: 0;
 }
 
 .umb-notifications__notification.-extra-padding {
-    padding-top: 20px;
-    padding-bottom: 20px;
+   padding-top: 20px;
+   padding-bottom: 20px;
 }

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

@@ -19,7 +19,7 @@ label small, .guiDialogTiny {
 label.control-label, .control-label {
   padding: 0 10px 0 0 !important;
   font-weight: bold;
-  color: @gray-2;
+  color: @black;
 }
 
 
@@ -483,7 +483,7 @@ input[type="checkbox"][readonly] {
 // Error
 .show-validation.ng-invalid .control-group.error,
 .show-validation.ng-invalid .umb-panel-header-content-wrapper {
-    .formFieldState(@formErrorText, @formErrorBorder, @formErrorBackground);
+    .formFieldState(@formErrorText, @formErrorText, @formErrorBackground);
 }
 
 //val-highlight directive styling

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

@@ -158,10 +158,9 @@
 .show-validation .tab-error a,
 .show-validation .tab-error a:hover,
 .show-validation .tab-error a:focus {
-  background-color: @red-washed !important;
-  border-top-color: @errorBorder;
-  border-left-color: @errorBorder;
-  border-right-color: @errorBorder;
+  color: @white !important;
+  background-color: @red !important;
+  border-color: @errorBorder;
 }
 
 .show-validation .tab-error a:before {

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

@@ -310,21 +310,21 @@
 
 // alerts
 // -------------------------
-@warningText:             @black;
-@warningBackground:       @yellow-washed;
-@warningBorder:           @yellow;
+@warningText:             @white;
+@warningBackground:       @orange;
+@warningBorder:           transparent;
 
-@errorText:               @black;
-@errorBackground:         @red-washed;
-@errorBorder:             @red;
+@errorText:               @white;
+@errorBackground:         @red-d1;
+@errorBorder:             transparent;
 
-@successText:             @black;
-@successBackground:       @green-washed;
-@successBorder:           @green;
+@successText:             @white;
+@successBackground:       @green-d1;
+@successBorder:           transparent;
 
-@infoText:                @black;
-@infoBackground:          @turquoise-washed;
-@infoBorder:              @turquoise;
+@infoText:                @white;
+@infoBackground:          @turquoise-d1;
+@infoBorder:              transparent;
 
 // SD: Had to duplicate the above but prefix with 'form' inversed colors
 // because we cannot share the above alert colors with forms otherwise we end up with white
@@ -332,21 +332,21 @@
 
 // Form states
 // -------------------------
-@formWarningText:             @black;
-@formWarningBackground:       @yellow-washed;
-@formWarningBorder:           @yellow;
+@formWarningText:             @warningBackground;
+@formWarningBackground:       lighten(@warningBackground, 38%);
+@formWarningBorder:           darken(spin(@warningBackground, -10), 3%);
 
-@formErrorText:               @black;
-@formErrorBackground:         @red-washed;
-@formErrorBorder:             @red;
+@formErrorText:               @errorBackground;
+@formErrorBackground:         lighten(@errorBackground, 55%);
+@formErrorBorder:             darken(spin(@errorBackground, -10), 3%);
 
-@formSuccessText:             @black;
-@formSuccessBackground:       @green-washed;
-@formSuccessBorder:           @green;
+@formSuccessText:             @successBackground;
+@formSuccessBackground:       lighten(@successBackground, 48%);
+@formSuccessBorder:           darken(spin(@successBackground, -10), 5%);
 
-@formInfoText:                @black;
-@formInfoBackground:          @turquoise-washed;
-@formInfoBorder:              @turquoise;
+@formInfoText:                @infoBackground;
+@formInfoBackground:          lighten(@infoBackground, 41%);
+@formInfoBorder:              darken(spin(@infoBackground, -10), 7%);
 
 
 // Tooltips and popovers

src/Umbraco.Web.UI.Client/src/views/components/notifications/umb-notifications.html

@@ -2,7 +2,7 @@
     <ul class="umb-notifications__notifications">
         <li ng-repeat="notification in notifications"
             class="alert alert-block alert-{{notification.type}} umb-notifications__notification animated -half-second fadeIn"
-            ng-class="{'-extra-padding': notification.type === 'form'}">
+            ng-class="{'-no-border -extra-padding': notification.type === 'form'}">
 
             <a class='close -align-right' ng-click="removeNotification($index)" prevent-default href>&times;</a>