rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

Docs: Add transparency option

Browse Source
This commit is contained in:
Louis-Maxime Piton 2024-09-02 17:26:37 +02:00
parent e3e00b5002
commit ae8c43a9c6
4 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
site/assets/js/transparency.js Normal file
View File

@ -0,0 +1,23 @@
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2024 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
(() => {
const transparencyToggler = document.querySelector('.transparency-toggle')
const examplesContainer = document.querySelector('.bd-content')
transparencyToggler.addEventListener('click', () => {
const altText = `Toggle examples' transparency (${examplesContainer.classList.contains('transparency') ? 'inactive' : 'active'})`
transparencyToggler.title = altText
transparencyToggler.querySelector('span.d-lg-none').textContent = altText
transparencyToggler.setAttribute('aria-label', altText)
examplesContainer.classList.toggle('transparency')
})
})()

19
site/assets/scss/_component-examples.scss
View File

@ -109,6 +109,25 @@
}
}
.transparency .bd-example {
@include media-breakpoint-up(md) {
&::before {
@include border-radius(subtract(var(--bs-border-radius), 1px));
}
}
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -9999;
content: "";
background: repeating-linear-gradient(-45deg, var(--bs-secondary-bg) 0, var(--bs-secondary-bg) 15px, transparent 15px, transparent 30px);
}
}
//
// Grid examples
//

9
site/layouts/partials/docs-navbar.html
View File

@ -82,6 +82,15 @@
<hr class="d-lg-none my-2 text-white-50">
</li>
<li class="nav-item col-12 col-lg-auto">
<button class="nav-link transparency-toggle py-2 px-0 px-lg-2" title="Toggle examples' transparency (inactive)" aria-label="Toggle examples' transparency (inactive)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="navbar-nav-svg" viewBox="0 0 16 16" aria-hidden="true">
<path d="M0 6.5a6.5 6.5 0 0 1 12.346-2.846 6.5 6.5 0 1 1-8.691 8.691A6.5 6.5 0 0 1 0 6.5m5.144 6.358a5.5 5.5 0 1 0 7.714-7.714 6.5 6.5 0 0 1-7.714 7.714m-.733-1.269q.546.226 1.144.33l-1.474-1.474q.104.597.33 1.144m2.614.386a5.5 5.5 0 0 0 1.173-.242L4.374 7.91a6 6 0 0 0-.296 1.118zm2.157-.672q.446-.25.838-.576L5.418 6.126a6 6 0 0 0-.587.826zm1.545-1.284q.325-.39.576-.837L6.953 4.83a6 6 0 0 0-.827.587l4.6 4.602Zm1.006-1.822q.183-.562.242-1.172L9.028 4.078q-.58.096-1.118.296l3.823 3.824Zm.186-2.642a5.5 5.5 0 0 0-.33-1.144 5.5 5.5 0 0 0-1.144-.33z"/>
</svg>
<span class="d-lg-none" aria-hidden="true">Toggle examples' transparency (inactive)</span>
</button>
</li>
<li class="nav-item dropdown">
{{ partial "theme-toggler" . }}
</li>

3
site/layouts/partials/scripts.html
View File

@ -37,4 +37,7 @@
{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
{{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }}
<script defer src="{{ $stackblitzJs.RelPermalink }}"></script>
{{- $transparencyJs := resources.Get "js/transparency.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/transparency.js") }}
<script defer src="{{ $transparencyJs.RelPermalink }}"></script>
{{- end -}}