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

1 files changed, 72 insertions, 0 deletions

diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss
new file mode 100644
index 000000000..bbc38a9f8
--- /dev/null
+++ b/scss/forms/_form-file.scss
@@ -0,0 +1,72 @@
+.form-file {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: $form-file-height;
+  margin-bottom: 0;
+}
+
+.form-file-input {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: $form-file-height;
+  margin: 0;
+  opacity: 0;
+
+  &:focus ~ .form-file-label {
+    border-color: $form-file-focus-border-color;
+    box-shadow: $form-file-focus-box-shadow;
+  }
+
+  // Use disabled attribute instead of :disabled pseudo-class
+  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
+  &[disabled] ~ .form-file-label {
+    background-color: $form-file-disabled-bg;
+  }
+}
+
+.form-file-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  height: $form-file-height;
+  border-color: $form-file-border-color;
+  @include border-radius($form-file-border-radius);
+  @include box-shadow($form-file-box-shadow);
+}
+
+.form-file-text {
+  display: block;
+  flex-grow: 1;
+  padding: $form-file-padding-y $form-file-padding-x;
+  overflow: hidden;
+  font-family: $form-file-font-family;
+  font-weight: $form-file-font-weight;
+  line-height: $form-file-line-height;
+  color: $form-file-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: $form-file-bg;
+  border-color: inherit;
+  border-style: solid;
+  border-width: $form-file-border-width;
+  @include border-left-radius(inherit);
+}
+
+.form-file-button {
+  display: block;
+  flex-shrink: 0;
+  padding: $form-file-padding-y $form-file-padding-x;
+  margin-left: -$form-file-border-width;
+  line-height: $form-file-line-height;
+  color: $form-file-button-color;
+  @include gradient-bg($form-file-button-bg);
+  border-color: inherit;
+  border-style: solid;
+  border-width: $form-file-border-width;
+  @include border-right-radius(inherit);
+}