Merge branch 'patrickhlauke-carousel' of https://github.com/twbs/bootstrap into patrickhlauke-carousel

This commit is contained in:
Patrick H. Lauke 2021-01-07 10:23:30 +00:00
commit 1493ac0bf1
30 changed files with 56 additions and 55 deletions

View file

@ -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

View file

@ -236,4 +236,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
## Copyright and license
Code and documentation copyright 20112020 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 20112021 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/).

View file

@ -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)
*/

View file

@ -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)
*/

View file

@ -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)
*/

View file

@ -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)
*/

View file

@ -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)
*/

View file

@ -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()

View file

@ -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>

View file

@ -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>

18
package-lock.json generated
View file

@ -6856,9 +6856,9 @@
"dev": true
},
"nodemon": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.6.tgz",
"integrity": "sha512-4I3YDSKXg6ltYpcnZeHompqac4E6JeAMpGm8tJnB9Y3T0ehasLa4139dJOcCrB93HHrUMsCrKtoAlXTqT5n4AQ==",
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.7.tgz",
"integrity": "sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA==",
"dev": true,
"requires": {
"chokidar": "^3.2.2",
@ -8833,9 +8833,9 @@
}
},
"rollup": {
"version": "2.36.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.36.0.tgz",
"integrity": "sha512-L38QyQK77bkJy9nPyeydnHFK6xMofqumh4scTV2d4RG4EFq6pGdxnn67dVHFUDJ9J0PSEQx8zn1FiVS5TydsKg==",
"version": "2.36.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.36.1.tgz",
"integrity": "sha512-eAfqho8dyzuVvrGqpR0ITgEdq0zG2QJeWYh+HeuTbpcaXk8vNFc48B7bJa1xYosTCKx0CuW+447oQOW8HgBIZQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"
@ -9005,9 +9005,9 @@
"dev": true
},
"sass": {
"version": "1.32.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.0.tgz",
"integrity": "sha512-fhyqEbMIycQA4blrz/C0pYhv2o4x2y6FYYAH0CshBw3DXh5D5wyERgxw0ptdau1orc/GhNrhF7DFN2etyOCEng==",
"version": "1.32.2",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.2.tgz",
"integrity": "sha512-u1pUuzqwz3SAgvHSWp1k0mRhX82b2DdlVnP6UIetQPZtYbuJUDaPQhZE12jyjB7vYeOScfz9WPsZJB6Rpk7heA==",
"dev": true,
"requires": {
"chokidar": ">=2.0.0 <4.0.0"

View file

@ -131,14 +131,14 @@
"karma-rollup-preprocessor": "^7.0.5",
"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.2",
"postcss-cli": "^8.3.1",
"rollup": "^2.36.0",
"rollup": "^2.36.1",
"rollup-plugin-istanbul": "^3.0.0",
"rtlcss": "^3.0.0",
"sass": "^1.32.0",
"sass": "^1.32.2",
"shelljs": "^0.8.4",
"stylelint": "^13.8.0",
"stylelint-config-twbs-bootstrap": "^2.1.0",

View file

@ -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)
*/

View file

@ -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)
*/

View file

@ -1,7 +1,7 @@
/*!
* 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)
*/

4
scss/bootstrap.scss vendored
View file

@ -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)
*/

View file

@ -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};
}
}

View file

@ -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/.
*/

View file

@ -187,7 +187,7 @@
width: 16rem;
@include media-breakpoint-up(md) {
--aspect-ratio: 50%; // 2x1
--bs-aspect-ratio: 50%; // 2x1
}
}
}

View file

@ -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/.
*/

View file

@ -206,9 +206,9 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to
</div>
{{< /example >}}
### Suppressing touch swiping
### Disable touch swiping
By default, carousels support swiping left/right on touchscreen devices to move between slides. This can be explicitly suppressed using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute, and has `data-bs-interval="false"`, meaning that it won't autoplay.
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">

View file

@ -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">

View file

@ -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. |

View file

@ -162,6 +162,6 @@ extra_css:
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
<p>&copy; 2017-{{< year >}} Company, Inc. &middot; <a href="#">خصوصية</a> &middot; <a href="#">شروط</a></p>
<p>&copy; 2017{{< year >}} Company, Inc. &middot; <a href="#">خصوصية</a> &middot; <a href="#">شروط</a></p>
</footer>
</main>

View file

@ -161,6 +161,6 @@ extra_css:
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
<p>&copy; 2017-{{< year >}} Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
<p>&copy; 2017{{< year >}} Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>
</main>

View file

@ -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">&copy; 2017-{{< year >}}</small>
<small class="d-block mb-3 text-muted">&copy; 2017{{< year >}}</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>

View file

@ -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">&copy; 2017-{{< year >}}</small>
<small class="d-block mb-3 text-muted">&copy; 2017{{< year >}}</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>

View file

@ -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">&copy; 2017-{{< year >}}</p>
<p class="mt-5 mb-3 text-muted">&copy; 2017{{< year >}}</p>
</form>
</main>

View file

@ -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
}
}
```

View file

@ -13,6 +13,7 @@ toc: true
#### 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).