Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

_includes/header.html

@@ -1,14 +1,14 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<meta name="description" content="{{ page.description | default: site.description }}">
+<meta name="description" content="{{ page.description | default: site.description | smartify }}">
 <meta name="author" content="{{ site.authors }}">
 <meta name="generator" content="Jekyll v{{ jekyll.version }}">
 
 <title>
   {%- if page.title -%}
-    {{ page.title }} · {{ site.title }}
+    {{ page.title | smartify }} · {{ site.title | smartify }}
   {%- else -%}
-    {{ site.title }} · {{ site.description }}
+    {{ site.title | smartify }} · {{ site.description | smartify }}
   {%- endif -%}
 </title>
 

_includes/social.html

@@ -2,14 +2,14 @@
 <meta name="twitter:card" content="{% if page.title %}summary{% else %}summary_large_image{% endif %}">
 <meta name="twitter:site" content="@{{ site.twitter }}">
 <meta name="twitter:creator" content="@{{ site.twitter }}">
-<meta name="twitter:title" content="{{ page.title | default: site.title }}">
-<meta name="twitter:description" content="{{ page.description | default: site.description }}">
+<meta name="twitter:title" content="{{ page.title | default: site.title | smartify }}">
+<meta name="twitter:description" content="{{ page.description | default: site.description | smartify }}">
 <meta name="twitter:image" content="{% if page.title %}{{ site.url | append: site.social_logo_path }}{% else %}{{ site.url | append: site.social_image_path }}{% endif %}">
 
 <!-- Facebook -->
 <meta property="og:url" content="{{ site.url | append: page.url }}">
-<meta property="og:title" content="{{ page.title | default: site.title }}">
-<meta property="og:description" content="{{ page.description | default: site.description }}">
+<meta property="og:title" content="{{ page.title | default: site.title | smartify }}">
+<meta property="og:description" content="{{ page.description | default: site.description | smartify }}">
 <meta property="og:type" content="website">
 <meta property="og:image" content="{{ site.url | replace: 'https://', 'http://' | append: site.social_image_path }}">
 <meta property="og:image:secure_url" content="{{ site.url | append: site.social_image_path }}">

_layouts/docs.html

@@ -25,8 +25,8 @@
         {% endif %}
 
         <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
-          <h1 class="bd-title" id="content">{{ page.title }}</h1>
-          <p class="bd-lead">{{ page.description }}</p>
+          <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
+          <p class="bd-lead">{{ page.description | smartify }}</p>
           {% include ads.html %}
           {{ content }}
         </main>

_layouts/simple.html

@@ -4,8 +4,8 @@ layout: default
 
 <div class="container my-5">
   <main class="bd-content" role="main">
-    <h1 class="bd-title" id="content">{{ page.title }}</h1>
-    <p class="bd-lead">{{ page.description }}</p>
+    <h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
+    <p class="bd-lead">{{ page.description | smartify }}</p>
     {% include ads.html %}
     {{ content }}
   </main>

docs/4.0/components/forms.md

@@ -1018,6 +1018,46 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th
 </select>
 {% endexample %}
 
+You may also choose from small and large custom selects to match our similarly sized text inputs.
+
+{% example html %}
+<select class="custom-select custom-select-lg">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+
+<select class="custom-select custom-select-sm">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+{% endexample %}
+
+The `multiple` attribute is also supported:
+
+{% example html %}
+<select class="custom-select" multiple>
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+{% endexample %}
+
+As is the `size` attribute:
+
+{% example html %}
+<select class="custom-select" size="3">
+  <option selected>Open this select menu</option>
+  <option value="1">One</option>
+  <option value="2">Two</option>
+  <option value="3">Three</option>
+</select>
+{% endexample %}
+
 ### File browser
 
 The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.

docs/4.0/components/modal.md

@@ -210,7 +210,7 @@ When modals become too long for the user's viewport or device, they scroll indep
 
 ### Vertically centered
 
-Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal.
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">

docs/4.0/content/tables.md

@@ -586,7 +586,7 @@ Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `
 
 ## Captions
 
-A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
+A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
 
 {% example html %}
 <table class="table">

docs/4.0/migration.md

@@ -11,6 +11,8 @@ toc: true
 While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you're updating to Beta 3 from Beta 2 or any older version of Bootstrap.
 
 - Removed the unused `$thumbnail-transition` variable. We weren't transitioning anything, so it was just extra code.
+- Changed the CSS for managing multiple `background-image`s on custom form checkboxes and radios. Previously, the `.custom-control-indicator` element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have `.custom-control-indicator` for the fill and gradient and `.custom-control-indicator::before` handles the icon.
+- The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the `node_modules` folder, you should adapt your workflow.
 - Updated selector for input-based button groups. Instead of `[data-toggle="buttons"] { }` for style and behavior, we use the `data` attribute just for JS behaviors and rely on a new `.btn-group-toggle` class for styling.
 
 ## Beta 2 changes

package.json

@@ -126,15 +126,9 @@
     "node": ">=6"
   },
   "files": [
-    ".babelrc",
-    ".eslintignore",
-    "Gemfile",
-    "dist",
-    "build",
-    "js/.eslintrc.json",
-    "js/**/*.js",
-    "js/**/*.js.map",
-    "scss/**/*.scss"
+    "dist/",
+    "js/{src,dist}/",
+    "scss/"
   ],
   "browserslist": [
     "Chrome >= 45",
@@ -205,7 +199,7 @@
     },
     "dependencies": {},
     "peerDependencies": {
-      "jquery": "^3.0.0",
+      "jquery": "1.9.1 - 3",
       "popper.js": "^1.12.9"
     }
   }

scss/_custom-forms.scss

@@ -33,7 +33,7 @@
 
   &:active ~ .custom-control-indicator {
     color: $custom-control-indicator-active-color;
-    @include gradient-bg($custom-control-indicator-active-bg);
+    background-color: $custom-control-indicator-active-bg;
     @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
@@ -62,10 +62,17 @@
   pointer-events: none;
   user-select: none;
   background-color: $custom-control-indicator-bg;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: $custom-control-indicator-bg-size;
   @include box-shadow($custom-control-indicator-box-shadow);
+
+  &::before {
+    display: block;
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    content: "";
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: $custom-control-indicator-bg-size;
+  }
 }
 
 // Checkboxes
@@ -78,13 +85,20 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-checkbox-indicator-icon-checked;
+    @include gradient-bg($custom-control-indicator-checked-bg);
+
+    &::before {
+      background-image: $custom-checkbox-indicator-icon-checked;
+    }
   }
 
   .custom-control-input:indeterminate ~ .custom-control-indicator {
-    background-color: $custom-checkbox-indicator-indeterminate-bg;
-    background-image: $custom-checkbox-indicator-icon-indeterminate;
+    @include gradient-bg($custom-control-indicator-checked-bg);
     @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
+
+    &::before {
+      background-image: $custom-checkbox-indicator-icon-indeterminate;
+    }
   }
 }
 
@@ -98,7 +112,11 @@
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-radio-indicator-icon-checked;
+    @include gradient-bg($custom-control-indicator-checked-bg);
+
+    &::before {
+      background-image: $custom-radio-indicator-icon-checked;
+    }
   }
 }
 
@@ -149,7 +167,7 @@
   &:focus {
     border-color: $custom-select-focus-border-color;
     outline: 0;
-    @include box-shadow($custom-select-focus-box-shadow);
+    box-shadow: $custom-select-focus-box-shadow;
 
     &::-ms-value {
       // For visual consistency with other platforms/browsers,
@@ -162,8 +180,10 @@
     }
   }
 
-  &[multiple] {
+  &[multiple],
+  &[size]:not([size="1"]) {
     height: auto;
+    padding-right: $custom-select-padding-x;
     background-image: none;
   }
 
@@ -185,6 +205,13 @@
   font-size: $custom-select-font-size-sm;
 }
 
+.custom-select-lg {
+  height: $custom-select-height-lg;
+  padding-top: $custom-select-padding-y;
+  padding-bottom: $custom-select-padding-y;
+  font-size: $custom-select-font-size-lg;
+}
+
 
 // File
 //
@@ -206,7 +233,12 @@
   opacity: 0;
 
   &:focus ~ .custom-file-control {
+    border-color: $custom-file-focus-border-color;
     box-shadow: $custom-file-focus-box-shadow;
+
+    &::before {
+      border-color: $custom-file-focus-border-color;
+    }
   }
 }
 

scss/_modal.scss

@@ -53,9 +53,7 @@
 .modal-dialog-centered {
   display: flex;
   align-items: center;
-  height: 100%;
-  margin-top: 0;
-  margin-bottom: 0;
+  min-height: calc(100% - (#{$modal-dialog-margin} * 2));
 }
 
 // Actual modal
@@ -154,8 +152,7 @@
   }
 
   .modal-dialog-centered {
-    margin-top: 0;
-    margin-bottom: 0;
+    min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
   }
 
   .modal-content {

scss/_variables.scss

@@ -483,15 +483,19 @@ $custom-select-border-width:        $input-btn-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
 
-$custom-select-focus-border-color:  lighten(theme-color("primary"), 25%) !default;
-$custom-select-focus-box-shadow:    inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
+$custom-select-focus-border-color:  $input-focus-border-color !default;
+$custom-select-focus-box-shadow:    inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default;
 
 $custom-select-font-size-sm:        75% !default;
 $custom-select-height-sm:           $input-height-sm !default;
 
+$custom-select-font-size-lg:        125% !default;
+$custom-select-height-lg:           $input-height-lg !default;
+
 $custom-file-height:                $input-height !default;
 $custom-file-width:                 14rem !default;
-$custom-file-focus-box-shadow:      0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
+$custom-file-focus-border-color:    $input-focus-border-color !default;
+$custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;
 
 $custom-file-padding-y:             $input-btn-padding-y !default;
 $custom-file-padding-x:             $input-btn-padding-x !default;

scss/mixins/_buttons.scss

@@ -51,16 +51,16 @@
   }
 }
 
-@mixin button-outline-variant($color, $color-hover: #fff) {
+@mixin button-outline-variant($color, $color-hover: #fff, $active-background: $color, $active-border: $color) {
   color: $color;
   background-color: transparent;
   background-image: none;
   border-color: $color;
 
-  @include hover {
-    color: $color-hover;
-    background-color: $color;
-    border-color: $color;
+  &:hover {
+    color: color-yiq($color);
+    background-color: $active-background;
+    border-color: $active-border;
   }
 
   &:focus,
@@ -77,9 +77,9 @@
   &:not([disabled]):not(.disabled):active,
   &:not([disabled]):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: $color-hover;
-    background-color: $color;
-    border-color: $color;
+    color: color-yiq($color-hover);
+    background-color: $active-background;
+    border-color: $active-border;
     // Avoid using mixin so we can pass custom focus shadow properly
     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
   }

scss/mixins/_forms.scss

@@ -84,11 +84,16 @@
     .was-validated &:#{$state},
     &.is-#{$state} {
       ~ .custom-control-indicator {
-        background-color: rgba($color, .4);
+        background-color: lighten($color, 25%);
       }
       ~ .custom-control-description {
         color: $color;
       }
+      &:checked {
+        ~ .custom-control-indicator {
+          @include gradient-bg(lighten($color, 10%));
+        }
+      }
       &:focus {
         ~ .custom-control-indicator {
           box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);