Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: Handle border-radii and border in an easier way #39328

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+105 −46
Open

Docs: Handle border-radii and border in an easier way #39328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c970476
Handle border radii and borders in another way
louismaximepiton Nov 15, 2023
af9246c
Merge branch 'main' into main-lmp-docs-example-refactoring
louismaximepiton Nov 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 8 additions & 4 deletions site/assets/js/code-examples.js
View file
Open in desktop
Expand Up @@ -20,10 +20,13 @@

const btnHtml = [
'<div class="bd-code-snippet">',
' <div class="bd-clipboard">',
' <button type="button" class="btn-clipboard">',
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
' </button>',
' <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">',
' <small class="font-monospace text-body-secondary text-uppercase">html</small>',
' <div class="d-flex ms-auto">',
' <button type="button" class="btn-clipboard mt-0 me-0">',
' <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>',
' </button>',
' </div>',
' </div>',
'</div>'
].join('')
Expand All @@ -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')
}
})

Expand Down
2 changes: 1 addition & 1 deletion site/assets/scss/_clipboard-js.scss
View file
Open in desktop
Expand Up @@ -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);

Expand Down
30 changes: 16 additions & 14 deletions site/assets/scss/_component-examples.scss
View file
Open in desktop
Expand Up @@ -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);
}
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 {
Expand Down
25 changes: 22 additions & 3 deletions site/assets/scss/_masthead.scss
View file
Open in desktop
Expand Up @@ -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) {
Expand All @@ -46,6 +64,7 @@
overflow: hidden;
}
}

.btn-clipboard {
position: absolute;
top: -.625rem;
Expand Down
26 changes: 23 additions & 3 deletions site/content/docs/5.3/docsref.md
View file
Open in desktop
Expand Up @@ -30,20 +30,40 @@ sitemap_exclude: true

## Code example

<div class="bd-example">
<div class="test">This is a test using <code>.bd-example</code> directly.</div>
</div>

```scss
.test {
--color: blue;
}
```

<div class="bd-example">
The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
</div>
```html
<div class="test">This is a triple backtick markup only test.</div>
```

{{< highlight html >}}
<div class="test">This is a highlight tag markup only test.</div>
{{< /highlight >}}

{{< example show_preview=false >}}
<div class="test">This is a markup only test.</div>
{{< /example >}}

{{< example show_markup=false >}}
<div class="test">This is a preview only test.</div>
{{< /example >}}

{{< example >}}
<div class="test">This is a test.</div>
{{< /example >}}

{{< example class=bg-body-secondary >}}
<div class="test">This is a test with a custom background color.</div>
{{< /example >}}

{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}

{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
22 changes: 11 additions & 11 deletions site/layouts/shortcodes/example.html
View file
Open in desktop
Expand Up @@ -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 -}}

Expand All @@ -26,21 +26,21 @@
</div>
{{- end -}}

{{- if eq $show_markup true -}}
{{- if eq $show_preview true -}}
<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 ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
</button>
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
<div class="d-flex ms-auto">
{{- if eq $show_preview true -}}
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
</button>
{{- end -}}
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
</div>
{{- end -}}

{{- if eq $show_markup true -}}
{{- $content = replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE `<img class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?>` `<img src="..." class="$1" alt="...">` $content -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
Expand Down
4 changes: 2 additions & 2 deletions site/layouts/shortcodes/js-docs.html
View file
Open in desktop
Expand Up @@ -32,8 +32,8 @@
{{- $match = replace $match $to_remove "" -}}
{{- end -}}

<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<div class="bd-example-snippet bd-code-snippet">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
{{- $file -}}
</a>
Expand Down
4 changes: 2 additions & 2 deletions site/layouts/shortcodes/scss-docs.html
View file
Open in desktop
Expand Up @@ -45,8 +45,8 @@
{{- $match = replace $match " !default" "" -}}
{{- end -}}

<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<div class="bd-example-snippet bd-code-snippet">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
{{- $file -}}
</a>
Expand Down
26 changes: 20 additions & 6 deletions site/layouts/shortcodes/table.html
View file
Open in desktop
Expand Up @@ -22,10 +22,24 @@

{{- $table := printf "<table%s>\n%s</table>" $table_attributes $table_content -}}

<div class="bd-example">
<table{{ with $class }} class="{{ . }}"{{ end }}>
{{ partialCached "table-content" . }}
</table>
<div class="bd-example-snippet bd-code-snippet">
<div class="bd-example m-0 border-0">
<table{{ with $class }} class="{{ . }}"{{ end }}>
{{ partialCached "table-content" . }}
</table>
</div>

<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-body-secondary text-uppercase">html</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
</button>
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>
</div>

{{- highlight $table "html" "" -}}
</div>

{{- highlight $table "html" "" -}}