diff options
author | Gaël Poupard <ffoodd@users.noreply.github.com> | 2022-02-22 11:02:47 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-02-22 11:02:47 +0300 |
commit | 37f3977e6d96e274cb73255d99e3e4ec60f03c0f (patch) | |
tree | a2d781d8b25ae492b89fc5154ed3a7421e721129 /site/content/docs | |
parent | 0804c0043f5bae586834a9b9ef1e2301e8452794 (diff) |
Rely on `border-width` for `<hr>` size (#35491)
* fix(reboot): revert hr styles to v4 implementation
* docs(cheatsheet): add a hr example
* fix(reboot): currentColor is the initial border-color value
* Document hr element in Reboot docs
* Update migration guide
* Update scss/_variables.scss
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Diffstat (limited to 'site/content/docs')
-rw-r--r-- | site/content/docs/5.1/content/reboot.md | 15 | ||||
-rw-r--r-- | site/content/docs/5.1/examples/cheatsheet-rtl/index.html | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/examples/cheatsheet/index.html | 4 | ||||
-rw-r--r-- | site/content/docs/5.1/migration.md | 2 |
4 files changed, 24 insertions, 1 deletions
diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md index e3391df302..bed4f599eb 100644 --- a/site/content/docs/5.1/content/reboot.md +++ b/site/content/docs/5.1/content/reboot.md @@ -129,6 +129,21 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin- </tbody> </table> +## Horizontal rules + +The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities. + +{{< example >}} +<hr> + +<div class="text-success"> + <hr> +</div> + +<hr class="text-danger border-2 opacity-50"> +<hr class="border-primary border-3 opacity-75"> +{{< /example >}} + ## Lists All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements. diff --git a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html index 7c45f7b91a..a3acea50a2 100644 --- a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html @@ -117,6 +117,10 @@ direction: rtl {{< /example >}} {{< example show_markup="false" >}} + <hr> + {{< /example >}} + + {{< example show_markup="false" >}} <blockquote class="blockquote"> <p>إقتباس مبهر، موضوع في عنصر blockquote</p> <footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer> diff --git a/site/content/docs/5.1/examples/cheatsheet/index.html b/site/content/docs/5.1/examples/cheatsheet/index.html index be7259ec2c..6eecad926a 100644 --- a/site/content/docs/5.1/examples/cheatsheet/index.html +++ b/site/content/docs/5.1/examples/cheatsheet/index.html @@ -116,6 +116,10 @@ body_class: "bg-light" {{< /example >}} {{< example show_markup="false" >}} + <hr> + {{< /example >}} + + {{< example show_markup="false" >}} <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md index 7fe5182b5a..732c38ee28 100644 --- a/site/content/docs/5.1/migration.md +++ b/site/content/docs/5.1/migration.md @@ -181,7 +181,7 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa - <span class="badge bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793) -- <span class="badge bg-danger">Breaking</span> `<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`). +- <span class="badge bg-danger">Breaking</span> ~~`<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).~~ - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`. |