Merge branch 'main' into main-xmr-js-isRTL
This commit is contained in:
XhmikosR
GitHub
commit
742a551ec0
71 changed files with 941 additions and 1345 deletions
|
|
@ -18,11 +18,11 @@
|
|||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap-utilities.css",
|
||||
"maxSize": "7 kB"
|
||||
"maxSize": "7.5 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap-utilities.min.css",
|
||||
"maxSize": "6.25 kB"
|
||||
"maxSize": "6.75 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap.css",
|
||||
|
|
|
|||
|
|
@ -44,14 +44,14 @@
|
|||
"unicorn/consistent-function-scoping": "off",
|
||||
"unicorn/explicit-length-check": "off",
|
||||
"unicorn/import-index": "off",
|
||||
"unicorn/no-fn-reference-in-iterator": "off",
|
||||
"unicorn/no-array-callback-reference": "off",
|
||||
"unicorn/no-for-loop": "off",
|
||||
"unicorn/no-null": "off",
|
||||
"unicorn/no-unused-properties": "error",
|
||||
"unicorn/no-useless-undefined": "off",
|
||||
"unicorn/prefer-dataset": "off",
|
||||
"unicorn/prefer-node-append": "off",
|
||||
"unicorn/prefer-node-remove": "off",
|
||||
"unicorn/prefer-dom-node-append": "off",
|
||||
"unicorn/prefer-dom-node-dataset": "off",
|
||||
"unicorn/prefer-dom-node-remove": "off",
|
||||
"unicorn/prefer-optional-catch-binding": "off",
|
||||
"unicorn/prefer-query-selector": "off",
|
||||
"unicorn/prevent-abbreviations": "off"
|
||||
|
|
|
|||
7
.github/dependabot.yml
vendored
7
.github/dependabot.yml
vendored
|
|
@ -15,3 +15,10 @@ updates:
|
|||
- v5
|
||||
versioning-strategy: increase
|
||||
rebase-strategy: disabled
|
||||
- package-ecosystem: "github-actions"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: weekly
|
||||
day: tuesday
|
||||
time: "12:00"
|
||||
timezone: Europe/Athens
|
||||
|
|
|
|||
2
.github/workflows/browserstack.yml
vendored
2
.github/workflows/browserstack.yml
vendored
|
|
@ -19,7 +19,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/bundlewatch.yml
vendored
2
.github/workflows/bundlewatch.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/css.yml
vendored
2
.github/workflows/css.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/docs.yml
vendored
2
.github/workflows/docs.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/js.yml
vendored
2
.github/workflows/js.yml
vendored
|
|
@ -25,7 +25,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: ${{ matrix.node }}
|
||||
|
||||
|
|
|
|||
2
.github/workflows/lint.yml
vendored
2
.github/workflows/lint.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/node-sass.yml
vendored
2
.github/workflows/node-sass.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
4
LICENSE
4
LICENSE
|
|
@ -1,7 +1,7 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2011-2020 Twitter, Inc.
|
||||
Copyright (c) 2011-2020 The Bootstrap Authors
|
||||
Copyright (c) 2011-2021 Twitter, Inc.
|
||||
Copyright (c) 2011-2021 The Bootstrap Authors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
|
|
@ -236,4 +236,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
|
|||
|
||||
## Copyright and license
|
||||
|
||||
Code and documentation copyright 2011–2020 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
|
||||
Code and documentation copyright 2011–2021 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
/*!
|
||||
* Script to build our plugins to use them separately.
|
||||
* Copyright 2020 The Bootstrap Authors
|
||||
* Copyright 2020 Twitter, Inc.
|
||||
* Copyright 2020-2021 The Bootstrap Authors
|
||||
* Copyright 2020-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
/*!
|
||||
* Script to update version number references in the project.
|
||||
* Copyright 2017-2020 The Bootstrap Authors
|
||||
* Copyright 2017-2020 Twitter, Inc.
|
||||
* Copyright 2017-2021 The Bootstrap Authors
|
||||
* Copyright 2017-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
* Remember to use the same vendor files as the CDN ones,
|
||||
* otherwise the hashes won't match!
|
||||
*
|
||||
* Copyright 2017-2020 The Bootstrap Authors
|
||||
* Copyright 2017-2020 Twitter, Inc.
|
||||
* Copyright 2017-2021 The Bootstrap Authors
|
||||
* Copyright 2017-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
/*!
|
||||
* Script to run vnu-jar if Java is available.
|
||||
* Copyright 2017-2020 The Bootstrap Authors
|
||||
* Copyright 2017-2020 Twitter, Inc.
|
||||
* Copyright 2017-2021 The Bootstrap Authors
|
||||
* Copyright 2017-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
/*!
|
||||
* Script to create the built examples zip archive;
|
||||
* requires the `zip` command to be present!
|
||||
* Copyright 2020 The Bootstrap Authors
|
||||
* Copyright 2020-2021 The Bootstrap Authors
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -371,7 +371,7 @@ class Collapse extends BaseComponent {
|
|||
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
|
||||
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
||||
if (event.target.tagName === 'A') {
|
||||
if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const DefaultType = {
|
|||
offset: '(number|string|function)',
|
||||
flip: 'boolean',
|
||||
boundary: '(string|element)',
|
||||
reference: '(string|element)',
|
||||
reference: '(string|element|object)',
|
||||
display: 'string',
|
||||
popperConfig: '(null|object)'
|
||||
}
|
||||
|
|
@ -172,6 +172,8 @@ class Dropdown extends BaseComponent {
|
|||
if (typeof this._config.reference.jquery !== 'undefined') {
|
||||
referenceElement = this._config.reference[0]
|
||||
}
|
||||
} else if (typeof this._config.reference === 'object') {
|
||||
referenceElement = this._config.reference
|
||||
}
|
||||
|
||||
this._popper = Popper.createPopper(referenceElement, this._menu, this._getPopperConfig())
|
||||
|
|
@ -257,6 +259,13 @@ class Dropdown extends BaseComponent {
|
|||
|
||||
typeCheckConfig(NAME, config, this.constructor.DefaultType)
|
||||
|
||||
if (typeof config.reference === 'object' && !isElement(config.reference) &&
|
||||
typeof config.reference.getBoundingClientRect !== 'function'
|
||||
) {
|
||||
// Popper virtual elements require a getBoundingClientRect method
|
||||
throw new Error(`${NAME}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
|
||||
}
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ class ScrollSpy extends BaseComponent {
|
|||
this._activeTarget = null
|
||||
this._scrollHeight = 0
|
||||
|
||||
EventHandler.on(this._scrollElement, EVENT_SCROLL, event => this._process(event))
|
||||
EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process())
|
||||
|
||||
this.refresh()
|
||||
this._process()
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const conf = {
|
|||
colors: true,
|
||||
autoWatch: false,
|
||||
singleRun: true,
|
||||
concurrency: Infinity,
|
||||
concurrency: Number.POSITIVE_INFINITY,
|
||||
client: {
|
||||
clearContext: false
|
||||
},
|
||||
|
|
|
|||
|
|
@ -905,7 +905,7 @@ describe('Carousel', () => {
|
|||
})
|
||||
|
||||
describe('to', () => {
|
||||
it('should go directement to the provided index', done => {
|
||||
it('should go directly to the provided index', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div id="myCarousel" class="carousel slide">',
|
||||
' <div class="carousel-inner">',
|
||||
|
|
|
|||
|
|
@ -374,6 +374,29 @@ describe('Collapse', () => {
|
|||
})
|
||||
|
||||
describe('data-api', () => {
|
||||
it('should prevent url change if click on nested elements', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<a role="button" data-bs-toggle="collapse" class="collapsed" href="#collapse">',
|
||||
' <span id="nested"></span>',
|
||||
'</a>',
|
||||
'<div id="collapse" class="collapse"></div>'
|
||||
].join('')
|
||||
|
||||
const triggerEl = fixtureEl.querySelector('a')
|
||||
const nestedTriggerEl = fixtureEl.querySelector('#nested')
|
||||
|
||||
spyOn(Event.prototype, 'preventDefault').and.callThrough()
|
||||
|
||||
triggerEl.addEventListener('click', event => {
|
||||
expect(event.target.isEqualNode(nestedTriggerEl)).toEqual(true)
|
||||
expect(event.delegateTarget.isEqualNode(triggerEl)).toEqual(true)
|
||||
expect(Event.prototype.preventDefault).toHaveBeenCalled()
|
||||
done()
|
||||
})
|
||||
|
||||
nestedTriggerEl.click()
|
||||
})
|
||||
|
||||
it('should show multiple collapsed elements', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<a role="button" data-bs-toggle="collapse" class="collapsed" href=".multi"></a>',
|
||||
|
|
|
|||
|
|
@ -367,6 +367,58 @@ describe('Dropdown', () => {
|
|||
dropdown.toggle()
|
||||
})
|
||||
|
||||
it('should toggle a dropdown with a valid virtual element reference', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="dropdown">',
|
||||
' <button class="btn dropdown-toggle visually-hidden" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
|
||||
' <div class="dropdown-menu">',
|
||||
' <a class="dropdown-item" href="#">Secondary link</a>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
|
||||
const virtualElement = {
|
||||
getBoundingClientRect() {
|
||||
return {
|
||||
width: 0,
|
||||
height: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
expect(() => new Dropdown(btnDropdown, {
|
||||
reference: {}
|
||||
})).toThrow()
|
||||
|
||||
expect(() => new Dropdown(btnDropdown, {
|
||||
reference: {
|
||||
getBoundingClientRect: 'not-a-function'
|
||||
}
|
||||
})).toThrow()
|
||||
|
||||
// use onFirstUpdate as Poppers internal update is executed async
|
||||
const dropdown = new Dropdown(btnDropdown, {
|
||||
reference: virtualElement,
|
||||
popperConfig: {
|
||||
onFirstUpdate() {
|
||||
expect(virtualElement.getBoundingClientRect).toHaveBeenCalled()
|
||||
expect(btnDropdown.classList.contains('show')).toEqual(true)
|
||||
expect(btnDropdown.getAttribute('aria-expanded')).toEqual('true')
|
||||
done()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
spyOn(virtualElement, 'getBoundingClientRect').and.callThrough()
|
||||
|
||||
dropdown.toggle()
|
||||
})
|
||||
|
||||
it('should not toggle a dropdown if the element is disabled', done => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="dropdown">',
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ describe('ScrollSpy', () => {
|
|||
fixtureEl.innerHTML = [
|
||||
'<nav id="navigation" class="navbar">',
|
||||
' <ul class="navbar-nav">',
|
||||
' <li class="nav-item active"><a class="nav-link" id="one-link" href="#">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link active" id="one-link" href="#">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
|
||||
' </ul>',
|
||||
|
|
@ -177,7 +177,7 @@ describe('ScrollSpy', () => {
|
|||
'<div id="header" style="height: 500px;"></div>',
|
||||
'<nav id="navigation" class="navbar">',
|
||||
' <ul class="navbar-nav">',
|
||||
' <li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
|
||||
' </ul>',
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#" aria-current="page">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
<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 active">
|
||||
<a class="nav-link" href="#" aria-current="page">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<projectUrl>https://getbootstrap.com/</projectUrl>
|
||||
<icon>bootstrap.png</icon>
|
||||
<license type="file">LICENSE.txt</license>
|
||||
<copyright>Copyright 2017-2020</copyright>
|
||||
<copyright>Copyright 2017-2021</copyright>
|
||||
<requireLicenseAcceptance>false</requireLicenseAcceptance>
|
||||
<tags>css mobile-first responsive front-end framework web</tags>
|
||||
<contentFiles>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<projectUrl>https://getbootstrap.com/</projectUrl>
|
||||
<icon>bootstrap.png</icon>
|
||||
<license type="file">LICENSE.txt</license>
|
||||
<copyright>Copyright 2017-2020</copyright>
|
||||
<copyright>Copyright 2017-2021</copyright>
|
||||
<requireLicenseAcceptance>false</requireLicenseAcceptance>
|
||||
<tags>css sass mobile-first responsive front-end framework web</tags>
|
||||
<contentFiles>
|
||||
|
|
|
|||
1799
package-lock.json
generated
1799
package-lock.json
generated
File diff suppressed because it is too large
Load diff
28
package.json
28
package.json
|
|
@ -61,7 +61,7 @@
|
|||
"docs-serve": "hugo server --port 9001 --disableFastRender",
|
||||
"docs-serve-only": "npx sirv-cli _gh_pages --port 9001",
|
||||
"lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
|
||||
"update-deps": "ncu -u -x terser && npm update && echo Manually update site/assets/js/vendor",
|
||||
"update-deps": "ncu -u -x karma-browserstack-launcher,terser && npm update && echo Manually update site/assets/js/vendor",
|
||||
"release": "npm-run-all dist release-sri docs-build release-zip*",
|
||||
"release-sri": "node build/generate-sri.js",
|
||||
"release-version": "node build/change-version.js",
|
||||
|
|
@ -106,22 +106,22 @@
|
|||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.1",
|
||||
"@rollup/plugin-replace": "^2.3.4",
|
||||
"autoprefixer": "^10.1.0",
|
||||
"autoprefixer": "^10.2.0",
|
||||
"bundlewatch": "^0.3.1",
|
||||
"clean-css-cli": "^4.3.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^7.15.0",
|
||||
"eslint-config-xo": "^0.33.1",
|
||||
"eslint": "^7.17.0",
|
||||
"eslint-config-xo": "^0.34.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-unicorn": "^23.0.0",
|
||||
"find-unused-sass-variables": "^3.0.0",
|
||||
"eslint-plugin-unicorn": "^25.0.1",
|
||||
"find-unused-sass-variables": "^3.1.0",
|
||||
"glob": "^7.1.6",
|
||||
"hammer-simulator": "0.0.1",
|
||||
"hugo-bin": "^0.67.0",
|
||||
"hugo-bin": "^0.68.0",
|
||||
"ip": "^1.1.5",
|
||||
"jquery": "^3.5.1",
|
||||
"karma": "^5.2.3",
|
||||
"karma-browserstack-launcher": "^1.6.0",
|
||||
"karma-browserstack-launcher": "1.4.0",
|
||||
"karma-chrome-launcher": "^3.1.0",
|
||||
"karma-coverage-istanbul-reporter": "^3.0.3",
|
||||
"karma-detect-browsers": "^2.3.3",
|
||||
|
|
@ -129,16 +129,16 @@
|
|||
"karma-jasmine": "^4.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.5.4",
|
||||
"karma-rollup-preprocessor": "^7.0.5",
|
||||
"linkinator": "^2.8.0",
|
||||
"linkinator": "^2.11.2",
|
||||
"lockfile-lint": "^4.3.7",
|
||||
"nodemon": "^2.0.6",
|
||||
"nodemon": "^2.0.7",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.2.1",
|
||||
"postcss": "^8.2.2",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"rollup": "^2.35.1",
|
||||
"rollup-plugin-istanbul": "^2.0.1",
|
||||
"rollup": "^2.36.1",
|
||||
"rollup-plugin-istanbul": "^3.0.0",
|
||||
"rtlcss": "^3.0.0",
|
||||
"sass": "^1.30.0",
|
||||
"sass": "^1.32.2",
|
||||
"shelljs": "^0.8.4",
|
||||
"stylelint": "^13.8.0",
|
||||
"stylelint-config-twbs-bootstrap": "^2.1.0",
|
||||
|
|
|
|||
|
|
@ -411,15 +411,6 @@ button {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Work around a Firefox bug where the transparent `button` background
|
||||
// results in a loss of the default `button` focus styles.
|
||||
// Credit https://github.com/suitcss/base/
|
||||
|
||||
button:focus {
|
||||
outline: dotted 1px;
|
||||
outline: -webkit-focus-ring-color auto 5px;
|
||||
}
|
||||
|
||||
// 1. Remove the margin in Firefox and Safari
|
||||
|
||||
input,
|
||||
|
|
|
|||
|
|
@ -744,7 +744,7 @@ $form-select-padding-y: $input-padding-y !default;
|
|||
$form-select-padding-x: $input-padding-x !default;
|
||||
$form-select-font-family: $input-font-family !default;
|
||||
$form-select-font-size: $input-font-size !default;
|
||||
$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
|
||||
$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
|
||||
$form-select-font-weight: $input-font-weight !default;
|
||||
$form-select-line-height: $input-line-height !default;
|
||||
$form-select-color: $input-color !default;
|
||||
|
|
@ -757,8 +757,8 @@ $form-select-bg-size: 16px 12px !default; // In pixels because ima
|
|||
$form-select-indicator-color: $gray-800 !default;
|
||||
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
|
||||
|
||||
$form-select-feedback-icon-padding-end: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
|
||||
$form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding) !default;
|
||||
$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
|
||||
$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
|
||||
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
|
||||
|
||||
$form-select-border-width: $input-border-width !default;
|
||||
|
|
|
|||
4
scss/bootstrap-grid.scss
vendored
4
scss/bootstrap-grid.scss
vendored
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
4
scss/bootstrap-reboot.scss
vendored
4
scss/bootstrap-reboot.scss
vendored
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap Reboot v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
|
|
|
|||
8
scss/bootstrap-utilities.scss
vendored
8
scss/bootstrap-utilities.scss
vendored
|
|
@ -1,18 +1,18 @@
|
|||
/*!
|
||||
* Bootstrap Utilities v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
// Configuration
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "utilities";
|
||||
|
||||
// Helpers
|
||||
@import "helpers";
|
||||
|
||||
// Utilities
|
||||
|
||||
@import "utilities/api";
|
||||
|
|
|
|||
4
scss/bootstrap.scss
vendored
4
scss/bootstrap.scss
vendored
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.form-select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
|
||||
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
|
||||
font-family: $form-select-font-family;
|
||||
@include font-size($form-select-font-size);
|
||||
font-weight: $form-select-font-weight;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
&::before {
|
||||
display: block;
|
||||
padding-top: var(--aspect-ratio);
|
||||
padding-top: var(--#{$variable-prefix}aspect-ratio);
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -21,6 +21,6 @@
|
|||
|
||||
@each $key, $ratio in $aspect-ratios {
|
||||
.ratio-#{$key} {
|
||||
--aspect-ratio: #{$ratio};
|
||||
--#{$variable-prefix}aspect-ratio: #{$ratio};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
"strict": "error",
|
||||
"unicorn/no-for-loop": "off",
|
||||
"unicorn/no-null": "off",
|
||||
"unicorn/prefer-dataset": "off",
|
||||
"unicorn/prefer-node-append": "off",
|
||||
"unicorn/prefer-dom-node-append": "off",
|
||||
"unicorn/prefer-dom-node-dataset": "off",
|
||||
"unicorn/prefer-query-selector": "off",
|
||||
"unicorn/prevent-abbreviations": "off"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@
|
|||
width: 16rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
--aspect-ratio: 50%; // 2x1
|
||||
--bs-aspect-ratio: 50%; // 2x1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
padding: .25rem .5rem;
|
||||
font-weight: 600;
|
||||
color: rgba($black, .65);
|
||||
background-color: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.bd-subnavbar {
|
||||
// The position and z-index are needed for the dropdown to stay on top of the content
|
||||
position: relative;
|
||||
z-index: $zindex-sticky;
|
||||
z-index: $bd-navbar-zindex;
|
||||
background-color: rgba($white, .95);
|
||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
|
||||
|
|
|
|||
|
|
@ -11,3 +11,6 @@ $bd-warning: #f0ad4e;
|
|||
$bd-danger: #d9534f;
|
||||
$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
|
||||
$sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
|
||||
|
||||
// Higher than core's $zindex-tooltip, which is 1070
|
||||
$bd-navbar-zindex: 1080;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap Docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -206,6 +206,34 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Disable touch swiping
|
||||
|
||||
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute and has `data-bs-interval="false"` so it doesn't autoplay.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControlsNoTouching" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControlsNoTouching" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Dark variant
|
||||
|
||||
Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
|
||||
|
|
@ -286,7 +314,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<td><code>interval</code></td>
|
||||
<td>number</td>
|
||||
<td><code>5000</code></td>
|
||||
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
||||
<td>The amount of time to delay between automatically cycling an item. If <code>false</code>, carousel will not automatically cycle.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>keyboard</code></td>
|
||||
|
|
@ -297,15 +325,15 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<tr>
|
||||
<td><code>pause</code></td>
|
||||
<td>string | boolean</td>
|
||||
<td><code>"hover"</code></td>
|
||||
<td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
|
||||
<p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
|
||||
<td><code>'hover'</code></td>
|
||||
<td><p>If set to <code>'hover'</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
|
||||
<p>On touch-enabled devices, when set to <code>'hover'</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>slide</code></td>
|
||||
<td><code>ride</code></td>
|
||||
<td>string | boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
|
||||
<td>Autoplays the carousel after the user manually cycles the first item. If set to <code>'carousel'</code>, autoplays the carousel on load.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>wrap</code></td>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ Click the buttons below to show and hide another element via class changes:
|
|||
- `.collapsing` is applied during transitions
|
||||
- `.collapse.show` shows content
|
||||
|
||||
You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="collapse"` is required.
|
||||
Generally, we recommend using a button with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use a link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
|
||||
|
||||
{{< example >}}
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -886,9 +886,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
</tr>
|
||||
<tr>
|
||||
<td><code>reference</code></td>
|
||||
<td>string | element</td>
|
||||
<td>string | element | object</td>
|
||||
<td><code>'toggle'</code></td>
|
||||
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/constructors/#createpopper">constructor docs</a>.</td>
|
||||
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, an HTMLElement reference or an object providing <code>getBoundingClientRect</code>. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/constructors/#createpopper">constructor docs</a> and <a href="https://popper.js.org/docs/v2/virtual-elements/">virtual element docs</a>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>display</code></td>
|
||||
|
|
|
|||
|
|
@ -124,9 +124,9 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
|
|||
|
||||
Navbar navigation links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
|
||||
|
||||
Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
|
||||
Add the `.active` class on `.nav-link` to indicate the current page.
|
||||
|
||||
Please note that you should also add the `aria-current` attribute on the `.nav-link` itself.
|
||||
Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
|
|
|
|||
|
|
@ -306,7 +306,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
|||
|
||||
## JavaScript behavior
|
||||
|
||||
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
|
||||
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.
|
||||
|
||||
Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
|
||||
|
||||
|
|
|
|||
|
|
@ -99,12 +99,12 @@ var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'),
|
|||
|
||||
### Disabled elements
|
||||
|
||||
Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`.
|
||||
Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
|
||||
|
||||
For disabled popover triggers, you may also prefer `data-bs-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
|
||||
For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
|
||||
|
||||
{{< example >}}
|
||||
<span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover">
|
||||
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
|
||||
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
|
||||
</span>
|
||||
{{< /example >}}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|||
Hover over the links below to see tooltips:
|
||||
|
||||
<div class="bd-example tooltip-demo">
|
||||
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a>with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
|
||||
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" title="The last tip!">your own</a> site or project.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ You can find and customize these variables for key global options in Bootstrap's
|
|||
| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
|
||||
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
|
||||
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
|
||||
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
|
||||
| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ extra_css:
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">الصفحة الرئيسية</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
|
|
@ -162,6 +162,6 @@ extra_css:
|
|||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
|
||||
<p>© 2017-{{< year >}} Company, Inc. · <a href="#">خصوصية</a> · <a href="#">شروط</a></p>
|
||||
<p>© 2017–{{< year >}} Company, Inc. · <a href="#">خصوصية</a> · <a href="#">شروط</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ extra_css:
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -161,6 +161,6 @@ extra_css:
|
|||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<p class="float-end"><a href="#">Back to top</a></p>
|
||||
<p>© 2017-{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
<p>© 2017–{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ title: Bottom navbar example
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ extra_css:
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ extra_css:
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample01">
|
||||
<ul class="navbar-nav me-auto mb-2">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -49,8 +49,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample02">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -72,8 +72,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample03">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -106,8 +106,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample04">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -140,8 +140,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -174,8 +174,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample06">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -208,8 +208,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -242,8 +242,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -276,8 +276,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07XL">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -313,8 +313,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Centered nav only</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Centered nav only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -345,8 +345,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample09">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -378,8 +378,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Centered nav only</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Centered nav only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ body_class: "bg-light"
|
|||
|
||||
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Dashboard</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Notifications</a>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ include_js: false
|
|||
<div class="row">
|
||||
<div class="col-12 col-md">
|
||||
<img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
|
||||
<small class="d-block mb-3 text-muted">© 2017-{{< year >}}</small>
|
||||
<small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Features</h5>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ extra_css:
|
|||
<div class="row">
|
||||
<div class="col-12 col-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
|
||||
<small class="d-block mb-3 text-muted">© 2017-{{< year >}}</small>
|
||||
<small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Features</h5>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,6 @@ include_js: false
|
|||
</label>
|
||||
</div>
|
||||
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
|
||||
<p class="mt-5 mb-3 text-muted">© 2017-{{< year >}}</p>
|
||||
<p class="mt-5 mb-3 text-muted">© 2017–{{< year >}}</p>
|
||||
</form>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ body_class: "d-flex flex-column h-100"
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -49,10 +49,10 @@ Aspect ratios can be customized with modifier classes. By default the following
|
|||
|
||||
Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.
|
||||
|
||||
For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`.
|
||||
For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`.
|
||||
|
||||
{{< example class="bd-example-ratios" >}}
|
||||
<div class="ratio" style="--aspect-ratio: 50%;">
|
||||
<div class="ratio" style="--bs-aspect-ratio: 50%;">
|
||||
<div>2x1</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -62,7 +62,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T
|
|||
```scss
|
||||
.ratio-4x3 {
|
||||
@include media-breakpoint-up(md) {
|
||||
--aspect-ratio: 50%; // 2x1
|
||||
--bs-aspect-ratio: 50%; // 2x1
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,7 +11,11 @@ toc: true
|
|||
|
||||
### Sass
|
||||
|
||||
#### Utilities
|
||||
|
||||
- Renamed `--aspect-ratio` to `--bs-aspect-ratio` to be consistent with other custom properties.
|
||||
- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
|
||||
- `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore.
|
||||
- Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757).
|
||||
|
||||
### JavaScript
|
||||
|
|
@ -30,7 +34,7 @@ Horizontal direction sensitive variables, utilities and mixins are renamed with
|
|||
|
||||
##### Components
|
||||
|
||||
- Renamed `.dropleft` and `.dropright` to `.dropstart` and `dropend`.
|
||||
- Renamed `.dropleft` and `.dropright` to `.dropstart` and `.dropend`.
|
||||
- Renamed `.dropdown-menu-*-left` and `.dropdown-menu-*-right` to `.dropdown-menu-*-start` and `.dropdown-menu-*-end`.
|
||||
- Renamed `.bs-popover-left` and `.bs-popover-right` to `.bs-popover-start` and `.bs-popover-end`.
|
||||
- Renamed `.bs-tooltip-left` and `.bs-tooltip-right` to `.bs-tooltip-start` and `.bs-tooltip-end`.
|
||||
|
|
|
|||
|
|
@ -244,9 +244,11 @@ Now that you're familiar with how the utilities API works, learn how to add your
|
|||
|
||||
### Add utilities
|
||||
|
||||
New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our `_utilities.scss` is imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values.
|
||||
New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our required Sass files and `_utilities.scss` are imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
|
|
@ -254,7 +256,7 @@ $utilities: map-merge(
|
|||
(
|
||||
"cursor": (
|
||||
property: cursor,
|
||||
class: cursor
|
||||
class: cursor,
|
||||
responsive: true,
|
||||
values: auto pointer grab,
|
||||
)
|
||||
|
|
@ -267,6 +269,8 @@ $utilities: map-merge(
|
|||
Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
|
|
@ -290,6 +294,8 @@ $utilities: map-merge(
|
|||
Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
# This file holds all sidebar menu's entries.
|
||||
# The logic for the sidebar generation is in "site/layouts/partials/docs-sidebar.html".
|
||||
|
||||
- title: Getting started
|
||||
pages:
|
||||
- title: Introduction
|
||||
|
|
@ -26,7 +29,6 @@
|
|||
- title: Breakpoints
|
||||
- title: Containers
|
||||
- title: Grid
|
||||
# - title: Rows
|
||||
- title: Columns
|
||||
- title: Gutters
|
||||
- title: Utilities
|
||||
|
|
@ -117,3 +119,5 @@
|
|||
- title: Brand
|
||||
- title: License
|
||||
- title: Translations
|
||||
|
||||
- title: Migration
|
||||
|
|
|
|||
|
|
@ -13,33 +13,33 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- $group_slug := $group.title | urlize -}}
|
||||
{{- $is_active_group := eq $.Page.Params.group $group_slug }}
|
||||
{{- $is_active_group := eq $.Page.Params.group $group_slug -}}
|
||||
|
||||
<li class="mb-1{{ if $is_active_group }} active{{ end }}">
|
||||
<button class="btn d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#{{ $group_slug }}-collapse" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
|
||||
{{ $group.title }}
|
||||
</button>
|
||||
{{- if $group.pages }}
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#{{ $group_slug }}-collapse" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
|
||||
{{ $group.title }}
|
||||
</button>
|
||||
|
||||
{{- if $group.pages }}
|
||||
<div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
{{- range $doc := $group.pages -}}
|
||||
{{- $doc_slug := $doc.title | urlize -}}
|
||||
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
|
||||
{{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
|
||||
<li><a href="{{ $href }}" class="d-inline-flex align-items-center rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{- end }}
|
||||
</li>
|
||||
<div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
{{- range $doc := $group.pages -}}
|
||||
{{- $doc_slug := $doc.title | urlize -}}
|
||||
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
|
||||
{{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
|
||||
<li><a href="{{ $href }}" class="d-inline-flex align-items-center rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{{- else }}
|
||||
<li class="my-3 mx-4 border-top"></li>
|
||||
<li>
|
||||
<a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="d-inline-flex align-items-center rounded{{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
|
||||
{{ $group.title }}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
<li class="my-3 mx-4 border-top"></li>
|
||||
<li{{ if eq $page_slug "migration" }} class="active"{{ end }}>
|
||||
<a href="/docs/{{ $.Site.Params.docs_version }}/migration/" class="d-inline-flex align-items-center rounded">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue