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
  • #28899
Closed
Open
Issue created Jun 12, 2019 by Administrator@rootContributor

Should button-variant function allow a manually-specified color?

Created by: jrochkind

In Bootstrap 3, the button-variant function/mixin had this signature:

@mixin button-variant($color, $background, $border)

You specified the (text) color, background color, and border. Other values (such as focus/hover colors) were computed automatically derived from these.

In Bootstrap 4, the button-variant function/mixi has this signature instead:

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {

You specify, at least, the background and border color. All other values are computed derived from those. You can optionally specify your hover and active border/backgrounds instead. The built-in uses of button-variant only specify $background and $border (and actually specify $border to be the same value as $background), and allow the default computation for the rest.

There is no way to manually specify the actual (text/foreground) color as an option though -- for default, hover, or active. You are stuck with the computed/derived value based on contrasting colors with specified/default backgrounds.

If you wanted to manually override this to something that worked better, for your particular palette or branding stylesheet, than the automatically computed value, you could do it by applying button-variant mixin and then providing CSS overrides -- but the need to deal with all the pseudo-selectors and nesting (which can be complex and non-obvious ) makes this kind of challenging to do in a reliable way.

Should button-variant function allow optional arguments with manually specified color values? Which if not provided, would still default to the automatically computed value with color-yiq and relevant background color.

Assignee
Assign to
Time tracking