Add new docsref page, fix docs border-radius issues (#38491)

* Add new docsref page, fix docs border-radius issues

* Remove commented out code

* Update docsref.md

* Fix no-code example, fix mobile styles

* Updates from review

* Fix block margin, remove margin-right from pre on mobile since no clipboard icons, adjust masthead snippet

* Fix errant styles for border-radius on homepage

---------

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

site/assets/js/application.js

@@ -14,9 +14,10 @@
 
   // Scroll the active sidebar link into view
   const sidenav = document.querySelector('.bd-sidebar')
-  if (sidenav) {
+  const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
+
+  if (sidenav && sidenavActiveLink) {
     const sidenavHeight = sidenav.clientHeight
-    const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
     const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
     const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
     const viewportTop = sidenavActiveLinkTop

site/assets/scss/_component-examples.scss

@@ -2,12 +2,16 @@
 // Docs examples
 //
 
-.bd-example-snippet {
+.bd-code-snippet {
+  margin: 0 ($bd-gutter-x * -.5) 1rem;
   border: solid var(--bs-border-color);
   border-width: 1px 0;
 
   @include media-breakpoint-up(md) {
+    margin-right: 0;
+    margin-left: 0;
     border-width: 1px;
+    @include border-radius(var(--bs-border-radius));
   }
 }
 
@@ -16,7 +20,7 @@
 
   position: relative;
   padding: var(--bd-example-padding);
-  margin: 0 ($bd-gutter-x * -.5);
+  margin: 0 ($bd-gutter-x * -.5) 1rem;
   border: solid var(--bs-border-color);
   border-width: 1px 0;
   @include clearfix();
@@ -27,13 +31,7 @@
     margin-right: 0;
     margin-left: 0;
     border-width: 1px;
-    @include border-top-radius(var(--bs-border-radius));
-  }
-
-  + .bd-code-snippet {
-    @include border-top-radius(0);
-    border: solid var(--bs-border-color);
-    border-width: 0 1px 1px;
+    @include border-radius(var(--bs-border-radius));
   }
 
   + p {
@@ -350,18 +348,22 @@
 .highlight {
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
-  margin-bottom: 1rem;
   background-color: var(--bd-pre-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
-    @include border-radius(var(--bs-border-radius));
+    @include border-radius(calc(var(--bs-border-radius) - 1px));
+  }
+
+  @include media-breakpoint-up(lg) {
+    pre {
+      margin-right: 1.875rem;
+    }
   }
 
   pre {
     padding: .25rem 0 .875rem;
     margin-top: .8125rem;
-    margin-right: 1.875rem;
     margin-bottom: 0;
     overflow: overlay;
     white-space: pre;
@@ -376,32 +378,22 @@
   }
 }
 
-.bd-code-snippet {
-  margin: 0 ($bd-gutter-x * -.5) $spacer;
-
-  .highlight {
-    margin-bottom: 0;
-    @include border-top-radius(0);
-  }
-
-  .bd-example {
-    margin: 0;
-    border: 0;
-  }
-
-  @include media-breakpoint-up(md) {
-    margin-right: 0;
-    margin-left: 0;
-    @include border-radius($border-radius);
-  }
-}
-
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
-}
 
-.bd-scss-docs {
-  .highlight-toolbar {
-    @include border-top-radius(calc(var(--bs-border-radius) + 1px));
+  + .highlight {
+    @include border-top-radius(0);
   }
 }
+
+.bd-file-ref {
+  .highlight-toolbar {
+    @include media-breakpoint-up(md) {
+      @include border-top-radius(calc(var(--bs-border-radius) - 1px));
+    }
+  }
+}
+
+.bd-content .bd-code-snippet {
+  margin-bottom: 1rem;
+}

site/assets/scss/_masthead.scss

@@ -22,6 +22,8 @@
 
   .bd-code-snippet {
     margin: 0;
+    border-color: var(--bs-border-color-translucent);
+    border-width: 1px;
     @include border-radius(.5rem);
   }
 
@@ -32,7 +34,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     background-color: rgba(var(--bs-body-color-rgb), .075);
-    @include border-radius(.5rem);
+    @include border-radius(calc(.5rem - 1px));
 
     @include media-breakpoint-up(lg) {
       padding-right: 4rem;
@@ -41,7 +43,6 @@
     pre {
       padding: 0;
       margin-top: .625rem;
-      margin-right: 1.875rem;
       margin-bottom: .625rem;
       overflow: hidden;
     }
@@ -75,10 +76,6 @@
     @include font-size(1rem);
   }
 
-  .highlight {
-    @include border-radius(.5rem);
-  }
-
   @include media-breakpoint-up(md) {
     .lead {
       @include font-size(1.25rem);