Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #36702
Closed
Open
Issue created Jul 07, 2022 by Administrator@rootContributor3 of 3 checklist items completed3/3 checklist items

Undefined disabled border color for buttons causes inconsistent visuals when customizing

Created by: nickalbrecht

Prerequisites

  • I have searched for duplicate or closed issues
  • I have validated any HTML to avoid common problems
  • I have read the contributing guidelines

Describe the issue

I'm hitting an issue regarding the display colors of buttons when trying to customize them, which appears to be caused by an undefined variable in the SCSS files.

Given the following button declaration <button type="button" class="btn btn-outline-primary">Primary</button>

If I want to change the text red, I can apply a style for the color, setting it to red, and it affects the color of the text as expected

But if the button is disabled, then the style affects the entire button, border as well. I checked the css, and there is a line that attempts to enforce the border color of disabled buttons at _buttons.scss:92, but it looks like the variable being used in the resulting CSS var(--bs-btn-disabled-border-color) is not defined. I'm assuming that this is an easy enough fix to just have that variable declared, but I'm not sure where, else I would have tried a pull request.

Reduced test cases

https://web-platform-vzcsqp.stackblitz.io/

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2.0-beta1

Assignee
Assign to
Time tracking