Mirrors/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-12-28 05:33:57 +00:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

Tweak styling of examples and callouts a little more

Browse Source
This commit is contained in:
Mark Otto 2025-11-14 21:38:20 -08:00
parent 6cd65c8b8e
commit 27a481ab72
4 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/src/components/shortcodes/Example.astro
View File

@ -76,7 +76,7 @@ const simplifiedMarkup = sourceMarkup
<div class="bd-example-snippet bd-code-snippet">
{
showPreview && (
<div id={id} class:list={['bd-example m-0 border-0', className]}>
<div id={id} class:list={['bd-example m-0', className]}>
<Fragment set:html={markup} />
</div>
)
@ -86,8 +86,8 @@ const simplifiedMarkup = sourceMarkup
showMarkup && (
<>
{showPreview && (
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">{lang}</small>
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 pt-2">
<small class="font-monospace fg-3 text-uppercase">{lang}</small>
<div class="d-flex ms-auto">
<button
type="button"

2
site/src/scss/_callouts.scss
View File

@ -22,7 +22,7 @@
background-color: var(--bd-callout-bg, var(--bs-gray-100));
border: 1px solid var(--bd-callout-border, var(--bs-border-color));
border-inline-start: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
@include border-radius(var(--bs-border-radius));
@include border-radius(var(--bs-border-radius-lg));
// box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
h4 {

4
site/src/scss/_clipboard-js.scss
View File

@ -26,13 +26,13 @@
display: block;
padding: .5em;
line-height: 1;
color: var(--bs-body-color);
color: var(--bs-fg-3);
background-color: var(--bd-pre-bg);
border: 0;
@include border-radius(.25rem);
&:hover {
color: var(--bs-link-hover-color);
color: var(--bs-body-color);
}
&:focus {

16
site/src/scss/_component-examples.scss
View File

@ -11,14 +11,12 @@
@layer custom {
.bd-code-snippet {
--bd-example-border-width: 4px;
margin: 0 ($bd-gutter-x * -.5) 1rem;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include media-breakpoint-up(md) {
margin-inline: 0;
border-width: 1px;
@include border-radius(var(--bs-border-radius));
@include border-radius(var(--bs-border-radius-lg));
}
}
@ -29,7 +27,8 @@
display: flow-root;
padding: var(--bd-example-padding);
margin: 0 ($bd-gutter-x * -.5) 1rem;
border: solid var(--bs-border-color);
background-color: var(--bs-bg-body);
border: solid var(--bs-border-subtle);
border-width: 1px 0;
@include media-breakpoint-up(md) {
@ -37,7 +36,7 @@
margin-inline: 0;
border-width: 1px;
@include border-radius(var(--bs-border-radius));
@include border-radius(calc(var(--bs-border-radius-lg) - var(--bd-example-border-width)));
}
+ p {
@ -115,6 +114,11 @@
}
}
.bd-example-snippet {
padding: var(--bd-example-border-width);
background-color: var(--bd-pre-bg);
}
//
// Grid examples
//