mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00
Code Activity

Updates responsive embeds with new class names and CSS variables

Browse Source 
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
This commit is contained in:
Mark Otto
2020-09-21 14:15:15 -07:00
committed by Mark Otto
parent 5280771883
commit 18f8601d29
5 changed files with 58 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/migration.md
+7
View File
@@ -72,6 +72,13 @@ toc: true
- Renamed `whiteList` option to `allowList`.
### Helpers
- [Responsive embed helpers]({{< docsref "/helpers/embed" >}}) have new modifier classes and include CSS variables.
- Classes have been renamed to change `by` to `x` in the aspect ratrio. For example, `.embed-responsive-16by9` is now `.responsive-16x9`.
- The `$embed-responsive-aspect-ratios` has been simplified to include the class name and the percentage as the `key: value` pair. This requires some math on your part when customizing, but ultimately makes it simpler on our end.
- CSS variables are now generated and included for each value in the Sass map. Modify the `--aspect-ratio` variable on the `.embed-responsive` to create any [custom aspect ratio]({{< docsref "/helpers/embed#custom-ratios" >}}).
---
## v5.0.0-alpha1