1 files changed, 359 insertions, 0 deletions
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
new file mode 100644
index 0000000..f4865da
--- /dev/null
+++ b/site/assets/scss/_component-examples.scss
@@ -0,0 +1,359 @@
+//
+// Docs examples
+//
+
+.bd-example-snippet {
+  border: solid $border-color;
+  border-width: 1px 0;
+
+  @include media-breakpoint-up(md) {
+    border-width: 1px;
+  }
+}
+
+.bd-example {
+  --bd-example-padding: 1rem;
+
+  position: relative;
+  padding: var(--bd-example-padding);
+  margin: 0 ($bd-gutter-x * -.5);
+  border: solid $border-color;
+  border-width: 1px 0;
+  @include clearfix();
+
+  @include media-breakpoint-up(md) {
+    --bd-example-padding: 1.5rem;
+
+    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;
+  }
+
+  + p {
+    margin-top: 2rem;
+  }
+
+  > .form-control {
+    + .form-control {
+      margin-top: .5rem;
+    }
+  }
+
+  > .nav + .nav,
+  > .alert + .alert,
+  > .navbar + .navbar,
+  > .progress + .progress {
+    margin-top: $spacer;
+  }
+
+  > .dropdown-menu {
+    position: static;
+    display: block;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  > hr:last-child {
+    margin-bottom: $spacer;
+  }
+
+  // Images
+  > svg + svg,
+  > img + img {
+    margin-left: .5rem;
+  }
+
+  // Buttons
+  > .btn,
+  > .btn-group {
+    margin: .25rem .125rem;
+  }
+  > .btn-toolbar + .btn-toolbar {
+    margin-top: .5rem;
+  }
+
+  // List groups
+  > .list-group {
+    max-width: 400px;
+  }
+
+  > [class*="list-group-horizontal"] {
+    max-width: 100%;
+  }
+
+  // Navbars
+  .fixed-top,
+  .sticky-top {
+    position: static;
+    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: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
+
+  }
+
+  // Pagination
+  .pagination {
+    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);
+  }
+}
+
+// Ratio helpers
+.bd-example-ratios {
+  .ratio {
+    display: inline-block;
+    width: 10rem;
+    color: $gray-600;
+    background-color: $gray-100;
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+.bd-example-ratios-breakpoint {
+  .ratio-4x3 {
+    width: 16rem;
+
+    @include media-breakpoint-up(md) {
+      --bs-aspect-ratio: 50%; // 2x1
+    }
+  }
+}
+
+.bd-example-offcanvas {
+  .offcanvas {
+    position: static;
+    display: block;
+    height: 200px;
+    visibility: visible;
+    transform: translate(0);
+  }
+}
+
+// Tooltips
+.tooltip-demo a {
+  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 {
+  --bs-popover-max-width: 200px;
+  --bs-popover-border-color: var(--bs-primary);
+  --bs-popover-header-bg: var(--bs-primary);
+  --bs-popover-header-color: var(--bs-white);
+  --bs-popover-body-padding-x: 1rem;
+  --bs-popover-body-padding-y: .5rem;
+}
+// scss-docs-end custom-popovers
+
+// Scrollspy demo on fixed height div
+.scrollspy-example {
+  height: 200px;
+  margin-top: .5rem;
+  overflow: auto;
+}
+
+.scrollspy-example-2 {
+  height: 350px;
+  overflow: auto;
+}
+
+.simple-list-example-scrollspy {
+  .active {
+    background-color: rgba(var(--bd-violet-rgb), .15);
+  }
+}
+
+.bd-example-border-utils {
+  [class^="border"] {
+    display: inline-block;
+    width: 5rem;
+    height: 5rem;
+    margin: .25rem;
+    background-color: #f5f5f5;
+  }
+}
+
+.bd-example-rounded-utils {
+  [class*="rounded"] {
+    margin: .25rem;
+  }
+}
+
+.bd-example-position-utils {
+  position: relative;
+  padding: 2rem;
+
+  .position-relative {
+    height: 200px;
+    background-color: #f5f5f5;
+  }
+
+  .position-absolute {
+    width: 2rem;
+    height: 2rem;
+    background-color: $dark;
+    @include border-radius();
+  }
+}
+
+.bd-example-position-examples {
+  &::after {
+    content: none;
+  }
+}
+
+// Placeholders
+.bd-example-placeholder-cards {
+  &::after {
+    display: none;
+  }
+
+  .card {
+    width: 18rem;
+  }
+}
+
+// Toasts
+.bd-example-toasts {
+  min-height: 240px;
+}
+
+//
+// Code snippets
+//
+
+.highlight {
+  position: relative;
+  padding: .75rem ($bd-gutter-x * .5);
+  margin-bottom: 1rem;
+  background-color: var(--bs-gray-100);
+
+  @include media-breakpoint-up(md) {
+    padding: .75rem 1.25rem;
+    @include border-radius(var(--bs-border-radius));
+  }
+
+  pre {
+    padding: 0;
+    margin-top: .625rem;
+    margin-right: 1.875rem;
+    margin-bottom: .625rem;
+    white-space: pre;
+    background-color: transparent;
+    border: 0;
+  }
+
+  pre code {
+    @include font-size(inherit);
+    color: $gray-900; // Effectively the base text color
+    word-wrap: normal;
+  }
+}
+
+.bd-code-snippet {
+  margin: 0 ($bd-gutter-x * -.5) $spacer;
+
+  .highlight {
+    margin-bottom: 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 {
+  border: solid $border-color;
+  border-width: 1px 0;
+}