rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

New Sass variable to change vertical rule width

Browse Source
This commit is contained in:
Julien Déramond 2023-07-10 16:26:44 +02:00 committed by Mark Otto
parent 8c135169e7
commit 6a9b9af59e
3 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_variables.scss
View File

@ -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;

2
scss/helpers/_vr.scss
View File

@ -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;

8
site/content/docs/5.3/helpers/vertical-rule.md
View File

@ -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" >}}