From 46b63e54008e47dcc7a6670f2a3a5ddce505f65b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 21 Jun 2018 18:23:27 +0200
Subject: [PATCH] move error styles

---
 .../components/application/umb-dashboard.less |  5 +++-
 .../src/less/components/umb-tabs.less         | 30 +++++++++++++++----
 src/Umbraco.Web.UI.Client/src/less/navs.less  | 21 -------------
 .../views/components/tabs/umb-tabs-nav.html   |  4 +--
 4 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less
index 73eba1e6b3..758262041b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less
@@ -10,10 +10,13 @@
 
 .umb-dashboard__header {
     padding: 20px 20px 0 20px;
-    border-bottom: 1px solid @gray-9;
 }
 
 .umb-dashboard__content {
     padding: 20px;
     overflow: auto;
+}
+
+.umb-dashboard .umb-tabs-nav {
+    margin-bottom: 0;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
index 08df3b9f3e..b7e8872d80 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
@@ -1,24 +1,31 @@
 .umb-tabs-nav {
-    position: relative;
     margin-left: 0;
     margin-bottom: 0;
     list-style: none;
+    border-bottom: 1px solid @gray-9;
+    display: inline-block;
+    margin-bottom: 20px;
 }
 
 .umb-tab {
     display: inline-flex;
     margin-right: 15px;
+    position: relative;
+    top: 1;
 }
 
 .umb-tab > a {
     cursor: pointer;
     border-bottom: 2px solid transparent;
     color: @gray-3;
-    padding-bottom: 15px;
+    padding: 5px 10px 10px 10px;
+    transition: color 150ms ease-in-out;
 }
 
-.umb-tab > a:hover {
+.umb-tab > a:hover,
+.umb-tab > a:focus {
     color: @black;
+    text-decoration: none;
 }
 
 .umb-tab--active > a,
@@ -26,6 +33,19 @@
 .umb-tab--active > a:focus {
   color: @black;
   border-bottom-color: @turquoise;
-  cursor: default;
-  text-decoration: none !important;
+}
+
+.show-validation .umb-tab--error > a,
+.show-validation .umb-tab--error > a:hover,
+.show-validation .umb-tab--error > a:focus {
+  color: @white !important;
+  background-color: @red !important;
+  border-color: @errorBorder;
+}
+
+.show-validation .umb-tab--error a:before {
+  content: "\e25d";
+  font-family: 'icomoon';
+  margin-right: 5px;
+  vertical-align: top;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less
index 0fa57669a5..dad5107f69 100644
--- a/src/Umbraco.Web.UI.Client/src/less/navs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/navs.less
@@ -146,27 +146,6 @@
   cursor: default;
 }
 
-//SD: NOTE: Added tab error states
-.show-validation .tab-error a,
-.show-validation .tab-error a:hover,
-.show-validation .tab-error a:focus {
-  color: @white !important;
-  background-color: @red !important;
-  border-color: @errorBorder;
-}
-
-.show-validation .tab-error a:before {
-  content: "\e25d";
-  font-family: 'icomoon';
-  margin-right: 5px;
-  vertical-align: top;
-}
-
-.show-validation .nav-tabs > li.active.error > a,
-.show-validation .nav-tabs > li.active.error > a:hover,
-.show-validation .nav-tabs > li.active.error > a:focus {
-}
-
 // PILLS
 // -----
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html b/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html
index 3e9db7ba84..c6bcb3eda8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html
@@ -1,5 +1,5 @@
 <ul class="umb-tabs-nav">
-    <li class="umb-tab" ng-repeat="tab in vm.tabs" data-element="tab-{{tab.alias}}" ng-class="{'umb-tab--active': tab.active, 'tab-error': tabHasError}" val-tab>
+    <li class="umb-tab" ng-repeat="tab in vm.tabs" data-element="tab-{{tab.alias}}" ng-class="{'umb-tab--active': tab.active, 'umb-tab--error': tabHasError}" val-tab>
         <a ng-href="" ng-click="vm.clickTab($event, tab)">{{ tab.label }}</a>
     </li>
-</ul>
+</ul>
\ No newline at end of file