Merge branch 'main' into global-focus-varsglobal-focus-vars

5 files changed, 58 insertions, 9 deletions

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index b997689ed..f93f1ee98 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -23,6 +23,21 @@
   background-color: rgba(255, 0, 0, .1);
 }
 
+.bd-example-cssgrid {
+  text-align: center;
+
+  .grid + .grid {
+    margin-top: 1rem;
+  }
+
+  .grid > * {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    background-color: rgba(255, 0, 255, .1);
+    border: 1px solid rgba(255, 0, 255, .25);
+  }
+}
+
 .bd-highlight {
   background-color: rgba($bd-purple, .15);
   border: 1px solid rgba($bd-purple, .15);
@@ -70,7 +85,7 @@
 .bd-example {
   position: relative;
   padding: 1rem;
-  margin: 1rem (-$grid-gutter-width / 2) 0;
+  margin: 1rem (-$grid-gutter-width * .5) 0;
   border: solid $gray-300;
   border-width: 1px 0 0;
   @include clearfix();
@@ -201,6 +216,18 @@
   }
 }
 
+.bd-example-offcanvas {
+  @include border-start-radius(0);
+
+  .offcanvas {
+    position: static;
+    display: block;
+    height: 200px;
+    visibility: visible;
+    transform: translate(0);
+  }
+}
+
 // Tooltips
 .tooltip-demo a {
   white-space: nowrap;
@@ -265,6 +292,17 @@
   }
 }
 
+// Placeholders
+.bd-example-placeholder-cards {
+  &::after {
+    display: none;
+  }
+
+  .card {
+    width: 18rem;
+  }
+}
+
 // Toasts
 .bd-example-toasts {
   min-height: 240px;
@@ -300,8 +338,8 @@
 }
 
 .bd-content .highlight {
-  margin-right: (-$grid-gutter-width / 2);
-  margin-left: (-$grid-gutter-width / 2);
+  margin-right: (-$grid-gutter-width * .5);
+  margin-left: (-$grid-gutter-width * .5);
 
   @include media-breakpoint-up(sm) {
     margin-right: 0;
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index e55a7aa63..f2b5cfc54 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -21,6 +21,13 @@
   > ul li,
   > ol li {
     margin-bottom: .25rem;
+
+    // stylelint-disable selector-max-type, selector-max-compound-selectors
+    > p ~ ul {
+      margin-top: -.5rem;
+      margin-bottom: 1rem;
+    }
+    // stylelint-enable selector-max-type, selector-max-compound-selectors
   }
 
   // Override Bootstrap defaults
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
index 48ad349de..87cee6d2b 100644
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -3,16 +3,14 @@
 //
 
 .bd-footer {
-  @include font-size(.875rem);
-  color: #63707c;
-
   a {
-    font-weight: 600;
     color: $gray-700;
+    text-decoration: none;
 
     &:hover,
     &:focus {
       color: $link-color;
+      text-decoration: underline;
     }
   }
 }
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 4a9b08b36..053cadf2e 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -9,8 +9,8 @@
 
   .navbar-nav {
     .nav-link {
-      padding-right: $spacer / 4;
-      padding-left: $spacer / 4;
+      padding-right: $spacer * .25;
+      padding-left: $spacer * .25;
       color: rgba($white, .85);
 
       &:hover,
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index e3066ed2e..8b7bc99a1 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -28,6 +28,12 @@
 @import "../../../scss/variables";
 @import "../../../scss/mixins";
 
+// fusv-disable
+$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
+$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
+// fusv-enable
+@import "../../../scss/grid";
+
 // Load docs components
 @import "variables";
 @import "navbar";