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/static/docs/4.3/assets/js/src/application.js

@@ -19,6 +19,20 @@
     return [].slice.call(list)
   }
 
+  var sidenavGroups = document.querySelectorAll('.js-sidenav-group')
+  var groupHasLinks
+  var groupLink
+  sidenavGroups.forEach(sidenavGroup => {
+    groupHasLinks = Boolean(sidenavGroup.querySelector('li'))
+    groupLink = sidenavGroup.querySelector('a')
+    if (groupHasLinks) {
+      groupLink.addEventListener('click', function (e) {
+        e.preventDefault()
+        e.target.parentNode.classList.toggle('active')
+      }, true)
+    }
+  })
+
   // Tooltip and popover demos
   makeArray(document.querySelectorAll('.tooltip-demo'))
     .forEach(function (tooltip) {

site/static/docs/4.3/assets/scss/_content.scss

@@ -21,10 +21,10 @@
     }
   }
 
-  > table {
-    width: 100%;
+  // Override Bootstrap defaults
+  > .table {
     max-width: 100%;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
 
     @include media-breakpoint-down(md) {
       display: block;
@@ -35,22 +35,10 @@
       }
     }
 
-    // Cells
-    > thead,
-    > tbody,
-    > tfoot {
-      > tr {
-        > th,
-        > td {
-          padding: $table-cell-padding;
-          vertical-align: top;
-          border: 1px solid $table-border-color;
-
-          > p:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
+    th,
+    td {
+      &:first-child { padding-left: 0; }
+      &:not(:last-child) { padding-right: 1.5rem; }
     }
 
     // Prevent breaking of code (e.g., Grunt tasks list)
@@ -94,30 +82,16 @@
   > ol li {
     margin-bottom: .25rem;
   }
-
-  @include media-breakpoint-up(lg) {
-    > ul,
-    > ol,
-    > p {
-      max-width: 80%;
-    }
-  }
 }
 
 .bd-title {
-  margin-top: 1rem;
   margin-bottom: .5rem;
-  font-weight: 300;
   @include font-size(3rem);
 }
 
 .bd-lead {
   @include font-size(1.5rem);
   font-weight: 300;
-
-  @include media-breakpoint-up(lg) {
-    max-width: 80%;
-  }
 }
 
 .bd-text-purple { color: $bd-purple; }

site/static/docs/4.3/assets/scss/_masthead.scss

@@ -3,13 +3,17 @@
 .bd-masthead {
   position: relative;
   padding: 3rem ($grid-gutter-width / 2);
-  // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
+  background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
 
   h1 {
     @include font-size(4rem);
     line-height: 1;
   }
 
+  p:not(.lead) {
+    color: $gray-700;
+  }
+
   .btn {
     padding: .8rem 2rem;
     font-weight: 600;
@@ -37,16 +41,46 @@
   }
 }
 
+.lead-lg {
+  @include font-size(1.5rem);
+}
+
+.home-icon {
+  width: 6rem;
+  height: 6rem;
+  padding: 1.5rem;
+  color: #fff;
+  text-shadow: 0 -.125rem 0 rgba(0, 0, 0, .1);
+  @include border-radius(25%);
+  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
+
+  &-purple {
+    background-image: linear-gradient(180deg, $pink, $purple);
+  }
+
+  &-blue {
+    background-image: linear-gradient(180deg, $teal, $blue);
+  }
+
+  &-yellow {
+    background-image: linear-gradient(180deg, $yellow, $orange);
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .mw-md-75 { max-width: 75%; }
+}
+
 .half-rule {
   width: 6rem;
-  margin: 2.5rem 0;
+  margin: 2rem 0;
 }
 
 .masthead-followup {
   .bd-clipboard { display: none; }
 
   .highlight {
-    padding: .5rem 0;
-    background-color: transparent;
+    // padding: .5rem 0;
+    // background-color: transparent;
   }
 }

site/static/docs/4.3/assets/scss/_nav.scss

@@ -2,10 +2,47 @@
 // Main navbar
 //
 
+.bd-subnavbar {
+  background-color: rgba(#fff, .75);
+  backdrop-filter: blur(1rem);
+  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
+
+  .booticon {
+    opacity: .25;
+  }
+
+  .dropdown-toggle {
+    @include font-size(100%);
+    text-decoration: none;
+  }
+
+  .dropdown-menu {
+    @include font-size(90%);
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05);
+  }
+
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      position: sticky;
+      top: 0;
+      z-index: 1071; // over everything in bootstrap
+    }
+  }
+}
+
+.link-dark {
+  font-weight: 500;
+  color: $dark;
+
+  &:hover {
+    color: $blue;
+    text-decoration: none;
+  }
+}
+
 .bd-navbar {
   min-height: 4rem;
-  background-color: $bd-purple;
-  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
+  background-color: $bd-purple-bright;
 
   @include media-breakpoint-down(md) {
     padding-right: .5rem;
@@ -26,14 +63,6 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
-    @supports (position: sticky) {
-      position: sticky;
-      top: 0;
-      z-index: 1071; // over everything in bootstrap
-    }
-  }
-
   .navbar-nav {
     .nav-link {
       padding-right: .5rem;

site/static/docs/4.3/assets/scss/_sidebar.scss

@@ -1,91 +1,15 @@
 // stylelint-disable declaration-no-important
 
-//
-// Right side table of contents
-//
-
-.bd-toc {
-  @supports (position: sticky) {
-    position: sticky;
-    top: 4rem;
-    height: calc(100vh - 4rem);
-    overflow-y: auto;
-  }
-  order: 2;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  @include font-size(.875rem);
-}
-
-// stylelint-disable selector-max-type, selector-max-combinators, selector-max-compound-selectors
-.bd-toc nav {
-  padding-left: 0;
-  border-left: 1px solid #eee;
-
-  > ul,
-  > ul > li > ul {
-    padding: 0;
-  }
-
-  a code {
-    font: inherit;
-  }
-
-  li {
-    display: block;
-
-    ul li ul {
-      padding-left: 1rem;
-    }
-
-    a {
-      display: block;
-      padding: .125rem 1.5rem;
-      color: #77757a;
-
-      &:hover {
-        color: $blue;
-        text-decoration: none;
-      }
-    }
-  }
-}
-// stylelint-enable selector-max-type, selector-max-combinators, selector-max-compound-selectors
-
-//
-// Left side navigation
-//
-
 .bd-sidebar {
   order: 0;
-  // background-color: #f5f2f9;
-  border-bottom: 1px solid rgba(0, 0, 0, .1);
-
-  @include media-breakpoint-up(md) {
-    @supports (position: sticky) {
-      position: sticky;
-      top: 4rem;
-      z-index: 1000;
-      height: calc(100vh - 4rem);
-    }
-    border-right: 1px solid rgba(0, 0, 0, .1);
-  }
-
-  @include media-breakpoint-up(xl) {
-    flex: 0 1 320px;
-  }
 }
 
 .bd-links {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  margin-right: -15px;
-  margin-left: -15px;
-
   @include media-breakpoint-up(md) {
     @supports (position: sticky) {
-      max-height: calc(100vh - 9rem);
-      overflow-y: auto;
+      position: sticky;
+      top: 5rem;
+      z-index: 1000;
     }
   }
 
@@ -97,10 +21,6 @@
 
 .bd-search {
   position: relative; // To contain the Algolia search
-  padding: 1rem 15px;
-  margin-right: -15px;
-  margin-left: -15px;
-  border-bottom: 1px solid rgba(0, 0, 0, .05);
 
   .form-control:focus {
     border-color: $bd-purple-bright;
@@ -117,32 +37,35 @@
   display: none;
 }
 
-.bd-toc-link {
-  display: block;
-  padding: .25rem 1.5rem;
+.bd-sidenav-group-link {
+  padding: .25rem .625rem .25rem .5rem;
   font-weight: 600;
   color: rgba(0, 0, 0, .65);
+  @include border-radius(.25rem);
+
+  > * { pointer-events: none; }
 
   &:hover {
     color: rgba(0, 0, 0, .85);
     text-decoration: none;
+    background-color: rgba($bd-purple-bright, .1);
   }
 }
 
-.bd-toc-item {
-  &.active {
-    margin-bottom: 1rem;
+.bd-sidenav-group-link-icon {
+  width: .875rem;
+  margin-right: .25rem;
+  opacity: .5;
+}
 
-    &:not(:first-child) {
-      margin-top: 1rem;
+.bd-sidenav-group {
+  &.active {
+    .bd-sidenav-group-link-icon {
+      transform: rotate(90deg);
     }
 
-    > .bd-toc-link {
+    > .bd-sidenav-group-link {
       color: rgba(0, 0, 0, .85);
-
-      &:hover {
-        background-color: transparent;
-      }
     }
 
     > .bd-sidenav {
@@ -152,22 +75,26 @@
 }
 
 // All levels of nav
-.bd-sidebar .nav > li > a {
-  display: block;
-  padding: .25rem 1.5rem;
-  @include font-size(90%);
-  color: rgba(0, 0, 0, .65);
-}
+.bd-sidebar .nav {
+  padding-left: 1.25rem;
 
-.bd-sidebar .nav > li > a:hover {
-  color: rgba(0, 0, 0, .85);
-  text-decoration: none;
-  background-color: transparent;
-}
+  > li > a {
+    display: inline-block;
+    padding: .25rem .5rem;
+    @include font-size(.875rem);
+    color: rgba(0, 0, 0, .65);
+    @include border-radius(.25rem);
 
-.bd-sidebar .nav > .active > a,
-.bd-sidebar .nav > .active:hover > a {
-  font-weight: 600;
-  color: rgba(0, 0, 0, .85);
-  background-color: transparent;
+    &:hover {
+      color: rgba(0, 0, 0, .85);
+      text-decoration: none;
+      background-color: rgba($bd-purple-bright, .1);
+    }
+  }
+
+  > .active > a,
+  > .active:hover > a {
+    font-weight: 600;
+    color: rgba(0, 0, 0, .85);
+  }
 }

site/static/docs/4.3/assets/scss/_toc.scss

@@ -0,0 +1,25 @@
+// stylelint-disable selector-max-type, selector-max-combinators, selector-max-compound-selectors
+
+.bd-toc nav {
+  padding-top: .125em;
+  padding-bottom: .125em;
+  border-left: .25em solid #eee;
+
+  > ul {
+    padding-left: .5rem;
+    margin-bottom: 0;
+  }
+
+  > ul > li {
+    display: block;
+  }
+
+  li ul li {
+    margin-bottom: .25rem;
+    list-style-type: disc;
+  }
+
+  a code {
+    font: inherit;
+  }
+}

site/static/docs/4.3/assets/scss/docs.scss

@@ -36,6 +36,7 @@
 @import "content";
 @import "skippy";
 @import "sidebar";
+@import "toc";
 @import "footer";
 @import "component-examples";
 @import "buttons";
@@ -50,3 +51,17 @@
 @import "syntax";
 @import "anchor";
 @import "algolia";
+
+// Temp
+.booticons-list {
+  .booticon {
+    display: inline;
+    width: 4rem;
+    padding: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    background-color: #fff;
+    border: 1px solid rgba(0, 0, 0, .1);
+    @include border-radius(.25rem);
+  }
+}