fix(supra): various fixes; 2 or so remaining

Orange-OpenSource · Nov 17, 2021 · 49a22f3 · 49a22f3
1 parent 7c25a02
commit 49a22f3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/scss/_orange-navbar.scss b/scss/_orange-navbar.scss
@@ -10,34 +10,35 @@
   display: none;
   padding-top: 0;
   padding-bottom: 0;
-  border-bottom: $navbar-orange-border-bottom solid $gray-700;
+  border-bottom: $navbar-orange-border-bottom-width solid $gray-700;
+
+  .container {
+    padding-right: $navbar-orange-padding-x;
+    padding-left: $navbar-orange-padding-x;
+  }
 
   @include media-breakpoint-up(md) {
     display: flex;
-    .container {
-      padding-right: $navbar-orange-padding-x;
-      padding-left: $navbar-orange-padding-x;
-    }
   }
 
   .navbar-nav .nav-link {
-    padding: #{map-get($spacers, 2) + $navbar-supra-padding-y} $navbar-supra-padding-x $navbar-orange-link-padding-bottom;
+    padding: #{map-get($spacers, 2) + $navbar-orange-supra-padding-y} $navbar-orange-supra-padding-x $navbar-orange-link-padding-bottom;
     font-size: $font-size-sm;
     line-height: 1;
 
     &.active::before {
-      right: $navbar-supra-padding-x;
-      bottom: -$navbar-orange-border-bottom;
-      left: $navbar-supra-padding-x;
+      right: $navbar-orange-supra-padding-x;
+      bottom: -$navbar-orange-border-bottom-width;
+      left: $navbar-orange-supra-padding-x;
     }
 
     &.nav-icon {
-      padding: divide($spacer, 2) $navbar-orange-icon-padding-x $navbar-orange-icon-padding-bottom;
+      padding: $navbar-orange-icon-padding-top $navbar-orange-icon-padding-x $navbar-orange-icon-padding-bottom;
 
       svg,
       img {
-        width: $navbar-supra-icon-size;
-        height: $navbar-supra-icon-size;
+        width: $navbar-orange-supra-icon-size;
+        height: $navbar-orange-supra-icon-size;
       }
     }
 
@@ -49,14 +50,14 @@
       @extend .translate-middle;
       @extend .rounded-pill;
       padding: $navbar-orange-badge-padding-y $navbar-orange-badge-padding-x;
-      margin-top: $navbar-supra-padding-y;
+      margin-top: $navbar-orange-supra-margin-y;
       font-size: $font-size-base;
     }
   }
 
   .nav-item:last-of-type {
     .nav-icon {
-      padding-right: $navbar-supra-padding-x;
+      padding-right: $navbar-orange-supra-padding-x;
     }
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1250,15 +1250,17 @@ $navbar-active-transition:             bottom $navbar-transition-duration $navba
 // Boosted mod: Orange navbar
 // scss-docs-start orange-navbar-variables
 $navbar-orange-padding-x:              .125rem !default;
-$navbar-orange-border-bottom:          1px !default;
+$navbar-orange-border-bottom-width:    1px !default;
 $navbar-orange-link-padding-bottom:    .75rem !default;
+$navbar-orange-icon-padding-top:       divide($spacer, 2) !default;
 $navbar-orange-icon-padding-x:         .9375rem !default;
 $navbar-orange-icon-padding-bottom:    .25rem !default;
 $navbar-orange-badge-padding-y:        .125rem !default;
 $navbar-orange-badge-padding-x:        .375rem !default;
-$navbar-supra-padding-y:               map-get($spacers, 4) * .1 !default; // 0.1875rem
-$navbar-supra-padding-x:               map-get($spacers, 1) * 1.5 !default;
-$navbar-supra-icon-size:               1.5625rem !default;
+$navbar-orange-supra-padding-y:        map-get($spacers, 4) * .1 !default; // 0.1875rem
+$navbar-orange-supra-padding-x:        map-get($spacers, 1) * 1.5 !default;
+$navbar-orange-supra-margin-y:         map-get($spacers, 4) * .1 !default; // 0.1875rem
+$navbar-orange-supra-icon-size:        1.5625rem !default;
 // scss-docs-end orange-navbar-variables
 // End mod
 

diff --git a/site/layouts/shortcodes/orange-supra.html b/site/layouts/shortcodes/orange-supra.html
@@ -4,7 +4,7 @@
 
 {{- $input := .Inner -}}
 
-<nav class="navbar navbar-dark navbar-expand-md bg-dark supra">
+<nav class="navbar navbar-dark navbar-expand bg-dark supra">
   <div class="container">
     <ul class="navbar-nav">
       <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Personal</a></li>