Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Sass variable to change vertical rule width #38886

Merged
merged 1 commit into from
Jul 17, 2023

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Jul 10, 2023

Description

This PR adds a new Sass variable ($vr-border-width) to customize the width of the vertical rule helper.

Motivation & Context

Vertical rule helper should offer the same customization options as horizontal rule helper.

IMO, this new feature, if landed, should target v5.4.0.

Type of changes

  • New feature (non-breaking change which adds functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • (N/A) I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Closes #38856

@julien-deramond julien-deramond force-pushed the main-jd-vertical-rule-sass-variable branch from 03260c7 to a355cad Compare July 10, 2023 14:33
@julien-deramond julien-deramond marked this pull request as ready for review July 10, 2023 14:34
@julien-deramond julien-deramond requested a review from a team as a code owner July 10, 2023 14:34
Copy link

@simo026q simo026q Jul 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about adding a new variable called $rule-border-width?

$rule-border-width: var(--#{$prefix}border-width) !default;

$hr-border-width: $rule-border-width !default;
$vr-border-width: $rule-border-width !default;

You could also do the same with the $hr-opacity since you most likely don't know it's used by the vertical rule without looking at the implementation. But that should maybe be another PR

@mdo mdo merged commit 6a9b9af into main Jul 17, 2023
@mdo mdo deleted the main-jd-vertical-rule-sass-variable branch July 17, 2023 03:39
@mdo
Copy link
Member

mdo commented Jul 17, 2023

Oops, meant to merge another branch. Oh well, this is probably fine to be in v5.3.1 anyway even though technically it's a new Sass variable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Vertical rule not the correct border width
3 participants