mirror of
https://github.com/twbs/bootstrap.git
synced 2025-07-22 00:02:06 -04:00
Compare commits
No commits in common. "930867b09a75a7164f322f3e9d1d04683f173837" and "7d52cf793f8d3256589466c176194ae04994ae50" have entirely different histories.
930867b09a
...
7d52cf793f
@ -13,12 +13,9 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<nav class="navbar navbar-full navbar-dark bg-dark">
|
||||
<button class="navbar-toggler hidden-lg-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<div class="collapse navbar-expand-md" id="navbarResponsive">
|
||||
<a class="navbar-brand" href="#">This shouldn't jump!</a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
@ -32,7 +29,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container mt-3">
|
||||
|
||||
48
package-lock.json
generated
48
package-lock.json
generated
@ -27,7 +27,7 @@
|
||||
"@rollup/plugin-commonjs": "^25.0.4",
|
||||
"@rollup/plugin-node-resolve": "^15.2.1",
|
||||
"@rollup/plugin-replace": "^5.0.2",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"bundlewatch": "^0.3.3",
|
||||
"clean-css-cli": "^5.6.2",
|
||||
"cross-env": "^7.0.3",
|
||||
@ -56,7 +56,7 @@
|
||||
"lockfile-lint": "^4.12.1",
|
||||
"nodemon": "^3.0.1",
|
||||
"npm-run-all2": "^6.0.6",
|
||||
"postcss": "^8.4.31",
|
||||
"postcss": "^8.4.30",
|
||||
"postcss-cli": "^10.1.0",
|
||||
"rollup": "^3.29.3",
|
||||
"rollup-plugin-istanbul": "^4.0.0",
|
||||
@ -2879,9 +2879,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.16",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
|
||||
"integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
|
||||
"version": "10.4.15",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
|
||||
"integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -2899,8 +2899,8 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"browserslist": "^4.21.10",
|
||||
"caniuse-lite": "^1.0.30001538",
|
||||
"fraction.js": "^4.3.6",
|
||||
"caniuse-lite": "^1.0.30001520",
|
||||
"fraction.js": "^4.2.0",
|
||||
"normalize-range": "^0.1.2",
|
||||
"picocolors": "^1.0.0",
|
||||
"postcss-value-parser": "^4.2.0"
|
||||
@ -3507,9 +3507,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001547",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
|
||||
"integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
|
||||
"version": "1.0.30001534",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz",
|
||||
"integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -8579,9 +8579,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
||||
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
|
||||
"version": "8.4.30",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
|
||||
"integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -13461,14 +13461,14 @@
|
||||
"dev": true
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "10.4.16",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
|
||||
"integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
|
||||
"version": "10.4.15",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
|
||||
"integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "^4.21.10",
|
||||
"caniuse-lite": "^1.0.30001538",
|
||||
"fraction.js": "^4.3.6",
|
||||
"caniuse-lite": "^1.0.30001520",
|
||||
"fraction.js": "^4.2.0",
|
||||
"normalize-range": "^0.1.2",
|
||||
"picocolors": "^1.0.0",
|
||||
"postcss-value-parser": "^4.2.0"
|
||||
@ -13890,9 +13890,9 @@
|
||||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001547",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
|
||||
"integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
|
||||
"version": "1.0.30001534",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz",
|
||||
"integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"chainsaw": {
|
||||
@ -17593,9 +17593,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.4.31",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
|
||||
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
|
||||
"version": "8.4.30",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
|
||||
"integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"nanoid": "^3.3.6",
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
"@rollup/plugin-commonjs": "^25.0.4",
|
||||
"@rollup/plugin-node-resolve": "^15.2.1",
|
||||
"@rollup/plugin-replace": "^5.0.2",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"bundlewatch": "^0.3.3",
|
||||
"clean-css-cli": "^5.6.2",
|
||||
"cross-env": "^7.0.3",
|
||||
@ -140,7 +140,7 @@
|
||||
"lockfile-lint": "^4.12.1",
|
||||
"nodemon": "^3.0.1",
|
||||
"npm-run-all2": "^6.0.6",
|
||||
"postcss": "^8.4.31",
|
||||
"postcss": "^8.4.30",
|
||||
"postcss-cli": "^10.1.0",
|
||||
"rollup": "^3.29.3",
|
||||
"rollup-plugin-istanbul": "^4.0.0",
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
// Insert copy to clipboard button before .highlight
|
||||
const btnTitle = 'Copy to clipboard'
|
||||
const btnEdit = 'Edit on StackBlitz'
|
||||
// const btnTheme = 'Toggle local theme'
|
||||
|
||||
const btnHtml = [
|
||||
'<div class="bd-code-snippet">',
|
||||
@ -52,7 +51,6 @@
|
||||
|
||||
snippetButtonTooltip('.btn-clipboard', btnTitle)
|
||||
snippetButtonTooltip('.btn-edit', btnEdit)
|
||||
// snippetButtonTooltip('.btn-theme', btnTheme)
|
||||
|
||||
const clipboard = new ClipboardJS('.btn-clipboard', {
|
||||
target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),
|
||||
|
||||
@ -18,8 +18,7 @@
|
||||
}
|
||||
|
||||
.btn-clipboard,
|
||||
.btn-edit,
|
||||
.btn-theme > .dropdown-toggle {
|
||||
.btn-edit {
|
||||
display: block;
|
||||
padding: .5em;
|
||||
line-height: 1;
|
||||
|
||||
@ -249,7 +249,7 @@ const popover = new bootstrap.Popover(element, {
|
||||
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
|
||||
|
||||
// setContent example
|
||||
popover.setContent({
|
||||
myPopover.setContent({
|
||||
'.popover-header': 'another title',
|
||||
'.popover-body': 'another content'
|
||||
})
|
||||
|
||||
@ -22,7 +22,7 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
|
||||
{{< colors.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
|
||||
<div class="p-3 mb-2 bg-{{ .name }}-subtle text-{{ .name }}-emphasis">.bg-{{ .name }}-subtle</div>
|
||||
<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
|
||||
{{- end -}}
|
||||
{{< /colors.inline >}}
|
||||
<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
|
||||
|
||||
@ -31,8 +31,13 @@
|
||||
<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">
|
||||
<div class="btn-theme dropdown" title="Toggle local theme">
|
||||
<button class="dropdown-toggle d-flex align-items-center" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
|
||||
<div class="position-relative">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
data-bs-display="static"
|
||||
aria-label="Toggle theme (auto)">
|
||||
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
|
||||
|
||||
@ -19,29 +19,27 @@
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
const setTheme = (theme, element = document.documentElement) => {
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
element.setAttribute('data-bs-theme', 'dark')
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark')
|
||||
} else {
|
||||
element.setAttribute('data-bs-theme', theme)
|
||||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme())
|
||||
|
||||
const showActiveTheme = (theme, focus = false, selectedToggler = document.querySelector('#bd-theme')) => {
|
||||
const themeSwitcher = selectedToggler.closest('.dropdown')
|
||||
const showActiveTheme = (theme, focus = false, themeSwitcher = document.querySelector('#bd-theme')) => {
|
||||
if (!themeSwitcher) {
|
||||
return
|
||||
}
|
||||
|
||||
const themeSwitcherButton = themeSwitcher.querySelector('.dropdown-toggle')
|
||||
const themeSwitcherText = document.querySelector('#bd-theme-text')
|
||||
const activeThemeIcon = themeSwitcher.querySelector('.theme-icon-active use')
|
||||
const btnToActive = themeSwitcher.querySelector(`[data-bs-theme-value="${theme}"]`)
|
||||
const activeThemeIcon = themeSwitcher.parentElement.querySelector('.theme-icon-active use')
|
||||
const btnToActive = themeSwitcher.parentElement.querySelector(`[data-bs-theme-value="${theme}"]`)
|
||||
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
|
||||
|
||||
themeSwitcher.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
themeSwitcher.parentElement.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active')
|
||||
element.setAttribute('aria-pressed', 'false')
|
||||
})
|
||||
@ -50,10 +48,10 @@
|
||||
btnToActive.setAttribute('aria-pressed', 'true')
|
||||
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
|
||||
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})${btnToActive.closest('.highlight-toolbar') ? ' (local)' : ''}`
|
||||
themeSwitcherButton.setAttribute('aria-label', themeSwitcherLabel)
|
||||
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
|
||||
|
||||
if (focus) {
|
||||
themeSwitcherButton.focus()
|
||||
themeSwitcher.focus()
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,8 +70,8 @@
|
||||
toggle.addEventListener('click', () => {
|
||||
const theme = toggle.getAttribute('data-bs-theme-value')
|
||||
|
||||
if (toggle.closest('.bd-code-snippet')) {
|
||||
setTheme(theme, toggle.closest('.bd-code-snippet').firstChild)
|
||||
if (toggle.closest('.highlight-toolbar')) {
|
||||
toggle.closest('.highlight-toolbar').previousElementSibling.setAttribute('data-bs-theme', theme)
|
||||
showActiveTheme(theme, true, toggle.closest('.dropdown-menu').previousElementSibling)
|
||||
} else {
|
||||
setStoredTheme(theme)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user