New Sass variable to change vertical rule width

twbs · Jul 17, 2023 · 6a9b9af · 6a9b9af
1 parent 8c13516
commit 6a9b9af
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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" >}}