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

Add shadow into utilities #23437

guledali opened this issue Aug 14, 2017 · 5 comments


5 participants
Copy link

commented Aug 14, 2017

It would nice to quickly add shadows to components, please add this feature into utilities


This comment has been minimized.

Copy link

commented Aug 15, 2017

Can I take up this ?


This comment has been minimized.

Copy link

commented Oct 26, 2017

Hi @guledali I noticed that there is a box-shadow property via mixins...I don't however see a text-shadow property. Is that what you mean?


This comment has been minimized.

Copy link

commented Oct 29, 2017

Hi @mdo any thoughts on this one? Am I on the right track?


This comment has been minimized.

Copy link

commented Oct 29, 2017

@sabrown84 That one mixin is for quickly toggling box-shadows globally—this way, you can opt out of the property and value (property: value;) entirely rather than just resetting the value.

What @guledali is after is box shadow utility classes. So, for example:

.box-shadow { ... }
.box-shadow-lg { ... }

I don't know for sure which shadows we'd want to turn into utilities though. We should look through where we have box-shadow already in our components and see if there's some common patterns we can turn into utilities.

There also is overlap with #23775, which is asking for box-shadow variables. I imagine when we add the utilities, we'd introduce these new variables across those new classes and the existing component variables perhaps.


This comment has been minimized.

Copy link

commented Nov 3, 2017

@mdo and @sabrown84 when I originally wrote this post more than two months ago, I was trying to add box shadow to some components like the card or navbar component just to separate from the rest of the content.

I was particularly looking at this codepen
and was thinking it would be nice to have this in the utility section, rapidly adding shadow into your work.

@mdo mdo added this to Inbox in v4.2 via automation Jan 4, 2018

@mdo mdo added this to Inbox in v4.1 via automation Mar 31, 2018

@mdo mdo removed this from Inbox in v4.2 Mar 31, 2018

@mdo mdo added the has-pr label Mar 31, 2018

@mdo mdo closed this in #25758 Apr 1, 2018

v4.1 automation moved this from Inbox to Shipped Apr 1, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.