Merge branch 'v4-dev' into v4-dev-xmr-docs-toggle-spinner

README.md

@@ -1,24 +1,24 @@
 <p align="center">
   <a href="https://getbootstrap.com/">
-    <img src="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-solid.svg" alt="Bootstrap logo" width=72 height=72>
+    <img src="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-solid.svg" alt="Bootstrap logo" width="72" height="72">
   </a>
+</p>
+
+<h3 align="center">Bootstrap</h3>
 
-  <h3 align="center">Bootstrap</h3>
-
-  <p align="center">
-    Sleek, intuitive, and powerful front-end framework for faster and easier web development.
-    <br>
-    <a href="https://getbootstrap.com/docs/4.2/"><strong>Explore Bootstrap docs »</strong></a>
-    <br>
-    <br>
-    <a href="https://github.com/twbs/bootstrap/issues/new?template=bug.md">Report bug</a>
-    ·
-    <a href="https://github.com/twbs/bootstrap/issues/new?template=feature.md&labels=feature">Request feature</a>
-    ·
-    <a href="https://themes.getbootstrap.com/">Themes</a>
-    ·
-    <a href="https://blog.getbootstrap.com/">Blog</a>
-  </p>
+<p align="center">
+  Sleek, intuitive, and powerful front-end framework for faster and easier web development.
+  <br>
+  <a href="https://getbootstrap.com/docs/4.2/"><strong>Explore Bootstrap docs »</strong></a>
+  <br>
+  <br>
+  <a href="https://github.com/twbs/bootstrap/issues/new?template=bug.md">Report bug</a>
+  ·
+  <a href="https://github.com/twbs/bootstrap/issues/new?template=feature.md&labels=feature">Request feature</a>
+  ·
+  <a href="https://themes.getbootstrap.com/">Themes</a>
+  ·
+  <a href="https://blog.getbootstrap.com/">Blog</a>
 </p>
 
 

scss/_buttons.scss

@@ -34,11 +34,6 @@
     @include box-shadow(none);
   }
 
-  // Opinionated: add "hand" cursor to non-disabled .btn elements
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
-  }
-
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
     @include box-shadow($btn-active-box-shadow);

scss/_close.scss

@@ -17,9 +17,6 @@
     @include hover-focus {
       opacity: .75;
     }
-
-    // Opinionated: add "hand" cursor to non-disabled .close elements
-    cursor: pointer;
   }
 }
 

scss/_custom-forms.scss

@@ -216,6 +216,7 @@
   width: 100%;
   height: $custom-select-height;
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+  font-size: $custom-select-font-size;
   font-weight: $custom-select-font-weight;
   line-height: $custom-select-line-height;
   color: $custom-select-color;

scss/_input-group.scss

@@ -104,7 +104,7 @@
   align-items: center;
   padding: $input-padding-y $input-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
-  font-size: $font-size-base; // Match inputs
+  font-size: $input-font-size; // Match inputs
   font-weight: $font-weight-normal;
   line-height: $input-line-height;
   color: $input-group-addon-color;

scss/_navbar.scss

@@ -116,11 +116,6 @@
   @include hover-focus {
     text-decoration: none;
   }
-
-  // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
-  }
 }
 
 // Keep as a separate element so folks can easily override it with another icon

scss/_pagination.scss

@@ -27,11 +27,6 @@
     outline: $pagination-focus-outline;
     box-shadow: $pagination-focus-box-shadow;
   }
-
-  // Opinionated: add "hand" cursor to non-disabled .page-link elements
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
-  }
 }
 
 .page-item {

scss/_reboot.scss

@@ -331,6 +331,14 @@ select {
   text-transform: none; // Remove the inheritance of text transform in Firefox
 }
 
+// Remove the inheritance of word-wrap in Safari.
+//
+// Details at https://github.com/twbs/bootstrap/issues/24990
+select {
+  word-wrap: normal;
+}
+
+
 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 //    controls in Android 4.
 // 2. Correct the inability to style clickable types in iOS and Safari.
@@ -341,6 +349,18 @@ button,
   -webkit-appearance: button; // 2
 }
 
+// Opinionated: add "hand" cursor to non-disabled button elements.
+@if $enable-pointer-cursor-for-buttons {
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+  }
+}
+
 // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,

scss/_variables.scss

@@ -114,6 +114,7 @@ $enable-transitions:                          true !default;
 $enable-prefers-reduced-motion-media-query:   true !default;
 $enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
 $enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
 $enable-print-styles:                         true !default;
 $enable-validation-icons:                     true !default;
 
@@ -281,8 +282,8 @@ $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 
 $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg:                ($font-size-base * 1.25) !default;
-$font-size-sm:                ($font-size-base * .875) !default;
+$font-size-lg:                $font-size-base * 1.25 !default;
+$font-size-sm:                $font-size-base * .875 !default;
 
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
@@ -317,7 +318,7 @@ $display3-weight:             300 !default;
 $display4-weight:             300 !default;
 $display-line-height:         $headings-line-height !default;
 
