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

docs/assets/js/src/application.js

@@ -33,7 +33,7 @@
     $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
 
     // Disable empty links in docs examples
-    $('.bd-example [href="#"]').click(function (e) {
+    $('.bd-content [href="#"]').click(function (e) {
       e.preventDefault()
     })
 
@@ -73,7 +73,8 @@
     })
 
     clipboard.on('error', function (e) {
-      var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
+      var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
+      var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
 
       $(e.trigger)
         .attr('title', fallbackMsg)

docs/assets/scss/_component-examples.scss

@@ -19,9 +19,9 @@
     }
   }
 
-  .flex-items-xs-top,
-  .flex-items-xs-middle,
-  .flex-items-xs-bottom {
+  .flex-items-top,
+  .flex-items-middle,
+  .flex-items-bottom {
     min-height: 6rem;
     background-color: rgba(255,0,0,.1);
   }
@@ -32,6 +32,11 @@
   background-color: rgba(255,0,0,.1);
 }
 
+.bd-highlight {
+  background-color: rgba($bd-purple, .15);
+  border: 1px solid rgba($bd-purple, .15);
+}
+
 
 //
 // Container illustrations
@@ -100,9 +105,13 @@
     margin-top: 2rem;
   }
 
-  // Undo width of container
-  .container {
-    width: auto;
+  .pos-f-t {
+    position: relative;
+    margin: -1rem;
+
+    @include media-breakpoint-up(sm) {
+      margin: -1.5rem;
+    }
   }
 
   > .form-control {
@@ -111,11 +120,6 @@
     }
   }
 
-  // Card examples should be horizontal
-  > .card {
-    max-width: 20rem;
-  }
-
   > .nav + .nav,
   > .alert + .alert,
   > .navbar + .navbar,
@@ -226,21 +230,23 @@
 
 // Example modals
 .bd-example-modal {
-  background-color: #f5f5f5;
-}
-.bd-example-modal .modal {
-  position: relative;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
-  z-index: 1;
-  display: block;
-}
-.bd-example-modal .modal-dialog {
-  left: auto;
-  margin-right: auto;
-  margin-left: auto;
+  background-color: #fafafa;
+
+  .modal {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    z-index: 1;
+    display: block;
+  }
+
+  .modal-dialog {
+    left: auto;
+    margin-right: auto;
+    margin-left: auto;
+  }
 }
 
 // Example dropdowns
@@ -308,7 +314,8 @@
   .bg-info,
   .bg-warning,
   .bg-danger,
-  .bg-inverse {
+  .bg-inverse,
+  .bg-faded {
     &:not(.navbar) {
       padding: .5rem;
       margin-top: .5rem;
@@ -317,6 +324,16 @@
   }
 }
 
+.bd-example-border-utils {
+  [class^="border-"] {
+    display: inline-block;
+    width: 6rem;
+    height: 6rem;
+    margin: .25rem;
+    background-color: #f5f5f5;
+    border: 1px solid;
+  }
+}
 
 //
 // Code snippets

docs/assets/scss/_featured-sites.scss

@@ -2,7 +2,7 @@
   margin-right: -1px;
   margin-left: -1px;
 }
-.bd-featured-sites .col-xs-6 {
+.bd-featured-sites .col-6 {
   padding: 1px;
 }
 .bd-featured-sites .img-fluid {

docs/assets/scss/_nav.scss

@@ -1,11 +1,22 @@
+// scss-lint:disable VendorPrefix
+
 //
 // Main navbar
 //
 
 .bd-navbar {
-  padding-right: 0;
-  padding-left: 0;
-  margin-bottom: 2rem;
+  // @include media-breakpoint-up(md) {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1030; // over everything in bootstrap
+    // max-height: calc(100vh - 4rem);
+    // overflow-y: auto;
+  // }
+  // padding-right: 0;
+  // padding-left: 0;
+  // margin-bottom: 2rem;
+  background-color: #fff;
   border-bottom: 1px solid rgba(0,0,0,.1);
   box-shadow: 0 6px 12px rgba(0,0,0,.05);
 
@@ -28,16 +39,10 @@
   }
 
   .dropdown-menu {
-    font-size: inherit;
+    font-size: .875rem;
   }
 
-  @include media-breakpoint-down(sm) {
-    .nav-link {
-      float: none;
-
-      + .nav-link {
-        margin-left: 0;
-      }
-    }
+  .navbar-brand {
+    color: $bd-purple;
   }
 }

docs/assets/scss/_responsive-tests.scss

@@ -35,7 +35,7 @@
 .responsive-utilities-test {
   margin-top: .25rem;
 }
-.responsive-utilities-test .col-xs-6 {
+.responsive-utilities-test .col-6 {
   margin-top: .5rem;
   margin-bottom: .5rem;
 }
@@ -50,7 +50,7 @@
 }
 .visible-on,
 .hidden-on {
-  .col-xs-6 {
+  .col-6 {
     > .not-visible {
       color: #999;
       border: 1px solid #ddd;
@@ -59,7 +59,7 @@
 }
 .visible-on,
 .hidden-on {
-  .col-xs-6 {
+  .col-6 {
     .visible {
       color: #468847;
       background-color: #dff0d8;

docs/assets/scss/_sidebar.scss

@@ -1,11 +1,14 @@
+// scss-lint:disable VendorPrefix
+
 //
 // Side navigation
 //
 
 .bd-sidebar {
   @include media-breakpoint-up(md) {
+    position: -webkit-sticky;
     position: sticky;
-    top: 2rem;
+    top: 5rem;
     max-height: calc(100vh - 4rem);
     overflow-y: auto;
   }

docs/assets/scss/flex-grid.scss

@@ -1,33 +0,0 @@
-// Bootstrap flexbox grid for our docs page
-
-
-//
-// Variables
-//
-
-@import "custom";
-@import "variables";
-
-// Override for flexbox mode
-$enable-flex: true;
-
-//
-// Grid mixins
-//
-
-@import "mixins/clearfix";
-@import "mixins/breakpoints";
-@import "mixins/grid-framework";
-@import "mixins/grid";
-
-//
-// Utilities for flex alignment
-//
-
-@import "utilities/flex";
-
-//
-// Generate the grid class
-//
-
-@import "grid";