Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rely on border-width for <hr> size #35491

Merged
merged 7 commits into from
Feb 22, 2022
Merged

Rely on border-width for <hr> size #35491

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4c50d0b
fix(reboot): revert hr styles to v4 implementation
ffoodd Dec 8, 2021
0433ef5
docs(cheatsheet): add a hr example
ffoodd Dec 8, 2021
f3f2624
fix(reboot): currentColor is the initial border-color value
ffoodd Dec 8, 2021
a9011b9
Document hr element in Reboot docs
mdo Feb 9, 2022
fabe97c
Update migration guide
mdo Feb 9, 2022
dae62ae
Update scss/_variables.scss
ffoodd Feb 10, 2022
b176d60
Merge branch 'main' into main-fod-hr
XhmikosR Feb 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions scss/_reboot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,20 +64,15 @@ body {
// Content grouping
//
// 1. Reset Firefox's gray color
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field

hr {
margin: $hr-margin-y 0;
color: $hr-color; // 1
background-color: $hr-bg-color;
border: $hr-border-width;
border: 0;
border-top: $hr-border-width solid $hr-border-color;
opacity: $hr-opacity;
}

hr:not([size]) {
height: $hr-height; // 2
}


// Typography
//
Expand Down
5 changes: 2 additions & 3 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,9 +620,8 @@ $blockquote-footer-font-size: $small-font-size !default;

$hr-margin-y: $spacer !default;
$hr-color: inherit !default;
$hr-bg-color: currentColor !default;
$hr-border-width: 0 !default;
$hr-height: $border-width !default;
$hr-border-color: null !default;
$hr-border-width: 1px !default;
ffoodd marked this conversation as resolved.
Show resolved Hide resolved
$hr-opacity: .25 !default;

$legend-margin-bottom: .5rem !default;
Expand Down
2 changes: 1 addition & 1 deletion site/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@
display: block;
}

> :last-child {
> :not(hr):last-child {
margin-bottom: 0;
}

Expand Down
15 changes: 15 additions & 0 deletions site/content/docs/5.1/content/reboot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.1/examples/cheatsheet-rtl/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,10 @@ <h3>النصوص</h3>
<p><em>هذا السطر يحوي نص مائل.</em></p>
{{< /example >}}

{{< example show_markup="false" >}}
<hr>
{{< /example >}}

{{< example show_markup="false" >}}
<blockquote class="blockquote">
<p>إقتباس مبهر، موضوع في عنصر blockquote</p>
Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/5.1/examples/cheatsheet/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,10 @@ <h3>Typography</h3>
<p><em>This line rendered as italicized text.</em></p>
{{< /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>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.1/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand Down