Shadow
Notation #
Shadow utility classes can be defined using the format -s[-{breakpoint}]--{size}
.
{size} #
0
- use to setbox-shadow
tonone
1
- use to setbox-shadow
to1px
2
- use to setbox-shadow
to4px
3
- use to setbox-shadow
to6px
4
- use to setbox-shadow
to8px
5
- use to setbox-shadow
to12px
{breakpoint} #
Optionally, include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile-first library, any applying to smaller breakpoints will also modify larger ones unless another class overrides this behaviour.
- blank - leave blank to apply
shadow
to all breakpoints. sm
- use to applyshadow
to sm and larger breakpoints.md
- use to applyshadow
to md and larger breakpoints.lg
- use to applyshadow
to lg and larger breakpoints.xl
- use to applyshadow
to xl breakpoints.
Examples #
Default #
-s--0
-s--1
-s--2
-s--3
-s--4
-s--5
Responsive #
Change viewport size to view the effect. You can do it by resizing your browser window.
-s--5 -s-md--0
-s-md--5 -s-xl--0
-s-xl--5
SASS #
Chi defines shadows with Saas maps. The following example will render a shadow equivalent to -s--1
/ 1px
.