Docs offcanvas navbar (#34487)

* Redesign docs navbar to use offcanvas, tweak overall padding while I'm here

* Match code snippets to new gutter width

* Replace value with docs-specific variable

Opted not to do a CSS variable here since on .bd-content it would be inherited into our examples

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

1 files changed, 4 insertions, 4 deletions

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f93f1ee989..208654ae03 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -85,7 +85,7 @@
 .bd-example {
   position: relative;
   padding: 1rem;
-  margin: 1rem (-$grid-gutter-width * .5) 0;
+  margin: 1rem ($bd-gutter-x * -1) 0;
   border: solid $gray-300;
   border-width: 1px 0 0;
   @include clearfix();
@@ -313,7 +313,7 @@
 //
 
 .highlight {
-  padding: 1rem;
+  padding: var(--bs-gutter-x) $bd-gutter-x;
   margin-bottom: 1rem;
   background-color: $gray-100;
 
@@ -338,8 +338,8 @@
 }
 
 .bd-content .highlight {
-  margin-right: (-$grid-gutter-width * .5);
-  margin-left: (-$grid-gutter-width * .5);
+  margin-right: $bd-gutter-x * -1;
+  margin-left: $bd-gutter-x * -1;
 
   @include media-breakpoint-up(sm) {
     margin-right: 0;