diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss b/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss index 42447bca8..fe4437e66 100644 --- 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 index e4795e31b..13064e10f 100644 --- 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 index ee9c4ca48..4025bcfd8 100644 --- 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 {