TA-1545: Further branding updates (#69)

* Update colours and link styles * Build * Update nav tabs styles * More updates to navs * Improve underline on nav * Build * Update pagination and nav styles * Further changes to nav bar * Further changes to dropdowns * Re-add border to nav tabs and build * Add bottom border to nav * Remove background for danger dropdown option * Build * Undo changes from building, to be done in separate PR
techfromsage · Sep 12, 2024 · 8e0ee1e · 8e0ee1e
1 parent 17ff545
commit 8e0ee1e
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 115 deletions.
diff --git a/assets/stylesheets/bootstrap/_dropdowns.scss b/assets/stylesheets/bootstrap/_dropdowns.scss
@@ -78,7 +78,6 @@
     line-height: $line-height-base;
     color: $dropdown-link-color;
     white-space: nowrap; // prevent links from randomly breaking onto new lines
-    text-decoration: none;
   }
 
 
@@ -100,42 +99,31 @@
 
 
 // Hover/Focus state
+td ul.dropdown-menu > li > a,
 .dropdown-menu > li > a,
 .dropdown-menu > li > button {
   &:hover {
     text-decoration: none;
-    color: $dropdown-link-hover-bg;
-    background-color: $gray200;
+    color: $dropdown-link-hover-color;
+    background-image: linear-gradient(to right, $dropdown-link-hover-color 4px, transparent 4px);
   }
 
   &:focus {
     outline: 2px solid $dropdown-link-color;
     outline-offset: -2px;
-    color: $dropdown-link-hover-bg;
-    // border: 1px solid $dropdown-link-hover-bg;
-    // box-shadow: 0 0 0 1px inset $dropdown-link-hover-bg;
   }
-
-  // &:hover:focus,
-  // :active {
-  //   color: $dropdown-link-hover-bg;
-  //   background-color: $gray200;
-  //   border: 1px solid $dropdown-link-hover-bg;
-  //   box-shadow: 0 0 0 1px inset $dropdown-link-hover-bg;
-  // }
 }
 
 // Active state
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > button {
-  &,
-  &:hover,
-  &:focus {
-    padding-left: 20px;
-    font-weight: 600;
-    background-image: linear-gradient(to right, $dropdown-link-color 4px, transparent 4px);
-    background-repeat: no-repeat;
+  padding-left: 20px;
+  font-weight: 600;
+  background-image: linear-gradient(to right, $dropdown-link-color 4px, transparent 4px);
+  background-repeat: no-repeat;
 
+  &:hover {
+    background-image: linear-gradient(to right, $dropdown-link-hover-color 4px, transparent 4px);
   }
 }
 
@@ -169,7 +157,6 @@
   color: $red;
   &:hover {
     color: $red;
-    background-color: $gray200;
   }
 
   &:focus {

diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss
@@ -412,7 +412,7 @@
 // Default navbar
 .navbar-default {
   background-color: $navbar-default-bg;
-  border-color: $navbar-default-border;
+  border-bottom: 1px solid $navbar-default-border;
 
   .navbar-brand {
     color: $navbar-default-brand-color;
@@ -440,18 +440,18 @@
 
       &:hover {
         color: $navbar-default-link-hover-color;
-        background-color: transparentize($color: $black, $amount: 0.75);
+        background-color: $navbar-default-link-hover-bg;
       }
     }
     > .active > a {
-      &,
-      &:hover,
-      &:focus {
-        color: $navbar-default-link-active-color;
-        // background-color: $navbar-default-link-active-bg;
-        background-image: linear-gradient(0deg, $navbar-default-link-active-color 4px, transparent 4px);
+      color: $navbar-default-link-active-color;
+      background-image: linear-gradient(0deg, $navbar-default-link-active-color 4px, transparent 4px);
+
+      &:hover {
+        color: $navbar-default-link-hover-color;
       }
     }
+
     > .disabled > a {
       &,
       &:hover,
@@ -468,8 +468,8 @@
       &,
       &:hover,
       &:focus {
-        color: $navbar-default-link-active-color;
-        background-color: transparentize($color: $black, $amount: 0.75);
+        color: $navbar-default-link-hover-color;
+        background-color: $navbar-default-link-hover-bg;
       }
     }
 

diff --git a/assets/stylesheets/bootstrap/_navs.scss b/assets/stylesheets/bootstrap/_navs.scss
@@ -23,13 +23,8 @@
       display: block;
       padding: $nav-link-padding;
       text-decoration: none;
-      &:hover,
-      &:focus {
-        text-decoration: none;
-        background-color: $gray200;
-      }
+
       &:active {
-        text-decoration: none;
         background-color: $nav-link-down-bg;
       }
     }
@@ -51,6 +46,10 @@
         background-color: transparent;
       }
     }
+
+    &.active > a {
+      text-decoration: none;
+    }
   }
 
   // Open dropdowns
