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

Gradients and shadows #24429

Merged
merged 12 commits into from Oct 19, 2017
Merged

Gradients and shadows #24429

merged 12 commits into from Oct 19, 2017

Conversation

@mdo
Copy link
Member

mdo commented Oct 19, 2017

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: Always forces a focus state box-shadow on inputs and buttons, regardless of $enable-shadows, to ensure proper accessibility.
  • Fixes #24242: Adds variables for the shadow width and color.
  • Closes #23837: Improves shadow styles for inputs and buttons, though this isn't always 100% given some shadows are designed to work with gradients.
  • Fixes #21367: 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

mdo added 10 commits Oct 19, 2017
…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.
…checkboxes, custom file input, and dropdown items
@mdo mdo added css v4 labels Oct 19, 2017
@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Oct 19, 2017

Are you sure this should be in beta2? Seems wiser to me to not merge so close to the release :)

@mdo

This comment has been minimized.

Copy link
Member Author

mdo commented Oct 19, 2017

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.

mdo and others added 2 commits Oct 19, 2017
…e for basic state and hover state
@andresgalante

This comment has been minimized.

Copy link
Member

andresgalante commented Oct 19, 2017

What about splitting input- and btn- variables on #24430 and the new$input-btn-focus-box-shadow.

Does this close #24430 or we are leaving it for later?

@andresgalante

This comment has been minimized.

Copy link
Member

andresgalante commented Oct 19, 2017

sorry :( wrong click

@mdo

This comment has been minimized.

Copy link
Member Author

mdo commented Oct 19, 2017

sorry :( wrong click

We've all been there :D.

What about splitting input- and btn- variables [...]?

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.

@mdo mdo merged commit 06641ca into v4-dev Oct 19, 2017
4 checks passed
4 checks passed
bundlesize Good job! bundle size < maxSize
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
hound No violations found. Woof!
@mdo mdo deleted the shadow-saga branch Oct 19, 2017
@mdo mdo mentioned this pull request Oct 19, 2017
@mdo mdo added this to Shipped in v4 Beta 2 Oct 19, 2017
@@ -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.

This comment has been minimized.

Copy link
@andresgalante

andresgalante Oct 19, 2017

Member

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.

@gfdesign

This comment has been minimized.

Copy link

gfdesign commented Oct 31, 2017

Sorry, I got lost. In the end, when will we can use gradients in BS4? :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
v4 Beta 2
Shipped
5 participants
You can’t perform that action at this time.