-$lead-font-size:              ($font-size-base * 1.25) !default;
+$lead-font-size:              $font-size-base * 1.25 !default;
 $lead-font-weight:            300 !default;
 
 $small-font-size:             80% !default;
@@ -326,7 +327,7 @@ $text-muted:                  $gray-600 !default;
 
 $blockquote-small-color:      $gray-600 !default;
 $blockquote-small-font-size:  $small-font-size !default;
-$blockquote-font-size:        ($font-size-base * 1.25) !default;
+$blockquote-font-size:        $font-size-base * 1.25 !default;
 
 $hr-border-color:             rgba($black, .1) !default;
 $hr-border-width:             $border-width !default;
@@ -565,6 +566,7 @@ $custom-switch-indicator-size:                  calc(#{$custom-control-indicator
 
 $custom-select-padding-y:           $input-btn-padding-y !default;
 $custom-select-padding-x:           $input-btn-padding-x !default;
+$custom-select-font-size:           $input-font-size !default;
 $custom-select-height:              $input-height !default;
 $custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
 $custom-select-font-weight:         $input-font-weight !default;
@@ -593,12 +595,12 @@ $custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width rgba($custo
 
 $custom-select-padding-y-sm:        $input-padding-y-sm !default;
 $custom-select-padding-x-sm:        $input-padding-x-sm !default;
-$custom-select-font-size-sm:        $input-btn-font-size-sm !default;
+$custom-select-font-size-sm:        $input-font-size-sm !default;
 $custom-select-height-sm:           $input-height-sm !default;
 
 $custom-select-padding-y-lg:        $input-padding-y-lg !default;
 $custom-select-padding-x-lg:        $input-padding-x-lg !default;
-$custom-select-font-size-lg:        $input-btn-font-size-lg !default;
+$custom-select-font-size-lg:        $input-font-size-lg !default;
 $custom-select-height-lg:           $input-height-lg !default;
 
 $custom-range-track-width:          100% !default;
@@ -959,7 +961,7 @@ $alert-color-level:                 6 !default;
 // Progress bars
 
 $progress-height:                   1rem !default;
-$progress-font-size:                ($font-size-base * .75) !default;
+$progress-font-size:                $font-size-base * .75 !default;
 $progress-bg:                       $gray-200 !default;
 $progress-border-radius:            $border-radius !default;
 $progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
@@ -1089,6 +1091,7 @@ $pre-scrollable-max-height:         340px !default;
 
 // Utilities
 
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
 $overflows: auto, hidden !default;
 $positions: static, relative, absolute, fixed, sticky !default;
 

scss/utilities/_display.scss

@@ -8,15 +8,9 @@
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .d#{$infix}-none         { display: none !important; }
-    .d#{$infix}-inline       { display: inline !important; }
-    .d#{$infix}-inline-block { display: inline-block !important; }
-    .d#{$infix}-block        { display: block !important; }
-    .d#{$infix}-table        { display: table !important; }
-    .d#{$infix}-table-row    { display: table-row !important; }
-    .d#{$infix}-table-cell   { display: table-cell !important; }
-    .d#{$infix}-flex         { display: flex !important; }
-    .d#{$infix}-inline-flex  { display: inline-flex !important; }
+    @each $value in $displays {
+      .d#{$infix}-#{$value} { display: $value !important; }
+    }
   }
 }
 
@@ -26,13 +20,7 @@
 //
 
 @media print {
-  .d-print-none         { display: none !important; }
-  .d-print-inline       { display: inline !important; }
-  .d-print-inline-block { display: inline-block !important; }
-  .d-print-block        { display: block !important; }
-  .d-print-table        { display: table !important; }
-  .d-print-table-row    { display: table-row !important; }
-  .d-print-table-cell   { display: table-cell !important; }
-  .d-print-flex         { display: flex !important; }
-  .d-print-inline-flex  { display: inline-flex !important; }
+  @each $value in $displays {
+    .d-print-#{$value} { display: $value !important; }
+  }
 }

site/docs/4.2/about/overview.md

@@ -3,6 +3,9 @@ layout: docs
 title: About
 description: Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.
 group: about
+redirect_from:
+  - "/about/"
+  - "/docs/4.2/about/"
 ---
 
 ## Team

site/docs/4.2/assets/scss/_clipboard-js.scss

@@ -25,7 +25,6 @@
   padding: .25rem .5rem;
   font-size: 75%;
   color: #818a91;
-  cursor: pointer;
   background-color: transparent;
   border: 0;
   @include border-radius;

site/docs/4.2/browser-bugs.md

@@ -2,6 +2,7 @@
 layout: docs
 title: Wall of browser bugs
 group: browser-bugs
+redirect_from: "/browser-bugs/"
 ---
 
 Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.

site/docs/4.2/components/buttons.md

