Add Sass variables for hr background-color and border

Co-Authored-By: Houssam Hammouda <11141564+devhoussam@users.noreply.github.com>

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 79fedc6cad6192203860dd9d5bcbdb517c0c6574..65b98f44b6448847792349e0cd6efca80d3fdbc3 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -69,8 +69,8 @@ body {
 hr {
   margin: $hr-margin-y 0;
   color: $hr-color; // 1
-  background-color: currentColor;
-  border: 0;
+  background-color: $hr-bg-color;
+  border: $hr-border-width;
   opacity: $hr-opacity;
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 79c1498f6bf361f6e2e09dd5556488576d4bf645..244a15c215f1d545b21a137e7fcd12ddb2d8cd47 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -661,6 +661,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-opacity:                  .25 !default;