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 /scss | |
| 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 'scss')
| -rw-r--r-- | scss/_reboot.scss | 9 | ||||
| -rw-r--r-- | scss/_variables.scss | 10 |
2 files changed, 9 insertions, 10 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; |