@@ -3,7 +3,9 @@ layout: docs
 title: Buttons
 description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
 group: components
-redirect_from: "/docs/4.2/components/"
+redirect_from:
+  - "/components/"
+  - "/docs/4.2/components/"
 toc: true
 ---
 

site/docs/4.2/components/toasts.md

@@ -69,7 +69,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
 
 ### Stacking
 
-When you have multiple toasts, we default to vertiaclly stacking them in a readable manner.
+When you have multiple toasts, we default to vertically stacking them in a readable manner.
 
 <div class="bg-light">
 {% capture example %}

site/docs/4.2/content/reboot.md

@@ -206,6 +206,7 @@ Various form elements have been rebooted for simpler base styles. Here are some
 - `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
 - `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
 - `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
+- `<button>`s and `<input>` button elements have `cursor: pointer` when `:not(:disabled)`.
 
 These changes, and more, are demonstrated below.
 
@@ -280,12 +281,14 @@ These changes, and more, are demonstrated below.
     <p>
       <button type="submit">Button submit</button>
       <input type="submit" value="Input submit button">
+      <input type="reset" value="Input reset button">
       <input type="button" value="Input button">
     </p>
 
     <p>
       <button type="submit" disabled>Button submit</button>
       <input type="submit" value="Input submit button" disabled>
+      <input type="reset" value="Input reset button" disabled>
       <input type="button" value="Input button" disabled>
     </p>
   </fieldset>

site/docs/4.2/examples/index.html

@@ -2,8 +2,7 @@
 layout: simple
 title: Examples
 description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-redirect_from:
-  - "/examples/"
+redirect_from: "/examples/"
 ---
 
 {% for entry in site.data.examples %}

site/docs/4.2/extend/index.md

@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Extend
-redirect_to: /docs/4.1/extend/approach/
+redirect_to: "/docs/4.1/extend/approach/"
 ---
 
 todo: this entire page

site/docs/4.2/getting-started/introduction.md

@@ -4,10 +4,11 @@ title: Introduction
 description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
 group: getting-started
 redirect_from:
-  - /docs/
-  - /docs/4.2/
-  - /docs/4.2/getting-started/
-  - /docs/getting-started/
+  - "/docs/"
+  - "/docs/4.2/"
+  - "/docs/4.2/getting-started/"
+  - "/docs/getting-started/"
+  - "/getting-started/"
 toc: true
 ---
 

site/docs/4.2/getting-started/theming.md

@@ -229,19 +229,20 @@ Customize Bootstrap 4 with our built-in custom variables file and easily toggle
 
 You can find and customize these variables for key global options in Bootstrap's `scss/_variables.scss` file.
 
-| Variable                    | Values                             | Description                                                                            |
-| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
-| `$spacer`                   | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). |
-| `$enable-rounded`           | `true` (default) or `false`        | Enables predefined `border-radius` styles on various components. |
-| `$enable-shadows`           | `true` or `false` (default)        | Enables predefined `box-shadow` styles on various components. |
-| `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components. |
-| `$enable-transitions`       | `true` (default) or `false`        | Enables predefined `transition`s on various components. |
-| `$enable-prefers-reduced-motion-media-query`       | `true` (default) or `false`        | Enables the [`prefers-reduced-motion` media query]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/accessibility/#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
-| `$enable-hover-media-query` | `true` or `false` (default)        | **Deprecated** |
-| `$enable-grid-classes`      | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
-| `$enable-caret`             | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |
-| `$enable-print-styles`      | `true` (default) or `false`        | Enables styles for optimizing printing. |
-| `$enable-validation-icons`  | `true` (default) or `false`        | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
+| Variable                                     | Values                             | Description                                                                            |
+| -------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
+| `$spacer`                                    | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). |
+| `$enable-rounded`                            | `true` (default) or `false`        | Enables predefined `border-radius` styles on various components. |
+| `$enable-shadows`                            | `true` or `false` (default)        | Enables predefined `box-shadow` styles on various components. |
+| `$enable-gradients`                          | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components. |
+| `$enable-transitions`                        | `true` (default) or `false`        | Enables predefined `transition`s on various components. |
+| `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false`        | Enables the [`prefers-reduced-motion` media query]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/accessibility/#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
+| `$enable-hover-media-query`                  | `true` or `false` (default)        | **Deprecated** |
+| `$enable-grid-classes`                       | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
+| `$enable-caret`                              | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |
+| `$enable-pointer-cursor-for-buttons`         | `true` (default) or `false`        | Add "hand" cursor to non-disabled button elements. |
+| `$enable-print-styles`                       | `true` (default) or `false`        | Enables styles for optimizing printing. |
+| `$enable-validation-icons`                   | `true` (default) or `false`        | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
 
 ## Color
 

site/docs/4.2/migration.md

@@ -3,6 +3,7 @@ layout: docs
 title: Migrating to v4
 description: Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
 group: migration
+redirect_from: "/migration/"
 toc: true
 ---