feat(navbar): current item's border alignment after #252

Orange-OpenSource · Jan 6, 2020 · 7620f43 · 7620f43
1 parent 63227dc
commit 7620f43
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 34 deletions.
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -52,15 +52,17 @@
   }
 
   // Boosted mod
-  &.p-0,
-  &.py-0,
-  &.pb-0 {
-    .nav-link.active::after {
-      bottom: -#{$border-width};
+  @include media-breakpoint-up(md) {
+    &.p-0,
+    &.py-0,
+    &.pb-0 {
+      .nav-link.active::before {
+        bottom: -#{$border-width};
+      }
     }
   }
 
-  .nav-link.active.pl-0::after {
+  .nav-link.active.pl-0::before {
     left: 0;
   }
   // end mod
@@ -156,33 +158,24 @@
   // Boosted mod
   .nav-link {
     position: relative;
-    padding: map-get($spacers, 2);
+    padding: map-get($spacers, 2) map-get($spacers, 1);
     outline-offset: $spacer;
     @include transition($transition-focus);
 
-    @include media-breakpoint-up(sm) {
-      padding: $navbar-padding-y map-get($spacers, 2);
-    }
-
     &[class*="svg-"]::after {
       width: $navbar-supra-icon-size;
       height: $navbar-supra-icon-size;
-
-      @include media-breakpoint-up(sm) {
-        width: $navbar-brand-logo-height;
-        height: $navbar-brand-logo-height;
-      }
     }
 
     &:focus {
       outline-offset: -#{$border-width};
     }
 
-    &.active::after {
+    &.active::before {
       position: absolute;
-      right: map-get($spacers, 2);
-      bottom: $navbar-padding-y;
-      left: map-get($spacers, 2);
+      right: map-get($spacers, 1);
+      bottom: 0;
+      left: map-get($spacers, 1);
       height: $border-width * 2;
       content: "";
       background-color: currentColor;
@@ -192,10 +185,6 @@
   .nav-icon {
     padding: map-get($spacers, 2) .9375rem;
     border-top: $border-width solid transparent;
-
-    @include media-breakpoint-up(sm) {
-      padding: $navbar-padding-y $spacer;
-    }
   }
 
   .btn-link,
@@ -211,8 +200,28 @@
     position: absolute;
     top: map-get($spacers, 1);
     right: 0;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .nav-link {
+      padding: $navbar-padding-y map-get($spacers, 2);
 
-    @include media-breakpoint-up(sm) {
+      &[class*="svg-"]::after {
+        width: $navbar-brand-logo-height;
+        height: $navbar-brand-logo-height;
+      }
+
+      &.active::before {
+        right: map-get($spacers, 2);
+        left: map-get($spacers, 2);
+      }
+    }
+
+    .nav-icon {
+      padding: $navbar-padding-y $spacer;
+    }
+
+    .badge {
       top: map-get($spacers, 2);
       right: map-get($spacers, 2);
     }
@@ -372,12 +381,14 @@
       @include media-breakpoint-up($breakpoint) {
         padding: $navbar-expanded-padding-y $navbar-expanded-padding-x .4375rem;
 
-        .nav-link.active::after {
-          bottom: -.4375rem;
+        .nav-link.active::before {
+          right: map-get($spacers, 2);
+          bottom: 0;
+          left: map-get($spacers, 2);
         }
 
         .navbar-brand {
-          margin: 0 $spacer 1.125rem 0;
+          margin: 0 $spacer 1.125rem map-get($spacers, 2);
 
           img {
             width: $navbar-brand-logo-expanded-height;
@@ -395,8 +406,8 @@
           padding-top: $navbar-expanded-minimized-padding-y;
           padding-bottom: .1875rem;
 
-          .nav-link.active::after {
-            bottom: -.1875rem;
+          .nav-link.active::before {
+            bottom: 0;
           }
 
           .navbar-brand {
@@ -429,6 +440,12 @@
         flex-flow: row nowrap;
         justify-content: flex-start;
 
+        // Boosted mod
+        .nav-link.active::before {
+          bottom: -.4375rem;
+        }
+        // end mod
+
         .navbar-nav {
           flex-direction: row;
 
@@ -514,6 +531,11 @@
   // end mod
 
   // Boosted mod: remove the need for .navbar-nav wrapper
+  .nav-item,
+  .dropdown-item {
+    border-color: $gray-500;
+  }
+
   .nav-link {
     color: $navbar-light-color;
 

diff --git a/scss/_o-megamenu.scss b/scss/_o-megamenu.scss
@@ -78,6 +78,7 @@
             &:hover::after,
             &:focus::after,
             &:active::after,
+            &.active::after,
             &[aria-expanded="true"]::after {
               background-image: escape-svg($o-megamenu-icon-active);
             }
@@ -96,7 +97,8 @@
           .back:active::before,
           [aria-haspopup]:hover::after,
           [aria-haspopup]:focus::after,
-          [aria-haspopup]:active::after {
+          [aria-haspopup]:active::after,
+          [aria-haspopup].active::after {
             background-image: escape-svg($o-megamenu-arrow-icon-hover);
           }
 

diff --git a/scss/_o-nav-local.scss b/scss/_o-nav-local.scss
@@ -15,7 +15,7 @@
       outline-offset: -#{$border-width};
     }
 
-    &.active::after {
+    &.active::before {
       position: absolute;
       right: $nav-link-padding-x;
       bottom: -#{map-get($spacers, 2) / 10};
@@ -31,7 +31,7 @@
       padding-left: 0;
     }
 
-    .active::after {
+    .active::before {
       left: 0;
     }
   }

diff --git a/scss/_o-navbar.scss b/scss/_o-navbar.scss
@@ -27,7 +27,7 @@
     }
   }
 
-  .nav-link.active::after {
+  .nav-link.active::before {
     right: map-get($spacers, 1);
     bottom: -#{map-get($spacers, 2) / 10};
     left: map-get($spacers, 1);