_navbar.scss in patternfly-sass-3.46.1

- old
+ new

@@ -27,32 +27,49 @@
     border-bottom: 1px solid $navbar-pf-navbar-header-border-color;
     float: none;
   }
   .navbar-nav {
     margin: 0;
-    > .active > a,
-    > .active > a:hover,
-    > .active > a:focus {
-      background-color: $navbar-pf-navbar-nav-active-bg-color;
-      color: $navbar-pf-active-color;
+    > .active {
+      > a,
+      > button {
+        &,
+        &:hover,
+        &:focus {
+          background-color: $navbar-pf-item-open-bg-color;
+          color: $navbar-pf-active-color;
+        }
+      }
     }
-    > li > a {
-      color: $navbar-pf-color;
-      line-height: 1;
-      padding: 10px 20px;
-      text-shadow: none;
-      &:hover,
-      &:focus {
-        color: $navbar-pf-active-color;
+    > li {
+      > a,
+      > button {
+        color: $navbar-pf-color;
+        line-height: 1;
+        padding: 10px 20px;
+        text-shadow: none;
+        &:hover,
+        &:focus {
+          color: $navbar-pf-active-color;
+          text-decoration: none;
+        }
+        > .dropdown-title,
+        > .pficon-user {
+          position: relative;
+        }
+        > .pficon-user {
+          padding-right: $navbar-pf-item-icon-padding-right;
+        }
       }
     }
     > .open {
-      > a {
+      > a,
+      > button {
         &,
         &:hover,
         &:focus {
-          background-color: $navbar-pf-navbar-nav-active-bg-color;
+          background-color: $navbar-pf-item-open-bg-color;
           color: $navbar-pf-active-color;
         }
       }
     }
  .badge {
@@ -90,11 +107,11 @@
         > .active > a,
         .dropdown-submenu.open > a {
           &,
           &:hover,
           &:focus {
-            background-color: $navbar-pf-navbar-nav-active-active-open-bg-color !important;
+            background-color: $navbar-pf-item-open-bg-color !important;
             color: $navbar-pf-active-color;
           }
         }
         > li > a {
           background-color: transparent;
@@ -274,21 +291,18 @@
       background-color: $navbar-pf-icon-bar-bg-color;
     }
   }
   .navbar-utility {
     border-bottom: 1px solid $navbar-pf-navbar-header-border-color;
-    li.dropdown > .dropdown-toggle {
-      &:hover {
-        outline: 0!important;
+    li.dropdown {
+      > a,
+      > button {
+        &:hover {
+          outline: 0!important;
+        }
+        position: relative;
       }
-      padding-left: 36px;
-      position: relative;
-      .pficon-user {
-        left: 20px;
-        position: absolute;
-        top: 10px;
-      }
     }
     @media (max-width: $grid-float-breakpoint-max) {
       > li + li {
         border-top: 1px solid $navbar-pf-navbar-header-border-color;
       }
@@ -299,13 +313,16 @@
 @media (min-width: $grid-float-breakpoint) {
   .navbar-pf {
     .navbar-brand {
       padding: $navbar-pf-navbar-navbar-brand-padding;
     }
-    .navbar-nav > li > a {
-      padding-bottom: 14px;
-      padding-top: 14px;
+    .navbar-nav > li {
+      > a,
+      > button {
+        padding-bottom: 14px;
+        padding-top: 14px;
+      }
     }
     .navbar-persistent {
       font-size: $font-size-large;
     }
     .navbar-primary {
@@ -414,34 +431,40 @@
               }
             }
           }
         }
       }
-      > li > a {
-        border-bottom: 1px solid transparent;
-        border-top: 1px solid transparent;
-        position: relative;
-        margin: -1px 0 0;
-        &:hover {
-          background-color: $navbar-pf-navbar-primary-hover-bg-color-stop;
-          border-top-color: $navbar-pf-navbar-primary-hover-border-color;
-          color: $navbar-pf-color;
-          @include gradient-vertical($navbar-pf-navbar-primary-hover-bg-color-start, $navbar-pf-navbar-primary-hover-bg-color-stop);
+      > li {
+        > a,
+        > button {
+          border-bottom: 1px solid transparent;
+          border-top: 1px solid transparent;
+          position: relative;
+          margin: -1px 0 0;
+          &:hover {
+            background-color: $navbar-pf-item-hover-bg-color;
+            border-top-color: $navbar-pf-navbar-primary-hover-border-color;
+            color: $navbar-pf-color;
+            @include gradient-vertical($navbar-pf-navbar-primary-hover-bg-color-start, $navbar-pf-navbar-primary-hover-bg-color-stop);
+          }
         }
       }
-      > .active > a,
-      > .active > a:hover,
-      > .active > a:focus,
-      > .open > a,
-      > .open > a:hover,
-      > .open > a:focus {
-        background-color: $navbar-pf-navbar-primary-active-bg-color-stop;
-        border-bottom-color: $navbar-pf-navbar-primary-active-bg-color-stop;
-        border-top-color: $navbar-pf-navbar-primary-active-border-color;
-        @include box-shadow(none);
-        color: $navbar-pf-active-color;
-        @include gradient-vertical($navbar-pf-navbar-primary-active-bg-color-start, $navbar-pf-navbar-primary-active-bg-color-stop);
+      > .active,
+      .open {
+        > a,
+        > button {
+          &,
+          &:hover,
+          &:focus {
+            background-color: $navbar-pf-item-open-bg-color;
+            border-bottom-color: $navbar-pf-navbar-primary-active-bg-color-stop;
+            border-top-color: $navbar-pf-navbar-primary-active-border-color;
+            @include box-shadow(none);
+            color: $navbar-pf-active-color;
+            @include gradient-vertical($navbar-pf-navbar-primary-active-bg-color-start, $navbar-pf-navbar-primary-active-bg-color-stop);
+          }
+        }
       }
       li.context {
         &.context-bootstrap-select .filter-option {
           max-width: 160px;
           text-overflow: ellipsis;
@@ -474,40 +497,45 @@
         }
       }
     }
     .navbar-utility {
       border-bottom: 0;
-      font-size: $font-size-small;
       position: absolute;
       right: 0;
       top: 0;
-      > .active > a,
-      > .active > a:hover,
-      > .active > a:focus,
-      > .open > a,
-      > .open > a:hover,
-      > .open > a:focus {
-        background: $navbar-pf-item-open-bg-color;
-        color: $navbar-pf-active-color;
+      > .active,
+      > .open {
+        > a,
+        > button {
+          &,
+          &:hover,
+          &:focus {
+            background: $navbar-pf-item-open-bg-color;
+            color: $navbar-pf-active-color;
+          }
+        }
       }
-      > li > a {
-        border-left: 1px solid $navbar-pf-navbar-utility-border-color;
-        color: $navbar-pf-navbar-utility-color !important;
-        padding: 7px 10px;
-        &:hover {
-          background: $navbar-pf-navbar-utility-hover-bg-color;
-          border-left-color: $navbar-pf-navbar-utility-hover-border-color;
+      > li {
+        > a,
+        > button {
+          border: solid $navbar-pf-navbar-utility-border-color;
+          border-width: 0 0 0 1px;
+          color: $navbar-pf-navbar-utility-color !important;
+          padding: 7px 10px;
+          font-size: $font-size-small;
+          margin: 0;
+          &:hover {
+            background: $navbar-pf-item-hover-bg-color;
+            border-left-color: $navbar-pf-navbar-utility-hover-border-color;
+            outline: 0;
+          }
         }
       }
-      > li.open > a {
-        border-left-color: $navbar-pf-navbar-utility-open-border-color;
-        color: $navbar-pf-active-color !important;
-      }
-      li.dropdown > .dropdown-toggle {
-        padding-left: 26px;
-        .pficon-user {
-          left: 10px;
-          top: 7px;
+      > li.open {
+        > a,
+        > button {
+          border-left-color: $navbar-pf-navbar-utility-open-border-color;
+          color: $navbar-pf-active-color !important;
         }
       }
       .open .dropdown-menu {
         left: auto;
         right: 0;