feat(supra navbar): adjust spacings and sizes to match latest design kit

Orange-OpenSource · Dec 5, 2019 · 48f35ac · 48f35ac
1 parent 6f0e617
commit 48f35ac
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/scss/_o-navbar.scss b/scss/_o-navbar.scss
@@ -2,7 +2,7 @@
 // Orange Supra navbar
 //
 
-.navbar.supra {
+.supra {
   display: none;
   padding-top: 0;
   padding-bottom: 0;
@@ -13,13 +13,13 @@
   }
 
   .navbar-nav {
-    margin-top: 0;
+    margin: 0 -#{map-get($spacers, 1)};
   }
 
   .nav-link,
   .dropdown-toggle {
-    padding-top: map-get($spacers, 2);
-    padding-bottom: map-get($spacers, 2);
+    position: relative;
+    padding: #{map-get($spacers, 2) + $navbar-supra-padding-y} map-get($spacers, 1);
     font-size: $font-size-sm;
     line-height: 1;
 
@@ -28,9 +28,23 @@
     }
   }
 
-  .nav-link[class*="svg-"]::after {
-    width: $navbar-supra-height / 2;
-    height: $navbar-supra-height / 2;
+  .nav-link[class*="svg-"] {
+    padding: $spacer / 5 map-get($spacers, 2);
+
+    &::after {
+      width: $navbar-supra-icon-size;
+      height: $navbar-supra-icon-size;
+    }
+  }
+
+  .nav-item + * > .icon {
+    margin-left: map-get($spacers, 2);
+  }
+
+  .badge {
+    position: absolute;
+    top: 0;
+    right: -#{map-get($spacers, 1)};
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -816,7 +816,8 @@ $navbar-expanded-minimized-padding-y: $navbar-padding-y !default; // Boosted mod
 // $navbar-height:                     6.25rem !default;
 $navbar-brand-logo-height:             map-get($spacers, 4) !default;
 $navbar-brand-logo-expanded-height:    3.125rem !default;
-$navbar-supra-height:                  2.5rem !default;
+$navbar-supra-padding-y:               $navbar-brand-logo-height / 10 !default;
+$navbar-supra-icon-size:               1.5625rem !default;
 // end mod
 
 //$navbar-nav-link-padding-x:         0 !default;