From 37f3977e6d96e274cb73255d99e3e4ec60f03c0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 22 Feb 2022 09:02:47 +0100 Subject: [PATCH] Rely on `border-width` for `
` 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 --- scss/_reboot.scss | 9 ++------- scss/_variables.scss | 10 +++++++--- site/assets/scss/_component-examples.scss | 2 +- site/content/docs/5.1/content/reboot.md | 15 +++++++++++++++ .../docs/5.1/examples/cheatsheet-rtl/index.html | 4 ++++ .../docs/5.1/examples/cheatsheet/index.html | 4 ++++ site/content/docs/5.1/migration.md | 2 +- 7 files changed, 34 insertions(+), 12 deletions(-) diff --git a/scss/_reboot.scss b/scss/_reboot.scss index bf0eb9e250..259f59eb45 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -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 // diff --git a/scss/_variables.scss b/scss/_variables.scss index f86d163727..fd6166b26c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -620,9 +620,13 @@ $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; +// fusv-disable +$hr-bg-color: null !default; // Deprecated in v5.2.0 +$hr-height: null !default; // Deprecated in v5.2.0 +// fusv-enable + +$hr-border-color: null !default; // Allows for inherited colors +$hr-border-width: $border-width !default; $hr-opacity: .25 !default; $legend-margin-bottom: .5rem !default; diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index f81a0af188..9e017c507e 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -124,7 +124,7 @@ display: block; } - > :last-child { + > :not(hr):last-child { margin-bottom: 0; } 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., `

`—and `

` are reset to have their `margin- +## Horizontal rules + +The `

` element has been simplified. Similar to browser defaults, `
`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 >}} +
+ +
+
+
+ +
+
+{{< /example >}} + ## Lists All lists—`
    `, `
      `, and `
      `—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `
        ` and `
          ` 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 @@ -116,6 +116,10 @@ direction: rtl

          هذا السطر يحوي نص مائل.

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

          إقتباس مبهر، موضوع في عنصر blockquote

          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 @@ -115,6 +115,10 @@ body_class: "bg-light"

          This line rendered as italicized text.

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

          A well-known quote, contained in a blockquote element.

          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 - Breaking Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793) -- Breaking `
          ` 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., `
          `). +- Breaking ~~`
          ` 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., `
          `).~~ - Reset default horizontal `padding-left` on `
            ` and `
              ` elements from browser default `40px` to `2rem`.