Move search styles, prep for responsive containers in docs

diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 57dde408957375f272cc7436a97b489a93f04aef..fff946d10728f433fdd5c6ef08c49abcfcf1325e 100644 (file)
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -9,7 +9,7 @@
     {{ partial "docs-navbar" . }}
     {{ partial "docs-subnav" . }}
 
-    <div class="container my-4">
+    <div class="container-xl my-4">
       <div class="row flex-xl-nowrap">
         <div class="col-md-3 bd-sidebar">
           {{ partial "docs-sidebar" . }}

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 52bbd4051757a2b358924769a44863f16257a5f4..a8f8b17a1e9cdada70a21c2ed4c4f75974af29dd 100644 (file)
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,10 +1,10 @@
 <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar px-0">
-  <div class="container flex-wrap flex-md-nowrap py-0 px-3">
+  <div class="container-xl flex-wrap flex-md-nowrap py-0 px-3">
     <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
     </a>
 
-    <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center">
+    <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center justify-content-md-start">
       <ul class="navbar-nav bd-navbar-nav flex-row">
         <li class="nav-item">
           <a class="nav-link{{ if .IsHome }} active{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
@@ -27,7 +27,7 @@
       </ul>
     </div>
 
-    <ul class="navbar-nav ml-md-auto">
+    <ul class="navbar-nav ml-sm-auto">
       <li class="nav-item">
         <a class="nav-link p-2" href="{{ .Site.Params.repo }}" target="_blank" rel="noopener" aria-label="GitHub">
           {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}

diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
index d890ccc37653a9d96642573d4f8fc973b014be83..61dd5282d16dfd6856326e9a3f949728eb62aa20 100644 (file)
--- a/site/layouts/partials/docs-subnav.html
+++ b/site/layouts/partials/docs-subnav.html
@@ -1,5 +1,5 @@
 <nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
-  <div class="container d-flex align-items-md-center flex-wrap">
+  <div class="container-xl d-flex align-items-md-center flex-wrap">
     <div class="d-flex align-items-center mr-sm-auto order-2 order-md-0">
       <div class="d-none d-md-block">
         <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>

diff --git a/site/static/docs/4.3/assets/scss/_nav.scss b/site/static/docs/4.3/assets/scss/_nav.scss
index 285c83038ffd9285c6cab912bc3b955ae03c5468..3ceec7aebc52e4137fd3853d587664fa0bb2338f 100644 (file)
--- a/site/static/docs/4.3/assets/scss/_nav.scss
+++ b/site/static/docs/4.3/assets/scss/_nav.scss
@@ -30,6 +30,24 @@
   }
 }
 
+.bd-search {
+  position: relative; // To contain the Algolia search
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+  }
+
+  .form-control:focus {
+    border-color: $bd-purple-bright;
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+}
+
+.bd-search-docs-toggle {
+  line-height: 1;
+  color: $gray-900;
+}
+
 .link-dark {
   font-weight: 500;
   color: $dark;

diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss
index 590464c12b28361d60f393fd8ef8078a894b16da..be7c9d50cd25eb94ba875939c4bd95c62c3493b2 100644 (file)
--- a/site/static/docs/4.3/assets/scss/_sidebar.scss
+++ b/site/static/docs/4.3/assets/scss/_sidebar.scss
@@ -19,24 +19,6 @@
   }
 }
 
-.bd-search {
-  position: relative; // To contain the Algolia search
-
-  @include media-breakpoint-down(md) {
-    width: 100%;
-  }
-
-  .form-control:focus {
-    border-color: $bd-purple-bright;
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
-}
-
-.bd-search-docs-toggle {
-  line-height: 1;
-  color: $gray-900;
-}
-
 .bd-sidenav {
   display: none;
 }