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
  • Merge requests
  • !24429

Gradients and shadows

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge shadow-saga into v4-dev Oct 19, 2017
  • Overview 0
  • Commits 12
  • Pipelines 0
  • Changes 12

As a special add-on to Beta 2, I've taken a swing at properly addressing gradients and shadows for folks. This PR is a huge update to how we utilize shadows and gradients across Bootstrap (when they're enabled, at least). Let's start with what issues this addresses:

  • Fixes #24389 (closed): Always forces a focus state box-shadow on inputs and buttons, regardless of $enable-shadows, to ensure proper accessibility.
  • Fixes #24242 (closed): Adds variables for the shadow width and color.
  • Closes #23837 (closed): Improves shadow styles for inputs and buttons, though this isn't always 100% given some shadows are designed to work with gradients.
  • Fixes #21367 (closed): Finally adds gradients to buttons, woohoo!

Now, here's what's changed to address those issues.

For shadows

  • Replaced $btn-focus-box-shadow and $input-focus-box-shadow with a new unified variable to match our $input-btn- approach: $input-btn-focus-box-shadow.
  • Added two new variables to control the size of the focus shadow and the color: $input-btn-focus-width and $input-btn-focus-color.
  • Changed the focus shadow's width from 3px to .2rem.
  • For accessibility and consistency with validation styles, updated the form-control-focus() mixin to use a manual $enable-shadows check so we can still provide a focus state style despite the global shadow override.
  • Updated the button-variant() and button-outline-variant() mixins to use the new $input-btn-focus-width variable, replacing static 3px values throughout.

For gradients

  • Added new gradient-bg() mixin for specifying an opt-in gradient with a background-color fallback.
  • Added opt-in gradients to alerts, buttons, carousel controls, custom checks and file inputs, and dropdown items.
  • Added new .bg-gradient- utilities when $enable-gradients is set to true (set to false by default).

screen shot 2017-10-18 at 11 41 51 pm screen shot 2017-10-18 at 11 21 07 pm
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: shadow-saga