Refactor some docs examples CSS (#36194)

* Fix some more borders and margins

* Flex utilities docs: remove .bd-highlight class from snippets

* Explicit close target

* Reorder to keep base class up top

* Fix custom position example

* Tooltips: add code snippet, use scss-docs ref for custom tooltip

* Tweak text for pagination examples

* Modals: move custom styles to utilities

* Grid docs: Combine selectors and share coloring

* Refactor tons of little things

1 files changed, 77 insertions, 113 deletions

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 75d4e96cd8..d48154a86b 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -1,84 +1,4 @@
 //
-// Grid examples
-//
-
-.bd-example-row {
-  .row {
-    > .col,
-    > [class^="col-"] {
-      padding-top: .75rem;
-      padding-bottom: .75rem;
-      background-color: rgba(39, 41, 43, .03);
-      border: 1px solid rgba(39, 41, 43, .1);
-    }
-  }
-
-  .row + .row {
-    margin-top: 1rem;
-  }
-}
-
-.bd-example-row-flex-cols .row {
-  min-height: 10rem;
-  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);
-}
-
-// Grid mixins
-.example-container {
-  width: 800px;
-  @include make-container();
-}
-
-.example-row {
-  @include make-row();
-}
-
-.example-content-main {
-  @include make-col-ready();
-
-  @include media-breakpoint-up(sm) {
-    @include make-col(6);
-  }
-
-  @include media-breakpoint-up(lg) {
-    @include make-col(8);
-  }
-}
-
-.example-content-secondary {
-  @include make-col-ready();
-
-  @include media-breakpoint-up(sm) {
-    @include make-col(6);
-  }
-
-  @include media-breakpoint-up(lg) {
-    @include make-col(4);
-  }
-}
-
-
-//
 // Docs examples
 //
 
@@ -92,15 +12,18 @@
 }
 
 .bd-example {
+  --bd-example-padding: 1rem;
+
   position: relative;
-  padding: 1rem;
+  padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5);
   border: solid $border-color;
-  border-width: 1px 0 0;
+  border-width: 1px 0;
   @include clearfix();
 
   @include media-breakpoint-up(md) {
-    padding: 1.5rem;
+    --bd-example-padding: 1.5rem;
+
     margin-right: 0;
     margin-left: 0;
     border-width: 1px;
@@ -127,7 +50,7 @@
   > .alert + .alert,
   > .navbar + .navbar,
   > .progress + .progress {
-    margin-top: 1rem;
+    margin-top: $spacer;
   }
 
   > .dropdown-menu {
@@ -171,30 +94,80 @@
   .fixed-top,
   .sticky-top {
     position: static;
-    margin: -1rem -1rem 1rem;
+    margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
   }
 
   .fixed-bottom,
   .sticky-bottom {
     position: static;
-    margin: 1rem -1rem -1rem;
-  }
+    margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
 
-  @include media-breakpoint-up(sm) {
-    .fixed-top,
-    .sticky-top {
-      margin: -1.5rem -1.5rem 1rem;
-    }
-    .fixed-bottom,
-    .sticky-bottom {
-      margin: 1rem -1.5rem -1.5rem;
-    }
   }
 
   // Pagination
   .pagination {
-    margin-top: .5rem;
-    margin-bottom: .5rem;
+    margin-bottom: 0;
+  }
+}
+
+//
+// Grid examples
+//
+
+.bd-example-row [class^="col"],
+.bd-example-cssgrid .grid > * {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  background-color: rgba(var(--bd-violet-rgb), .1);
+  border: 1px solid rgba(var(--bd-violet-rgb), .25);
+}
+
+.bd-example-row .row + .row,
+.bd-example-cssgrid .grid + .grid {
+  margin-top: 1rem;
+}
+
+.bd-example-row-flex-cols .row {
+  min-height: 10rem;
+  background-color: rgba(255, 0, 0, .1);
+}
+
+.bd-example-flex div {
+  background-color: rgba($bd-purple, .15);
+  border: 1px solid rgba($bd-purple, .15);
+}
+
+// Grid mixins
+.example-container {
+  width: 800px;
+  @include make-container();
+}
+
+.example-row {
+  @include make-row();
+}
+
+.example-content-main {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.example-content-secondary {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
   }
 }
 
@@ -224,18 +197,7 @@
   }
 }
 
-.bd-example-modal {
-  background-color: #fafafa;
-
-  .modal {
-    position: static;
-    display: block;
-  }
-}
-
 .bd-example-offcanvas {
-  @include border-start-radius(0);
-
   .offcanvas {
     position: static;
     display: block;
@@ -250,9 +212,11 @@
   white-space: nowrap;
 }
 
+// scss-docs-start custom-tooltip
 .custom-tooltip {
   --bs-tooltip-bg: var(--bs-primary);
 }
+// scss-docs-end custom-tooltip
 
 // scss-docs-start custom-popovers
 .custom-popover {
@@ -290,7 +254,6 @@
   .active {
     background-color: rgba($bd-purple, .15);
   }
-
 }
 
 .bd-example-border-utils {
@@ -317,7 +280,7 @@
 
 .bd-example-position-utils {
   position: relative;
-  padding: 3em;
+  padding: 2rem;
 
   .position-relative {
     height: 200px;
@@ -325,8 +288,8 @@
   }
 
   .position-absolute {
-    width: 2em;
-    height: 2em;
+    width: 2rem;
+    height: 2rem;
     background-color: $dark;
     @include border-radius();
   }
@@ -398,6 +361,7 @@
   }
 
   .bd-example {
+    margin: 0;
     border: 0;
   }