@@ -89,62 +88,39 @@
   border-bottom: 1px solid $nav-tabs-border-color;
   > li {
     float: left;
-    // Make the list-items overlay the bottom border
-    // margin-bottom: -1px;
 
     // Actual tabs (as links)
     > a {
-      // margin-right: 2px;
       padding-top: 10px;
       padding-bottom: 16px;
 
       line-height: $line-height-base;
-      // border-top: 1px solid transparent;
-      // border-right: 1px solid transparent;
-      // border-left: 1px solid transparent;
-      // border-bottom: 4px solid transparent;
-      // border-radius: $border-radius-base $border-radius-base 0 0;
-
-      &:hover {
-        background-color: $gray200;
-        // border-color: $gray200;
-      }
 
       &:focus {
         outline: 2px solid $brand-primary;
         outline-offset: -1px;
         background-color: $white;
-        // border-top: 1px solid $nav-tabs-border-color;
-        // border-right: 1px solid $nav-tabs-border-color;
-        // border-left: 1px solid $nav-tabs-border-color;
       }
 
-      &:hover:focus {
-        // border-color: $nav-tabs-border-color;
-        background-color: $gray200;
+      &:hover {
+        background-image: linear-gradient(0deg, $nav-tabs-active-link-hover-border-color 4px, transparent 4px);
       }
     }
 
     // Active state, and its :hover to override normal :hover
     &.active > a {
-      &,
-      &:hover,
-      &:focus {
+      color: $nav-tabs-active-link-color;
+      background-image: linear-gradient(0deg, $nav-tabs-active-link-color 4px, transparent 4px);
+      text-decoration: none;
+
+      &:hover {
         color: $nav-tabs-active-link-hover-color;
-        // background-color: $nav-tabs-active-link-hover-bg;
         border-color: $white;
         background-image: linear-gradient(0deg, $nav-tabs-active-link-hover-border-color 4px, transparent 4px);
-        // border-bottom: 4px solid $nav-tabs-active-link-hover-border-color;
-        cursor: default;
-      }
-
-      &:hover {
-        background-color: $gray200;
       }
 
       &:hover:focus {
         background-color: $gray200;
-        background-image: linear-gradient(0deg, $nav-tabs-active-link-hover-border-color 4px, transparent 4px);
       }
     }
   }
@@ -165,48 +141,33 @@
     // Links rendered as pills
     > a {
       border-radius: $nav-pills-border-radius;
-      border: 2px solid transparent;
+      border: 1px solid transparent;
       &:hover {
-        background-color: $gray200;
-      }
-
-      &:focus {
-        background-color: $white;
+        border-color: $nav-pills-link-hover-color;
       }
 
       &:focus,
       &:active {
         border-color: $nav-tabs-border-color;
         outline: 0;
       }
-
-      &:focus:hover {
-        background-color: $gray200;
-      }
     }
     + li {
       margin-left: 2px;
     }
 
     // Active state
     &.active > a {
-      & {
-        border: 1px solid $nav-pills-active-link-border-color;
+      border: 1px solid $nav-pills-active-link-border-color;
 
-      }
       &:hover {
-        background-color: $gray200;
+        border: 1px solid $nav-pills-link-hover-color;
       }
 
       &:focus {
-        background-color: $white;
         border: 1px solid $nav-pills-active-link-border-color;
         box-shadow: 0 0 0 1px $nav-pills-active-link-border-color;
       }
-
-      &:hover:focus {
-        background-color: $gray200;
-      }
     }
   }
 }

diff --git a/assets/stylesheets/bootstrap/_pager.scss b/assets/stylesheets/bootstrap/_pager.scss
@@ -25,7 +25,7 @@
 
     > a:hover {
       text-decoration: none;
-      background-color: $pager-hover-bg;
+      border-color: $accessible-green;
     }
 
     > a:focus {

diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss
@@ -25,7 +25,6 @@
       &:focus {
         z-index: 2;
         color: $pagination-hover-color;
-        background-color: $pagination-hover-bg;
         border-color: $pagination-hover-border;
       }
     }
@@ -50,10 +49,7 @@
       outline: 0;
       z-index: 2;
       color: $pagination-hover-color;
-      background-color: $pagination-hover-bg;
-      // background-color: $gray200;
-      // border-color:  $pagination-hover-border;
-      // border-color: $gray400;
+      background-image: linear-gradient(0deg, $pagination-hover-color 4px, transparent 4px);
     }
 
     &:focus {
@@ -84,12 +80,13 @@
 
   > .active > a,
   > .active > span {
-    &,
+    background-image: linear-gradient(0deg, $brand-primary 4px, transparent 4px);
+
     &:hover,
     &:focus {
       z-index: 3;
-      color: $pagination-active-color;
-      background-image: linear-gradient(0deg, $brand-primary 4px, transparent 4px);
+      color: $pagination-hover-color;
+      background-image: linear-gradient(0deg, $pagination-hover-color 4px, transparent 4px);
       font-weight: 600;
 
       background-color: $pagination-active-bg;

diff --git a/assets/stylesheets/bootstrap/_theme.scss b/assets/stylesheets/bootstrap/_theme.scss
@@ -113,12 +113,6 @@
 //
 // Dropdowns
 // --------------------------------------------------
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-  @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%));
-  background-color: darken($dropdown-link-hover-bg, 5%);
-}
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {