Merge branch 'v4-dev' into form-tweaks

README.md

@@ -87,7 +87,7 @@ Documentation search is powered by [Algolia's DocSearch](https://community.algol
 
 ### Running documentation locally
 
-1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
+1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
 2. Run `npm run test` (or a specific NPM script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
 3. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
 4. Open <http://localhost:9001> in your browser, and voilà.

_includes/scripts.html

@@ -31,7 +31,7 @@
     inputSelector: '#search-input',
     transformData: function (hits) {
       return hits.map(function (hit) {
-        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', 'http://localhost:9001/docs/4.0');
+        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
         return hit;
       });
     },

assets/scss/_nav.scss

@@ -33,7 +33,7 @@
     position: -webkit-sticky;
     position: sticky;
     top: 0;
-    z-index: 1030; // over everything in bootstrap
+    z-index: 1071; // over everything in bootstrap
   }
 
   .navbar-nav {

js/tests/visual/alert.html

@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/alert.js"></script>
   </body>

js/tests/visual/button.html

@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/button.js"></script>
   </body>

js/tests/visual/carousel.html

@@ -40,7 +40,7 @@
       </div>
     </div>
 
-    <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/carousel.js"></script>
 

js/tests/visual/dropdown.html

@@ -117,8 +117,8 @@
         </div>
       </div>
 
-    <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
-    <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/popper.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/dropdown.js"></script>
     <script src="../../dist/collapse.js"></script>

js/tests/visual/modal.html

@@ -169,8 +169,8 @@
       </div>
     </div>
 
-    <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
-    <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/popper.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/modal.js"></script>
     <script src="../../dist/collapse.js"></script>

js/tests/visual/popover.html

@@ -32,8 +32,8 @@
       </button>
     </div>
 
-    <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
-    <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/popper.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tooltip.js"></script>
     <script src="../../dist/popover.js"></script>

js/tests/visual/scrollspy.html

@@ -86,8 +86,8 @@
       <p>Ad leggings keytar, brunch id art party dolor labore.</p>
     </div>
 
-    <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
-    <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/popper.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/scrollspy.js"></script>
     <script src="../../dist/dropdown.js"></script>

js/tests/visual/tab.html

@@ -224,7 +224,8 @@
         </div>
       </div>
     </div>
-    <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/popper.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tab.js"></script>
     <script src="../../dist/dropdown.js"></script>

js/tests/visual/tooltip.html

@@ -53,8 +53,8 @@
       <div id="target" title="Test tooltip on transformed element"></div>
     </div>
 
-    <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
-    <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
+    <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
+    <script src="../../../assets/js/vendor/popper.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tooltip.js"></script>
 

scss/_button-group.scss

@@ -12,7 +12,7 @@
     flex: 0 1 auto;
     margin-bottom: 0;
 
-    // Bring the hover, focused, and "active" buttons to the fron to overlay
+    // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
     @include hover {
       z-index: 2;

scss/_card.scss

@@ -6,6 +6,8 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
   background-color: $card-bg;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
@@ -20,7 +22,6 @@
 
 .card-title {
   margin-bottom: $card-spacer-y;
-  word-break: break-all;
 }
 
 .card-subtitle {
@@ -68,7 +69,7 @@
   border-bottom: $card-border-width solid $card-border-color;
 
   &:first-child {
-    @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
   }
 }
 
@@ -78,7 +79,7 @@
   border-top: $card-border-width solid $card-border-color;
 
   &:last-child {
-    @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
+    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
   }
 }
 
@@ -170,18 +171,18 @@
 
 .card-img {
   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-  @include border-radius($card-border-radius-inner);
+  @include border-radius($card-inner-border-radius);
 }
 
 // Card image caps
 .card-img-top {
   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-  @include border-top-radius($card-border-radius-inner);
+  @include border-top-radius($card-inner-border-radius);
 }
 
 .card-img-bottom {
   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-  @include border-bottom-radius($card-border-radius-inner);
+  @include border-bottom-radius($card-inner-border-radius);
 }
 
 

scss/_custom-forms.scss

@@ -23,29 +23,29 @@
   opacity: 0;
 
   &:checked ~ .custom-control-indicator {
-    color: $custom-control-checked-indicator-color;
-    background-color: $custom-control-checked-indicator-bg;
-    @include box-shadow($custom-control-checked-indicator-box-shadow);
+    color: $custom-control-indicator-checked-color;
+    background-color: $custom-control-indicator-checked-bg;
+    @include box-shadow($custom-control-indicator-checked-box-shadow);
   }
 
   &:focus ~ .custom-control-indicator {
     // the mixin is not used here to make sure there is feedback
-    box-shadow: $custom-control-focus-indicator-box-shadow;
+    box-shadow: $custom-control-indicator-focus-box-shadow;
   }
 
   &:active ~ .custom-control-indicator {
-    color: $custom-control-active-indicator-color;
-    background-color: $custom-control-active-indicator-bg;
-    @include box-shadow($custom-control-active-indicator-box-shadow);
+    color: $custom-control-indicator-active-color;
+    background-color: $custom-control-indicator-active-bg;
+    @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
   &:disabled {
     ~ .custom-control-indicator {
-      background-color: $custom-control-disabled-indicator-bg;
+      background-color: $custom-control-indicator-disabled-bg;
     }
 
     ~ .custom-control-description {
-      color: $custom-control-disabled-description-color;
+      color: $custom-control-description-disabled-color;
     }
   }
 }
@@ -76,16 +76,16 @@
 
 .custom-checkbox {
   .custom-control-indicator {
-    @include border-radius($custom-checkbox-radius);
+    @include border-radius($custom-checkbox-border-radius);
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-checkbox-checked-icon;
+    background-image: $custom-checkbox-icon-checked;
   }
 
   .custom-control-input:indeterminate ~ .custom-control-indicator {
     background-color: $custom-checkbox-indeterminate-bg;
-    background-image: $custom-checkbox-indeterminate-icon;
+    background-image: $custom-checkbox-icon-indeterminate;
     @include box-shadow($custom-checkbox-indeterminate-box-shadow);
   }
 }
@@ -96,11 +96,11 @@
 
 .custom-radio {
   .custom-control-indicator {
-    border-radius: $custom-radio-radius;
+    border-radius: $custom-radio-border-radius;
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-radio-checked-icon;
+    background-image: $custom-radio-icon-checked;
   }
 }
 

scss/_forms.scss

@@ -42,7 +42,7 @@
 
   // Placeholder
   &::placeholder {
-    color: $input-color-placeholder;
+    color: $input-placeholder-color;
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
@@ -54,7 +54,7 @@
   // don't honor that edge case; we style them as disabled anyway.
   &:disabled,
   &[readonly] {
-    background-color: $input-bg-disabled;
+    background-color: $input-disabled-bg;
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
   }

scss/_modal.scss

@@ -54,7 +54,7 @@
   background-clip: padding-box;
   border: $modal-content-border-width solid $modal-content-border-color;
   @include border-radius($border-radius-lg);
-  @include box-shadow($modal-content-xs-box-shadow);
+  @include box-shadow($modal-content-box-shadow-xs);
   // Remove focus outline from opened modal
   outline: 0;
 }
@@ -127,11 +127,11 @@
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     max-width: $modal-md;
-    margin: $modal-dialog-sm-up-margin-y auto;
+    margin: $modal-dialog-margin-y-sm-up auto;
   }
 
   .modal-content {
-    @include box-shadow($modal-content-sm-up-box-shadow);
+    @include box-shadow($modal-content-box-shadow-sm-up);
   }
 
   .modal-sm { max-width: $modal-sm; }

scss/_nav.scss

@@ -21,7 +21,7 @@
 
   // Disabled state lightens text
   &.disabled {
-    color: $nav-disabled-link-color;
+    color: $nav-link-disabled-color;
   }
 }
 
@@ -45,7 +45,7 @@
     }
 
     &.disabled {
-      color: $nav-disabled-link-color;
+      color: $nav-link-disabled-color;
       background-color: transparent;
       border-color: transparent;
     }
@@ -53,9 +53,9 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    color: $nav-tabs-active-link-color;
-    background-color: $nav-tabs-active-link-bg;
-    border-color: $nav-tabs-active-link-border-color $nav-tabs-active-link-border-color $nav-tabs-active-link-bg;
+    color: $nav-tabs-link-active-color;
+    background-color: $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
   }
 
   .dropdown-menu {
@@ -77,8 +77,8 @@
 
     &.active,
     .show & {
-      color: $nav-pills-active-link-color;
-      background-color: $nav-pills-active-link-bg;
+      color: $nav-pills-link-active-color;
+      background-color: $nav-pills-link-active-bg;
     }
   }
 }

scss/_tables.scss

@@ -37,7 +37,7 @@
 .table-sm {
   th,
   td {
-    padding: $table-sm-cell-padding;
+    padding: $table-cell-padding-sm;
   }
 }
 
@@ -69,7 +69,7 @@
 
 .table-striped {
   tbody tr:nth-of-type(odd) {
-    background-color: $table-bg-accent;
+    background-color: $table-accent-bg;
   }
 }
 
@@ -81,7 +81,7 @@
 .table-hover {
   tbody tr {
     @include hover {
-      background-color: $table-bg-hover;
+      background-color: $table-hover-bg;
     }
   }
 }
@@ -93,7 +93,7 @@
 // inheritance to nested tables.
 
 // Generate the contextual variants
-@include table-row-variant(active, $table-bg-active);
+@include table-row-variant(active, $table-active-bg);
 @include table-row-variant(success, $state-success-bg);
 @include table-row-variant(info, $state-info-bg);
 @include table-row-variant(warning, $state-warning-bg);
@@ -134,14 +134,14 @@
 
   &.table-striped {
     tbody tr:nth-of-type(odd) {
-      background-color: $table-inverse-bg-accent;
+      background-color: $table-inverse-accent-bg;
     }
   }
 
   &.table-hover {
     tbody tr {
       @include hover {
-        background-color: $table-inverse-bg-hover;
+        background-color: $table-inverse-hover-bg;
       }
     }
   }

scss/_type.scss

@@ -11,12 +11,12 @@ h1, h2, h3, h4, h5, h6,
   color: $headings-color;
 }
 
-h1, .h1 { font-size: $font-size-h1; }
-h2, .h2 { font-size: $font-size-h2; }
-h3, .h3 { font-size: $font-size-h3; }
-h4, .h4 { font-size: $font-size-h4; }
-h5, .h5 { font-size: $font-size-h5; }
-h6, .h6 { font-size: $font-size-h6; }
+h1, .h1 { font-size: $h1-font-size; }
+h2, .h2 { font-size: $h2-font-size; }
+h3, .h3 { font-size: $h3-font-size; }
+h4, .h4 { font-size: $h4-font-size; }
+h5, .h5 { font-size: $h5-font-size; }
+h6, .h6 { font-size: $h6-font-size; }
 
 .lead {
   font-size: $lead-font-size;