root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

New Sass variable to change vertical rule width

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-border-width: var(--#{$prefix}border-width) !default;
$hr-opacity: .25 !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-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default; $legend-font-size: 1.5rem !default;
$legend-font-weight: null !default; $legend-font-weight: null !default;

2
scss/helpers/_vr.scss
View File

@ -1,7 +1,7 @@
.vr { .vr {
display: inline-block; display: inline-block;
align-self: stretch; align-self: stretch;
width: 1px; width: $vr-border-width;
min-height: 1em; min-height: 1em;
background-color: currentcolor; background-color: currentcolor;
opacity: $hr-opacity; 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 class="p-2">Third item</div>
</div> </div>
{{< /example >}} {{< /example >}}
## CSS
### Sass variables
Customize the vertical rule Sass variable to change its width.
{{< scss-docs name="vr-variables" file="scss/_variables.scss" >}}