Gradients and shadows #24429
Gradients and shadows #24429
Conversation
…o we can always ensure a focus state for accessibility and consistency
…bles. - Replace separate `$btn-focus-box-shadow` and `$input-focus-box-shadow` variables with unified `$input-btn-focus-box-shadow` to match our combined variables approach elsewhere.
… $enable-gradients is set to true
…checkboxes, custom file input, and dropdown items
|
Are you sure this should be in beta2? Seems wiser to me to not merge so close to the release :) |
|
The diff itself isn't too bad—mostly a lot of swapping of properties for the mixin for the gradient stuff, and then some shadow tweaks. Going to keep playing with it tonight while reviewing some other issues and PRs though. |
…e for basic state and hover state
|
sorry :( wrong click |
We've all been there :D.
We'll get to that in Beta 3—it won't be a straight up split, but a series of remapped variable much like we do with all our colors. |
| @@ -30,6 +34,15 @@ Similar to the contextual text color classes, easily set the background of an el | |||
| <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> | |||
| {% endexample %} | |||
|
|
|||
| ## Background gradient | |||
|
|
|||
| When `$enable-shadows` is set to true, you'll be able to use `.bg-gradient-` utility classes. **By default, `$enable-shadows` is disabled and the example below is intentionally broken.** This is done for easier customization from moment you start using Bootstrap. [Learn about our Sass options]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/theming/#sass-options) to enable these classes and more. | |||
There was a problem hiding this comment.
You mean $enable-gradients instead of shadows, in this paragraph, right?
My guess is that we'll end up replying a bunch of issues from users that skip reading (mea culpa), we'll see.
|
Sorry, I got lost. In the end, when will we can use gradients in BS4? :) |
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:
box-shadowon inputs and buttons, regardless of$enable-shadows, to ensure proper accessibility.Now, here's what's changed to address those issues.
For shadows
$btn-focus-box-shadowand$input-focus-box-shadowwith a new unified variable to match our$input-btn-approach:$input-btn-focus-box-shadow.$input-btn-focus-widthand$input-btn-focus-color.3pxto.2rem.form-control-focus()mixin to use a manual$enable-shadowscheck so we can still provide a focus state style despite the global shadow override.button-variant()andbutton-outline-variant()mixins to use the new$input-btn-focus-widthvariable, replacing static3pxvalues throughout.For gradients
gradient-bg()mixin for specifying an opt-in gradient with abackground-colorfallback..bg-gradient-utilities when$enable-gradientsis set totrue(set tofalseby default).