small screen top nav background contrast (#1141)

chillenberger · web-flow · commit 27b9b855264b · 2023-11-01T12:53:09.000-06:00
diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss b/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss
@@ -1,31 +1,31 @@
 .navbar-marketing-site {
     @extend .navbar;
 
-    @include media-breakpoint-up(xl) {
-        height: $navbar-height;
-        --bs-navbar-padding-y: 24px;
-        --bs-navbar-padding-x: 1.25rem;
-    }
-
-    .controls {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        min-height: $navbar-height;
-
-        @include media-breakpoint-down(xl) {
-            width: 100%;
-        }
-    }
+    &.horizontal {
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) -55.68%, rgba(0, 0, 0, 0) 100%);
 
-    .navbar-collapse {
         @include media-breakpoint-up(xl) {
-            width: 100%;
+            height: $navbar-height;
+            --bs-navbar-padding-y: 24px;
+            --bs-navbar-padding-x: 1.25rem;
+        }
+    
+        .controls {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            min-height: $navbar-height;
+    
+            @include media-breakpoint-down(xl) {
+                width: 100%;
+            }
+        }
+    
+        .navbar-collapse {
+            @include media-breakpoint-up(xl) {
+                width: 100%;
+            }
         }
-    }
-
-    &.horizontal {
-        background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) -55.68%, rgba(0, 0, 0, 0) 100%);
     }
 
     .underline {
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss b/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss
@@ -21,5 +21,28 @@
     
     &.horizontal {
         height: $navbar-height;
+
+        @include media-breakpoint-up(lg) {
+            height: $navbar-height;
+            --bs-navbar-padding-y: 24px;
+            --bs-navbar-padding-x: 1.25rem;
+        }
+        
+        .controls {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            min-height: $navbar-height;
+
+            @include media-breakpoint-down(lg) {
+                width: 100%;
+            }
+        }
+
+        .navbar-collapse {
+            @include media-breakpoint-up(lg) {
+                width: 100%;
+            }
+        }
     }
 }
diff --git a/pgml-dashboard/static/css/scss/components/_navs.scss b/pgml-dashboard/static/css/scss/components/_navs.scss
@@ -24,12 +24,6 @@
         --bs-navbar-padding-x: 20px;
         min-height: $navbar-height;
 
-        @include media-breakpoint-up(lg) {
-            height: $navbar-height;
-            --bs-navbar-padding-y: 24px;
-            --bs-navbar-padding-x: 1.25rem;
-        }
-
         &.pinned {
             background: #{$gray-900};
         }
@@ -44,23 +38,6 @@
                 border-bottom: 1px solid #{$slate-tint-500};
             }
         }
-
-        .controls {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            min-height: $navbar-height;
-
-            @include media-breakpoint-down(lg) {
-                width: 100%;
-            }
-        }
-
-        .navbar-collapse {
-            @include media-breakpoint-up(lg) {
-                width: 100%;
-            }
-        }
     }
 
     .nav-link {
