diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 6bb71f0c27..712b31a237 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -14,9 +14,10 @@ // Scroll the active sidebar link into view const sidenav = document.querySelector('.bd-sidebar') - if (sidenav) { + const sidenavActiveLink = document.querySelector('.bd-links-nav .active') + + if (sidenav && sidenavActiveLink) { const sidenavHeight = sidenav.clientHeight - const sidenavActiveLink = document.querySelector('.bd-links-nav .active') const sidenavActiveLinkTop = sidenavActiveLink.offsetTop const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight const viewportTop = sidenavActiveLinkTop diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 14adbe94d4..0f1018b062 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -2,12 +2,16 @@ // Docs examples // -.bd-example-snippet { +.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,7 +20,7 @@ position: relative; padding: var(--bd-example-padding); - margin: 0 ($bd-gutter-x * -.5); + 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 var(--bs-border-color); - border-width: 0 1px 1px; + @include border-radius(var(--bs-border-radius)); } + p { @@ -350,18 +348,22 @@ .highlight { position: relative; padding: .75rem ($bd-gutter-x * .5); - margin-bottom: 1rem; 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: .25rem 0 .875rem; margin-top: .8125rem; - margin-right: 1.875rem; margin-bottom: 0; overflow: overlay; white-space: pre; @@ -376,32 +378,22 @@ } } -.bd-code-snippet { - margin: 0 ($bd-gutter-x * -.5) $spacer; - - .highlight { - margin-bottom: 0; - @include border-top-radius(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 { background-color: var(--bd-pre-bg); -} -.bd-scss-docs { - .highlight-toolbar { - @include border-top-radius(calc(var(--bs-border-radius) + 1px)); + + .highlight { + @include border-top-radius(0); } } + +.bd-file-ref { + .highlight-toolbar { + @include media-breakpoint-up(md) { + @include border-top-radius(calc(var(--bs-border-radius) - 1px)); + } + } +} + +.bd-content .bd-code-snippet { + margin-bottom: 1rem; +} diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 33015d6818..aa7d16070c 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -22,6 +22,8 @@ .bd-code-snippet { margin: 0; + border-color: var(--bs-border-color-translucent); + border-width: 1px; @include border-radius(.5rem); } @@ -32,7 +34,7 @@ text-overflow: ellipsis; white-space: nowrap; background-color: rgba(var(--bs-body-color-rgb), .075); - @include border-radius(.5rem); + @include border-radius(calc(.5rem - 1px)); @include media-breakpoint-up(lg) { padding-right: 4rem; @@ -41,7 +43,6 @@ pre { padding: 0; margin-top: .625rem; - margin-right: 1.875rem; margin-bottom: .625rem; overflow: hidden; } @@ -75,10 +76,6 @@ @include font-size(1rem); } - .highlight { - @include border-radius(.5rem); - } - @include media-breakpoint-up(md) { .lead { @include font-size(1.25rem); diff --git a/site/content/docs/5.3/docsref.md b/site/content/docs/5.3/docsref.md new file mode 100644 index 0000000000..d0fc42f3db --- /dev/null +++ b/site/content/docs/5.3/docsref.md @@ -0,0 +1,49 @@ +--- +layout: docs +title: Docs reference +description: Examples of Bootstrap's documentation-specific components and styles. +aliases: "/docsref/" +toc: true +robots: noindex,follow +sitemap_exclude: true +--- + +## Buttons + + + + + +## Callouts + +{{< callout >}} + Default callout +{{< /callout >}} + +{{< callout warning >}} + Warning callout +{{< /callout >}} + +{{< callout danger >}} + Danger callout +{{< /callout >}} + +## Code example + +```scss +.test { + --color: blue; +} +``` + +
+ The HTML abbreviation element. +
+ +{{< example >}} +
This is a test.
+{{< /example >}} + +{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}} + +{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}} diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index ab183e0a36..a162db521d 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -21,7 +21,7 @@
{{- if eq $show_preview true -}} - + {{- $input -}}
{{- end -}} diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html index fad4f034fc..4739e0a17e 100644 --- a/site/layouts/shortcodes/js-docs.html +++ b/site/layouts/shortcodes/js-docs.html @@ -26,12 +26,18 @@ {{- $match = replace $match $capture_start "" -}} {{- $match = replace $match $capture_end "" -}} -
-
- +
+
+ + {{- $file -}} + +
+ +
+ {{- $unindent := 0 -}} {{- $found := false -}} {{- $first_line:= index (split $match "\n") 0 -}} diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html index d28b29c926..4edc414fdb 100644 --- a/site/layouts/shortcodes/scss-docs.html +++ b/site/layouts/shortcodes/scss-docs.html @@ -39,7 +39,7 @@ {{- $match = replace $match " !default" "" -}} {{- end -}} -
+
{{- $file -}}