1 files changed, 91 insertions, 51 deletions

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f4865da..0f1018b 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -2,12 +2,16 @@
 // Docs examples
 //
 
-.bd-example-snippet {
-  border: solid $border-color;
+.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,8 +20,8 @@
 
   position: relative;
   padding: var(--bd-example-padding);
-  margin: 0 ($bd-gutter-x * -.5);
-  border: solid $border-color;
+  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 $border-color;
-    border-width: 0 1px 1px;
+    @include border-radius(var(--bs-border-radius));
   }
 
   + p {
@@ -58,7 +56,8 @@
     display: block;
   }
 
-  > :last-child {
+  > :last-child,
+  > nav:last-child .breadcrumb {
     margin-bottom: 0;
   }
 
@@ -115,11 +114,12 @@
 //
 
 .bd-example-row [class^="col"],
-.bd-example-cssgrid .grid > * {
+.bd-example-cols [class^="col"] > *,
+.bd-example-cssgrid [class*="grid"] > * {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  background-color: rgba(var(--bd-violet-rgb), .1);
-  border: 1px solid rgba(var(--bd-violet-rgb), .25);
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }
 
 .bd-example-row .row + .row,
@@ -129,12 +129,12 @@
 
 .bd-example-row-flex-cols .row {
   min-height: 10rem;
-  background-color: rgba(255, 0, 0, .1);
+  background-color: rgba(var(--bd-violet-rgb), .15);
 }
 
-.bd-example-flex div {
-  background-color: rgba($bd-purple, .15);
-  border: 1px solid rgba($bd-purple, .15);
+.bd-example-flex div:not(.vr) {
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }
 
 // Grid mixins
@@ -176,9 +176,9 @@
   .ratio {
     display: inline-block;
     width: 10rem;
-    color: $gray-600;
-    background-color: $gray-100;
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color);
 
     > div {
       display: flex;
@@ -208,8 +208,14 @@
 }
 
 // Tooltips
-.tooltip-demo a {
-  white-space: nowrap;
+.tooltip-demo {
+  a {
+    white-space: nowrap;
+  }
+
+  .btn {
+    margin: .25rem .125rem;
+  }
 }
 
 // scss-docs-start custom-tooltip
@@ -253,7 +259,7 @@
     width: 5rem;
     height: 5rem;
     margin: .25rem;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
   }
 }
 
@@ -269,13 +275,13 @@
 
   .position-relative {
     height: 200px;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
   }
 
   .position-absolute {
     width: 2rem;
     height: 2rem;
-    background-color: $dark;
+    background-color: var(--bs-body-color);
     @include border-radius();
   }
 }
@@ -302,6 +308,39 @@
   min-height: 240px;
 }
 
+.bd-example-zindex-levels {
+  min-height: 15rem;
+
+  > div {
+    color: var(--bs-body-bg);
+    background-color: var(--bd-violet);
+    border: 1px solid var(--bd-purple);
+
+    > span {
+      position: absolute;
+      right: 5px;
+      bottom: 0;
+    }
+  }
+
+  > :nth-child(2) {
+    top: 3rem;
+    left: 3rem;
+  }
+  > :nth-child(3) {
+    top: 4.5rem;
+    left: 4.5rem;
+  }
+  > :nth-child(4) {
+    top: 6rem;
+    left: 6rem;
+  }
+  > :nth-child(5) {
+    top: 7.5rem;
+    left: 7.5rem;
+  }
+}
+
 //
 // Code snippets
 //
@@ -309,19 +348,24 @@
 .highlight {
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
-  margin-bottom: 1rem;
-  background-color: var(--bs-gray-100);
+  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: 0;
-    margin-top: .625rem;
-    margin-right: 1.875rem;
-    margin-bottom: .625rem;
+    padding: .25rem 0 .875rem;
+    margin-top: .8125rem;
+    margin-bottom: 0;
+    overflow: overlay;
     white-space: pre;
     background-color: transparent;
     border: 0;
@@ -329,31 +373,27 @@
 
   pre code {
     @include font-size(inherit);
-    color: $gray-900; // Effectively the base text color
+    color: var(--bs-body-color); // Effectively the base text color
     word-wrap: normal;
   }
 }
 
-.bd-code-snippet {
-  margin: 0 ($bd-gutter-x * -.5) $spacer;
-
-  .highlight {
-    margin-bottom: 0;
-  }
+.highlight-toolbar {
+  background-color: var(--bd-pre-bg);
 
-  .bd-example {
-    margin: 0;
-    border: 0;
+  + .highlight {
+    @include border-top-radius(0);
   }
+}
 
-  @include media-breakpoint-up(md) {
-    margin-right: 0;
-    margin-left: 0;
-    @include border-radius($border-radius);
+.bd-file-ref {
+  .highlight-toolbar {
+    @include media-breakpoint-up(md) {
+      @include border-top-radius(calc(var(--bs-border-radius) - 1px));
+    }
   }
 }
 
-.highlight-toolbar {
-  border: solid $border-color;
-  border-width: 1px 0;
+.bd-content .bd-code-snippet {
+  margin-bottom: 1rem;
 }