diff options
| -rw-r--r-- | scss/_variables.scss | 4 | ||||
| -rw-r--r-- | scss/helpers/_vr.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/5.3/helpers/vertical-rule.md | 8 |
3 files changed, 13 insertions, 1 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 42a010693..eb066c60d 100644 --- 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 9bca09953..b6f9d42cb 100644 --- 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 334eb3e0a..130f97b8a 100644 --- 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" >}} |