Utilities

File: src/scss/_core/utils/_shadow.scss

Box Shadow

Class Description Quick Example
.shadow
.shadow-xs .shadow-sm .shadow-md .shadow-lg .shadow-xlg .shadow-3d .shadow-none
.text-shadow .text-shadow-lg .text-shadow-xl

Box shadows for any block element.

Shadows are defined in main variables.scss
$box-shadow
$box-shadow-xs
$box-shadow-sm
$box-shadow-lg
$box-shadow-xlg

.shadow (default)
.shadow .row-pill
.shadow-xs
.shadow-sm
.shadow-md
.shadow-lg
.shadow-xlg
.shadow-3d
.shadow-md .row-pill
.shadow-hover
.shadow-xs-hover .shadow-sm-hover .shadow-md-hover .shadow-lg-hover .shadow-xlg-hover .shadow-3d-hover

On mouse hover, apply a shadow. You can mix with any shadow (without hover) for a nice effect.

For a nice transition effect, mix with:
.transition-all-ease-150
.transition-all-ease-200
.transition-all-ease-250
.transition-all-ease-500
predefined by _core/utils/_transition.scss

And/or:
.transition-hover-top
.transition-hover-right
.transition-hover-bottom
.transition-hover-left
.shadow-xs .shadow-lg-hover .transition-all-ease-250
.shadow-md .shadow-xlg-hover .transition-all-ease-250
.shadow-md .shadow-3d-hover .transition-all-ease-250
.shadow-md .shadow-3d-hover .transition-hover-top .transition-all-ease-250

Color Box Shadow

Class Description Quick Example
.shadow-*-xs .shadow-*-sm .shadow-*-md .shadow-*-lg .shadow-*-xlg
* = primary, success, danger, warning, info, pink, indigo, purple

Color shadows.

.shadow-danger-xs
.shadow-info-sm
.shadow-success-md
.shadow-pink-lg
.shadow-warning-xlg
.shadow-pink-md .row-pill
.shadow-*-xs-hover .shadow-*-sm-hover .shadow-*-md-hover .shadow-*-lg-hover .shadow-*-xlg-hover
* = primary, success, danger, warning, info, pink, indigo, purple

And of course, using hover for color backgrounds. You can also mix them.

.shadow-success-md .shadow-danger-md-hover .transition-all-ease-250
.shadow-md .shadow-danger-md-hover .transition-all-ease-250
.shadow-md .shadow-danger-md-hover .transition-hover-top .transition-all-ease-250
Jump To