move error styles

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;
 }

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;
 }

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
 // -----
 

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>