diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 3b03b17c49ca..0805aee9e839 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -20,10 +20,13 @@ const btnHtml = [ '
', - '
', - ' ', + '
', + ' html', + '
', + ' ', + '
', '
', '
' ].join('') @@ -35,6 +38,7 @@ if (!element.closest('.bd-example-snippet')) { element.insertAdjacentHTML('beforebegin', btnHtml) element.previousElementSibling.append(element) + element.previousElementSibling.querySelector('small').textContent = element.querySelector('pre > code').getAttribute('data-lang') } }) diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index de709d09ba7f..3ade1db6e581 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -23,7 +23,7 @@ padding: .5em; line-height: 1; color: var(--bs-body-color); - background-color: var(--bd-pre-bg); + background-color: transparent; border: 0; @include border-radius(.25rem); diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index fde8b7f4164a..4af6af677153 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -12,6 +12,18 @@ margin-left: 0; border-width: 1px; @include border-radius(var(--bs-border-radius)); + + > :first-child { + @include border-top-radius(calc(var(--bs-border-radius) - 1px)); + } + + > :last-child { + @include border-bottom-radius(calc(var(--bs-border-radius) - 1px)); + } + } + + > :not(:first-child) { + border-top: 1px solid var(--bs-border-color); } } @@ -31,7 +43,10 @@ margin-right: 0; margin-left: 0; border-width: 1px; - @include border-radius(var(--bs-border-radius)); + + &:not(:first-child) { + @include border-radius(var(--bs-border-radius)); + } } + p { @@ -353,7 +368,6 @@ @include media-breakpoint-up(md) { padding: .75rem 1.25rem; - @include border-radius(calc(var(--bs-border-radius) - 1px)); } @include media-breakpoint-up(lg) { @@ -385,18 +399,6 @@ .highlight-toolbar { background-color: var(--bd-pre-bg); - - + .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 { diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index d74d1ec24941..ff5a26708494 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -21,19 +21,37 @@ } .bd-code-snippet { + --bs-border-radius: .5rem; + + position: relative; margin: 0; - border-color: var(--bs-border-color-translucent); border-width: 1px; - @include border-radius(.5rem); } - .highlight { + .highlight-toolbar { + padding: 0 !important; // stylelint-disable-line declaration-no-important + + > :first-child { + display: none; + } + + .btn-clipboard { + position: absolute; + top: 50%; + right: .75rem; + z-index: 1; + transform: translateY(-50%); + } + } + + .highlight-toolbar + .highlight { width: 100%; padding: .5rem 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: rgba(var(--bs-body-color-rgb), .075); + border: 0; @include border-radius(calc(.5rem - 1px)); @include media-breakpoint-up(lg) { @@ -46,6 +64,7 @@ overflow: hidden; } } + .btn-clipboard { position: absolute; top: -.625rem; diff --git a/site/content/docs/5.3/docsref.md b/site/content/docs/5.3/docsref.md index d0fc42f3db86..e56a6abd3943 100644 --- a/site/content/docs/5.3/docsref.md +++ b/site/content/docs/5.3/docsref.md @@ -30,20 +30,40 @@ sitemap_exclude: true ## Code example +
+
This is a test using .bd-example directly.
+
+ ```scss .test { --color: blue; } ``` -
- The HTML abbreviation element. -
+```html +
This is a triple backtick markup only test.
+``` + +{{< highlight html >}} +
This is a highlight tag markup only test.
+{{< /highlight >}} + +{{< example show_preview=false >}} +
This is a markup only test.
+{{< /example >}} + +{{< example show_markup=false >}} +
This is a preview only test.
+{{< /example >}} {{< example >}}
This is a test.
{{< /example >}} +{{< example class=bg-body-secondary >}} +
This is a test with a custom background color.
+{{< /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 a162db521d49..5082920b2b04 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -13,9 +13,9 @@ {{- $id := .Get "id" -}} {{- $class := .Get "class" -}} {{- $lang := .Get "lang" | default "html" -}} -{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}} {{- $show_markup := .Get "show_markup" | default true -}} {{- $show_preview := .Get "show_preview" | default true -}} +{{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}} {{- $input := .Inner -}} {{- $content := .Inner -}} @@ -26,21 +26,21 @@
{{- end -}} - {{- if eq $show_markup true -}} - {{- if eq $show_preview true -}} -
- {{- $lang -}} -
- - + {{- end -}} +
- {{- end -}} + {{- if eq $show_markup true -}} {{- $content = replaceRE `` `...` $content -}} {{- $content = replaceRE `` `...` $content -}} {{- $content = replaceRE ` (class=" *?")` "" $content -}} diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html index 8eed4a0eb18e..1cc39c117742 100644 --- a/site/layouts/shortcodes/js-docs.html +++ b/site/layouts/shortcodes/js-docs.html @@ -32,8 +32,8 @@ {{- $match = replace $match $to_remove "" -}} {{- end -}} -
-
+
+
{{- $file -}} diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html index 6e7c129f4c29..97ea129fc104 100644 --- a/site/layouts/shortcodes/scss-docs.html +++ b/site/layouts/shortcodes/scss-docs.html @@ -45,8 +45,8 @@ {{- $match = replace $match " !default" "" -}} {{- end -}} -
-
+
+
{{- $file -}} diff --git a/site/layouts/shortcodes/table.html b/site/layouts/shortcodes/table.html index a98b5eb899e7..dbf6c5e5ae71 100644 --- a/site/layouts/shortcodes/table.html +++ b/site/layouts/shortcodes/table.html @@ -22,10 +22,24 @@ {{- $table := printf "\n%s" $table_attributes $table_content -}} -
- - {{ partialCached "table-content" . }} - +
+
+ + {{ partialCached "table-content" . }} + +
+ +
+ html +
+ + +
+
+ + {{- highlight $table "html" "" -}}
- -{{- highlight $table "html" "" -}}