summaryrefslogtreecommitdiffstats
path: root/site/assets/scss
diff options
context:
space:
mode:
Diffstat (limited to 'site/assets/scss')
-rw-r--r--site/assets/scss/_ads.scss38
-rw-r--r--site/assets/scss/_anchor.scss21
-rw-r--r--site/assets/scss/_brand.scss60
-rw-r--r--site/assets/scss/_buttons.scss45
-rw-r--r--site/assets/scss/_callouts.scss35
-rw-r--r--site/assets/scss/_clipboard-js.scss44
-rw-r--r--site/assets/scss/_colors.scss156
-rw-r--r--site/assets/scss/_component-examples.scss359
-rw-r--r--site/assets/scss/_content.scss126
-rw-r--r--site/assets/scss/_footer.scss16
-rw-r--r--site/assets/scss/_layout.scss57
-rw-r--r--site/assets/scss/_masthead.scss96
-rw-r--r--site/assets/scss/_navbar.scss91
-rw-r--r--site/assets/scss/_placeholder-img.scss15
-rw-r--r--site/assets/scss/_search.scss141
-rw-r--r--site/assets/scss/_sidebar.scss53
-rw-r--r--site/assets/scss/_skippy.scss7
-rw-r--r--site/assets/scss/_syntax.scss115
-rw-r--r--site/assets/scss/_toc.scss87
-rw-r--r--site/assets/scss/_variables.scss23
-rw-r--r--site/assets/scss/docs.scss59
21 files changed, 1644 insertions, 0 deletions
diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss
new file mode 100644
index 0000000..b9369eb
--- /dev/null
+++ b/site/assets/scss/_ads.scss
@@ -0,0 +1,38 @@
+// stylelint-disable declaration-no-important, selector-max-id
+
+//
+// Carbon ads
+//
+
+#carbonads {
+ position: static;
+ display: block;
+ max-width: 400px;
+ padding: 15px 15px 15px 160px;
+ margin: 2rem 0;
+ overflow: hidden;
+ @include font-size(.8125rem);
+ line-height: 1.4;
+ text-align: left;
+ background-color: $gray-100;
+
+ a {
+ color: $gray-800;
+ text-decoration: none;
+ }
+
+ @include media-breakpoint-up(sm) {
+ @include border-radius(.5rem);
+ }
+}
+
+.carbon-img {
+ float: left;
+ margin-left: -145px;
+}
+
+.carbon-poweredby {
+ display: block;
+ margin-top: .75rem;
+ color: $gray-700 !important;
+}
diff --git a/site/assets/scss/_anchor.scss b/site/assets/scss/_anchor.scss
new file mode 100644
index 0000000..5bb3915
--- /dev/null
+++ b/site/assets/scss/_anchor.scss
@@ -0,0 +1,21 @@
+.anchor-link {
+ padding: 0 .175rem;
+ font-weight: 400;
+ color: rgba($link-color, .5);
+ text-decoration: none;
+ opacity: 0;
+ @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+ &::after {
+ content: "#";
+ }
+
+ &:focus,
+ &:hover,
+ :hover > &,
+ :target > & {
+ color: $link-color;
+ text-decoration: none;
+ opacity: 1;
+ }
+}
diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss
new file mode 100644
index 0000000..9637cfb
--- /dev/null
+++ b/site/assets/scss/_brand.scss
@@ -0,0 +1,60 @@
+//
+// Brand guidelines
+//
+
+// Logo series wrapper
+.bd-brand-logos {
+ color: $bd-violet;
+
+ .inverse {
+ color: $white;
+ background-color: $bd-violet;
+ }
+}
+
+// Individual items
+.bd-brand-item {
+ + .bd-brand-item {
+ border-top: 1px solid $white;
+ }
+
+ @include media-breakpoint-up(md) {
+ + .bd-brand-item {
+ border-top: 0;
+ border-left: 1px solid $white;
+ }
+ }
+}
+
+
+//
+// Color swatches
+//
+
+.color-swatches {
+ margin: 0 -5px;
+
+ // Docs colors
+ .bd-purple {
+ background-color: $bd-purple;
+ }
+ .bd-purple-light {
+ background-color: $bd-purple-light;
+ }
+ .bd-purple-lighter {
+ background-color: #e5e1ea;
+ }
+ .bd-gray {
+ background-color: #f9f9f9;
+ }
+}
+
+.color-swatch {
+ width: 4rem;
+ height: 4rem;
+
+ @include media-breakpoint-up(md) {
+ width: 6rem;
+ height: 6rem;
+ }
+}
diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss
new file mode 100644
index 0000000..13bd6e4
--- /dev/null
+++ b/site/assets/scss/_buttons.scss
@@ -0,0 +1,45 @@
+// Buttons
+//
+// Custom buttons for the docs.
+
+// scss-docs-start btn-css-vars-example
+.btn-bd-primary {
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bs-white);
+ --bs-btn-bg: var(--bd-violet);
+ --bs-btn-border-color: var(--bd-violet);
+ --bs-btn-border-radius: .5rem;
+ --bs-btn-hover-color: var(--bs-white);
+ --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+ --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+ --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
+}
+// scss-docs-end btn-css-vars-example
+
+.btn-bd-accent {
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bd-accent);
+ --bs-btn-border-color: var(--bd-accent);
+ --bs-btn-hover-color: var(--bd-dark);
+ --bs-btn-hover-bg: var(--bd-accent);
+ --bs-btn-hover-border-color: var(--bd-accent);
+ --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: var(--bs-btn-hover-bg);
+ --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
+}
+
+.btn-bd-light {
+ --bs-btn-color: var(--bs-gray-600);
+ --bs-btn-border-color: var(--bs-gray-400);
+ --bs-btn-hover-color: var(--bd-violet);
+ --bs-btn-hover-border-color: var(--bd-violet);
+ --bs-btn-active-color: var(--bd-violet);
+ --bs-btn-active-bg: var(--bs-white);
+ --bs-btn-active-border-color: var(--bd-violet);
+ --bs-btn-focus-border-color: var(--bd-violet);
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+}
diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
new file mode 100644
index 0000000..4513a7d
--- /dev/null
+++ b/site/assets/scss/_callouts.scss
@@ -0,0 +1,35 @@
+//
+// Callouts
+//
+
+.bd-callout {
+ padding: 1.25rem;
+ margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+ background-color: var(--bd-callout-bg, var(--bs-gray-100));
+ border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
+
+ h4 {
+ margin-bottom: .25rem;
+ }
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+
+ + .bd-callout {
+ margin-top: -.25rem;
+ }
+
+ .highlight {
+ background-color: rgba($black, .05);
+ }
+}
+
+// Variations
+@each $variant in $bd-callout-variants {
+ .bd-callout-#{$variant} {
+ --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
+ --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
+ }
+}
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
new file mode 100644
index 0000000..3a876a5
--- /dev/null
+++ b/site/assets/scss/_clipboard-js.scss
@@ -0,0 +1,44 @@
+// clipboard.js
+//
+// JS-based `Copy` buttons for code snippets.
+
+.bd-clipboard,
+.bd-edit {
+ position: relative;
+ display: none;
+ float: right;
+
+ + .highlight {
+ margin-top: 0;
+ }
+
+ @include media-breakpoint-up(md) {
+ display: block;
+ }
+}
+
+.btn-clipboard,
+.btn-edit {
+ display: block;
+ padding: .5em;
+ line-height: 1;
+ color: $gray-900;
+ background-color: $gray-100;
+ border: 0;
+ @include border-radius(.25rem);
+
+ &:hover {
+ color: $primary;
+ }
+
+ &:focus {
+ z-index: 3;
+ }
+}
+
+.btn-clipboard {
+ position: relative;
+ z-index: 2;
+ margin-top: .75rem;
+ margin-right: .75rem;
+}
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
new file mode 100644
index 0000000..a71a897
--- /dev/null
+++ b/site/assets/scss/_colors.scss
@@ -0,0 +1,156 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
+ .swatch-#{$color} {
+ color: color-contrast($value);
+ background-color: #{$value};
+
+ &::after {
+ $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
+ $against-white: "#{contrast-ratio($value, $white)}";
+ $against-black: "#{contrast-ratio($value, $black)}";
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ padding-left: 1rem;
+ font-size: .75rem;
+ line-height: 1.35;
+ white-space: pre;
+ content:
+ str-slice($contrast-ratio, 1, 4) "\A"
+ str-slice($against-white, 1, 4) "\A"
+ str-slice($against-black, 1, 4);
+ background-color: $value;
+ background-image:
+ linear-gradient(
+ to bottom,
+ transparent .25rem,
+ color-contrast($value) .25rem .75rem,
+ transparent .75rem 1.25rem,
+ $white 1.25rem 1.75rem,
+ transparent 1.75rem 2.25rem,
+ $black 2.25rem 2.75rem,
+ transparent 2.75rem
+ );
+ background-repeat: no-repeat;
+ background-size: .5rem 100%;
+ }
+ }
+}
+
+// stylelint-disable declaration-block-single-line-max-declarations
+
+.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
+.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
+.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
+.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
+.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
+.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
+.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
+.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
+.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
+
+.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
+.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
+.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
+.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
+.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
+.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
+.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
+.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
+.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
+
+.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
+.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
+.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
+.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
+.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
+.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
+.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
+.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
+.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
+
+.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
+.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
+.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
+.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
+.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
+.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
+.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
+.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
+.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
+
+.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
+.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
+.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
+.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
+.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
+.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
+.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
+.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
+.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
+
+.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
+.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
+.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
+.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
+.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
+.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
+.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
+.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
+.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
+
+.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
+.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
+.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
+.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
+.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
+.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
+.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
+.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
+.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
+
+.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
+.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
+.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
+.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
+.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
+.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
+.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
+.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
+.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
+
+.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
+.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
+.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
+.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
+.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
+.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
+.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
+.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
+.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
+
+.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
+.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
+.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
+.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
+.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
+.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
+.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
+.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
+.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
+
+.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
+.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
+.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
+.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
+.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
+.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
+.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
+.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
+.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
+
+.bd-white { color: color-contrast($white); background-color: $white; }
+.bd-black { color: color-contrast($black); background-color: $black; }
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;
+}
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
new file mode 100644
index 0000000..cd59433
--- /dev/null
+++ b/site/assets/scss/_content.scss
@@ -0,0 +1,126 @@
+//
+// Bootstrap docs content theming
+//
+
+.bd-content {
+ // Offset content from fixed navbar when jumping to headings
+ > :target {
+ padding-top: 5rem;
+ margin-top: -5rem;
+ }
+
+ > h2:not(:first-child) {
+ margin-top: 3rem;
+ }
+
+ > h3 {
+ margin-top: 2rem;
+ }
+
+ > ul li,
+ > ol li {
+ margin-bottom: .25rem;
+
+ // stylelint-disable selector-max-type, selector-max-compound-selectors
+ > p ~ ul {
+ margin-top: -.5rem;
+ margin-bottom: 1rem;
+ }
+ // stylelint-enable selector-max-type, selector-max-compound-selectors
+ }
+
+ // Override Bootstrap defaults
+ > .table,
+ > .table-responsive .table {
+ margin-bottom: 1.5rem;
+ @include font-size(.875rem);
+
+ @include media-breakpoint-down(lg) {
+ &.table-bordered {
+ border: 0;
+ }
+ }
+
+ thead {
+ border-bottom: 2px solid currentcolor;
+ }
+
+ tbody:not(:first-child) {
+ border-top: 2px solid currentcolor;
+ }
+
+ th,
+ td {
+ &:first-child {
+ padding-left: 0;
+ }
+
+ &:not(:last-child) {
+ padding-right: 1.5rem;
+ }
+ }
+
+ // Prevent breaking of code
+ // stylelint-disable-next-line selector-max-compound-selectors
+ th,
+ td:first-child > code {
+ white-space: nowrap;
+ }
+ }
+}
+
+.table-options {
+ td:nth-child(2) {
+ min-width: 160px;
+ }
+}
+
+.table-options td:last-child,
+.table-utilities td:last-child {
+ min-width: 280px;
+}
+
+.bd-title {
+ @include font-size(3rem);
+}
+
+.bd-lead {
+ @include font-size(1.5rem);
+ font-weight: 300;
+}
+
+.bd-bg-violet {
+ background-color: $bd-violet;
+}
+
+.bi {
+ width: 1em;
+ height: 1em;
+ fill: currentcolor;
+}
+
+.icon-link {
+ display: flex;
+ align-items: center;
+ text-decoration-color: rgba($primary, .5);
+ text-underline-offset: .5rem;
+ backface-visibility: hidden;
+
+ .bi {
+ width: 1.5em;
+ height: 1.5em;
+ transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
+ }
+
+ &:hover {
+ .bi {
+ transform: translate3d(5px, 0, 0);
+ }
+ }
+}
+
+.border-lg-start {
+ @include media-breakpoint-up(lg) {
+ border-left: $border-width solid $border-color;
+ }
+}
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
new file mode 100644
index 0000000..87cee6d
--- /dev/null
+++ b/site/assets/scss/_footer.scss
@@ -0,0 +1,16 @@
+//
+// Footer
+//
+
+.bd-footer {
+ a {
+ color: $gray-700;
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ color: $link-color;
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss
new file mode 100644
index 0000000..d0482d9
--- /dev/null
+++ b/site/assets/scss/_layout.scss
@@ -0,0 +1,57 @@
+.bd-gutter {
+ --bs-gutter-x: #{$bd-gutter-x};
+}
+
+.bd-layout {
+
+ @include media-breakpoint-up(lg) {
+ display: grid;
+ grid-template-areas: "sidebar main";
+ grid-template-columns: 1fr 5fr;
+ gap: $grid-gutter-width;
+ }
+}
+
+.bd-sidebar {
+ grid-area: sidebar;
+}
+
+.bd-main {
+ grid-area: main;
+
+ @include media-breakpoint-down(lg) {
+ max-width: 760px;
+ margin-inline: auto;
+ }
+
+ @include media-breakpoint-up(md) {
+ display: grid;
+ grid-template-areas:
+ "intro"
+ "toc"
+ "content";
+ grid-template-rows: auto auto 1fr;
+ gap: inherit;
+ }
+
+ @include media-breakpoint-up(lg) {
+ grid-template-areas:
+ "intro toc"
+ "content toc";
+ grid-template-rows: auto 1fr;
+ grid-template-columns: 4fr 1fr;
+ }
+}
+
+.bd-intro {
+ grid-area: intro;
+}
+
+.bd-toc {
+ grid-area: toc;
+}
+
+.bd-content {
+ grid-area: content;
+ min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
new file mode 100644
index 0000000..81d4d99
--- /dev/null
+++ b/site/assets/scss/_masthead.scss
@@ -0,0 +1,96 @@
+.bd-masthead {
+ --bd-pink-rgb: #{to-rgb($pink)};
+ padding: 3rem 0;
+ // stylelint-disable
+ background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .01), rgba(var(--bs-body-bg-rgb), 1) 85%),
+ radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), .5), transparent 50%),
+ radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), .5), transparent 50%),
+ radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), .5), transparent 50%),
+ radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), .5), transparent 50%);
+ // stylelint-enable
+
+ h1 {
+ @include font-size(4rem);
+ line-height: 1;
+ }
+
+ .lead {
+ @include font-size(1rem);
+ font-weight: 400;
+ color: $gray-700;
+ }
+
+ .bd-code-snippet {
+ margin: 0;
+ @include border-radius(.5rem);
+ }
+
+ .highlight {
+ width: 100%;
+ padding: .5rem 1rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: rgba(var(--bs-body-color-rgb), .075);
+ @include border-radius(.5rem);
+
+ @include media-breakpoint-up(lg) {
+ padding-right: 4rem;
+ }
+ }
+ .btn-clipboard {
+ position: absolute;
+ top: -.125rem;
+ right: 0;
+ background-color: transparent;
+ }
+
+ #carbonads { // stylelint-disable-line selector-max-id
+ margin-right: auto;
+ margin-left: auto;
+ }
+
+ @include media-breakpoint-up(md) {
+ .lead {
+ @include font-size(1.5rem);
+ }
+ }
+}
+
+.masthead-followup {
+ .lead {
+ @include font-size(1rem);
+ }
+
+ .highlight {
+ @include border-radius(.5rem);
+ }
+
+ @include media-breakpoint-up(md) {
+ .lead {
+ @include font-size(1.25rem);
+ }
+ }
+}
+
+.bd-btn-lg {
+ padding: .8rem 2rem;
+}
+
+.masthead-followup-icon {
+ padding: 1rem;
+ color: rgba(var(--bg-rgb), 1);
+ background-color: rgba(var(--bg-rgb), .1);
+ background-blend-mode: multiple;
+ @include border-radius(1rem);
+ mix-blend-mode: darken;
+
+ svg {
+ filter: drop-shadow(0 1px 1px #fff);
+ }
+}
+
+.masthead-notice {
+ background-color: var(--bd-accent);
+ box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
+}
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
new file mode 100644
index 0000000..0cff3e2
--- /dev/null
+++ b/site/assets/scss/_navbar.scss
@@ -0,0 +1,91 @@
+.bd-navbar {
+ padding: .75rem 0;
+ background-color: transparent;
+ background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+ box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
+
+ .bd-navbar-toggle {
+ @include media-breakpoint-down(lg) {
+ width: 4.25rem;
+ }
+ }
+
+ .navbar-toggler {
+ padding: 0;
+ margin-right: -.5rem;
+ border: 0;
+
+ &:first-child {
+ margin-left: -.5rem;
+ }
+
+ .bi {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ .navbar-brand {
+ transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
+
+ &:hover {
+ transform: rotate(-5deg) scale(1.1);
+ }
+ }
+
+ .navbar-toggler,
+ .nav-link {
+ padding-right: $spacer * .25;
+ padding-left: $spacer * .25;
+ color: rgba($white, .85);
+
+ &:hover,
+ &:focus {
+ color: $white;
+ }
+
+ &.active {
+ font-weight: 600;
+ color: $white;
+ }
+ }
+
+ .navbar-nav-svg {
+ display: inline-block;
+ vertical-align: -.125rem;
+ }
+
+ .offcanvas-lg {
+ background-color: var(--bd-violet);
+ border-left: 0;
+
+ @include media-breakpoint-down(lg) {
+ box-shadow: $box-shadow-lg;
+ }
+ }
+
+ .dropdown-toggle {
+ &:focus:not(:focus-visible) {
+ outline: 0;
+ }
+ }
+
+ .dropdown-menu {
+ --#{$prefix}dropdown-min-width: 12rem;
+ --#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+ @include rfs(.875rem, --#{$prefix}dropdown-font-size);
+ box-shadow: $dropdown-box-shadow;
+ }
+
+ .dropdown-item.current {
+ font-weight: 600;
+ background-image: escape-svg($dropdown-active-icon);
+ background-repeat: no-repeat;
+ background-position: right $dropdown-item-padding-x top .6rem;
+ background-size: .75rem .75rem;
+ }
+}
diff --git a/site/assets/scss/_placeholder-img.scss b/site/assets/scss/_placeholder-img.scss
new file mode 100644
index 0000000..6f5bbe4
--- /dev/null
+++ b/site/assets/scss/_placeholder-img.scss
@@ -0,0 +1,15 @@
+//
+// Placeholder svg used in the docs.
+//
+
+// Remember to update `site/_layouts/examples.html` too if this changes!
+
+.bd-placeholder-img {
+ @include font-size(1.125rem);
+ user-select: none;
+ text-anchor: middle;
+}
+
+.bd-placeholder-img-lg {
+ @include font-size(3.5rem);
+}
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
new file mode 100644
index 0000000..01e9d03
--- /dev/null
+++ b/site/assets/scss/_search.scss
@@ -0,0 +1,141 @@
+// stylelint-disable selector-class-pattern
+
+.bd-search {
+ position: relative;
+
+ @include media-breakpoint-up(lg) {
+ position: absolute;
+ top: .875rem;
+ left: 50%;
+ width: 200px;
+ margin-left: -100px;
+ }
+
+ @include media-breakpoint-up(xl) {
+ width: 280px;
+ margin-left: -140px;
+ }
+
+}
+
+.DocSearch-Container {
+ --docsearch-muted-color: #{$text-muted};
+ --docsearch-hit-shadow: none;
+
+ z-index: 2000; // Make sure to be over all components showcased in the documentation
+ cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
+
+ @include media-breakpoint-up(lg) {
+ padding-top: 4rem;
+ }
+}
+
+.DocSearch-Button {
+ --docsearch-searchbox-background: #{rgba($black, .1)};
+ --docsearch-searchbox-color: #{$white};
+ --docsearch-searchbox-focus-background: #{rgba($black, .25)};
+ --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
+ --docsearch-text-color: #{$white};
+ --docsearch-muted-color: #{rgba($white, .65)};
+
+ width: 100%;
+ height: 38px; // Match Bootstrap inputs
+ margin: 0;
+ border: 1px solid rgba($white, .4);
+ @include border-radius(.375rem);
+
+ .DocSearch-Search-Icon {
+ opacity: .65;
+ }
+
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: rgba($bd-accent, 1);
+
+ .DocSearch-Search-Icon {
+ opacity: 1;
+ }
+ }
+
+ @include media-breakpoint-down(lg) {
+ &,
+ &:hover,
+ &:focus {
+ background: transparent;
+ border: 0;
+ box-shadow: none;
+ }
+ &:focus {
+ box-shadow: var(--docsearch-searchbox-shadow);
+ }
+ }
+}
+
+.DocSearch-Button-Keys,
+.DocSearch-Button-Placeholder {
+ @include media-breakpoint-down(lg) {
+ display: none;
+ }
+}
+
+.DocSearch-Button-Keys {
+ min-width: 0;
+ padding: .125rem .25rem;
+ background: rgba($black, .25);
+ @include border-radius(.25rem);
+}
+
+.DocSearch-Button-Key {
+ top: 0;
+ width: auto;
+ height: 1.25rem;
+ padding-right: .125rem;
+ padding-left: .125rem;
+ margin-right: 0;
+ font-size: .875rem;
+ background: none;
+ box-shadow: none;
+}
+
+.DocSearch-Commands-Key {
+ padding-left: 1px;
+ font-size: .875rem;
+ background-color: rgba($black, .1);
+ background-image: none;
+ box-shadow: none;
+}
+
+.DocSearch-Form {
+ @include border-radius(var(--bs-border-radius));
+}
+
+.DocSearch-Hits {
+ mark {
+ padding: 0;
+ }
+}
+
+.DocSearch-Hit {
+ padding-bottom: 0;
+ @include border-radius(0);
+
+ a {
+ @include border-radius(0);
+ border: solid var(--bs-border-color);
+ border-width: 0 1px 1px;
+ }
+
+ &:first-child a {
+ @include border-top-radius(var(--bs-border-radius));
+ border-top-width: 1px;
+ }
+ &:last-child a {
+ @include border-bottom-radius(var(--bs-border-radius));
+ }
+}
+
+.DocSearch-Hit-icon {
+ display: flex;
+ align-items: center;
+}
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
new file mode 100644
index 0000000..ed76b3c
--- /dev/null
+++ b/site/assets/scss/_sidebar.scss
@@ -0,0 +1,53 @@
+.bd-sidebar {
+ @include media-breakpoint-up(lg) {
+ position: sticky;
+ top: 5rem;
+ // Override collapse behaviors
+ // stylelint-disable-next-line declaration-no-important
+ display: block !important;
+ height: subtract(100vh, 6rem);
+ // Prevent focus styles to be cut off:
+ padding-left: .25rem;
+ margin-left: -.25rem;
+ overflow-y: auto;
+ }
+}
+
+.bd-links-nav {
+ @include media-breakpoint-down(lg) {
+ font-size: .875rem;
+ }
+
+ @include media-breakpoint-between(xs, lg) {
+ column-count: 2;
+ column-gap: 1.5rem;
+
+ .bd-links-group {
+ break-inside: avoid;
+ }
+
+ .bd-links-span-all {
+ column-span: all;
+ }
+ }
+}
+
+.bd-links-link {
+ padding: .1875rem .5rem;
+ margin-top: .125rem;
+ margin-left: 1rem;
+ color: rgba($black, .65);
+ text-decoration: if($link-decoration == none, null, none);
+
+ &:hover,
+ &:focus,
+ &.active {
+ color: rgba($black, .85);
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ background-color: rgba(var(--bd-violet-rgb), .1);
+ }
+
+ &.active {
+ font-weight: 600;
+ }
+}
diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss
new file mode 100644
index 0000000..ea82c62
--- /dev/null
+++ b/site/assets/scss/_skippy.scss
@@ -0,0 +1,7 @@
+.skippy {
+ background-color: $bd-purple;
+
+ a {
+ color: $white;
+ }
+}
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
new file mode 100644
index 0000000..106032c
--- /dev/null
+++ b/site/assets/scss/_syntax.scss
@@ -0,0 +1,115 @@
+:root {
+ --base00: #fff;
+ --base01: #f5f5f5;
+ --base02: #c8c8fa;
+ --base03: #565c64;
+ --base04: #030303;
+ --base05: #333;
+ --base06: #fff;
+ --base07: #9a6700;
+ --base08: #bc4c00;
+ --base09: #087990;
+ --base0A: #795da3;
+ --base0B: #183691;
+ --base0C: #183691;
+ --base0D: #795da3;
+ --base0E: #a71d5d;
+ --base0F: #333;
+}
+
+.hl { background-color: var(--base02); }
+.c { color: var(--base03); }
+.err { color: var(--base08); }
+.k { color: var(--base0E); }
+.l { color: var(----base09); }
+.n { color: var(--base08); }
+.o { color: var(--base05); }
+.p { color: var(--base05); }
+.cm { color: var(--base04); }
+.cp { color: var(--base08); }
+.c1 { color: var(--base03); }
+.cs { color: var(--base04); }
+.gd { color: var(--base08); }
+.ge { font-style: italic; }
+.gh {
+ font-weight: 600;
+ color: #fff;
+}
+.gi { color: var(--bs-success); }
+.gp {
+ font-weight: 600;
+ color: var(--base04);
+}
+.gs { font-weight: 600; }
+.gu {
+ font-weight: 600;
+ color: var(--base0C);
+}
+.kc { color: var(--base0E); }
+.kd { color: var(--base0E); }
+.kn { color: var(--base0C); }
+.kp { color: var(--base0E); }
+.kr { color: var(--base0E); }
+.kt { color: var(--base0A); }
+.ld { color: var(--base0C); }
+.m { color: var(--base09); }
+.s { color: var(--base0C); }
+.na { color: var(--base0A); }
+.nb { color: var(--base05); }
+.nc { color: var(--base07); }
+.no { color: var(--base08); }
+.nd { color: var(--base07); }
+.ni { color: var(--base08); }
+.ne { color: var(--base08); }
+.nf { color: var(--base0B); }
+.nl { color: var(--base05); }
+.nn { color: var(--base0A); }
+.nx { color: var(--base0A); }
+.py { color: var(--base08); }
+.nt { color: var(--base08); }
+.nv { color: var(--base08); }
+.ow { color: var(--base0C); }
+.w { color: #fff; }
+.mf { color: var(--base09); }
+.mh { color: var(--base09); }
+.mi { color: var(--base09); }
+.mo { color: var(--base09); }
+.sb { color: var(--base0C); }
+.sc { color: #fff; }
+.sd { color: var(--base04); }
+.s2 { color: var(--base0C); }
+.se { color: var(--base09); }
+.sh { color: var(--base0C); }
+.si { color: var(--base09); }
+.sx { color: var(--base0C); }
+.sr { color: var(--base0C); }
+.s1 { color: var(--base0C); }
+.ss { color: var(--base0C); }
+.bp { color: var(--base05); }
+.vc { color: var(--base08); }
+.vg { color: var(--base08); }
+.vi { color: var(--base08); }
+.il { color: var(--base09); }
+
+// Color commas in rgba() values
+.m + .o { color: var(--base03); }
+
+// Fix bash
+.language-sh .c { color: var(--base03); }
+
+.chroma {
+ .language-bash,
+ .language-sh {
+ .line::before {
+ color: #777;
+ content: "$ ";
+ user-select: none;
+ }
+ }
+
+ .language-powershell::before {
+ color: #009;
+ content: "PM> ";
+ user-select: none;
+ }
+}
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
new file mode 100644
index 0000000..512a11b
--- /dev/null
+++ b/site/assets/scss/_toc.scss
@@ -0,0 +1,87 @@
+// stylelint-disable selector-max-type
+
+.bd-toc {
+ @include media-breakpoint-up(lg) {
+ position: sticky;
+ top: 5rem;
+ right: 0;
+ z-index: 2;
+ height: subtract(100vh, 7rem);
+ overflow-y: auto;
+ }
+
+ nav {
+ @include font-size(.875rem);
+
+ ul {
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+
+ ul {
+ padding-left: 1rem;
+ margin-top: .25rem;
+ }
+ }
+
+ li {
+ margin-bottom: .25rem;
+ }
+
+ a {
+ color: inherit;
+
+ &:not(:hover) {
+ text-decoration: none;
+ }
+
+ code {
+ font: inherit;
+ }
+ }
+ }
+}
+
+.bd-toc-toggle {
+ display: flex;
+ align-items: center;
+
+ @include media-breakpoint-down(sm) {
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ @include media-breakpoint-down(md) {
+ border: 1px solid $border-color;
+ @include border-radius(.4rem);
+
+ &:hover,
+ &:focus,
+ &:active,
+ &[aria-expanded="true"] {
+ color: var(--bd-violet);
+ background-color: $white;
+ border-color: var(--bd-violet);
+ }
+
+ &:focus,
+ &[aria-expanded="true"] {
+ box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
+ }
+ }
+}
+
+.bd-toc-collapse {
+ @include media-breakpoint-down(md) {
+ nav {
+ padding: 1.25rem;
+ background-color: var(--bs-gray-100);
+ border: 1px solid $border-color;
+ @include border-radius(.25rem);
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ display: block !important; // stylelint-disable-line declaration-no-important
+ }
+}
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
new file mode 100644
index 0000000..b460392
--- /dev/null
+++ b/site/assets/scss/_variables.scss
@@ -0,0 +1,23 @@
+// stylelint-disable scss/dollar-variable-default
+
+// Local docs variables
+$bd-purple: #4c0bce;
+$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
+$bd-accent: #ffe484;
+$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
+
+$bd-gutter-x: 3rem;
+$bd-callout-variants: info, warning, danger !default;
+
+:root {
+ --bd-purple: #{$bd-purple};
+ --bd-violet: #{$bd-violet};
+ --bd-accent: #{$bd-accent};
+ --bd-violet-rgb: #{to-rgb($bd-violet)};
+ --bd-accent-rgb: #{to-rgb($bd-accent)};
+ --bd-pink-rgb: #{to-rgb($pink-500)};
+ --bd-teal-rgb: #{to-rgb($teal-500)};
+ --docsearch-primary-color: var(--bd-violet);
+ --docsearch-logo-color: var(--bd-violet);
+}
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
new file mode 100644
index 0000000..5214934
--- /dev/null
+++ b/site/assets/scss/docs.scss
@@ -0,0 +1,59 @@
+/*!
+ * Bootstrap Docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Copyright 2011-2022 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+// Dev notes
+//
+// Background information on nomenclature and architecture decisions here.
+//
+// - Bootstrap functions, variables, and mixins are included for easy reuse.
+// Doing so gives us access to the same core utilities provided by Bootstrap.
+// For example, consistent media queries through those mixins.
+//
+// - Bootstrap's **docs variables** are prefixed with `$bd-`.
+// These custom colors avoid collision with the components Bootstrap provides.
+//
+// - Classes are prefixed with `.bd-`.
+// These classes indicate custom-built or modified components for the design
+// and layout of the Bootstrap docs. They are not included in our builds.
+//
+// Happy Bootstrapping!
+
+// Load Bootstrap variables and mixins
+@import "../../../scss/functions";
+@import "../../../scss/variables";
+@import "../../../scss/mixins";
+
+// fusv-disable
+$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
+$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
+// fusv-enable
+@import "../../../scss/grid";
+
+// Load docs components
+@import "variables";
+@import "navbar";
+@import "search";
+@import "masthead";
+@import "ads";
+@import "content";
+@import "skippy";
+@import "sidebar";
+@import "layout";
+@import "toc";
+@import "footer";
+@import "component-examples";
+@import "buttons";
+@import "callouts";
+@import "brand";
+@import "colors";
+@import "clipboard-js";
+@import "placeholder-img";
+
+// Load docs dependencies
+@import "syntax";
+@import "anchor";
generated by cgit v1.2.3 (git 2.39.1) at 2024-04-27 15:30:33 +0000