Fix review + re align home highlight

twbs · Jul 25, 2023 · 625ca18 · 625ca18
1 parent ca40cc0
commit 625ca18
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
@@ -23,16 +23,36 @@
   .bd-code-snippet {
     --bs-border-radius: .5rem;
 
+    position: relative;
     margin: 0;
     border-width: 1px;
   }
 
+  .highlight-toolbar {
+    padding: 0 !important; // stylelint-disable-line declaration-no-important
+
+    > :first-child {
+      display: none;
+    }
+
+    > :last-child {
+      position: absolute;
+      top: 50%;
+      right: .75rem;
+      z-index: 1;
+      transform: translateY(-50%);
+    }
+  }
+
   .highlight {
     width: 100%;
     padding: .5rem 1rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    background-color: rgba(var(--bs-body-color-rgb), .075);
+    border: 0;
+    @include border-radius(subtract(var(--bs-border-radius), 1px));
 
     @include media-breakpoint-up(lg) {
       padding-right: 4rem;

diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
@@ -362,7 +362,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled
     </div>
   </div>
 </div>
-  {{< /example >}}
+{{< /example >}}
 
 ### Using data attributes
 

diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
@@ -109,7 +109,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
 <nav class="navbar bg-body-tertiary">
   <div class="container">
     <a class="navbar-brand" href="#">
-      <img src="https://getbootstrap.com/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
     </a>
   </div>
 </nav>
@@ -123,7 +123,7 @@ You can also make use of some additional utilities to add an image and text at t
 <nav class="navbar bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">
-      <img src="https://getbootstrap.com/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
       Bootstrap
     </a>
   </div>

diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
@@ -26,7 +26,7 @@
   // Open in StackBlitz logic
   document.querySelectorAll('.btn-edit').forEach(btn => {
     btn.addEventListener('click', event => {
-      const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
+      const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML.replace(/"\/docs\//g, '"https://getbootstrap.com/docs/')
 
       // Get extra classes for this example
       const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
-Original file line number
+Diff line change
@@ Expand Up @@
         </div>
       </div>
     </div>
-      {{< /example >}}
+    {{< /example >}}
     ### Using data attributes
@@ Expand Down @@