New Sass variable to change vertical rule width

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 42a0106931cf6a6f658079800cf99b1652ccd2a3..eb066c60d3a76e89b2c8d7cf5cca80d6086587cd 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -705,6 +705,10 @@ $hr-border-color:             null !default; // Allows for inherited colors
 $hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;
 
+// scss-docs-start vr-variables
+$vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;

diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
index 9bca099536c2d78bd818a827b3634f1c63400c74..b6f9d42cb13048d696f1d60fbece381934d242d8 100644 (file)
--- a/scss/helpers/_vr.scss
+++ b/scss/helpers/_vr.scss
@@ -1,7 +1,7 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: 1px;
+  width: $vr-border-width;
   min-height: 1em;
   background-color: currentcolor;
   opacity: $hr-opacity;

diff --git a/site/content/docs/5.3/helpers/vertical-rule.md b/site/content/docs/5.3/helpers/vertical-rule.md
index 334eb3e0a45710196ab8e21d68f3bcd7819e7390..130f97b8a680f5ff94aece1d43f300338862e9ac 100644 (file)
--- a/site/content/docs/5.3/helpers/vertical-rule.md
+++ b/site/content/docs/5.3/helpers/vertical-rule.md
@@ -43,3 +43,11 @@ They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
   <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
+
+## CSS
+
+### Sass variables
+
+Customize the vertical rule Sass variable to change its width.
+
+{{< scss-docs name="vr-variables" file="scss/_variables.scss" >}}