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 breakpoint will modify also larger ones unless other 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 ms 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
<div class="-s--0"></div>
<div class="-s--1"></div>
<div class="-s--2"></div>
<div class="-s--3"></div>
<div class="-s--4"></div>
<div class="-s--5"></div>
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
<div class="-s--5 -s-md--0"></div>
<div class="-s-md--5 -s-xl--0"></div>
<div class="-s-xl--5"></div>
SASS
Chi defines shadows with Saas maps. The following example will render
a shadow equivalent to -s--1
/ 1px
.
@import '@centurylink/chi/src/chi/_global-variables';
.example {
box-shadow: map-get($shadow, 1);
}