v5: Forms update (#28450)

* Initial spike of consolidated form checks

* Stub out forms rearrangement

- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS

* Move input group Sass file to forms subdir

* Start to split and move the docs around

* Simpler imports

* Copyediting

* delete overview file

* Remove commented out code

* remove the custom-forms import

* rewrite flex-check as form-check, replace all custom properties

* Remove old forms doc

* stub out new subpage link section

* update migration guide

* Update nav, forms overview in page nav, and descriptions

* fix check bg position

* fix margin-top calculation

* rename .custom-select to .form-select

* Update validation styles for new checks

* add some vertical margin, fix inline checks

* fix docs examples

* better way to do this contents stuff, redo the toc while i'm at it

* page restyle for docs while here

* un-callout that, edit text

* redo padding on toc

* fix toc

* start to cleanup checks docs

* Rewrite Markdown tables into HTML

* Redesign tables, redo their docs

* Replace Open Iconic icons with custom Bootstrap icons

* Redesign the docs navbar, add a subheader, redo the sidebar

* Redesign docs homepage a bit

* Simplify table style overrides for docs tables

* Simplify docs typography for page titles and reading line length

* Stub out icons page

* Part of sidebar update, remove migration from nav.yml

* Move toc CSS to separate partial

* Change appearance of overview page

* fix sidebar arrow direction

* Add footer to docs layout

* Update descriptions

* Drop the .form-group class for margin utilities

* Remove lingering form-group-margin-bottom var

* improve footer spacing

* add headings to range page

* uncomment form range css

* Rename .custom-range to .form-range

* Drop unused docs var

* Uncomment the comment

* Remove unused variable

* Fix radio image sizing

* Reboot update: reset horizontal ul and ol padding

* de-dupe IDs

* tweak toc styles

* nvm, fix dropdown versions stuff

* remove sidebar nav toggle for now

* broken html

* fix more broken html, move css

* scss linting

* comment out broken helper docs

* scope styles

* scope styles

* Fixes #25540 and fixes #26407 for v5 only

* Update sidebar once more

* Match new sidenav order

* fix syntax error

* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696

* rename back

* fix size and alignment

* rename that back too

site/layouts/_default/docs.html

@@ -8,27 +8,59 @@
 
     {{ partial "docs-navbar" . }}
 
-    <div class="container-fluid">
+    <nav class="bd-subnavbar pt-2 pb-3 pb-md-2 mb-4">
+      <div class="container d-flex align-items-md-center flex-column flex-md-row">
+        <div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
+          <a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
+          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
+          <a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
+          {{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
+
+          {{ partial "docs-versions" . }}
+        </div>
+        <form class="bd-search d-flex align-items-center">
+          <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
+        </form>
+      </div>
+    </nav>
+
+    <div class="container">
       <div class="row flex-xl-nowrap">
-        <div class="col-md-3 col-xl-2 bd-sidebar">
+        <div class="col-md-3 bd-sidebar">
           {{ partial "docs-sidebar" . }}
         </div>
 
-        {{ if (eq .Page.Params.toc true) }}
-          <nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
-            {{ .TableOfContents }}
-          </nav>
-        {{ end }}
-
-        <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
+        <main class="col-md-9 py-md-3 pl-md-5 bd-content" role="main">
           <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
           <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
           {{ partial "ads" . }}
+
+          {{ if .Page.Params.sections }}
+            <div class="row my-5">
+              {{ range .Page.Params.sections }}
+                <div class="col-md-6 mb-4">
+                  <a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
+                    <strong class="d-block h5 mb-0">{{ .title }}</strong>
+                    <span class="text-secondary">{{ .description }}</span>
+                  </a>
+                </div>
+              {{ end }}
+            </div>
+          {{ end }}
+
+          {{ if (eq .Page.Params.toc true) }}
+            <strong class="d-block h3 mt-5 mb-3">On this page</strong>
+            <nav class="bd-toc mb-5" aria-label="Secondary navigation">
+              {{ .TableOfContents }}
+            </nav>
+          {{ end }}
+
           {{ .Content }}
         </main>
       </div>
     </div>
 
+    {{ partial "footer" . }}
     {{ partial "scripts" . }}
   </body>
 </html>