Merge pull request #434 from sachajudd/pulls/1.0/fix-tabs

FIX Remove border-radius add hover states to non-active tabs
silverstripe · Feb 13, 2018 · 75ed323 · 75ed323
2 parents 5bd5d71 + 1d27a14
commit 75ed323
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 38 deletions.
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/Tabs/Tabs.scss b/client/src/components/Tabs/Tabs.scss
@@ -1,9 +1,10 @@
 // Tabs, styles built on top of Bootstrap 4 tab functionality
 .nav-tabs {
   margin-bottom: $panel-padding-y;
+  border-radius: 0; //  TODO remove once JQueryUI is removed
 
-  //Spacing between items
-  .nav-item+.nav-item {
+  // Spacing between items
+  .nav-item + .nav-item {
     margin-left: $spacer / 2;
   }
 
@@ -13,6 +14,8 @@
     border-left: 0;
     border-radius: 0;
     color: $text-muted;
+    padding: $nav-link-padding;
+    border-bottom-width: $nav-tabs-link-border-width;
 
     &:hover,
     &:focus {
@@ -25,6 +28,8 @@
     &.active:focus,
     &.active:hover {
       border-bottom-color: $nav-tabs-link-active-border-color;
+      cursor: default;
+      color: $body-color;
     }
   }
 }
diff --git a/client/src/styles/_bootstrap-variables.scss b/client/src/styles/_bootstrap-variables.scss
@@ -228,7 +228,7 @@ $grid-gutter-width: $spacer * 2.5; // 40px
 $line-height-lg: (4 / 3);
 $line-height-sm: 1.5;
 
-//$border-width: 1px !default;
+$border-width: 1px !default;
 $border-color: $gray-200;
 
 $border-radius:          .23rem !default;
@@ -551,17 +551,17 @@ $dropdown-item-padding-x:        1.3rem !default;
 
 // Navs
 
-//$nav-link-padding-y:            .5rem !default;
-//$nav-link-padding-x:            1rem !default;
+$nav-link-padding-y:            $spacer; // .5rem !default;
+$nav-link-padding-x:            #{$spacer / 4}; // 1rem !default;
 //$nav-link-disabled-color:       $gray-600 !default;
 
 $nav-tabs-border-color: $border-color;
-//$nav-tabs-border-width:                       $border-width !default;
-//$nav-tabs-border-radius:                      $border-radius !default;
+$nav-tabs-border-width:                       $border-width !default;
+$nav-tabs-border-radius:                      0 !default;
 $nav-tabs-link-hover-border-color:            $gray-300;
 $nav-tabs-link-active-color: $body-color;
 $nav-tabs-link-active-bg: transparent;
-$nav-tabs-link-active-border-color: lighten(map_get($colors, gray-dark), 10);
+$nav-tabs-link-active-border-color: $text-muted;
 
 //$nav-pills-border-radius:     $border-radius !default;
 //$nav-pills-link-active-color: $component-active-color !default;

diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
@@ -99,9 +99,8 @@ $toolbar-total-height: $toolbar-height + 1px; // Include border
 
 
 // Navs
-$nav-tabs-link-border-width: .15385rem;  // 2px
-$nav-link-padding: $spacer #{$spacer / 4} #{$spacer - $nav-tabs-link-border-width};
-$nav-tabs-link-active-border-color: $text-muted;
+$nav-tabs-link-border-width: .15385rem;  // 2px just border bottom width
+$nav-link-padding: $nav-link-padding-y $nav-link-padding-x #{$nav-link-padding-y - ($nav-tabs-link-border-width / 2)};
 
 // Popovers
 

diff --git a/client/src/styles/legacy/_style.scss b/client/src/styles/legacy/_style.scss
@@ -548,8 +548,7 @@ body.cms {
         display: inline-block;
         outline: none;
         float: none;
-        font-weight: normal;
-        color: $body-color;
+        color: $text-muted; // Override JQueryUI
         padding: $nav-link-padding;
         line-height: 20px; // Fix to ensure header extends to predictable size
 
@@ -568,7 +567,7 @@ body.cms {
       }
     }
 
-    //jquery UI override
+    // JQuery UI override
     li.ui-tabs-active,
     li.ui-state-default,
     li.ui-state-active {
@@ -579,35 +578,14 @@ body.cms {
     .ui-state-default {
       border: 0;
       background: transparent;
-
-      a {
-        color: lighten($body-color, 10%);
-        border-bottom: $nav-tabs-link-border-width solid transparent;
-
-        &:hover {
-          color: $body-color;
-        }
-      }
-    }
-
-    .ui-state-active {
-      background-color: transparent;
-      cursor: text;
-
-      a {
-        border-color: #66727d;
-        padding-left: $spacer / 4;
-        padding-right: $spacer / 4;
-        color: $body-color;
-      }
     }
 
     li.cms-tabset-icon.ui-corner-top {
       text-indent: -9999em;
 
       a {
         display: block;
-        padding-left: 40px; // icon width
+        padding-left: 40px; // Icon width
         padding-right: 0;
         margin: 0;
       }
@@ -661,6 +639,11 @@ body.cms {
     background: none;
     border-top: 0;
     border: 0;
+
+    .ui-tabs-anchor:hover,
+    .nav-link:hover {
+      border-bottom: $nav-tabs-link-border-width solid $nav-tabs-link-hover-border-color;
+    }
   }
 
   .ui-state-active {
@@ -670,7 +653,8 @@ body.cms {
     z-index: 2;
 
     a,
-    .nav-link {
+    .nav-link,
+    .nav-link:hover {
       border-bottom: $nav-tabs-link-border-width solid $nav-tabs-link-active-color;
       padding: $nav-link-padding;
     }