Merge branch 'v4-dev' into v4-docs-streamlined

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
@@ -324,7 +341,7 @@
 
 .highlight {
   padding: 1rem;
-  margin: 1rem (-$grid-gutter-width / 2);
+  margin: 1rem (-$grid-gutter-width-base / 2);
   background-color: #f7f7f9;
 
   @include media-breakpoint-up(sm) {

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/_featurettes.scss

@@ -26,10 +26,10 @@
 
   @include media-breakpoint-up(md) {
     .col-sm-6:first-child {
-      padding-right: ($grid-gutter-width * 1.5);
+      padding-right: ($grid-gutter-width-base * 1.5);
     };
     .col-sm-6:last-child {
-      padding-left: ($grid-gutter-width * 1.5);
+      padding-left: ($grid-gutter-width-base * 1.5);
     }
   }
 }

docs/assets/scss/_masthead.scss

@@ -2,7 +2,7 @@
 
 .bd-masthead {
   position: relative;
-  padding: 3rem ($grid-gutter-width / 2) 2rem;
+  padding: 3rem ($grid-gutter-width-base / 2) 2rem;
   color: $bd-purple-light;
   text-align: center;
   background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));

docs/assets/scss/_nav.scss

@@ -3,8 +3,8 @@
 //
 
 .bd-navbar {
-  padding-right: 0;
-  padding-left: 0;
+  // padding-right: 0;
+  // padding-left: 0;
   margin-bottom: 2rem;
   border-bottom: 1px solid rgba(0,0,0,.1);
   box-shadow: 0 6px 12px rgba(0,0,0,.05);
@@ -30,14 +30,4 @@
   .dropdown-menu {
     font-size: inherit;
   }
-
-  @include media-breakpoint-down(sm) {
-    .nav-link {
-      float: none;
-
-      + .nav-link {
-        margin-left: 0;
-      }
-    }
-  }
 }

docs/assets/scss/_page-header.scss

@@ -1,7 +1,7 @@
 // scss-lint:disable ImportantRule
 
 .bd-pageheader {
-  padding: 2rem ($grid-gutter-width / 2);
+  padding: 2rem ($grid-gutter-width-base / 2);
   margin-bottom: 1.5rem;
   color: $bd-purple-light;
   text-align: center;

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/_syntax.scss

@@ -61,3 +61,6 @@
 .css .o,
 .css .o + .nt,
 .css .nt + .nt { color: #999; }
+
+.language-bash::before { color: #009; content: "$ "; user-select: none; }
+.language-powershell::before { color: #009; content: "PM> "; user-select: none; }

docs/assets/scss/docs.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Docs (http://getbootstrap.com)
+ * Bootstrap Docs (https://getbootstrap.com)
  * Copyright 2011-2016 The Bootstrap Authors
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under the Creative Commons Attribution 3.0 Unported License. For

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";